/* ============================================================
 * SMĚNY — kalendář, buňky, modal
 * Připojuje se na konec admin.css.
 * ============================================================ */

/* ===== Hlavička s navigací — sticky ===== */
.shifts-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;            /* zruším mezeru, ať lišky doléhají na sebe */
  padding: 12px 0;
  flex-wrap: wrap;
  position: sticky;
  top: var(--header-h, 0px);   /* přilepit pod horní header stránky */
  z-index: 30;
  background: var(--black);    /* neprůhledné, ať skrz neprosvítá kalendář */
  /* jemný spodní oddělovač, ať to nevisí ve vzduchu */
  box-shadow: 0 1px 0 var(--gold-glow);
}
.shifts-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--gold-faint);
  color: var(--gold);
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  background: transparent;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  user-select: none;
}
.shifts-nav-btn:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
  background: var(--gold-glow);
}
.shifts-month-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 220px;
  text-align: center;
  flex: 1;
}
/* Popisek druhu kalendáře (Směny / Akce) — malý nadpis NAD číslem měsíce.
   Hlavička roste podle tlačítek (38px); naskládaný popisek (11px) + měsíc
   (18px) + gap se do 38px vejdou, takže výška hlavičky se NEZMĚNÍ. */
.shifts-cal-kind {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gold-dim);
  line-height: 1;
}
.shifts-cal-month {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-hover);
  line-height: 1;
}
.shifts-today-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 22px;
  background: transparent;
  border: 1px solid var(--gold-faint);
  color: var(--gold);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.shifts-today-btn:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
  background: var(--gold-glow);
}

/* ===== Wrapper kvůli horizontálnímu scrollu na mobilu ===== */
.shifts-calendar-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gold-faint);
  border-top: none;            /* horní border je na sticky liště dnů */
  background: var(--black-warm);
  margin-top: 0;
}

/* ===== Sticky lišta dnů v týdnu — sticky vůči stránce, posouvaná JS-em ===== */
.shifts-weekdays-sticky {
  position: sticky;
  /* Hned pod sticky navigací + sticky hlavičkou kalendáře. Výšku hlavičky
     (--shifts-header-h) měří JS, ať to sedí bez ohledu na obsah/zalomení. */
  top: calc(var(--header-h, 0px) + var(--shifts-header-h, 62px));
  z-index: 25;
  background: var(--black-warm);
  border: 1px solid var(--gold-faint);
  border-bottom: 1px solid var(--gold-faint);
  /* PROČ overflow:hidden: vnitřní track posouváme transformem; přesah maskujeme */
  overflow: hidden;
}
.shifts-weekdays-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-width: 700px;        /* MUSÍ být stejné jako .shifts-calendar min-width */
  /* JS sem nastaví transform: translateX(-scrollLeft kalendáře) */
  transition: none;
  will-change: transform;
}
.shifts-weekday-cell {
  padding: 10px 6px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
  text-align: center;
  font-family: inherit;
}

/* ===== Skrytý <thead> (zachovaný kvůli sémantice + šířkám sloupců) ===== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Tabulka kalendáře ===== */
.shifts-calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 700px; /* MUSÍ se shodovat s .shifts-weekdays-track */
}

/* ===== Buňka dne ===== */
.shifts-cell {
  vertical-align: top;
  padding: 6px 6px 8px;
  /* kvůli border-collapse: separate používám jen pravý a spodní border,
     aby buňky neměly dvojité linky */
  border-right:  1px solid var(--gold-glow);
  border-bottom: 1px solid var(--gold-glow);
  height: 110px;
  background: var(--black);
  position: relative;
  transition: background 0.2s;
}
.shifts-cell.out {
  background: rgba(0,0,0,0.45);
  color: var(--gold-dim);
  opacity: 0.45;
}
.shifts-cell.past {
  /* Stejné pozadí jako u aktivních/nadcházejících buněk — žádné ztmavení.
     Jen rozhraní (border) a číslo dne ztlumíme, ať je vizuálně jasné,
     že den už proběhl. */
  cursor: default;
  border-right-color: rgba(212, 166, 74, 0.08);
  border-bottom-color: rgba(212, 166, 74, 0.08);
}
.shifts-cell.past .shifts-cell-day {
  /* Mírnější ztlumení než dřív (0.4 → 0.65) — vizuální cue, že je den
     v minulosti, ale číslo zůstává čitelné. Admin teď může minulé dny
     otevřít a koukat na ně, takže nesmí splývat. */
  color: var(--gold-dim);
  opacity: 0.65;
}

