/* 05-schichtplan.css — Selims Schichtplan + Schicht-Pillen (T/N) im Wochenkalender. Teil der geordneten Kaskade: in index.html in Nummern-Reihenfolge geladen; Regeln NICHT zwischen Dateien verschieben, ohne die Reihenfolge zu bedenken. */
/* ─── SELIM SCHICHTPLAN-MODAL ───────────────────────────────────────────── */
.shiftplan-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(calc(8px * var(--glass-mult) * var(--glass-scroll, 1))) saturate(140%);
  -webkit-backdrop-filter: blur(calc(8px * var(--glass-mult) * var(--glass-scroll, 1))) saturate(140%);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.shiftplan-overlay.open { opacity: 1; pointer-events: all; }
.shiftplan-box {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: none;
  background:
    radial-gradient(circle 220px at 0% 0%, rgba(var(--cell-glow-rgb), 0.24) 0%, transparent 100%),
    linear-gradient(135deg,
      rgba(var(--cell-glow-rgb), 0.10) 0%,
      rgba(var(--cell-glow-rgb), 0.03) 100%),
    var(--card);
  backdrop-filter: blur(calc(15px * var(--glass-mult) * var(--glass-scroll, 1))) saturate(180%);
  -webkit-backdrop-filter: blur(calc(15px * var(--glass-mult) * var(--glass-scroll, 1))) saturate(180%);
  box-shadow: 0 -16px 60px rgba(0,0,0,0.55);
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.32,0.72,0,1);
  isolation: isolate;
}
.shiftplan-overlay.open .shiftplan-box { transform: translateY(0); }
.shiftplan-handle {
  width: 36px; height: 5px;
  background: rgba(255,255,255,0.22);
  border-radius: var(--r-pill);
  margin: var(--sp-2) auto var(--sp-3);
  flex-shrink: 0;
}
.shiftplan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--sp-5) var(--sp-2);
  flex-shrink: 0;
}
.shiftplan-title {
  font-size: var(--fs-t2);
  font-weight: var(--fw-heavy);
  color: var(--text);
  letter-spacing: -0.02em;
}
.shiftplan-status {
  font-size: var(--fs-foot);
  font-weight: var(--fw-bold);
  color: var(--text);
  opacity: 0.55;
  margin-top: 2px;
}
.shiftplan-status.is-active { opacity: 0.85; }
.shiftplan-status.is-active strong { color: rgb(var(--cell-glow-rgb)); }
.shiftplan-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.shiftplan-close:active { background: rgba(255,255,255,0.10); transform: scale(0.95); }
.shiftplan-hint {
  margin: 0 var(--sp-5) var(--sp-3);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: var(--fs-foot);
  font-weight: var(--fw-med);
  color: var(--text);
  opacity: 0.75;
  line-height: 1.4;
}
.shiftplan-hint strong {
  font-weight: var(--fw-heavy);
  color: rgb(var(--cell-glow-rgb));
}
.shiftplan-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--sp-5) var(--sp-4);
}
.sp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.sp-row:hover  { background: rgba(255,255,255,0.06); }
.sp-row:active { transform: scale(0.99); }
.sp-row--today {
  border-color: rgba(var(--cell-glow-rgb), 0.40);
  background: rgba(var(--cell-glow-rgb), 0.08);
}
.sp-day {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.sp-badge {
  flex-shrink: 0;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* Einheitliche Schicht-Glas-Pille (wie Eck-Pille im Monatskalender): T = Akzentblau
   mit Sonne, N = Lila mit Mond (statt frührem Schwarz-Hintergrund). */
.sp-badge--t {
  background: rgba(var(--cell-glow-rgb), 0.18);
  border: 1px solid rgba(var(--cell-glow-rgb), 0.48);
  color: color-mix(in srgb, rgb(var(--cell-glow-rgb)) 55%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: 999px;
}
.sp-badge--n {
  background: rgba(154,140,240,0.16);
  border: 1px solid rgba(154,140,240,0.46);
  color: #bcb0ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: 999px;
}
.sp-badge--free {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  opacity: 0.35;
}
.sp-badge--removed {
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(var(--cell-glow-rgb), 0.40);
  color: rgb(var(--cell-glow-rgb));
  opacity: 0.75;
  font-size: 11px;
}
.sp-row--removed { opacity: 0.55; }
.sp-row--noclick {
  cursor: default;
  opacity: 0.55;
}
.sp-row--noclick:hover { background: rgba(255,255,255,0.03); }
.shiftplan-actions {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0));
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.shiftplan-clear,
.shiftplan-done {
  flex: 1;
  padding: 13px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--fs-callout);
  font-weight: var(--fw-heavy);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.shiftplan-clear {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  opacity: 0.7;
}
.shiftplan-clear:active { background: rgba(255,255,255,0.05); transform: scale(0.98); }
.shiftplan-done {
  background: rgba(var(--cell-glow-rgb), 0.22);
  color: rgb(var(--cell-glow-rgb));
  border: 1px solid rgba(var(--cell-glow-rgb), 0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.shiftplan-done:active { transform: scale(0.97); background: rgba(var(--cell-glow-rgb), 0.30); }
/* ＋ Urlaub: legt einen Kalender-Eintrag „Urlaub (Selim)" an (blendet T/N aus) */
.shiftplan-urlaub {
  flex: 1;
  padding: 13px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--fs-callout);
  font-weight: var(--fw-heavy);
  cursor: pointer;
  background: rgba(77,208,225,0.12);
  border: 1px solid rgba(77,208,225,0.45);
  color: #8be6f0;
  transition: transform 0.15s, background 0.15s;
}
.shiftplan-urlaub:active { transform: scale(0.97); background: rgba(77,208,225,0.20); }

/* Kopf: ½-Knopf neben dem ✕. Gedrückt = ½-Modus (Tipp auf T/N → halbe Schicht). */
.shiftplan-kopf-btns { display: flex; gap: 8px; flex-shrink: 0; }
.shiftplan-halb {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font: inherit; font-size: 15px; font-weight: var(--fw-heavy);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.shiftplan-halb:active { transform: scale(0.92); }
.shiftplan-halb[aria-pressed="true"] {
  background: rgba(250,204,21,0.22);
  border-color: rgba(250,204,21,0.70);
  color: #fde047;
  box-shadow: 0 0 12px -3px rgba(250,204,21,0.6);
}
.shiftplan-status.is-active .sp-halb-hinweis { color: #fde047; }   /* schlägt das Akzentblau von .is-active strong */

/* Monats-Trenner in der (jetzt endlosen) Liste */
.sp-monat {
  position: sticky; top: 0; z-index: 1;
  margin: 10px 0 6px; padding: 4px 2px;
  font-size: var(--fs-foot); font-weight: var(--fw-heavy);
  color: var(--text-muted, #9aa3b2);
  background: var(--card, #1c1c1e);
}
.sp-monat:first-child { margin-top: 0; }

/* Halbe Schicht — ÜBERALL gelb: Schichtplan-Zeile, Wochenkalender-Pille, Essens-
   Fenster, Monatskalender (Eck-Pille, Indikator, Tages-Sheet). Selektoren bewusst so
   spezifisch, dass sie die T/N-Farben inkl. der Foto-Varianten (.row-has-img) schlagen. */
.sp-row.sp-row--halb { border-color: rgba(250,204,21,0.45); background: rgba(250,204,21,0.10); }
.sp-halb-txt { margin-left: 8px; color: #fde047; font-size: 12.5px; font-weight: var(--fw-bold); }
.sp-badge.sp-badge--halb,
.shift-badge.shift-badge--halb,
.week-row.row-has-img .shift-badge.shift-badge--halb,
.meal-shift-badge.meal-shift-badge--halb,
.mc-eckpill.mc-eckpill--halb,
.mc-ev-bar--schicht.mc-ev-bar--schicht-halb {
  background: rgba(250,204,21,0.20);
  border-color: rgba(250,204,21,0.70);
  color: #fde047;
}
.week-row.row-has-img .shift-badge.shift-badge--halb { background: rgba(0,0,0,0.62); }
.mc-ind--halb { color: #facc15; }
.mc-ind--badge.mc-ind--halb { background: rgba(250,204,21,0.18); border: 1px solid rgba(250,204,21,0.50); }

/* Urlaub (Selim): Tag ohne Schicht, antippbar → Eintrag öffnen (Kalender-Eintrag) */
.sp-badge--urlaub {
  background: rgba(77,208,225,0.14);
  border: 1px solid rgba(77,208,225,0.50);
  color: #8be6f0;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.sp-row--urlaub { border-color: rgba(77,208,225,0.22); }

/* ─── SCHICHT-BADGE im Kalender (kleines T/N) ──────────────────────────── */
.shift-badge {
  position: absolute;
  /* OBEN rechts, aber links vom Zieh-Griff: Der Griff sitzt bei right:6px, 22px breit
     → belegt rechts 6–28px. right:34px legt die rechte Badge-Kante 6px links davon →
     keine Überschneidung mit dem Griff. top:8px hält den Badge OBEN (der Mahlzeit-Name
     steht vertikal mittig) → auch bei langen Namen keine Überlappung mit dem Text. */
  top: 8px;
  right: 34px;
  min-width: 25px;
  height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 6;   /* über Essensbild (1), Verlauf-Overlay (2), Text (3) und Grip (5) */
  font-family: inherit;
}
/* Einheitliche Schicht-Glas-Pille (wie Eck-Pille im Monatskalender, Stil „Ecke"):
   T = Akzentblau-Glas mit Sonne, N = Lila-Glas mit Mond (statt frührem Schwarz). */
.shift-badge--t {
  background: rgba(var(--cell-glow-rgb), 0.18);
  border: 1px solid rgba(var(--cell-glow-rgb), 0.48);
  color: color-mix(in srgb, rgb(var(--cell-glow-rgb)) 55%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: 999px;
}
.shift-badge--n {
  background: rgba(154,140,240,0.16);
  border: 1px solid rgba(154,140,240,0.46);
  color: #bcb0ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: 999px;
}
/* Tag MIT Essensbild: die Pille sitzt über einem hellen Foto → dunkler Glas-Grund +
   kräftigere Farbe/Schatten, damit T/N klar lesbar bleibt. BEWUSST OHNE backdrop-filter:
   die Zeile animiert beim Tab-Wechsel (weekRowIn = opacity/transform) → Blur auf einem
   Kind einer animierten/opazitäts-Ebene flackert auf Adreno (OnePlus). */
.week-row.row-has-img .shift-badge {
  background: rgba(0,0,0,0.62);   /* kräftiger dunkler Scrim, damit die Pille sich klar vom hellen Foto abhebt */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 8px rgba(0,0,0,0.6);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.week-row.row-has-img .shift-badge--t {
  border-color: rgba(var(--cell-glow-rgb), 0.9);
  color: color-mix(in srgb, rgb(var(--cell-glow-rgb)) 42%, white);   /* heller → über dem Foto klar lesbar */
}
.week-row.row-has-img .shift-badge--n {
  border-color: rgba(160,146,246,0.9);
  color: #ded7ff;
}
/* Sonne-/Mond-SVGs in allen Schicht-Badges: skalieren mit der Badge-Schrift */
.shift-badge, .sp-badge, .meal-shift-badge { gap: 3px; }
.shift-badge svg, .sp-badge svg, .meal-shift-badge svg {
  width: 1.05em; height: 1.05em; flex-shrink: 0; display: block;
}

/* Nachtschicht-Helligkeitsanpassung pro User
   - Selim: Tag etwas dunkler (er muss arbeiten / kann nicht kochen)
   - Amelie: Tag etwas heller (Hinweis: Selim arbeitet, andere Planung) */
body[data-current-user="selim"] .week-row[data-shift="N"] {
  filter: brightness(0.95);
}
body[data-current-user="amelie"] .week-row[data-shift="N"] {
  filter: brightness(1.03);
}