/* =====================================================================
   ADMIN HEADER (admin_header.php)
   ---------------------------------------------------------------------
   LAYOUT DESKTOP:
     [LOGO]  [MENU se záložkami]  [IDENTITA jméno+tel+role]  [IKONY edit/přepnout/odhlásit]
   LAYOUT MOBIL (rozbalené menu po kliknutí na ☰):
     [IDENTITA jméno+tel+role]
     [záložka 1]
     [záložka 2]
     ...
     [IKONY edit/přepnout/odhlásit]

   STRATEGIE: Admin header DĚDÍ celé hamburger chování z webového style.css
   (přes třídu .nav-links na UL). Tady jen ROZŠIŘUJEME o admin specifika.
   ===================================================================== */

/* === KONTEJNER NAV ===
   Webový header.nav má justify-content: space-between. V adminu chceme,
   aby menu rostlo doprostřed; logo, identita a ikony zůstávaly na svých
   pozicích. Použijeme `gap` a flex: 1 na .admin-nav-menu. */
header.nav.admin-nav {
  justify-content: flex-start;
  gap: 20px;
}

/* === LOGO V ADMINU ===
   V adminu chceme menší logo + nad ním text „ADMINISTRACE", ať je na první
   pohled jasné, že nejsme na veřejné stránce webu. */
.admin-nav-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  line-height: 1;
}
.admin-nav-logo img {
  width: auto;
  height: auto;
  max-width: 80px;
  display: block;
}
.admin-brand-label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--gold-hover);
  font-weight: 700;
  text-transform: uppercase;
}

/* === MENU UPROSTŘED (kontejner) === */
.admin-nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* === ZÁLOŽKY (ul.nav-links.admin-tabs) === */
.admin-tabs {
  gap: 4px;
  margin: 0;
  padding: 0;
  align-items: center;
}
.admin-tabs li { display: flex; }

/* Přebíjíme webové .nav-links a — admin záložky mají počítadla a hover line. */
.admin-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  letter-spacing: 2.5px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
}
.admin-tabs a.active {
  color: var(--gold-hover);
  border-bottom-color: var(--gold);
}

/* Počítadlo („puntík s číslem") */
.admin-tabs .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--gold-glow);
  color: var(--gold-hover);
  font-size: 10px;
  border-radius: 10px;
  letter-spacing: 0;
  font-weight: 500;
}
.admin-tabs a.active .count {
  background: var(--gold);
  color: var(--black);
}

/* === IDENTITA UVNITŘ MENU (li.admin-tabs-identity) ===
   V DESKTOPU skrytá (identita je vpravo v .admin-nav-identity), v MOBILU se
   ukáže jako první položka rozbaleného menu. */
.admin-tabs-identity {
  display: none !important;
}

/* === IKONY UVNITŘ MENU (li.admin-tabs-actions) ===
   V DESKTOPU skryté (ikony jsou vpravo v .admin-nav-actions), v MOBILU se
   ukážou jako poslední řádek rozbaleného menu. */
.admin-tabs-actions {
  display: none !important;
}

/* === IDENTITA (DESKTOP) ===
   Sloupec se jménem a metadaty (telefon + role pill). Nad jménem mírně
   tučnější, pod ním tenčí, řazené pod sebou. */
.admin-nav-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  text-align: right;
  min-width: 0;
}
.admin-identity-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold-hover);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.admin-identity-meta {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gold-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* === IKONY VPRAVO (DESKTOP) === */
.admin-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* === STAV „NEPŘIHLÁŠEN" === */
.admin-nav-menu-guest {
  justify-content: flex-end;
  flex: 1;
}
.admin-back-link {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
}
.admin-back-link:hover { color: var(--gold-hover); }


/* ===================================================================
   RESPONZIVA — sladěná s webem (style.css používá 900px)
   =================================================================== */

@media (max-width: 1200px) {
  /* Pod 1200px schováme desktopovou identitu (na obrazovce by se mohla tísnit
     vedle 6 záložek). Identita se přesune do hamburgeru. */
  .admin-nav-identity { display: none; }
}

@media (max-width: 1024px) {
  .admin-tabs a { padding: 10px 10px; letter-spacing: 2px; }
  header.nav.admin-nav { gap: 14px; }
  .admin-identity-name { font-size: 12px; max-width: 160px; }
  .admin-identity-meta { font-size: 10px; }
}

@media (max-width: 900px) {
  /* Web už schoval .nav-links a ukázal .menu-toggle (z style.css). 
     Po kliknutí JS přidá .mobile-open → web pravidlo otevře menu jako
     fixed sloupec pod headerem. Tady přepisujeme admin specifika. */

  /* V mobilu zmenšíme logo a ADMINISTRACE label, ať se to vejde na řádek
     s hamburgerem. */
  .admin-nav-logo img { max-width: 60px; }
  .admin-brand-label { font-size: 10px; letter-spacing: 3px; }

  /* V mobilu skryjeme desktopové bloky (ikony, identita pokud zde ještě je) */
  .admin-nav .admin-nav-actions { display: none; }
  .admin-nav .admin-nav-identity { display: none; }

  /* Rozbalené menu — admin nastavení (přebíjí webový padding/gap).
     Selektory přes parent .admin-nav, aby nezávisely na třídě admin-tabs. */
  .admin-nav .nav-links.mobile-open {
    padding: 0;
    gap: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .admin-nav .nav-links.mobile-open li {
    width: 100%;
    border-bottom: 1px solid var(--gold-glow);
  }
  .admin-nav .nav-links.mobile-open li:last-child { border-bottom: none; }
  /* Záložky v rozbaleném menu (přebíjí webový padding/gap).
     Selektor `li:not(.admin-tabs-actions):not(.admin-tabs-identity) > a` cílí
     POUZE na záložkové <a>, aby nepoškodil .btn-icon uvnitř .admin-tabs-actions. */
  .admin-nav .nav-links.mobile-open li:not(.admin-tabs-actions):not(.admin-tabs-identity) > a {
    width: 100%;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 2px;
    justify-content: space-between;
    border-bottom: none;
  }
  /* Aktivní položka v mobilu — jen barvou (bez podtržení) */
  .admin-nav .nav-links.mobile-open li:not(.admin-tabs-actions) > a.active {
    border-bottom: none;
  }
  .admin-nav .nav-links.mobile-open .count {
    min-width: 22px;
    height: 22px;
    font-size: 11px;
  }

  /* Identita uvnitř rozbaleného menu — první položka, menší než desktop verze */
  .admin-nav .nav-links.mobile-open .admin-tabs-identity {
    display: block !important;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gold-faint);
  }
  .admin-nav .nav-links.mobile-open .admin-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .admin-nav .nav-links.mobile-open .admin-identity-name {
    font-size: 14px;
    letter-spacing: 2.5px;
    max-width: none;
    color: var(--gold-hover);
  }
  .admin-nav .nav-links.mobile-open .admin-identity-meta {
    font-size: 11px;
    letter-spacing: 1.5px;
    flex-wrap: wrap;
  }

  /* Ikony uvnitř rozbaleného menu — poslední řádek, vystředěno */
  .admin-nav .nav-links.mobile-open .admin-tabs-actions {
    display: flex !important;
    justify-content: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: none;
  }
  /* Vynutíme čtvercový tvar a orámování pro ikony v mobilním menu —
     identické s desktopem (.btn-icon: 38x38 + border). Tady přebíjíme
     předchozí webová pravidla, která mohla nasadit width:100% nebo
     border-bottom:none na vše uvnitř .mobile-open. */
  .admin-nav .nav-links.mobile-open .admin-tabs-actions .btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--gold-faint);
    border-radius: 0;          /* žádné zaoblení — čtverec */
    flex-shrink: 0;             /* nesmrskávat */
    flex-grow: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--gold);
  }
  .admin-nav .nav-links.mobile-open .admin-tabs-actions .btn-icon:hover {
    border-color: var(--gold-hover);
    color: var(--gold-hover);
  }
}