.shifts-cell[role="button"] { cursor: pointer; }
.shifts-cell[role="button"]:hover {
  background: rgba(40,32,18,0.5);
}
.shifts-cell[role="button"]:focus {
  outline: none;
  background: rgba(40,32,18,0.5);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.shifts-cell.today {
  box-shadow: inset 0 0 0 2px var(--gold);
}
.shifts-cell.has-shifts:not(.past) {
  background: rgba(28,40,28,0.32);
}

.shifts-cell-day {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 4px;
  font-weight: 500;
}
.shifts-cell.today .shifts-cell-day { color: var(--gold-hover); }

/* Hlavička buňky — den vlevo, název akce vpravo (pokud na den existuje) */
.shifts-cell-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.shifts-cell-header .shifts-cell-day {
  margin-bottom: 0;
  flex-shrink: 0;
}
.shifts-cell-event {
  font-family: var(--sans), 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.3px;
  /* Dříve byl gold-dim + italic, ale na mobilu i desktopu se to špatně četlo
     vedle ostatních textů v buňce (čísla dní, jména směn). Zlatý hover je
     výraznější a sjednocuje vzhled s tím, jak se píšou jména směn níž. */
  color: var(--gold-hover);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  line-height: 1.2;
}
.shifts-cell-event.special {
  color: var(--gold);
  font-weight: 600;
}
.shifts-cell.past .shifts-cell-event {
  /* Mírné ztlumení (ne 0.4 jak bylo dřív) — den proběhl, ale název
     akce je pořád relevantní informace, ne dekorace. */
  opacity: 0.75;
}

.shifts-cell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shifts-cell-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--gold-hover);
  padding: 2px 4px;
  background: rgba(0,0,0,0.35);
  border-left: 2px solid transparent;
  /* Použijeme sans font, ne serif kurzívu */
  font-family: var(--sans), 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shifts-cell-item.day   { border-left-color: #d4a64a; }
.shifts-cell-item.night { border-left-color: #6e8aa8; }
.shifts-cell-item.dj    { border-left-color: #e08738; }   /* oranžová pro DJ */
/* Pending — místo kurzívy ztlumíme jas a barvu */
.shifts-cell-item.pending {
  opacity: 0.6;
  color: var(--gold-dim);
}
.shifts-cell-item .shifts-icon {
  font-size: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.shifts-cell-item.day   .shifts-icon { color: #d4a64a; }
.shifts-cell-item.night .shifts-icon { color: #6e8aa8; }
.shifts-cell-item.dj    .shifts-icon { color: #e08738; }   /* oranžová sluchátka */
.shifts-cell-item .shifts-icon-svg {
  width: 12px;
  height: 12px;
  display: block;
}
.shifts-cell-item .shifts-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.shifts-cell-item .shifts-pending-mark {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.85;
}

/* Overflow řádek "+N" — zarovnaný k pravému okraji buňky podle typu */
.shifts-cell-overflow {
  font-family: var(--sans), 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  color: var(--gold-dim);
  padding: 0 4px 0 22px;       /* odsazení jako buňka, "+N" pod jmény */
  letter-spacing: 0.5px;
  border-left: 2px solid transparent;
  background: transparent;
  margin-top: -1px;             /* visuálně přilípnuté ke jmenné řadě */
}
.shifts-cell-overflow.day   { border-left-color: rgba(212,166,74,0.45); color: #d4a64a; }
.shifts-cell-overflow.night { border-left-color: rgba(110,138,168,0.45); color: #6e8aa8; }
.shifts-cell-overflow.dj    { border-left-color: rgba(224,135,56,0.45); color: #e08738; }

/* ===== Legenda ===== */
.shifts-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gold-dim);
  letter-spacing: 1px;
}
.shifts-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shifts-legend .shifts-icon { font-size: 14px; color: var(--gold); }
.shifts-legend-dj .shifts-icon { color: #e08738; }
.shifts-legend .shifts-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ============================================================
 * MODAL — detail dne
 * ============================================================ */
.shifts-modal {
  position: fixed;
  /* Důležité: stránka má fixní header (top) a fixní footer (bottom).
     Modal NESMÍ pod ně lézt, jinak se křížek a obsah ztrácí mimo zobrazení.
     Proto inset omezíme tak, aby modal vyplnil jen prostor MEZI nimi. */
  top: var(--header-h, 0px);
  bottom: var(--footer-h, 0px);
  left: 0;
  right: 0;
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Kdyby celý box přesto přerostl viditelnou oblast (zoom, malá obrazovka),
     dovolíme overscroll na samotném pozadí jako poslední pojistku. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.shifts-modal[hidden] { display: none; }

.shifts-modal-box {
  background: var(--black-warm);
  border: 1px solid var(--gold-faint);
  width: 100%;
  max-width: 520px;
  /* Max výška = jen 100 % .shifts-modal (která už je v okně mezi header/footer),
     mínus padding pozadí (24px nahoře i dole). */
  max-height: calc(100% - 48px);
  /* Scrollování probíhá UVNITŘ boxu, ne na celé stránce */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Padding nahoře nulujeme — řeší ho sticky header (.shifts-modal-title-bar) */
  padding: 0 22px 20px;
  position: relative;
}

/* Sticky pruh s titulkem a křížkem — drží se nahoře i během scrollu uvnitř.
   Konkrétně se "přilepí" k top: 0 scroll-kontejneru (.shifts-modal-box).

   Důležité technické rozhodnutí: vlastní padding-top je vědomě menší
   (14px místo původních 22px) — chceme co nejméně "ztraceného" prostoru
   nad titulkem a křížkem, zvlášť na mobilu. Aby titulek nebyl úplně
   nalepený k hornímu okraji boxu, je rozdíl pokryt přes box-shadow
   na background-color (zachová neprůhlednost).

   align-items: flex-start + svislé centrování titulku v jeho vlastní výšce —
   křížek (36×36) je o pár pixelů vyšší než řádek titulku, ale layout
   zůstane čistý "flag" (titulek vlevo, křížek vpravo). */
.shifts-modal-title-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--black-warm);
  padding: 14px 0 0;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--gold-glow);
}

.shifts-modal-close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  margin-top: 8px;   /* zarovná nahoru s prvním řádkem (datum) */
  background: transparent;
  border: 1px solid var(--gold-faint);
  color: var(--gold);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shifts-modal-close:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}

.shifts-modal-title-wrap {
  flex: 1;
  min-width: 0;
}
.shifts-modal-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-hover);
  margin: 0;
  padding: 0 0 10px;
  font-weight: 500;
  line-height: 1.3;
}

/* Název akce pod datem — menší tučný sans, zlatý */
.shifts-modal-event-name {
  font-family: var(--sans), 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gold);
  margin: -4px 0 10px;
  line-height: 1.3;
}
.shifts-modal-event-name[hidden] { display: none; }

.shifts-modal-section {
  margin-bottom: 22px;
}
.shifts-modal-section:last-child { margin-bottom: 0; }

.shifts-modal-h4 {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 10px;
  font-weight: 500;
}

/* ===== Podsekce „Čeká na schválení" vs „Schválené" =====
   Vizuálně je odlišíme, aby admin i zaměstnanec hned poznali, co je co.
   Nadpis nese malé počítadlo (badge) s počtem položek. */
.shifts-modal-h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shifts-modal-h4-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
/* Čekající: pozor-barva (zlatá výraznější), badge zvýrazněný */
.shifts-modal-section--pending {
  padding: 14px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid var(--gold-faint);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  margin-bottom: 20px;
}
.shifts-modal-h4--pending {
  color: var(--gold-hover);
}
.shifts-modal-h4--pending .shifts-modal-h4-count {
  background: var(--gold);
  color: #1a1206;
}
/* Schválené: klidnější, zelenkavý badge */
.shifts-modal-h4--approved .shifts-modal-h4-count {
  background: var(--green-bg, rgba(80,170,90,0.18));
  color: var(--green);
  border: 1px solid var(--green);
}

/* ===== Sekce „Přidat směnu" — vizuálně oddělený panel =====
   Aby seznam zapsaných směn a formulář pro přidání nesplývaly, dostane
   formulář vlastní panel: jemné pozadí, rámeček a zvýrazněná horní linka.
   Nad ním je větší mezera, ať je předěl jasný. */
.shifts-modal-section--add {
  margin-top: 28px;
  padding: 20px;
  /* Decentně světlejší, teple-zlatě tónované pozadí, ať panel jemně
     vystoupí z tmavého modalu (kontrast vůči seznamu nad ním). */
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid var(--gold-faint);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
}
.shifts-modal-h4--add {
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--gold-hover);
  font-weight: 600;
  margin-bottom: 16px;
}
.shifts-modal-h4--add::before {
  content: '+';
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
  color: var(--gold);
}

.shifts-modal-empty {
  padding: 16px;
  background: rgba(0,0,0,0.3);
  border: 1px dashed var(--gold-glow);
  color: var(--gold-dim);
  font-family: var(--sans);
  font-size: 15px;
  text-align: center;
}

/* Seznam stávajících směn v modalu */
.shifts-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shifts-modal-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.35);
  border-left: 3px solid transparent;
  font-size: 14px;
}
.shifts-modal-item.day   { border-left-color: #d4a64a; }
.shifts-modal-item.night { border-left-color: #6e8aa8; }
.shifts-modal-item.dj    { border-left-color: #e08738; }
.shifts-modal-item.pending { opacity: 0.92; }

/* 1. řádek: ikona + typ + jméno + stav */
.shifts-modal-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shifts-modal-item-icon {
  font-size: 16px;
  width: 18px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.shifts-modal-item.day   .shifts-modal-item-icon { color: #d4a64a; }
.shifts-modal-item.night .shifts-modal-item-icon { color: #6e8aa8; }
.shifts-modal-item.dj    .shifts-modal-item-icon { color: #e08738; }
.shifts-modal-item-icon .shifts-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
}

.shifts-modal-item-type {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  min-width: 92px;
  flex: 0 0 auto;
}
.shifts-modal-item-name {
  flex: 1;
  color: var(--gold-hover);
  font-family: var(--sans), 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
}

/* ===== Stavový indikátor (vpravo na 1. řádku) ===== */
.shifts-modal-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 15px;
  line-height: 1;
}
/* Čekající – přesýpací hodiny, které se „přesypou": chvíli stojí,
   pak se otočí o 180°, zase stojí a otočí se zpět. */
.shifts-modal-status.is-pending .shifts-hourglass {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: shifts-hourglass-flip 3s ease-in-out infinite;
}
@keyframes shifts-hourglass-flip {
  0%, 30%   { transform: rotate(0deg); }      /* stojí, přesýpá se */
  45%, 80%  { transform: rotate(180deg); }    /* otočeno, přesýpá se */
  95%, 100% { transform: rotate(360deg); }    /* zpět do výchozí (plynule dokola) */
}
@media (prefers-reduced-motion: reduce) {
  .shifts-modal-status.is-pending .shifts-hourglass { animation: none; }
}
/* Schváleno – tichá zelená fajfka */
.shifts-modal-status.is-approved {
  color: var(--green);
}
.shifts-modal-status.is-approved .shifts-check {
  font-weight: 700;
}

/* ===== 2. řádek: akční tlačítka zarovnaná doprava ===== */
.shifts-modal-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.shifts-modal-item-form {
  display: inline-flex;
  margin: 0;
}
.shifts-modal-btn {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--gold-faint);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.25s;
  white-space: nowrap;
}
.shifts-modal-btn.approve {
  border-color: var(--green);
  color: var(--green);
}
.shifts-modal-btn.approve:hover {
  background: var(--green-bg);
}
.shifts-modal-btn.delete {
  border-color: var(--red);
  color: var(--red);
}
.shifts-modal-btn.delete:hover {
  background: var(--red-bg);
}

/* ===== Přidat směnu — formulář ===== */
.shifts-modal-add {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shifts-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shifts-modal-field-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.shifts-modal-select {
  padding: 12px 14px;
  background: var(--black);
  border: 1px solid var(--gold-faint);
  color: var(--gold-hover);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color 0.25s;
}
.shifts-modal-select:focus {
  outline: none;
  border-color: var(--gold);
}

.shifts-modal-types {
  border: 1px solid var(--gold-glow);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.shifts-modal-types-legend {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  padding: 0 6px;
}
.shifts-modal-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
  flex-wrap: wrap;
}
.shifts-modal-check:hover { border-color: var(--gold-glow); }

/* Custom checkbox — sjednoceno s designem inputů (tmavé pozadí, zlatý border) */
.shifts-modal-check input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--black);
  border: 1px solid var(--gold-faint);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.25s, background 0.25s;
  margin: 0;
}
.shifts-modal-check input[type=checkbox]:hover {
  border-color: var(--gold);
}
.shifts-modal-check input[type=checkbox]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
/* Zaškrtnutí — SVG fajfka, černá na zlatém pozadí */
.shifts-modal-check input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8L6.5 11.5L13 4.5' stroke='%230a0a0a' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.shifts-modal-check input[type=checkbox]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.shifts-modal-check.has {
  opacity: 0.7;
  cursor: not-allowed;
}
.shifts-modal-check-label {
  color: var(--gold-hover);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shifts-modal-check-label .shifts-icon { font-size: 14px; }
.shifts-modal-check-label .shifts-icon.dj { color: #e08738; }
.shifts-modal-check-label .shifts-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
}
.shifts-modal-already {
  margin-left: auto;
  font-size: 12px;
  color: var(--gold-dim);
  font-style: normal;
}

.shifts-modal-submit {
  margin-top: 4px;
  padding: 12px 24px;
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.25s;
}
.shifts-modal-submit:hover {
  background: var(--gold-hover);
}

/* ============================================================
 * MOBILNÍ ÚPRAVY
 * ============================================================ */
@media (max-width: 700px) {
  .shifts-header {
    padding: 10px 0;
    gap: 10px;
  }
  .shifts-month-label {
    /* Popisek i měsíc dědí styl z desktopu; na mobilu jen povolíme zúžení. */
    min-width: 0;
  }
  .shifts-nav-btn {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
  .shifts-today-btn {
    height: 34px;
    padding: 0 16px;
  }

  /* Sticky lišta dnů se na mobilu přilepí dynamicky podle změřené výšky
     hlavičky (--shifts-header-h), takže není potřeba pevný offset. */
  /* Šířka tabulky 910 px = 7 sloupců × ~130 px. Větší sloupce než dřív (760)
     pro pohodlnější ťuk a čitelnost — buňka se přiblíží čtverci (130×130).
     Horizontální scroll funguje stejně, jen má víc obsahu k posouvání. */
  .shifts-weekdays-track { min-width: 910px; }   /* shodné s tabulkou */
  /* Sticky lišta dnů (po-ne) — zvětšená kvůli čitelnosti. */
  .shifts-weekday-cell { font-size: 13px; padding: 10px 4px; letter-spacing: 1.5px; }

  .shifts-calendar { min-width: 910px; }   /* horizontální scroll */
  /* Buňka čtvercová (~130×130) — pohodlnější ťuk prstem, vejde se víc obsahu. */
  .shifts-cell { height: 130px; padding: 8px 7px 10px; }
  /* Číslo dne — větší, ať je hned jasné, na kterém dni jsem. */
  .shifts-cell-day { font-size: 16px; }
  /* Řádky se jmény směn — výrazně větší (10→13). Jméno+ikona pohodlně čitelné. */
  .shifts-cell-item { font-size: 13px; padding: 3px 5px; gap: 6px; }
  .shifts-cell-item .shifts-icon { font-size: 14px; width: 16px; height: 16px; }
  .shifts-cell-item .shifts-icon-svg { width: 13px; height: 13px; }
  /* Badge akce v hlavičce buňky — explicitně větší (jinak by dědil 10px desktopu). */
  .shifts-cell-event { font-size: 12px; letter-spacing: 0.2px; }
  /* Overflow počítadlo "+N" */
  .shifts-cell-overflow { font-size: 12px; padding-left: 24px; }
  /* Legenda pod kalendářem — větší písmo a hustotu */
  .shifts-legend { font-size: 13px; gap: 14px; }

  .shifts-modal {
    padding: 0;
    /* Na mobilu modal vyplní celou dostupnou plochu mezi header/footer.
       top/bottom dědí z hlavního pravidla (var(--header-h), var(--footer-h)),
       které mají v mobile breakpointu vlastní hodnoty (68px / 56px). */
    align-items: stretch;
    justify-content: stretch;
    /* DŮLEŽITÉ: na mobilu nemá parent vlastní scroll — scrolluje pouze box
       uvnitř. Když mají oba overflow:auto, na iOS Safari se scroll-events
       občas zachytí na špatném prvku a obsah se nedá posouvat. */
    overflow: hidden;
  }
  .shifts-modal-box {
    max-width: 100%;
    /* Box vyplní celého rodiče (flex stretch). Žádné height: 100% — to
       v kombinaci s overflow:auto někdy zlomilo scroll. Stretch z flexu
       stačí, max-height jen jako pojistka. */
    max-height: 100%;
    border: none;
    /* Menší boční padding než na desktopu — víc prostoru pro obsah na úzké
       obrazovce. Padding-bottom o něco větší, ať poslední řádek nelíže footer. */
    padding: 0 14px 18px;
  }
  .shifts-modal-title-bar {
    /* Na mobilu těsně k hornímu okraji — modal je už uvnitř fixovaného
       prostoru mezi header/footer, takže žádný extra polštář nahoře. */
    padding-top: 10px;
    margin-bottom: 12px;
  }
  .shifts-modal-title { font-size: 14px; letter-spacing: 2px; padding-bottom: 8px; }
  .shifts-modal-close { width: 32px; height: 32px; margin-top: 6px; }
  .shifts-modal-item-type { min-width: 0; flex: 0 0 auto; }

  /* ===== Mobilní redukce + zvětšení textů v modalu =====
     Na úzké obrazovce se slovní prefixy ("Denní"/"Noční"/"DJ") schovávají,
     zůstávají jen ikona + čas (☀ 13–18, ☾ 18–02, sluchátka). Samotné texty
     v modalu jsou na mobilu nyní větší — lépe čitelné prstem na telefonu. */
  .shifts-label-word { display: none; }

  /* Název akce pod nadpisem modalu — na mobilu o něco větší */
  .shifts-modal-event-name {
    font-size: 15px;
    margin: -2px 0 14px;
  }

  /* Sekce: zapsané směny — zvětšit jméno i typ, ať se to dá číst.
     Položka je dvouřádková (info nahoře, tlačítka dole vpravo). */
  .shifts-modal-h4         { font-size: 13px; margin-bottom: 12px; }
  .shifts-modal-h4-count   { min-width: 20px; height: 20px; font-size: 12px; }
  .shifts-modal-empty      { font-size: 16px; padding: 18px; }
  .shifts-modal-item       { font-size: 15px; padding: 12px 12px; gap: 12px; }
  .shifts-modal-item-main  { gap: 10px; }
  .shifts-modal-item-icon  { font-size: 18px; width: 22px; }
  .shifts-modal-item-icon .shifts-icon-svg { width: 16px; height: 16px; }
  .shifts-modal-item-type  { font-size: 14px; letter-spacing: 1px; font-weight: 700; }
  .shifts-modal-item-name  { font-size: 17px; font-weight: 700; }
  .shifts-modal-status     { width: 26px; height: 26px; font-size: 18px; }
  /* Tlačítka na mobilu zůstávají na jednom řádku vpravo a jsou pohodlně velká */
  .shifts-modal-item-actions { gap: 10px; }
  .shifts-modal-section--pending { padding: 14px 12px; }

  /* Sekce: přidat směnu — checkboxy + tlačítka taky čitelnější */
  .shifts-modal-section--add { margin-top: 22px; padding: 16px; }
  .shifts-modal-h4--add      { font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
  .shifts-modal-types-legend { font-size: 13px; }
  .shifts-modal-check-label  { font-size: 15px; }
  .shifts-modal-check .shifts-icon { font-size: 18px; }
  .shifts-modal-already      { font-size: 12px; }
  /* Tlačítka v modalu: stejný font (12px) jako desktop, jen kompaktnější padding */
  .shifts-modal-submit       { padding: 12px 20px; }
  .shifts-modal-btn          { padding: 12px 14px; }
  /* Select v mobilu — font 14px (desktop má 15px) */
  .shifts-modal-select       { font-size: 14px; }
}