/* =====================================================================
   /KONEC: ADMIN HEADER
   ===================================================================== */

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--header-h) 24px 80px;
}

/* Header — „identitní podpásek" pod admin headerem.
   Obsahuje JEN identitu (jméno + telefon + role pill). Ikony Editovat/
   Přepnout/Odhlásit byly přesunuty do admin_header.php. */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gold-glow);
  padding-bottom: 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.head h1,
.head .user-name-h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--gold-hover);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}
/* Sloupec vlevo v hlavičce: jméno (h1) nahoře, telefon pod ním. */
.head-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Ikonkové tlačítko v headeru (Nastavení profilu, Odhlásit, Zpět) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--gold-faint);
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
  padding: 0;
}
.btn-icon:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}
.btn-icon svg { display: block; }

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gold-glow);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.tabs a {
  padding: 14px 24px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-dim);
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tabs a:hover { color: var(--gold-hover); }
.tabs a.active {
  color: var(--gold-hover);
  border-bottom-color: var(--gold);
}
.tabs .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--gold-glow);
  color: var(--gold-hover);
  font-size: 11px;
  border-radius: 11px;
  letter-spacing: 0;
}
.tabs a.active .count { background: var(--gold); color: var(--black); }

/* Flash messages */
.flash {
  padding: 14px 18px;
  margin-bottom: 24px;
  border: 1px solid;
  font-size: 14px;
}
.flash.ok    { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.flash.error { border-color: var(--red);   background: var(--red-bg);   color: var(--red); }

/* Účet čeká na schválení — VÝRAZNÉ upozornění, aby si ho uživatel nemohl
   nevšimnout (jinak zbytečně resetují hesla). */
.flash.pending {
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.06));
  color: var(--gold-hover);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  padding: 20px 22px 20px 56px;
  position: relative;
  box-shadow: 0 8px 30px rgba(212,175,55,0.22);
  text-align: left;
}
.flash.pending::before {
  content: "⏳";
  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 24px;
  line-height: 1;
}

/* Login form */
.login-box {
  max-width: 420px;
  margin: 80px auto;
  padding: 50px 40px;
  border: 1px solid var(--gold-faint);
  background: var(--black-warm);
  text-align: center;
}
.login-box h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--gold-hover);
  margin-bottom: 30px;
  font-weight: 500;
}
.login-box input[type=password],
.login-box input[type=tel],
.login-box input[type=email],
.login-box input[type=text] {
  width: 100%;
  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;
  margin-bottom: 14px;
  box-sizing: border-box;
  transition: border-color 0.25s;
}
.login-box input:focus { outline: none; border-color: var(--gold); }
.login-box input::placeholder {
  color: var(--gold-dim);
  opacity: 0.6;
  letter-spacing: 0.5px;
}
.login-box button {
  width: 100%;
  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;
}
.login-box button:hover { background: var(--gold-hover); }

/* Empty state */
.empty {
  text-align: center;
  padding: 80px 20px;
  border: 1px dashed var(--gold-faint);
  background: var(--black-warm);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--gold-dim);
}
.empty .icon { font-size: 32px; color: var(--gold); margin-bottom: 12px; }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.card {
  border: 1px solid var(--gold-faint);
  background: var(--black-warm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s;
}
.card:hover { border-color: var(--gold); }
.thumb {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #2a1f10, #0f0c06);
  position: relative;
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}
.thumb img,
.thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb .video-badge {
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 10px;
  background: rgba(10, 10, 10, 0.8);
  color: var(--gold-hover);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--gold-faint);
}
.info {
  padding: 14px 16px;
  border-top: 1px solid var(--gold-glow);
  font-size: 12px;
  letter-spacing: 1px;
}
.info .filename {
  color: var(--gold-hover);
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  word-break: break-all;
  margin-bottom: 4px;
}
.info .filesize {
  color: var(--gold-dim);
  font-size: 11px;
}
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gold-glow);
  border-top: 1px solid var(--gold-glow);
}
.actions button {
  padding: 12px 8px;
  background: var(--black-warm);
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.25s;
}
.actions button.approve   { color: var(--gold); }
.actions button.approve:hover   { color: var(--gold-hover); }
.actions button.unapprove { color: var(--gold); }
.actions button.unapprove:hover { color: var(--gold-hover); }
.actions button.delete    { color: var(--gold-dim); }
.actions button.delete:hover    { color: var(--gold-hover); }

/* Modal preview */
.preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.preview-modal.active { display: flex; }
.preview-modal img,
.preview-modal video {
  max-width: 94vw;
  max-height: 90vh;
  border: 1px solid var(--gold-faint);
}
.preview-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid var(--gold-faint);
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 600px) {
  /* Bez extra horního paddingu — obsah začíná těsně pod fixed headerem. */
  .wrap { padding: var(--header-h) 14px 60px; }
  /* H1 (jméno) v mobilu zachováváme, jen menší — aby se vešlo vedle ikon. */
  .head h1,
  .head .user-name-h1 {
    font-size: 15px;
    letter-spacing: 2px;
  }
  .head {
    padding-bottom: 14px;
    margin-bottom: 18px;
    gap: 12px;
  }
  /* Záložky (Účty / Směny / Akce ...) — větší písmo i padding pro pohodlnější ťuk */
  .tabs a { padding: 14px 16px; font-size: 13px; letter-spacing: 1.5px; }
  .tabs .count { font-size: 12px; min-width: 24px; height: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

/* ====== AUTH (login + register) ====== */

/* Odkaz pod login/register formulářem */
.auth-intro {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--gold-soft);
  margin: 0 0 20px;
  text-align: center;
}

/* Výrazné upozornění (např. "účet čeká na schválení") na auth stránkách */
.auth-notice {
  border: 1px solid var(--gold-faint);
  border-left: 3px solid var(--gold);
  background: rgba(212,175,55,0.07);
  color: var(--gold-soft);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  text-align: left;
  padding: 16px 18px 16px 48px;
  margin: 0 0 22px;
  position: relative;
  border-radius: 2px;
}
.auth-notice::before {
  content: "ℹ";
  position: absolute;
  left: 16px;
  top: 14px;
  font-size: 18px;
  line-height: 1;
  color: var(--gold);
  font-weight: 700;
}
.auth-notice-title {
  display: block;
  color: var(--gold-hover);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.auth-notice strong { color: var(--gold-light); }
.auth-aside {
  margin-top: 32px;
  font-size: 14px;
  color: var(--gold-dim);
  font-family: var(--sans);
  letter-spacing: 0.5px;
  text-align: center;
}
.auth-aside a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-faint);
  padding-bottom: 2px;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  transition: all 0.25s;
  font-style: normal;
}
.auth-aside a:hover {
  color: var(--gold-hover);
  border-bottom-color: var(--gold);
}

/* ===== Informační bloky pod přihlašovacím formulářem =====
   Decentní řádky s ikonkou vlevo (telefon / vykřičník) a vysvětlujícím
   textem. Odlišené od .auth-aside (přihlašovací odkazy) — menší, klidnější,
   text zarovnaný doleva, ikona slouží jako vizuální kotva. */
.auth-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gold-dim);
}
.auth-info:first-of-type { margin-top: 28px; }
.auth-info-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.4;
}
.auth-info-text { flex: 1; }
.auth-info a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-faint);
  padding-bottom: 1px;
  font-weight: 500;
  transition: all 0.25s;
}
.auth-info a:hover {
  color: var(--gold-hover);
  border-bottom-color: var(--gold);
}

/* Větší registrační box */
.register-box {
  max-width: 460px;
}

/* Popisky polí v registraci */
.field-label {
  display: block;
  text-align: left;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 6px;
  font-weight: 500;
}
.field-label .field-hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-dim);
  font-size: 11px;
  opacity: 0.75;
  font-weight: 400;
  margin-left: 4px;
}

/* ====== USER META v headeru ====== */
.user-actions-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-phone {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold-dim);
  font-family: 'Cinzel', Georgia, serif;
}

/* ====== SEZNAM UŽIVATELŮ ====== */
.users-section-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-hover);
  font-weight: 700;
  text-align: center;
  margin: 16px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold-glow);
}

.users-section-hint {
  text-align: center;
  max-width: 760px;
  margin: -6px auto 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gold-dim);
  font-family: var(--sans);
}
.users-section-hint strong {
  color: var(--gold-hover);
  font-weight: 700;
}

.users-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

/* Desktop: 3-sloupcová mřížka — jméno | kontakt | akce.
   Mobil (max-width: 600px): sloupce se přeskládají pod sebe — viz @media níže. */
.user-row {
  display: grid;
  /* Třetí sloupec má fixní min šířku, aby kontaktní info v 2. sloupci bylo
     vždy zarovnané pod sebou napříč řádky — bez ohledu na to, jestli má
     řádek 1 (jen Upravit) nebo 2 (Upravit + Smazat) tlačítka. */
  grid-template-columns: minmax(200px, 1.2fr) minmax(220px, 1.6fr) minmax(220px, auto);
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border: 1px solid var(--gold-faint);
  background: var(--black-warm);
  transition: border-color 0.3s, background 0.3s;
}
.user-row:hover { border-color: var(--gold-glow); }

/* Jednotné jednoduché orámování pro všechny účty — bez barevných levých
   pruhů. Stav/role rozlišují barevné badge u jména. */
.user-row.changes  { background: linear-gradient(90deg, rgba(212,175,55,0.06), var(--black-warm) 40%); }

/* Self — vlastní účet: stejné orámování jako ostatní, jen výraznější pozadí */
.user-row.self {
  background: linear-gradient(90deg, rgba(212,175,55,0.22), rgba(212,175,55,0.08) 60%);
}

/* Sloupce */
.user-col {
  min-width: 0;
}
.user-col-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.user-col-contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Jméno — sans font, bold 500 (požadavek a) */
.user-row-name {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--gold-hover);
  font-weight: 500;
  text-transform: none;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Druhý řádek jména: DJ jméno u účtu, který má DJ i jinou roli.
   Stejný font/velikost/barva jako jméno (dědí z .user-row-name). */
.user-row-djname {
  margin-top: 0;
}

/* Telefon — sans font (požadavek b), klikatelný odkaz */
.user-row-phone {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--gold-hover);
  font-weight: 500;
}
.user-row-phone a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.user-row-phone a:hover {
  color: var(--gold);
  text-decoration: underline;
}

.user-row-email {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--gold-dim);
  word-break: break-all;
}
.user-row-date {
  font-size: 11px;
  color: var(--gold-dim);
  opacity: 0.7;
  letter-spacing: 1px;
  font-family: var(--sans);
  margin-top: 2px;
}

.user-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.user-actions button {
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--gold-faint);
  color: var(--gold-dim);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.25s, border-color 0.25s;
}

/* Schvalovací tlačítka — dvouřádkový popis: malý "Schválit a přidělit roli"
   nad velkým názvem role. Jasně sděluje, že roli dostane registrovaný
   uživatel (ne admin sám sebe). */
.user-actions .btn-approve,
.user-actions .btn-approve-dj,
.user-actions .btn-approve-admin {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
  text-align: center;
}
.btn-approve-pre {
  font-size: 9px;
  letter-spacing: 1.5px;
  opacity: 0.75;
  font-weight: 500;
}
.btn-approve-role {
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 700;
}

/* Schválit — GOLD (schéma jako .btn-icon) */
.user-actions .btn-approve {
  border-color: var(--gold-faint);
  color: var(--gold);
}
.user-actions .btn-approve:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* Schválit jako Admin — ZELENÁ (sjednoceno s badge: Admin = zelená) */
.user-actions .btn-approve-admin {
  border-color: rgba(143, 188, 143, 0.5);
  color: #9be19b;
}
.user-actions .btn-approve-admin:hover {
  background: rgba(143, 188, 143, 0.12);
  border-color: #9be19b;
  color: #b5edb5;
}

/* Schválit jako DJ — ORANŽOVÁ */
.user-actions .btn-approve-dj {
  border-color: #e08738;
  color: #e08738;
}
.user-actions .btn-approve-dj:hover {
  background: rgba(224, 135, 56, 0.12);
  border-color: #f0a05a;
  color: #f0a05a;
}

/* Povýšit / Degradovat — GOLD LIGHT (zatím ponecháno pro případnou budoucí potřebu) */
.user-actions .btn-secondary {
  border-color: var(--gold-light);
  color: var(--gold-light);
}
.user-actions .btn-secondary:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* Upravit (odkaz na profile.php?id=N) — stylem stejný jako tlačítka */
.user-actions .btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--gold-faint);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s, border-color 0.25s;
}
.user-actions .btn-edit:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* "Přihlásit se jako" (jen SuperAdmin) — fialovo-modrý akcent,
   ať se odliší od běžných akcí a je jasné, že jde o mocnou funkci. */
.user-actions .btn-impersonate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid rgba(150, 160, 220, 0.55);
  color: #aeb6e8;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.25s;
}
.user-actions .btn-impersonate:hover {
  background: rgba(150, 160, 220, 0.12);
  border-color: #aeb6e8;
  color: #c6ccf2;
}

/* Poznámka "roli Admin schválí jen SuperAdmin" — decentní text místo tlačítka */
.user-role-note {
  font-size: 12px;
  color: var(--gold-dim);
  font-style: italic;
  max-width: 220px;
  line-height: 1.4;
}

/* ===== PRUH IMPERSONACE ("Přihlásit se jako") =====
   Výrazný pruh úplně nahoře (fixed, nade vším), aby bylo VŽDY jasné,
   že superadmin jedná pod cizí identitou. Když pruh svítí, posuneme
   fixní hlavičku i obsah o jeho výšku dolů (proměnná --imp-bar-h,
   kterou změří JS — pruh se na úzkém displeji může zalomit). */
.impersonation-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 10px 18px;
  background: #6e4ab0;
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.3px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* Když probíhá impersonace: posuň fixní hlavičku o výšku pruhu a
   přidej obsahu horní odsazení navíc (výchozí 52px = fallback, než
   JS změří přesnou výšku do --imp-bar-h). */
body.impersonating {
  --imp-bar-h: 52px;
}
body.impersonating header.nav {
  top: var(--imp-bar-h);
}
body.impersonating .wrap {
  padding-top: calc(var(--header-h) + var(--imp-bar-h));
}
.impersonation-bar-text { font-weight: 400; }
.impersonation-bar-text strong { font-weight: 700; }
.impersonation-bar-icon { margin-right: 4px; }
.impersonation-bar-form { margin: 0; display: inline-flex; }
.impersonation-bar-btn {
  padding: 7px 16px;
  background: #fff;
  color: #4a2f7a;
  border: none;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.impersonation-bar-btn:hover { background: #ece7f6; }
@media (max-width: 768px) {
  .impersonation-bar { font-size: 13px; padding: 9px 14px; }
  .impersonation-bar-btn { font-size: 11px; padding: 7px 14px; }
}

/* Smazat / Zamítnout — tlumeně (gold-dim), hover rozsvítí */
.user-actions .btn-delete {
  border-color: var(--gold-faint);
  color: var(--gold-dim);
}
.user-actions .btn-delete:hover {
  color: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* Mobil — sloupce pod sebe (požadavek f) */
@media (max-width: 600px) {
  .user-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .user-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .user-actions button,
  .user-actions .btn-edit {
    flex: 1;
  }
  /* ===== Mobilní head: jméno+telefon (head-title) vlevo, akce vpravo ===== */
  .user-actions-header {
    flex-shrink: 0;
    gap: 8px;
    align-self: center;
  }
  .user-phone { font-size: 12px; letter-spacing: 1.5px; }
  .login-box { padding: 36px 24px; margin: 40px auto; }
  /* Inputy v mobilu — font 14px (desktop má 15px), pro lepší vejití na úzkých obrazovkách */
  .login-box input[type=password],
  .login-box input[type=tel],
  .login-box input[type=email],
  .login-box input[type=text],
  .login-box .role-select { font-size: 14px; }
}

/* ====== SUCCESS MODAL (registrace) ====== */
.success-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: success-fade-in 0.4s ease both;
}
.success-modal.active { display: flex; }

@keyframes success-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.success-modal-box {
  max-width: 480px;
  width: 100%;
  padding: 48px 36px 40px;
  background: var(--black-warm);
  border: 1px solid var(--gold);
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px rgba(212, 175, 55, 0.15);
  animation: success-pop-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes success-pop-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.success-modal-icon {
  font-size: 42px;
  color: var(--gold);
  margin-bottom: 18px;
  line-height: 1;
}

.success-modal-box h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-hover);
  font-weight: 500;
  margin-bottom: 18px;
}

.success-modal-box p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--gold-dim);
  margin-bottom: 28px;
}

.success-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.success-modal-actions .btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid var(--gold);
  transition: background 0.25s, color 0.25s;
}
.success-modal-actions .btn-primary:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}

@media (max-width: 600px) {
  .success-modal-box { padding: 36px 22px 30px; }
  .success-modal-icon { font-size: 36px; margin-bottom: 14px; }
  .success-modal-box h3 { font-size: 16px; letter-spacing: 2px; }
  .success-modal-box p { font-size: 15px; }
}

/* ====== USER ROW DOPLŇKY ====== */
.user-row-role {
  font-size: 11px;
  color: var(--gold-dim);
  letter-spacing: 1.5px;
  font-family: 'Cinzel', Georgia, serif;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Badge u jména v admin sekci */
.user-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--gold-faint);
  color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
  font-weight: 500;
  vertical-align: middle;
}
.user-badge-dj {
  border-color: #e08738;
  color: #e08738;
  background: rgba(224, 135, 56, 0.08);
}
.user-badge-staff {
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}

/* ====== DIFF VIEW pro pending profile changes ====== */
.profile-changes-diff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gold-faint);
}
.diff-row {
  font-size: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  letter-spacing: 0.5px;
}
.diff-label {
  color: var(--gold-dim);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-width: 80px;
}
.diff-old {
  color: var(--gold-dim);
  text-decoration: line-through;
  opacity: 0.65;
  word-break: break-all;
}
.diff-arrow {
  color: var(--gold);
  font-weight: 700;
}
.diff-new {
  color: var(--gold-hover);
  font-weight: 500;
  word-break: break-all;
}

/* ====== PROFILE PAGE ====== */
.profile-box {
  margin-top: 24px;
}
/* Upozornění nad formulářem profilu (žádný box — jen text větším písmem) */
.profile-warning {
  margin-bottom: 28px;
  padding: 0;
  text-align: left;
}
.profile-warning-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--gold-hover);
  letter-spacing: 0.3px;
}
.profile-warning-text b {
  color: var(--gold-hover);
  font-weight: 700;
}
.profile-section-divider {
  margin: 22px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--gold-glow);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-align: left;
}

/* Pending changes informační box (na profile.php) */
.pending-changes-note {
  margin-bottom: 24px;
  border: 1px solid #c9941f;
  background: rgba(212, 175, 55, 0.06);
  padding: 18px 22px;
}
.pending-changes-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-hover);
  margin-bottom: 8px;
  font-weight: 500;
}
.pending-changes-body {
  font-size: 14px;
  color: var(--gold-dim);
  line-height: 1.5;
}
.pending-changes-body ul {
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0;
}
.pending-changes-body li {
  padding: 4px 0;
  border-bottom: 1px dashed var(--gold-faint);
}
.pending-changes-body li:last-child { border-bottom: none; }
.pending-changes-body strong {
  color: var(--gold-hover);
  font-weight: 500;
  margin-right: 6px;
}
.pending-changes-date {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gold-dim);
  opacity: 0.7;
  font-family: 'Cinzel', Georgia, serif;
}

@media (max-width: 600px) {
  .diff-label { min-width: 70px; font-size: 10px; }
  .diff-row { font-size: 11px; }
  .btn-icon { width: 34px; height: 34px; }
  .btn-icon svg { width: 16px; height: 16px; }
  /* Tlačítka v mobilu — stejný font (12px) jako desktop, kompaktnější padding.
     Žádné zmenšování na 10/11 px — důležitá tlačítka musí být čitelná a kliknutelná. */
  .user-actions button,
  .user-actions .btn-edit { padding: 12px 16px; }
  .profile-warning { margin-bottom: 22px; }
  .profile-warning-text { font-size: 15px; }
}

/* ====== ROLE SELECT (na profile.php při editaci cizího účtu) ====== */
.login-box .role-select {
  width: 100%;
  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;
  margin-bottom: 14px;
  box-sizing: border-box;
  transition: border-color 0.25s;

  /* Reset výchozího vzhledu — chceme svůj styl */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Vlastní zlatá šipka (SVG inline jako background) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%23d4af37' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.login-box .role-select:focus {
  outline: none;
  border-color: var(--gold);
}
.login-box .role-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%23806930' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* Option styly (chování závisí na OS — někdy se neaplikuje) */
.login-box .role-select option {
  background: var(--black);
  color: var(--gold-hover);
}

/* ====== ROLE TOGGLE (na register.php — Obsluha vs DJ) ====== */
/* Instrukce nad přepínačem rolí — navazuje na nadpis "Registrace". */
.register-intro {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--gold-dim);
  letter-spacing: 0.5px;
  text-align: center;
  margin: -8px 0 18px;
  line-height: 1.5;
}
.role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--gold-glow);
}
.role-toggle-opt {
  position: relative;
  cursor: pointer;
  display: block;
}
.role-toggle-opt input[type=radio] {
  /* Vlastní vzhled — input schováme, ale necháme accessible */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.role-toggle-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px 14px;
  background: var(--black);
  border: 1px solid var(--gold-faint);
  color: var(--gold-dim);
  text-align: center;
  transition: all 0.25s;
}
.role-toggle-opt:hover .role-toggle-label {
  border-color: var(--gold);
  color: var(--gold-hover);
}
.role-toggle-opt input:checked + .role-toggle-label {
  border-color: var(--gold);
  background: var(--gold-glow);
  color: var(--gold-hover);
}
.role-toggle-opt input:focus-visible + .role-toggle-label {
  outline: 1px solid var(--gold);
  outline-offset: 1px;
}
.role-toggle-opt input:checked + .role-toggle-label .role-toggle-icon {
  color: var(--gold-hover);
}
.role-toggle-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: inherit;
}

/* Skrytí skupin polí podle role */
.role-fields.hidden {
  display: none;
}

@media (max-width: 480px) {
  .role-toggle {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .role-toggle-label { padding: 14px 12px 12px; }
  .role-toggle-name { font-size: 13px; letter-spacing: 2px; }

  .auth-aside { font-size: 16px; }
  .auth-aside a { font-size: 17px; }
  .auth-info { font-size: 15px; padding: 14px; }
  .auth-info-icon { font-size: 18px; }
}

/* ============================================================
   MULTI-ROLE: přepínač rolí, žádosti o role, modaly
   ============================================================ */

/* Pill s aktivní rolí v hlavičce, vedle telefonu */
.user-role-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #d4af37;
  border-radius: 10px;
  vertical-align: middle;
}

/* ====== MODAL: PŘEPNUTÍ ROLE ====== */
.role-switch-modal,
.role-add-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.role-switch-modal[hidden],
.role-add-modal[hidden] {
  display: none;
}
.role-switch-modal-box,
.role-add-modal-box {
  background: #141414;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.role-switch-modal-head,
.role-add-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.role-switch-modal-head h3,
.role-add-modal-head h3 {
  margin: 0;
  font-size: 18px;
  color: #d4af37;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.role-switch-modal-close,
.role-add-modal-close {
  background: transparent;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.role-switch-modal-close:hover,
.role-add-modal-close:hover {
  color: #fff;
}
.role-switch-modal-body,
.role-add-modal-body {
  padding: 16px 20px 20px;
}
.role-switch-modal-desc {
  margin: 0 0 14px;
  color: #aaa;
  font-size: 14px;
}
.role-switch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-switch-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.role-switch-item.is-active {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.06);
}
.role-switch-item-info,
.role-switch-item-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  width: 100%;
}
.role-switch-item-btn {
  background: transparent;
  border: none;
  color: #eee;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.role-switch-item-btn:hover {
  background: rgba(212, 175, 55, 0.08);
}
.role-switch-item-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4af37;
  min-width: 70px;
}
.role-switch-item-name {
  flex: 1;
  color: #eee;
  font-size: 15px;
}
.role-switch-item-badge {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(212, 175, 55, 0.18);
  color: #d4af37;
  padding: 2px 8px;
  border-radius: 10px;
}
.role-switch-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 16px 0 12px;
}
.role-switch-add-link {
  display: inline-block;
  font-size: 13px;
  color: #d4af37;
  text-decoration: none;
  letter-spacing: 1px;
}
.role-switch-add-link:hover {
  text-decoration: underline;
}

/* ====== SEKCE "MOJE ROLE" V PROFILU ====== */
.roles-box {
  margin-bottom: 16px;
}
.roles-box-title {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4af37;
  margin: 0 0 14px;
}
.roles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.role-row.is-primary {
  border-color: rgba(212, 175, 55, 0.4);
}
.role-row.is-active {
  background: rgba(212, 175, 55, 0.05);
}
.role-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}
.role-row-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  min-width: 60px;
}
.role-row-name {
  color: var(--gold-hover);
  font-size: 14px;
}
.role-badge {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
}
.role-badge-active {
  background: rgba(212, 175, 55, 0.18);
  color: #d4af37;
}
.role-badge-primary {
  background: rgba(143, 188, 143, 0.15);
  color: #9be19b;
}
.btn-set-primary {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--black);
  padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s;
}
.btn-set-primary:hover {
  background: var(--gold-hover);
}
/* Admin: popisek a tlačítko odebrání role */
.roles-box-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gold-dim);
  font-family: var(--sans);
  margin: -6px 0 16px;
}
.roles-empty {
  font-size: 13px;
  color: var(--gold-dim);
  font-family: var(--sans);
  font-style: italic;
  margin: 0 0 8px;
}

/* "+ Přidat roli" — žluté akční tlačítko přes celou šířku (jako Uložit). */
.roles-box .btn-add-role {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 24px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--black);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.25s;
}
.roles-box .btn-add-role:hover {
  background: var(--gold-hover);
}

/* "Odebrat" — žluté akční tlačítko, kompaktní (vpravo v řádku). */
.roles-box .btn-remove-role {
  width: auto;
  flex-shrink: 0;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--black);
  padding: 8px 20px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s;
}
.roles-box .btn-remove-role:hover {
  background: var(--gold-hover);
}
.role-row-locked {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-dim);
  opacity: 0.7;
  font-family: var(--sans);
  flex-shrink: 0;
}

/* ====== FORMULÁŘ V MODALU PRO PŘIDÁNÍ ROLE ====== */
.role-add-fields {
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.role-add-fields[hidden] {
  display: none;
}
.role-add-fields .field-label {
  margin-top: 0;
}
.role-add-fields input[type=text] {
  width: 100%;
  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;
  margin-bottom: 0;
  box-sizing: border-box;
  transition: border-color 0.25s;
}
.role-add-fields input[type=text]:focus {
  outline: none;
  border-color: var(--gold);
}
.role-add-fields input[type=text]::placeholder {
  color: var(--gold-dim);
  opacity: 0.6;
  letter-spacing: 0.5px;
}
.role-add-submit {
  width: 100%;
  margin-top: 16px;
  padding: 12px 24px;
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s;
}
.role-add-submit:hover {
  background: var(--gold-hover);
}

/* ====== ŽÁDOSTI O ROLE V ADMIN PANELU ====== */
.user-row.role-request {
  border-left: 3px solid #d4af37;
}
.user-badge-role-add {
  font-weight: 700;
}
.user-row-current-roles {
  margin-top: 4px;
  color: #888;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.user-row-current-roles span {
  color: #ccc;
}
.user-row-detail {
  margin-top: 3px;
  color: #aaa;
  font-size: 12px;
}
.user-row-dj-name {
  margin-top: 2px;
  color: #888;
  font-size: 12px;
  font-style: italic;
}

/* Badges pro role v seznamu schválených.
   Sjednocené barevné schéma: Obsluha = žlutá, DJ = oranžová, Admin = zelená. */
.user-badge-admin {
  background: rgba(143, 188, 143, 0.14);
  color: #9be19b;
  border: 1px solid rgba(143, 188, 143, 0.4);
}
.user-badge-staff {
  background: rgba(212, 175, 55, 0.14);
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.user-badge-dj {
  background: rgba(224, 135, 56, 0.14);
  color: #e08738;
  border: 1px solid rgba(224, 135, 56, 0.4);
}

@media (max-width: 480px) {
  .role-switch-modal-box,
  .role-add-modal-box {
    max-height: 95vh;
  }
  .role-switch-item-info,
  .role-switch-item-btn {
    flex-wrap: wrap;
  }
  .role-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-set-primary {
    align-self: flex-end;
  }
  /* Sekce "Role účtu" (admin): i na mobilu jméno+role vlevo, Odebrat vpravo */
  .roles-box .role-row {
    flex-direction: row;
    align-items: center;
  }
  .roles-box .role-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ===== ZÁLOŽKA NEWSLETTERY ===== */
.newsletter-admin {
  max-width: 720px;
  margin: 0 auto;
}
.nl-admin-hint {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gold-dim);
  background: var(--black-warm);
  border: 1px solid var(--gold-faint);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 22px;
}
.nl-admin-hint code {
  font-family: monospace;
  color: var(--gold-hover);
  background: var(--gold-glow);
  padding: 1px 5px;
  border-radius: 4px;
}
.nl-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nl-label {
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--gold-soft);
  margin-top: 14px;
}
.nl-input,
.nl-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--black);
  border: 1px solid var(--gold-faint);
  color: var(--gold-hover);
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: 0.5px;
  padding: 14px 16px;
  border-radius: 8px;
  transition: border-color 0.25s;
}
.nl-textarea {
  resize: vertical;
  line-height: 1.6;
  min-height: 200px;
}
.nl-input:focus,
.nl-textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.nl-input::placeholder,
.nl-textarea::placeholder {
  color: var(--gold-dim);
  opacity: 0.6;
  letter-spacing: 0.5px;
}
.nl-input:focus::placeholder,
.nl-textarea:focus::placeholder {
  color: var(--gold-soft);
  opacity: 0.5;
}
/* Override browser autofill (Chrome/Safari/Edge), aby žlutá výplň nezničila vzhled */
.nl-input:-webkit-autofill,
.nl-input:-webkit-autofill:hover,
.nl-input:-webkit-autofill:focus,
.nl-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--gold-hover);
  -webkit-box-shadow: 0 0 0 1000px var(--black) inset;
  caret-color: var(--gold-hover);
  transition: background-color 9999s ease-in-out 0s;
}
.nl-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.nl-result {
  font-family: var(--sans);
  border: 1px solid var(--gold-faint);
  background: var(--black-warm);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 22px;
}
.nl-result-line {
  font-size: 14px;
  color: var(--gold-hover);
}
.nl-result-failed { color: var(--red); }
.nl-result-errors {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--red);
  line-height: 1.6;
}

/* ===== PŘIPOMÍNKY NA SMĚNY (profil) ===== */
.reminders-form {
  margin-top: 4px;
}
.reminders-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-family: var(--sans);
  padding: 14px 16px;
  border: 1px solid var(--gold-faint);
  border-radius: 8px;
  background: var(--black-warm);
  transition: border-color 0.25s;
  text-align: left;
}
.reminders-toggle:hover { border-color: var(--gold); }

/* Custom checkbox — sjednoceno se směnami (tmavé pozadí, zlatý border, černá fajfka) */
.reminders-toggle input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  background: var(--black);
  border: 1px solid var(--gold-faint);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.25s, background 0.25s;
}
.reminders-toggle input[type="checkbox"]:hover {
  border-color: var(--gold);
}
.reminders-toggle input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.reminders-toggle 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;
}
.reminders-toggle-text {
  flex: 1;
  font-size: 16px;
  color: var(--gold-hover);
  line-height: 1.4;
  text-align: left;
}
.reminders-toggle-text .field-hint {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--gold-dim);
}

/* ============================================================
 * ZÁLOŽKA LOG — auditní log aktivity
 * ============================================================ */
.log-admin {
  max-width: 1100px;
  margin: 0 auto;
}

/* Filtry */
.log-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
}
.log-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}
.log-filter-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
}
.log-filter-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.log-count {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold-dim);
  margin-bottom: 10px;
  text-align: right;
}

/* Tabulka */
.log-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
}
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
  min-width: 760px;
}
.log-table thead th {
  background: var(--black-warm);
  color: var(--gold-hover);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gold-faint);
  white-space: nowrap;
}
.log-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--gold-glow);
  vertical-align: top;
  color: var(--gold-soft);
}
.log-table tbody tr:last-child td { border-bottom: none; }
.log-table tbody tr:hover { background: rgba(212, 175, 55, 0.04); }

.log-col-time { white-space: nowrap; color: var(--gold-dim); }
.log-col-user { min-width: 160px; text-align: center; }
.log-col-user .log-user-name { display: block; color: var(--gold-hover); }
.log-col-user .log-user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.log-col-user .log-user-icon-error {
  color: var(--gold);
}
.log-col-user .log-user-role {
  display: inline-block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  border: 1px solid var(--gold-glow);
  border-radius: 2px;
  padding: 1px 6px;
}
.log-col-action { white-space: nowrap; color: var(--gold); }
.log-col-detail { color: var(--gold-soft); min-width: 220px; }
.log-col-detail .log-mail-line {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.4;
}
.log-col-detail .log-mail-line + .log-mail-line { margin-top: 4px; }
.log-col-detail .log-mail-ic {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--gold);
}
.log-col-detail .log-mail-txt { word-break: break-word; }
.log-col-detail .log-mail-err { color: var(--gold-soft); }
.log-col-detail .log-mail-err .log-mail-ic { color: var(--gold); }
.log-col-ip { color: var(--gold-dim); font-size: 10px; }
.log-col-ip .log-ip-addr {
  font-family: var(--mono, ui-monospace, monospace);
  word-break: break-all;
}
.log-col-ip .log-ip-kind {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: 1px;
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
  color: var(--gold-dim);
  vertical-align: middle;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .log-filter-field { min-width: 0; flex: 1; }
  .log-table { font-size: 13px; }
  .log-table thead th,
  .log-table tbody td { padding: 10px 10px; }
}

/* ============================================================
   PŘIPOMÍNKA ČEKAJÍCÍCH ÚKOLŮ — modal po přihlášení + periodicky
   ============================================================ */
.task-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
  animation: task-modal-fade 0.25s ease;
}
.task-modal[hidden] { display: none; }
@keyframes task-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.task-modal-box {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(160deg, #181206, var(--black-warm) 55%);
  border: 2px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--gold-glow), 0 0 60px rgba(212, 175, 55, 0.18);
  padding: 28px 26px 22px;
  animation: task-modal-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes task-modal-pop {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.task-modal-head {
  text-align: center;
  margin-bottom: 22px;
}
.task-modal-bell {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
  animation: task-bell-ring 1.4s ease 0.3s 2;
  transform-origin: 50% 0;
  display: inline-block;
}
@keyframes task-bell-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-5deg); }
}
.task-modal-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-hover);
  margin: 0 0 8px;
  font-weight: 600;
}
.task-modal-sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gold-soft);
  margin: 0;
}
.task-modal-sub strong { color: var(--gold-light); }

.task-modal-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.task-modal-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--gold-faint);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.05);
  transition: border-color 0.25s, background 0.25s;
}
.task-modal-item:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.09);
}
.task-modal-item-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.task-modal-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.task-modal-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-hover);
}
.task-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--gold);
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.task-modal-item-detail {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--gold-dim);
  line-height: 1.4;
}
.task-modal-go {
  flex-shrink: 0;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--black);
  padding: 9px 16px;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s;
}
.task-modal-go:hover { background: var(--gold-hover); }

.task-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.task-modal-later,
.task-modal-dismiss {
  padding: 11px 22px;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.task-modal-later {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.task-modal-later:hover {
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold-hover);
}
.task-modal-dismiss {
  background: transparent;
  border: 1px solid var(--gold-faint);
  color: var(--gold-dim);
}
.task-modal-dismiss:hover {
  border-color: var(--gold-soft);
  color: var(--gold-soft);
}

@media (max-width: 560px) {
  .task-modal-box { padding: 24px 18px 18px; }
  .task-modal-title { font-size: 19px; }
  .task-modal-item {
    flex-wrap: wrap;
  }
  .task-modal-go {
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }
  .task-modal-actions { flex-direction: column; }
  .task-modal-later,
  .task-modal-dismiss { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .task-modal, .task-modal-box, .task-modal-bell { animation: none; }
}

/* ============================================================
   NASTAVENÍ KLUBU — OTEVÍRACÍ DOBA
   ============================================================ */
.settings-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 0 40px;
}
.hours-form { margin-top: 8px; }

/* Barevné skupiny prostorů (jemné tónované pozadí):
   Horní patro = žlutá, Zahrádka = zelená, Spodní patro = oranžová (DJ). */
:root {
  --hours-top-bg:      rgba(212, 175, 55, 0.10);   /* žlutá  */
  --hours-top-line:    rgba(212, 175, 55, 0.45);
  --hours-garden-bg:   rgba(95, 181, 106, 0.10);   /* zelená */
  --hours-garden-line: rgba(95, 181, 106, 0.45);
  --hours-bottom-bg:   rgba(214, 134, 46, 0.12);   /* oranžová */
  --hours-bottom-line: rgba(214, 134, 46, 0.50);
}

.hours-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gold-faint);
  background: var(--black-warm);
}
.hours-edit-table {
  width: auto;
  min-width: 100%;
  border-collapse: separate;   /* separate kvůli mezerám/oddělovačům sloupců */
  border-spacing: 0;
  font-family: var(--sans);
}

/* ===== Oddělovač mezi prostory (mezera v barvě pozadí dnů) ===== */
.hours-spacer {
  width: 16px;
  min-width: 16px;
  padding: 0;
  background: var(--black-warm);   /* stejné jako pozadí sloupce se dny */
  border: none;
}

/* ===== Záhlaví ===== */
.hours-edit-table thead th {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 8px;
  text-align: center;
  background: var(--black-warm);
}
.hours-space-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-hover);
  border-bottom: 2px solid var(--gold-glow);
}
.hours-edit-table thead .hours-subhead th {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--gold-dim);
  font-weight: 400;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gold-glow);
}
.hours-edit-table .hours-day-col {
  text-align: left;
  color: var(--gold-hover);
  font-size: 12px;
  vertical-align: middle;
  padding-left: 12px;
  width: 56px;
  min-width: 56px;
}

/* Barevné tónování sloupců (záhlaví i buňky).
   Barvy jsou poloprůhledné, ale sticky záhlaví nesmí prosvítat scrollovaný
   obsah — proto je vykreslíme přes neprůhledný základ (black-warm) pomocí
   dvou vrstev v background (gradient = barva, pak plná barva pozadí). */
.hours-col-top {
  background:
    linear-gradient(var(--hours-top-bg), var(--hours-top-bg)),
    var(--black-warm) !important;
}
.hours-col-garden {
  background:
    linear-gradient(var(--hours-garden-bg), var(--hours-garden-bg)),
    var(--black-warm) !important;
}
.hours-col-bottom {
  background:
    linear-gradient(var(--hours-bottom-bg), var(--hours-bottom-bg)),
    var(--black-warm) !important;
}
.hours-space-head.hours-col-top    { border-bottom-color: var(--hours-top-line); }
.hours-space-head.hours-col-garden { border-bottom-color: var(--hours-garden-line); }
.hours-space-head.hours-col-bottom { border-bottom-color: var(--hours-bottom-line); }

/* ===== Tělo ===== */
.hours-edit-table tbody th.hours-day-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--gold-soft);
  text-align: left;
  padding: 12px 8px 12px 12px;
  white-space: nowrap;
  width: 56px;
  min-width: 56px;
  border-bottom: 1px solid var(--gold-glow);
  background: var(--black-warm);
}
.hours-edit-table tbody tr:last-child th,
.hours-edit-table tbody tr:last-child td { border-bottom: none; }
.hours-cell {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--gold-glow);
  width: 128px;
}

/* ===== Pole s ikonou hodin — větší, výraznější ===== */
.hours-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hours-input-ic {
  position: absolute;
  left: 12px;
  color: var(--gold);
  opacity: 0.75;
  pointer-events: none;
}
.hours-input {
  width: 116px;
  padding: 12px 30px 12px 30px;   /* symetrický padding → čas vycentrovaný v ploše za ikonou */
  background: var(--black);
  border: 1px solid var(--gold-faint);
  color: var(--gold-hover);
  font-family: var(--sans) !important;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-align: center;
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hours-input::placeholder { color: var(--gold-dim); opacity: 0.55; }
.hours-input:hover { border-color: var(--gold); }
.hours-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-glow);
}
.hours-form-actions {
  margin-top: 24px;
  text-align: center;
}

/* ============================================================
   STICKY — fixní záhlaví (prostory + Od/Do) a sloupec se dny.
   Scroll-kontejner je .hours-table-wrap (overflow-x:auto), takže
   sticky se opírá o JEHO okraje: top:0 = horní okraj wrapperu,
   left:0 = levý okraj. Při vodorovném scrollu drží sloupec se dny
   vlevo a záhlaví prostorů zůstává nahoře nad buňkami.
   ============================================================ */
.hours-edit-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}
.hours-edit-table thead .hours-subhead th {
  top: 44px;   /* pod prvním řádkem záhlaví (uvnitř wrapperu) */
  z-index: 3;
}
/* První sloupec (Den / názvy dnů) — přilepený vlevo */
.hours-edit-table .hours-day-col,
.hours-edit-table tbody th.hours-day-name {
  position: sticky;
  left: 0;
  z-index: 2;
}
/* Roh (Den) musí být nad vším — drží se i vlevo i nahoře */
.hours-edit-table .hours-day-col { z-index: 5; }

@media (max-width: 600px) {
  .hours-table-wrap {
    overflow-y: auto;
    max-height: 70vh;   /* vlastní svislý scroll → sticky záhlaví drží nahoře */
  }
  .hours-input { width: 104px; padding: 11px 26px 11px 26px; font-size: 15px; }
  .hours-cell { width: 114px; padding: 8px 5px; }
  .hours-input-ic { left: 9px; }
  .hours-edit-table thead th { padding: 11px 6px; }
  .hours-edit-table thead .hours-subhead th { top: 42px; }
  .hours-spacer { width: 12px; min-width: 12px; }
}

/* ============================================================
   BLOKY FORMULÁŘŮ (běžná / letní doba) + letní období
   ============================================================ */
.hours-block {
  margin-bottom: 40px;
}
.hours-block:last-child { margin-bottom: 0; }
.hours-block-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold-glow);
}
.hours-block-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-hover);
  font-weight: 600;
  margin: 0;
}
.hours-block-validity {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--gold-dim);
}
.hours-validity-note {
  font-style: italic;
  opacity: 0.8;
}

/* Letní období — dvě pole (od / do) s výběrem v kalendáři.
   Desktop: vedle sebe na řádku. Mobil: pod sebou (flex-wrap). */
.hours-period {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 18px;
  padding: 16px;
  background: var(--hours-bottom-bg, rgba(214, 134, 46, 0.10));
  border: 1px solid var(--gold-faint);
}
.hours-period-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;   /* na úzku se zalomí pod sebe, na šířku vedle sebe */
  min-width: 0;
}
.hours-period-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
}
.hours-period-pickwrap {
  width: 100%;
}
.hours-period-picker {
  width: 100% !important;     /* roztáhne se na šířku položky */
  cursor: pointer;
}

/* ============================================================
   FLATPICKR — sladění do zlato-černého vzhledu, kompaktní picker
   ============================================================ */
.flatpickr-calendar {
  background: var(--black-warm) !important;
  border: 1px solid var(--gold-faint) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
  font-family: var(--sans) !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none !important; }

/* ===== Datepicker (kalendář pro letní období) — zlato-černý vzhled ===== */
.flatpickr-months,
.flatpickr-month {
  background: var(--black-warm) !important;
  color: var(--gold-hover) !important;
  fill: var(--gold-hover) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--gold-hover) !important;
}
.flatpickr-monthDropdown-months { background: var(--black-warm) !important; }
.flatpickr-monthDropdown-month { background: var(--black-warm) !important; color: var(--gold-hover) !important; }
.flatpickr-weekday {
  color: var(--gold-dim) !important;
  background: var(--black-warm) !important;
  font-weight: 500 !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--gold) !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--gold-hover) !important; }
.flatpickr-days, .dayContainer { background: var(--black-warm) !important; }
.flatpickr-day {
  color: var(--gold-soft) !important;
  border-radius: 0 !important;
}
.flatpickr-day:hover {
  background: rgba(212, 175, 55, 0.12) !important;
  border-color: transparent !important;
}
.flatpickr-day.today {
  border-color: var(--gold) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--black) !important;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--gold-dim) !important;
  opacity: 0.5;
}

/* Kompaktní time picker — nižší, menší font, těsná mezera hodiny:minuty */
.flatpickr-calendar.hasTime {
  width: 170px !important;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 38px !important;
  max-height: 38px !important;
  border: none !important;
}
.flatpickr-time {
  background: transparent !important;
  padding: 0 !important;
}
.flatpickr-time .numInputWrapper {
  width: 46% !important;
  flex: 0 0 auto !important;
  height: 38px !important;
}
.flatpickr-time input {
  color: var(--gold-hover) !important;
  font-size: 15px !important;
  font-family: var(--sans) !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus { background: rgba(212, 175, 55, 0.08) !important; }
.flatpickr-time .flatpickr-time-separator {
  color: var(--gold) !important;
  width: 8% !important;
  line-height: 38px !important;
  height: 38px !important;
  font-size: 15px !important;
}
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--gold) !important; }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--gold) !important; }
.flatpickr-time .numInputWrapper:hover { background: rgba(212, 175, 55, 0.06) !important; }