/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT THEME (default)
   Change data-theme="dark" on <html> to switch themes globally.
   Every colour decision in the app flows through these variables.
   ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --app-vvh: 100vh;
  --visual-viewport-top: 0px;
  --app-sticky-top: 0px;
  --keyboard-inset: 0px;
  --safe-bottom-inset: env(safe-area-inset-bottom, 0px);
  --mobile-nav-reserve: calc(11rem + var(--keyboard-inset) + var(--safe-bottom-inset));
  /* ── Typography scale ── */
  --fs-xs:   clamp(0.70rem, 0.66rem + 0.2vw, 0.75rem);
  --fs-sm:   clamp(0.80rem, 0.76rem + 0.2vw, 0.875rem);
  --fs-base: clamp(0.875rem, 0.83rem + 0.25vw, 1rem);
  --fs-md:   clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --fs-2xl:  clamp(1.625rem, 1.4rem + 0.9vw, 2.25rem);

  /* ── Accent (brand gold — stays the same in both themes) ── */
  --accent:       #b39a5f;
  --accent-hover: #a1874e;
  --accent-dark:  #8f7340;
  --accent-ring:  rgba(179, 154, 95, 0.20);
  --accent-bg:    rgba(179, 154, 95, 0.10);
  /* legacy aliases */
  --accent-gold:  #b39a5f;
  --gold:         #b39a5f;

  /* Page Directory brand navy — a fixed color (not theme-adaptive), used
     for the directory tile icons, expanded-card text, and hover accents. */
  --secondary: #1e293b;

  /* ── Backgrounds ── */
  --bg-page:     #f8fafc;   /* page content area          */
  --bg-card:     #ffffff;   /* cards, panels              */
  --bg-sidebar:  #ffffff;   /* left nav                   */
  --bg-header:   #ffffff;   /* top header bar             */
  --bg-input:    #f8fafc;   /* form inputs                */
  --bg-muted:    #f1f5f9;   /* slate-100 subtle sections  */
  --bg-elevated: #ffffff;   /* modals, dropdowns          */
  --bg-login:    #0f172a;   /* login screen               */
  --bg-overlay:  rgba(15, 23, 42, 0.50); /* modal backdrops */
  /* legacy */
  --bg-dark:     #333f48;
  --bg-color:    #f8fafc;
  --bg-light:    #f8fafc;
  --light-bg:    #f1f5f9;
  --card-bg:     #ffffff;
  --input-bg:    #f8fafc;
  --surface-white: #ffffff;
  --primary-color: #333f48;

  /* ── Borders ── */
  --border-card:   #e2e8f0;   /* slate-200 — main visible border   */
  --border-subtle: #f1f5f9;   /* slate-100 — inner / row dividers  */
  --border-input:  #e2e8f0;   /* form field borders                */
  --border-focus:  #b39a5f;   /* focused field ring colour         */
  /* legacy */
  --border-light:  #e2e8f0;
  --border-color:  #e2e8f0;
  --border-radius: 12px;

  /* ── Text ── */
  --text-primary:   #0f172a;   /* headings / strong labels   */
  --text-secondary: #334155;   /* body text                  */
  --text-muted:     #64748b;   /* descriptions, hints        */
  --text-faint:     #94a3b8;   /* placeholders, meta         */
  --text-on-accent: white;   /* text placed on gold bg     */
  /* legacy */
  --text-main:  #0f172a;
  --text-body:  #334155;
  --text-dark:  #0f172a;
  --text-light: #ffffff;
  --slate:      #333f48;
  --text-muted: #64748b;

  /* ── Shadows ── */
  --card-shadow:       0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 6px 18px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-float:      0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-header:     0 1px 3px rgba(0,0,0,0.06);
  --shadow-mobile-nav: 0 -2px 12px rgba(0,0,0,0.07);

  /* ── Sidebar / Nav ── */
  --nav-text:       #334155;              /* inactive label — slate-700  */
  --nav-icon:       #94a3b8;              /* inactive icon  — slate-400  */
  --nav-active-text: #b39a5f;             /* active label — gold         */
  --nav-active-bg:  rgba(179,154,95,0.12);/* active pill bg              */
  --nav-section:    #94a3b8;              /* section group headers       */

  /* ── Status colours (shared both themes) ── */
  --color-success:  #10b981;
  --color-warning:  #f59e0b;
  --color-danger:   #dc2626;
  --color-info:     #3b82f6;
  --danger-color:   #dc2626;

  /* ── Alerts ── */
  --alert-bg:   #fffbeb;
  --alert-text: #b45309;

  /* ── Page header bar (injected per-page) ── */
  --page-header-bg:     #ffffff;
  --page-header-border: #e2e8f0;
  --page-header-shadow: 0 1px 0 0 #f1f5f9;
}

@supports (height: 100dvh) {
  :root {
    --app-vvh: 100dvh;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   Set data-theme="dark" on <html> to activate.
   Only the variables that change are listed here.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;
  /* Backgrounds */
  --bg-page:     #0f172a;
  --bg-card:     #1e293b;
  --bg-sidebar:  #192236;
  --bg-header:   #1e293b;
  --bg-input:    #0f172a;
  --bg-muted:    #263347;
  --bg-elevated: #1e293b;
  --bg-login:    #060d18;
  --bg-overlay:  rgba(0, 0, 0, 0.65);
  /* legacy aliases */
  --bg-color:    #0f172a;
  --bg-light:    #263347;
  --light-bg:    #263347;
  --card-bg:     #1e293b;
  --input-bg:    #0f172a;
  --surface-white: #1e293b;

  /* Borders */
  --border-card:   #334155;
  --border-subtle: #263347;
  --border-input:  #334155;
  /* legacy */
  --border-light:  #334155;
  --border-color:  #334155;

  /* Text */
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  --text-faint:     #64748b;
  --text-on-accent: white;
  /* legacy */
  --text-main:  #f1f5f9;
  --text-body:  #cbd5e1;
  --text-dark:  #f1f5f9;

  /* Shadows — stronger opacity needed on dark */
  --card-shadow:       0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --card-shadow-hover: 0 6px 18px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-float:      0 8px 24px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.30);
  --shadow-header:     0 1px 3px rgba(0,0,0,0.25);
  --shadow-mobile-nav: 0 -2px 12px rgba(0,0,0,0.30);

  /* Nav */
  --nav-text:      #cbd5e1;
  --nav-icon:      #64748b;
  --nav-active-bg: rgba(179, 154, 95, 0.18);

  /* Page header */
  --page-header-bg:     #1e293b;
  --page-header-border: #334155;
  --page-header-shadow: 0 1px 0 0 #263347;

  /* Alerts */
  --alert-bg:   #292219;
  --alert-text: #e9a84a;
}

/* --- Premium Tinted Icon Colors --- */
/* These classes override the default background/color of .menu-icon */

/* Optional: Make the icon inside the circle scale up slightly on hover for a high-end feel */

html {
    font-size: clamp(14px, 13px + 0.35vw, 16px);
    height: 100%;
    overflow: hidden;
}

/* IMPORTANT: html/body are pinned to exactly the viewport height and never
   scroll themselves. #app-shell below is locked to height:100vh (not just
   min-height), so its flex-1 middle row (aside + #view-content) is forced
   to a definite, capped height rather than growing to fit its content.
   #view-content's own `overflow-y-auto` (see index/home.html markup) is
   then the ONLY element that actually scrolls — which is what
   `.rk-page-header`'s `position: sticky` (and `.rk-sidebar`'s
   `height: calc(100vh - 57px)` below) are both written to stick within.
   Without this cap, once page content got tall enough to overflow, the
   whole document/window scrolled instead of #view-content, and any
   sticky header inside it just scrolled away with everything else. */
body {
    font-family: 'JetBrains Mono', sans-serif;
    background-color: var(--text-main);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: var(--fs-base);
    line-height: 1.5;
}

/* The app shell itself must have a definite (not just minimum) height so
   flexbox actually caps its children instead of letting them grow with
   content — see the html/body comment above. */
#app-shell {
    height: var(--app-vvh);
    min-height: 0;
    overflow: hidden;
    position: fixed;
    inset: 0;
    width: 100%;
}
#login-shell {
    height: var(--app-vvh);
    overflow-y: auto;
    position: fixed;
    inset: 0;
    width: 100%;
}

/* style.css — ADD: generic resets for any bare heading/paragraph tags not 
   already wrapped in Tailwind classes (form-group labels, modal headers, 
   legacy markdown-ish content, etc.) so they fall on the same scale */
h1 { font-size: var(--fs-2xl); line-height: 1.2; font-weight: 800; margin: 0; }
h2 { font-size: var(--fs-xl);  line-height: 1.25; font-weight: 800; margin: 0; }
h3 { font-size: var(--fs-lg);  line-height: 1.3; font-weight: 700; margin: 0; }
h4 { font-size: var(--fs-md);  line-height: 1.35; font-weight: 700; margin: 0; }
p  { font-size: var(--fs-base); line-height: 1.55; margin: 0; }
small { font-size: var(--fs-xs); }

.brand-header {
  display: grid;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 20px;
  width: 100%;
}

.brand-logo {
  max-width: 100%;
  width: auto;
  height: auto;
  background: white;
  margin: 0 auto;
  display: block;
  max-height: 35px;
  object-fit: contain;
}

.login-logo {
    max-height: 200px;
    height: 200px;
    width: 200px;
  }

.app-title {
  color: var(--accent-gold);
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 400;
}

/* ── Header logo (dashboard / #home page header) — fluid, no breakpoint jump ── */
.dashboard-logo {
  height: clamp(40px, 8vw, 45px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ── Shared brand block: logo + app name + tagline (login / change-password) ── */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.auth-brand-logo {
  height: clamp(56px, 16vw, 100px);
  width: auto;
  max-width: 80%;
  object-fit: contain;
  margin: 0 auto 6px;
  display: block;
}
.auth-brand-name {
  /* dominant element on the card — everything else on the page is sized
     to sit underneath this, not compete with it */
  font-size: clamp(1.35rem, 5.5vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #334155;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0;
}
.auth-brand-tagline {
  /* scales at the same rate as .auth-brand-name (same vw coefficient,
     ~42% of its size at both ends of the clamp) so the pair grows/shrinks together */
  font-size: clamp(0.62rem, 2.3vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-top: 1px;
}

.container {
  background: var(--surface-white);
  width: 100%;
  max-width: 800px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  padding: 30px;
  box-sizing: border-box;
  animation: fadeIn 0.4s ease-out;
  margin: 0 auto;   /* ADDED — replaces the centering body used to do */
}

@keyframes fadeIn{

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.fav-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.1rem;
  color: var(--border-light);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}
.fav-icon.active {
  color: var(--accent-gold);
}

/* NOTE: a redundant, unconditional `.hidden { display: none; }` rule used to
   live here. It duplicated Tailwind's own .hidden utility (css/tailwind.css)
   but — because style.css loads AFTER tailwind.css in every view — it beat
   ANY of Tailwind's responsive variants (.lg\:flex, .md\:block, .sm\:hidden,
   etc.) at equal specificity by pure source order, regardless of whether the
   variant rule was inside a @media block that was actually active. That
   silently broke every `hidden lg:flex` / `hidden md:block` pattern in the
   app (most recently: the desktop sidebar, id="desktop-sidebar-menu"'s
   parent .rk-sidebar, stuck at display:none at any viewport width). Removed
   — Tailwind's own .hidden already covers this with correct responsive
   override behavior. See also: the page-search-btn/close and mobile search
   bar visibility bugs fixed earlier this project, which were the same root
   cause in a different spot. */

.login-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 25px;
  font-size: 0.95rem;
}

.spending-card {
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
}

.spending-icon {
  min-width: 50px;
  height: 50px;
  background: var(--surface-white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  color: var(--text-main);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  margin-right: 20px;
}

.spending-details {
  display: flex;
  flex-direction: column;
}

.spending-details h4 {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.spending-details .amount {
  margin: 5px 0 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-gold);
}

.info-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--input-bg);
  padding: 15px;
  border-radius: 8px;
  margin-top: 25px;
  text-align: center;
}

.form-header-bar {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-light);
}

.back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 10px 15px 10px 0;
  margin-right: 10px;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: var(--accent-gold);
}

.form-header-bar h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-main);
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.form-row .form-group {
  flex: 1;
  min-width: 140px;
}

label {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-main);
}

label i {
  color: var(--accent-gold);
  margin-right: 8px;
  width: 14px;
  text-align: center;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  /*padding: 10px 14px;*/
  min-height: 42px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background-color: var(--input-bg);
  color: var(--text-main);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
  background-color: var(--surface-white);
  box-shadow: 0 0 0 3px rgba(168, 153, 104, 0.15);
}

.btn {
  width: 100%;
  min-height: 48px;
  background: var(--accent-gold);
  color: var(--surface-white);
  border: none;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: inherit;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}


.btn:hover {
  background: var(--accent-hover);
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: var(--input-bg);
  border-radius: 8px;
  border: 1px dashed var(--border-light);
  margin-bottom: 10px;
  flex-direction: row;
}

.checkbox-group input {
  accent-color: var(--accent-gold);
  width: 20px;
  height: 20px;
}

.step {
  position: relative;
  margin-bottom: 25px;
  padding-left: 35px;
}

.step::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
  color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -5px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-white);
  border: 3px solid var(--border-light);
  z-index: 1;
  transition: all 0.3s ease;
}

.step.pending::before {
  border-color: var(--text-main);
  background: var(--input-bg);
  color: var(--text-main);
  content: '\f141';
}

.step h4 {
  margin: 0 0 4px 0;
  font-size: 0.8rem;
  color: var(--text-main);
}

.step p {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}


#toast-container {
  position: fixed;
  top: env(safe-area-inset-top, 20px);
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  width: auto;
  max-width: calc(100vw - 40px);
}

.toast {
  width: 320px;
  max-width: 100%;
  padding: 14px 18px;
  background: white;
  color: var(--text-main);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  pointer-events: auto;
  border-left: 5px solid var(--accent-gold);
  animation: toastSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  transition: all 0.3s ease;
}

.toast.success {
  border-left-color: #10b981;
}

.toast.error {
  border-left-color: #ef4444;
}

.toast.info {
  border-left-color: var(--accent-gold);
}

@keyframes toastSlideIn{

    from {
        transform: translateX(110%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }

}

.toast.fade-out {
  transform: translateX(110%);
  opacity: 0;
}

.step small {
  display: inline-block;
  margin-top: 6px;
  font-weight: 500;
  background: var(--input-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.events-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.seat-tracker {
  margin: 15px 0;
}

.seat-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--text-main);
}

.progress-bar {
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent-gold);
  border-radius: 4px;
}

.btn-small {
  width: auto;
  min-height: 40px;
  padding: 8px 20px;
  margin-top: 0;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--accent-gold);
  color: var(--text-main);
  margin-top: 15px;
}

.btn-outline:hover {
  background: var(--accent-gold);
  color: var(--surface-white);
}

.sc-info p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.sc-info h2 {
  margin: 5px 0;
  font-size: 2.2rem;
  color: var(--accent-gold);
  font-weight: 600;
  letter-spacing: 1px;
}

.sc-info small {
  font-size: 0.75rem;
  opacity: 0.7;
}


.announce-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-gold);
  letter-spacing: 1px;
}

.announce-tag.alert {
  color: #b91c1c;
}

.announce-card h4 {
  margin: 8px 0;
  font-size: 1.05rem;
  color: var(--text-main);
}

.announce-card p {
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.5;
}

.announce-card small {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.promo-card {
  display: flex;
  gap: 15px;
  align-items: center;
}

.promo-avatar {
  width: 50px;
  height: 50px;
  background: var(--input-bg);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: var(--accent-gold);
}

.form-instructions {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 15px;
}

.category-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 15px;
}

.cat-option input {
  display: none;
}

.cat-box {
  border: 2px solid var(--border-light);
  background: var(--input-bg);
  border-radius: 12px;
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  gap: 25px;
  color: var(--text-muted);
  width: 100%;
  height: 25px;
}

.cat-box i {
  font-size: 1.8rem;
}

.cat-box span {
  font-size: 0.85rem;
  font-weight: 500;
}

.cat-option input:checked + .cat-box {
  border-color: var(--accent-gold);
  background: rgba(168, 153, 104, 0.05);
  color: var(--accent-gold);
}

.file-upload-area {
  border: 2px dashed var(--border-color);
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  background: var(--input-bg);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-muted);
}

.file-upload-area:hover {
  border-color: var(--primary-color);
  background: var(--surface-white);
  color: var(--primary-color);
}

.upload-icon {
  font-size: 2rem;
  color: var(--border-light);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.file-upload-area:hover .upload-icon {
  color: var(--accent-gold);
}

.file-upload-area p {
  margin: 0 0 5px 0;
  font-weight: 500;
  color: var(--text-main);
}

.upload-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.file-name-display {
  font-size: 0.85rem;
  color: var(--accent-gold);
  margin-top: 10px;
  text-align: center;
  font-weight: 500;
}


.search-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 5px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  flex-grow: 1;
}

.search-box {
  display: flex;
  align-items: center;
  position: relative;
  background: transparent;
  border-radius: 8px;
  padding: 0;
  transition: all 0.3s ease;
  position: relative;
  width: 100%;
  /* Several views set an inline width (e.g. width:260px) on this class for
     desktop layout. max-width here still caps it against the containing
     block on narrow viewports (max-width always wins over a smaller width,
     regardless of inline vs. class origin), preventing horizontal overflow
     on phones as small as ~320px wide. */
  max-width: 100%;
  box-sizing: border-box;
}

.search-box:focus-within {
  border-color: var(--gold);
}

.search-box input:focus, select:focus, textarea:focus {
  box-shadow: none;
}

.search-icon {
  color: var(--text-muted);
  margin-right: 12px;
  position: absolute;
  left: 15px;
  font-size: 0.9rem;
}

.search-box:focus-within .search-icon {
  color: var(--gold);
}

#searchInput {
  border: none;
  outline: none;
  width: 100%;
  font-size: 1rem;
  color: var(--text-dark);
  background: transparent;
}

#searchInput::placeholder {
  color: #9aa5b1;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 8px;
  padding: 8px 0;
  list-style: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 101;
  border: 1px solid var(--border-color);
  width: 100%;
  margin: 0;
}

.search-results.hidden {
  display: none;
}

.search-result-item a {
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--text-dark);
  border-bottom: 1px solid #f0f2f5;
  transition: background-color 0.2s ease;
}

.search-result-item:last-child a {
  border-bottom: none;
}

.search-result-item a:hover {
  background-color: #fcfbf8;
  border-left: 4px solid var(--gold);
  padding-left: 16px;
}

.result-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 4px;
}

.result-desc {
  font-size: 0.85rem;
  color: #7b8794;
}

.no-results {
  padding: 15px 20px;
  color: #7b8794;
  font-style: italic;
  text-align: center;
}

.top-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.04);
    margin: -30px -30px 20px -30px;
    padding: 5px 30px;
    border-bottom: 1px solid white;
    border-radius: 20px 20px 0 0;
    gap: 15px;
}

.brand-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 0.95rem;
  color: var(--text-main);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.search-box input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.search-results li {
  padding: 10px 20px;
  font-size: 0.9rem;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-results li:hover {
  background-color: var(--bg-color);
  color: var(--primary-color);
}

.user-profile-mini {
  position: relative;
  flex-shrink: 0;
}

.user-profile-mini .avatar {
  width: 40px;
  height: 40px;
  background-color: var(--accent-gold);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
  user-select: none;
}

.user-profile-mini .avatar:hover {
  box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--accent-gold);
  border: 1px solid white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 190px;
  display: none;
  flex-direction: column;
  z-index: 1005;
  overflow: hidden;
}

.profile-dropdown.active {
  display: flex;
}

.profile-dropdown a {
  padding: 12px 16px;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s, color 0.2s;
}

.profile-dropdown a:hover {
  background-color: var(--bg-color);
  color: var(--primary-color);
}

.profile-dropdown a.logout-btn:hover {
  color: var(--danger-color);
}

.profile-dropdown a.logout-btn:hover i {
  color: var(--danger-color);
}

.filter-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
}

.filter-icon {
  position: absolute;
  left: 15px;
  z-index: 10;
  color: var(--accent-gold);
  font-size: 0.9rem;
  pointer-events: none;
}

.hero-select-group {
  background: var(--bg-dark);
  padding: 15px 20px;
  border-radius: 20px;
  border: 1px solid rgba(67, 97, 238, 0.2);
  margin-bottom: 25px;
}

.hero-select-group label {
  color: white;
  font-size: 1rem;
  margin-bottom: 10px;
}

#events-page {
  background: var(--card-bg);
  padding: 25px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  max-width: 800px;
  margin: 0 auto 30px auto;
}

.error-message {
  color: var(--danger-color);
  font-size: 0.85rem;
  margin-top: 5px;
  display: none;
}

[post-inactive-overlay] {
  z-index: 10;
  pointer-events: none;
}

.card-actions {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 8px;
  z-index: 20;
}

.card-actions button {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-main);
  font-size: 0.8rem;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-actions button:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.card-actions button.btn-delete:hover {
  background: var(--danger-color);
  border-color: var(--danger-color);
}

.post-metadata {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-metadata span {
  display: block;
}


.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 15px;
  box-sizing: border-box;
}

.modal-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 10;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-main);
}

.close-modal {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s;
}

.close-modal:hover {
  color: var(--danger-color);
}

.modal-body {
  padding: 25px;
}

.table-responsive {
  overflow-x: auto;
  margin-bottom: 15px;
}

.reg-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}

.reg-table th {
  text-align: left;
  padding: 12px;
  background: #f8f9fa;
  border-bottom: 2px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
}

.reg-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.drag-handle {
  cursor: grab;
  color: var(--text-muted);
  padding: 5px;
}

.drag-handle:active {
  cursor: grabbing;
}

.reg-row.dragging {
  opacity: 0.5;
  background: #f1f3f5;
}

.timeslot-dropdown {
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.85rem;
}

@media (min-width: 768px) {
  .menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (min-width: 1024px) {
  .menu-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (min-width: 768px) {
  .menu-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (min-width: 1024px) {
  .menu-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 480px) {
  body {
    padding: 10px;
  }
  
  .container {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  #toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999 !important;
    pointer-events: none;
  }
  
  .toast {
    display: flex !important;
    visibility: visible !important;
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .category-selector {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (min-width: 1024px) {
  .category-selector {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (max-width: 600px) {
  .top-header-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .top-header-bar {
    margin: -20px -20px 20px -20px;
    padding: 15px 20px;
    flex-wrap: wrap;
  }
  
  .search-container {
    order: 3;
    max-width: 100%;
    margin-top: 5px;
    position: relative;
  }
}

@media (max-width: 600px) {
  .top-header-bar {
    margin: -20px -20px 20px -20px;
    padding: 12px 15px;
    flex-wrap: nowrap;
    gap: 10px;
  }
  
  .brand-logo {
    max-height: 24px;
  }
    
  .login-logo {
    max-height: 100px;
    height: 100px;
    width: 100px;
  }
  
  .search-container {
    order: initial;
    margin-top: 0;
    max-width: none;
    position: relative;
  }
  
  .search-box input {
    padding: 8px 12px 8px 30px;
    font-size: 0.85rem;
  }
  
  .search-icon {
    left: 10px;
    font-size: 0.8rem;
  }
  
  .user-profile-mini .avatar {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  .top-header-bar {
    margin: -20px -20px 20px -20px;
    padding: 10px 15px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  
  .brand-container {
    flex: 0 0 auto !important;
    width: auto;
  }
  
  .brand-logo {
    max-height: 24px;
    width: auto;
  }

.login-logo {
    max-height: 100px;
    height: 100px;
    width: 100px;
  }
  
  .search-container {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  
  .search-box input {
    width: 100%;
    padding: 8px 12px 8px 30px;
    font-size: 0.85rem;
  }
  
  .user-profile-mini {
    flex: 0 0 auto !important;
  }
  
  .user-profile-mini .avatar {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  
  .profile-dropdown {
    top: calc(100% + 5px);
    width: 160px;
  }
}



/* Ensuring all text/buttons stay sharp and on top */
.welcome-info, .welcome-actions {
    position: relative;
    z-index: 2;
}

#greet-name {
    font-weight: 600;
    color: #63b3ed; /* Adding a splash of color makes it "flashy" */
}

#change_pass {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--surface-white);
padding: 10px 15px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
}

#logoutbtn {
background: rgba(220, 53, 69);
border: 1px solid rgba(220, 53, 69);
color: #ffffff;
padding: 10px 15px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
margin-top: 4px;
}


/* ~ END OF HOME ~ */




/* ~ END OF VIEWS ~ */


/* SHARED RESPONSIVE SURFACES */

.empty-state,
.empty-state-panel {
  color: var(--text-muted);
  text-align: center;
}

.empty-state-panel {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: var(--input-bg);
  border: 1px dashed var(--border-light);
  border-radius: var(--border-radius);
  padding: 28px;
}

.empty-state-panel i {
  color: var(--accent-gold);
  font-size: 2.2rem;
}

.empty-state-panel h3,
.empty-state-panel p {
  margin: 0;
}

.forms-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 22px;
  align-items: start;
}

.form-panel {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 0 6px 18px rgba(51, 63, 72, 0.06);
}

.panel-heading-row,
.approval-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-heading-row .section-title {
  margin: 0 0 15px 0;
  flex: 1;
}

.stack-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* style.css — REPLACE .request-card / .approval-card with the new white-card look */
.request-card,
.approval-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.request-card:hover,
.approval-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.approval-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.request-card strong,
.approval-card strong {
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 800;
}

.request-card span,
.approval-card span,
.approval-card small {
    color: #64748b;
    font-size: 0.8rem;
}

.approval-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px dashed #f1f5f9;
    padding-top: 14px;
    margin-top: 4px;
}
.approval-actions .btn,
.approval-actions .btn-outline {
    width: auto;
}

.approval-summary {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #fff;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.approval-summary strong {
    color: #f3e8d2;
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 800;
}

.eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #b39a5f;
}

.approval-refresh-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.approval-refresh-btn:hover {
    background: #b39a5f;
    border-color: #b39a5f;
    color: var(--text-on-accent);
}


.btn-icon-only {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.compact-check {
  justify-content: flex-start;
  min-height: 48px;
  margin-top: 28px;
}

.compact-check label {
  margin: 0;
}

.event-card .card-actions {
  flex-wrap: wrap;
}

.event-card .card-actions button {
  min-height: 36px;
}

@media (min-width: 960px) {
  .container {
    max-width: 1040px;
  }
}

@media (max-width: 760px) {
  body {
    padding: 0;
    background: var(--surface-white);
  }

  .container {
    min-height: var(--app-vvh);
    border-radius: 0;
    box-shadow: none;
    padding: 18px;
  }

  .forms-layout,
  .request-card,
  .approval-card {
    grid-template-columns: 1fr;
  }

  .approval-actions {
    justify-content: stretch;
  }

  .approval-actions .btn,
  .approval-actions .btn-outline {
    flex: 1 1 140px;
  }

  .form-panel {
    padding: 16px;
  }

  .feed-header,
  .maintenance-action-bar,
  .notice-action-bar,
  .panel-heading-row,
  .approval-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-wrapper,
  .feed-filter,
  .notice-action-bar .btn,
  .maintenance-action-bar .btn,
  .btn-update-sc {
    width: 100%;
  }

  .event-card {
    flex-direction: column;
  }

  .event-date-badge {
    min-height: 72px;
    flex-direction: row;
    gap: 8px;
  }

  .card-actions {
    position: static;
    padding: 12px 12px 0 12px;
    justify-content: flex-end;
  }

  .modal-content {
    max-height: calc(100vh - 30px);
  }
}

@media (max-width: 520px) {
  .welcome-card {
    align-items: stretch;
  }

  .welcome-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .menu-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .top-header-bar {
    position: sticky;
    top: 0;
  }

  .search-box input {
    min-width: 0;
  }

  .sc-highlight-card,
  .promo-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .promo-avatar {
    width: 72px;
    height: 72px;
  }
}


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  THEME LAYER                                                  ║
   ║  Everything below is theme-aware.                            ║
   ║  Light values come from :root vars; dark values come from    ║
   ║  [data-theme="dark"] overrides above.                        ║
   ║  Views need ZERO individual edits — the cascade does it all. ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── Structural shell ──────────────────────────────────────────── */
body {
  background-color: var(--bg-page);
  color: var(--text-secondary);
}
#app-shell > header {
  background: var(--bg-header);
  border-bottom-color: var(--border-card);
  box-shadow: var(--shadow-header);
}
#app-shell > header h1          { color: var(--text-primary); }
#app-shell > header .text-slate-400 { color: var(--text-faint); }
#app-shell aside {
  background: var(--bg-sidebar);
  border-right-color: var(--border-card);
}
#view-content {
  background: var(--bg-page);
  container-type: inline-size;
  container-name: rk-view;
  padding-bottom: 2rem !important;
  scroll-padding-bottom: calc(var(--mobile-nav-reserve) + 1rem);
}

#view-content::after {
  content: "";
  display: block;
  height: 2rem;
  flex: 0 0 auto;
}

.rk-route-loading {
  min-height: min(420px, calc(var(--app-vvh, 100vh) - 180px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.rk-route-loading i {
  font-size: 1.4rem;
  color: var(--accent);
}

#view-content.rk-route-pending > :not(.rk-route-loading),
#login-content.rk-route-pending > :not(.rk-route-loading) {
  visibility: hidden;
}

@media (max-width: 1023px) {
  #view-content {
    padding-bottom: 1rem !important;
    scroll-padding-bottom: calc(var(--mobile-nav-reserve) + 2.5rem) !important;
  }
  #view-content::after {
    height: calc(var(--mobile-nav-reserve) + 2.5rem);
  }
}
#mobile-bottom-tabs {
  background: var(--bg-header);
  border-top-color: var(--border-card);
  box-shadow: var(--shadow-mobile-nav);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
body.keyboard-open #mobile-bottom-tabs {
  opacity: 0;
  pointer-events: none;
  transform: translateY(110%);
}
#login-shell {
  background: var(--bg-login);
}

/* ── Search bar ────────────────────────────────────────────────── */
#searchInput {
  background: var(--bg-input);
  border-color: var(--border-card);
  color: var(--text-secondary);
}
#searchInput::placeholder { color: var(--text-faint); }
#searchInput:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
#searchResults {
  background: var(--bg-elevated);
  border-color: var(--border-card);
  box-shadow: var(--shadow-float);
}
.search-result-item { color: var(--text-secondary); }
.search-result-item:hover { background: var(--bg-muted); }

/* ── Profile dropdown ─────────────────────────────────────────── */
.profile-dropdown {
  background: var(--bg-elevated);
  border-color: var(--border-card);
  box-shadow: var(--shadow-float);
}
.profile-dropdown a { color: var(--text-secondary); }
.profile-dropdown a:hover { background: var(--bg-muted); color: var(--text-primary); }

/* ── Sidebar nav ──────────────────────────────────────────────── */
.nav-section-label         { color: var(--nav-section); }
.sidebar-nav-link          { color: var(--nav-text); }
.sidebar-nav-link i.fa-solid { color: var(--nav-icon); }

/* ── Tiles (tile-compact already has border/shadow via existing CSS,
      but we restate key colour props here so they follow variables) */
.tile-compact {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--card-shadow);
  color: var(--text-secondary);
}
.tile-compact:hover {
  box-shadow: var(--card-shadow-hover);
}
.tile-title { color: var(--text-primary); }
.tile-desc  { color: var(--text-muted); }
.tile-nav-footer { color: var(--text-faint); border-top-color: var(--border-subtle); }
.tile-nav-footer:hover { color: var(--accent); }

/* ── Generic card helpers ─────────────────────────────────────── */
.card, .rkcard, .modal-inner, .dropdown-content {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--card-shadow);
}

/* ── Page header (injected by router.js) ──────────────────────── */
[data-page-header] + * { /* nothing needed — the rendered header uses Tailwind classes covered below */ }

/* ── Forms & inputs ───────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}
input::placeholder,
textarea::placeholder   { color: var(--text-faint); }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}
label { color: var(--text-muted); }

/* ── Tables ───────────────────────────────────────────────────── */
table     { color: var(--text-secondary); }
thead tr  { background: var(--bg-muted); color: var(--text-muted); }
tbody tr  { border-top-color: var(--border-subtle); }
tbody tr:hover { background: var(--bg-muted); }

/* ── Badges / pills ───────────────────────────────────────────── */
.badge    { background: var(--bg-muted); color: var(--text-muted); }

/* ── Toast / alert ────────────────────────────────────────────── */
.toast-item, .alert-box {
  background: var(--bg-elevated);
  border-color: var(--border-card);
  color: var(--text-secondary);
  box-shadow: var(--shadow-float);
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--border-card); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }



/* ╔═══════════════════════════════════════════════════════════════╗
   ║  DARK MODE — TAILWIND CLASS OVERRIDES                        ║
   ║  Views use hardcoded Tailwind classes (bg-white, text-slate- ║
   ║   800, etc.). This block overrides them globally when the     ║
   ║  dark theme is active, so not a single view file needs       ║
   ║  individual edits.                                           ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── Body/page background ─────────────────────────────────────── */
[data-theme="dark"] body                        { background-color: var(--bg-page) !important; color: var(--text-secondary) !important; }

/* ── Card / panel backgrounds ─────────────────────────────────── */
[data-theme="dark"] .bg-white                   { background-color: var(--bg-card) !important; }
[data-theme="dark"] .bg-slate-50                { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .bg-slate-100               { background-color: var(--bg-elevated) !important; }
[data-theme="dark"] .bg-slate-200               { background-color: var(--border-card) !important; }
[data-theme="dark"] .bg-\[#f8fafc\]             { background-color: var(--bg-page) !important; }
[data-theme="dark"] .bg-\[#f1f5f9\]             { background-color: var(--bg-muted) !important; }

/* ── Header / sidebar ─────────────────────────────────────────── */
[data-theme="dark"] header.bg-white             { background-color: var(--bg-header) !important; }
[data-theme="dark"] aside.bg-white              { background-color: var(--bg-sidebar) !important; }
[data-theme="dark"] nav.bg-white                { background-color: var(--bg-header) !important; }

/* ── Welcome / hero cards (dark slate in light mode, adapt in dark) */
[data-theme="dark"] .bg-\[#1e293b\]             { background-color: #0f172a !important; }
[data-theme="dark"] .bg-\[#0f172a\]             { background-color: #060d18 !important; }

/* ── Text ─────────────────────────────────────────────────────── */
[data-theme="dark"] .text-slate-900             { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-800             { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-700             { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-600             { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-500             { color: var(--text-muted) !important; }
[data-theme="dark"] .text-slate-400             { color: var(--text-faint) !important; }
[data-theme="dark"] .text-slate-300             { color: var(--text-faint) !important; }

/* ── Borders ──────────────────────────────────────────────────── */
[data-theme="dark"] .border-slate-50            { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .border-slate-100           { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .border-slate-200           { border-color: var(--border-card) !important; }
[data-theme="dark"] .border-slate-300           { border-color: var(--border-card) !important; }

/* ── Divide (table row / list dividers) ───────────────────────── */
[data-theme="dark"] .divide-slate-100 > * + *   { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .divide-slate-200 > * + *   { border-color: var(--border-card) !important; }

/* ── Hover backgrounds ────────────────────────────────────────── */
[data-theme="dark"] .hover\:bg-slate-50:hover   { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .hover\:bg-slate-100:hover  { background-color: var(--bg-elevated) !important; }

/* ── Forms inside dark theme ──────────────────────────────────── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-faint) !important; }

/* ── Tailwind ring / focus helpers ────────────────────────────── */
[data-theme="dark"] .focus\:ring-slate-200:focus  { --tw-ring-color: var(--border-card); }
[data-theme="dark"] .focus\:border-slate-300:focus { border-color: var(--border-card) !important; }

/* ── Specific bg-* colour variants used across views ─────────── */
/* rose/amber/violet/emerald/sky icon pill backgrounds — keep as-is,
   they're semantic colours that work on both themes.
   Only the container (bg-white) needs to change (handled above). */

/* ── Select2 dropdowns ────────────────────────────────────────── */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .select2-dropdown {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-card) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
  background-color: var(--bg-muted) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .select2-search__field {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
}

/* ── Modal overlays ───────────────────────────────────────────── */
[data-theme="dark"] .modal-overlay, [data-theme="dark"] .fixed.inset-0.bg-black { background-color: var(--bg-overlay) !important; }
[data-theme="dark"] .modal-inner, [data-theme="dark"] .modal-box { background: var(--bg-elevated) !important; border-color: var(--border-card) !important; }

/* ── Tables ───────────────────────────────────────────────────── */
[data-theme="dark"] table                       { color: var(--text-secondary) !important; }
[data-theme="dark"] thead, [data-theme="dark"] th { background-color: var(--bg-muted) !important; color: var(--text-muted) !important; }
[data-theme="dark"] tbody tr:hover              { background-color: var(--bg-muted) !important; }
[data-theme="dark"] td, [data-theme="dark"] th  { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .bg-slate-50 thead          { background-color: var(--bg-muted) !important; }

/* ── Pagination / button groups ───────────────────────────────── */
[data-theme="dark"] .events-page-btn {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .events-page-btn:hover:not(:disabled) {
  background: var(--bg-muted) !important;
}

/* ── Dashboard welcome card text (light text on dark bg) ───────
   The #1e293b card already has white text, leave colour alone.  */

/* ── Favourite star icon ──────────────────────────────────────── */
[data-theme="dark"] .fav-icon { color: var(--text-faint) !important; }
[data-theme="dark"] .fav-icon.active, [data-theme="dark"] .fav-icon.fa-solid { color: var(--accent) !important; }

/* ── CMS / ticket specific ────────────────────────────────────── */
[data-theme="dark"] .cms-sidebar         { background: var(--bg-sidebar) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-card, [data-theme="dark"] .ticket-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-badge           { background: var(--bg-muted) !important; color: var(--text-muted) !important; }



/* ╔═══════════════════════════════════════════════════════════════╗
   ║  DIVISION HUB — Vibrant Tile Overhaul  (v2)                  ║
   ║  Extends .tile-compact with color-coded accents, chips,       ║
   ║  and a modern card layout while preserving all JS hooks.      ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── Hub section header ──────────────────────────────────────── */
.div-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.div-hub-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.div-hub-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-ring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.div-hub-title {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.div-hub-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 2px 0 0;
  font-weight: 500;
}
.div-hub-tip {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ── Division grid ───────────────────────────────────────────── */
.div-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { .div-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .div-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1280px) { .div-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── Tile base — reset & refresh ─────────────────────────────── */
.tile-compact {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.tile-compact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: var(--border-card);
  transition: height 0.15s ease;
}
.tile-compact:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}
.tile-compact:hover::before { height: 4px; }
.tile-compact.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.tile-compact.disabled::before { background: var(--border-card) !important; }

/* ── Colored top accent bars per data-div-color ──────────────── */
.tile-compact[data-div-color="sky"]::before     { background: linear-gradient(90deg,#0ea5e9,#38bdf8); }
.tile-compact[data-div-color="amber"]::before   { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.tile-compact[data-div-color="violet"]::before  { background: linear-gradient(90deg,#8b5cf6,#a78bfa); }
.tile-compact[data-div-color="indigo"]::before  { background: linear-gradient(90deg,#6366f1,#818cf8); }
.tile-compact[data-div-color="emerald"]::before { background: linear-gradient(90deg,#10b981,#34d399); }
.tile-compact[data-div-color="rose"]::before    { background: linear-gradient(90deg,#f43f5e,#fb7185); }
.tile-compact[data-div-color="teal"]::before    { background: linear-gradient(90deg,#14b8a6,#2dd4bf); }
.tile-compact[data-div-color="purple"]::before  { background: linear-gradient(90deg,#7c3aed,#a855f7); }
.tile-compact[data-div-color="orange"]::before  { background: linear-gradient(90deg,#f97316,#fb923c); }
.tile-compact[data-div-color="pink"]::before    { background: linear-gradient(90deg,#ec4899,#f472b6); }
.tile-compact[data-div-color="slate"]::before   { background: linear-gradient(90deg,#475569,#64748b); }

/* ── Icon: per-division color ─────────────────────────────────── */
.tile-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 14px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.tile-compact:hover .tile-icon { transform: scale(1.06); }

.tile-compact[data-div-color="sky"]     .tile-icon { background:#e0f2fe; color:#0284c7; border-color:#bae6fd; }
.tile-compact[data-div-color="amber"]   .tile-icon { background:#fef3c7; color:#d97706; border-color:#fde68a; }
.tile-compact[data-div-color="violet"]  .tile-icon { background:#ede9fe; color:#7c3aed; border-color:#ddd6fe; }
.tile-compact[data-div-color="indigo"]  .tile-icon { background:#e0e7ff; color:#4338ca; border-color:#c7d2fe; }
.tile-compact[data-div-color="emerald"] .tile-icon { background:#d1fae5; color:#059669; border-color:#a7f3d0; }
.tile-compact[data-div-color="rose"]    .tile-icon { background:#ffe4e6; color:#e11d48; border-color:#fecdd3; }
.tile-compact[data-div-color="teal"]    .tile-icon { background:#ccfbf1; color:#0d9488; border-color:#99f6e4; }
.tile-compact[data-div-color="purple"]  .tile-icon { background:#f3e8ff; color:#7c3aed; border-color:#e9d5ff; }
.tile-compact[data-div-color="orange"]  .tile-icon { background:#ffedd5; color:#ea580c; border-color:#fed7aa; }
.tile-compact[data-div-color="pink"]    .tile-icon { background:#fdf2f8; color:#db2777; border-color:#fbcfe8; }
.tile-compact[data-div-color="slate"]   .tile-icon { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }

/* ── Tile title & desc ────────────────────────────────────────── */
.tile-title {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  padding-right: 24px; /* room for fav star */
}
.tile-desc {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ── Quick-access chips ───────────────────────────────────────── */
.tile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 12px;
}
.tile-chip {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  user-select: none;
}
.tile-chip:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: rgba(179,154,95,0.30);
}
.tile-chip--soon {
  background: transparent;
  border-style: dashed;
  color: var(--text-faint);
  cursor: default;
}
.tile-chip--soon:hover {
  background: transparent;
  color: var(--text-faint);
  border-color: var(--border-subtle);
}

/* ── Nav footer ───────────────────────────────────────────────── */
.tile-nav-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  transition: color 0.15s;
}
.tile-compact:hover .tile-nav-footer { color: var(--accent); }

/* ── Fav icon ─────────────────────────────────────────────────── */
.tile-compact .fav-icon {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 0.9rem;
  color: var(--border-card);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  z-index: 2;
}
.tile-compact .fav-icon:hover { color: var(--accent); transform: scale(1.15); }
.tile-compact .fav-icon.active { color: #f59e0b; }

/* ── Favorites row (compact icon-only view) ─────────────────── */
#favorites-top .tile-compact {
  padding: 14px;
}
#favorites-top .tile-icon {
  width: 38px; height: 38px;
  background: var(--accent-bg);
  border-color: var(--accent-ring);
  color: var(--accent);
  font-size: 0.95rem;
  margin-bottom: 8px;
}
#favorites-top .tile-title  { font-size: 0.78rem; margin-bottom: 0; padding-right: 20px; }
#favorites-top .tile-desc,
#favorites-top .tile-chips,
#favorites-top .tile-nav-footer { display: none; }
#favorites-top .fav-icon { top: 10px; right: 10px; }

/* ── Dark mode: per-division icon colours (keep vivid, lighter bg) */
[data-theme="dark"] .tile-compact[data-div-color="sky"]     .tile-icon { background:rgba(14,165,233,.15); color:#38bdf8; border-color:rgba(14,165,233,.25); }
[data-theme="dark"] .tile-compact[data-div-color="amber"]   .tile-icon { background:rgba(245,158,11,.15); color:#fbbf24; border-color:rgba(245,158,11,.25); }
[data-theme="dark"] .tile-compact[data-div-color="violet"]  .tile-icon { background:rgba(139,92,246,.15); color:#a78bfa; border-color:rgba(139,92,246,.25); }
[data-theme="dark"] .tile-compact[data-div-color="indigo"]  .tile-icon { background:rgba(99,102,241,.15); color:#818cf8; border-color:rgba(99,102,241,.25); }
[data-theme="dark"] .tile-compact[data-div-color="emerald"] .tile-icon { background:rgba(16,185,129,.15); color:#34d399; border-color:rgba(16,185,129,.25); }
[data-theme="dark"] .tile-compact[data-div-color="rose"]    .tile-icon { background:rgba(244,63,94,.15);  color:#fb7185; border-color:rgba(244,63,94,.25); }
[data-theme="dark"] .tile-compact[data-div-color="teal"]    .tile-icon { background:rgba(20,184,166,.15); color:#2dd4bf; border-color:rgba(20,184,166,.25); }
[data-theme="dark"] .tile-compact[data-div-color="purple"]  .tile-icon { background:rgba(124,58,237,.15); color:#a855f7; border-color:rgba(124,58,237,.25); }
[data-theme="dark"] .tile-compact[data-div-color="orange"]  .tile-icon { background:rgba(249,115,22,.15); color:#fb923c; border-color:rgba(249,115,22,.25); }
[data-theme="dark"] .tile-compact[data-div-color="pink"]    .tile-icon { background:rgba(236,72,153,.15); color:#f472b6; border-color:rgba(236,72,153,.25); }
[data-theme="dark"] .tile-compact[data-div-color="slate"]   .tile-icon { background:rgba(100,116,139,.15); color:#94a3b8; border-color:rgba(100,116,139,.25); }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  GLOBAL INPUT OVERFLOW & BOX-SIZING FIXES                    ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* Prevent inputs from breaking out of their containers */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Prevent text nodes overflowing narrow cells */
.tile-title, .tile-desc,
.cms-col-title, .cms-col-sub {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Flex children that might overflow */
.flex > * { min-width: 0; }
.grid > * { min-width: 0; }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  DARK MODE — PER-PAGE CLASS OVERRIDES                        ║
   ║  Covers inline <style> blocks in individual view files       ║
   ║  that use hardcoded colours instead of CSS variables.        ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── CMS dark mode overrides ──────────────────────────────────── */
[data-theme="dark"] .cms-search-input   { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .cms-filter-select  { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .cms-table-wrap     { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-table-head     { background: var(--bg-muted) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-table-row      { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .cms-table-row:hover { background: var(--bg-muted) !important; }
[data-theme="dark"] .cms-col           { color: var(--text-secondary) !important; }
[data-theme="dark"] .cms-col-num       { color: var(--accent) !important; }
[data-theme="dark"] .cms-col-title     { color: var(--text-primary) !important; }
[data-theme="dark"] .cms-col-muted     { color: var(--text-muted) !important; }
[data-theme="dark"] .cms-kpi-card      { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-kpi-lbl       { color: var(--text-muted) !important; }
[data-theme="dark"] .cms-pagination    { background: var(--bg-muted) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-page-btn      { background: var(--bg-card) !important; border-color: var(--border-card) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .cms-per-page-select { background: var(--bg-card) !important; border-color: var(--border-card) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .cms-stat-chip     { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-stat-chip span:first-of-type { color: var(--text-muted) !important; }
[data-theme="dark"] .cms-location-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-zone-card     { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-combo-input-wrap { background: var(--bg-input) !important; border-color: var(--border-input) !important; }
[data-theme="dark"] .cms-combo-input   { background: transparent !important; color: var(--text-primary) !important; }
[data-theme="dark"] .cms-combo-menu    { background: var(--bg-elevated) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-combo-opt     { color: var(--text-secondary) !important; }
[data-theme="dark"] .cms-combo-opt:hover { background: var(--bg-muted) !important; }
[data-theme="dark"] .cms-step-bar::after,
[data-theme="dark"] .cms-step-item:not(:last-child)::after { background: var(--border-card) !important; }
[data-theme="dark"] .cms-step-dot { background: var(--bg-card) !important; border-color: var(--border-card) !important; color: var(--text-muted) !important; }
[data-theme="dark"] .cms-issue-search-input { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .cms-issue-dropdown { background: var(--bg-elevated) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-issue-item:hover { background: var(--bg-muted) !important; }
[data-theme="dark"] .cms-settings-sidebar { background: var(--bg-sidebar) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-settings-sidebar-header { color: var(--text-muted) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-settings-tab { color: var(--text-secondary) !important; }
[data-theme="dark"] .cms-settings-tab:hover { background: var(--bg-muted) !important; }
[data-theme="dark"] .cms-settings-tab.active { background: var(--bg-muted) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .cms-settings-content { background: var(--bg-card) !important; }
[data-theme="dark"] .cms-set-section { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .cms-set-section h3 { color: var(--text-primary) !important; }
[data-theme="dark"] .cms-set-filter-bar input,
[data-theme="dark"] .cms-set-filter-bar select { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .cms-set-row { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .cms-set-cell { color: var(--text-secondary) !important; }

/* ── Finance page ─────────────────────────────────────────────── */
[data-theme="dark"] .fin-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }

/* ── Staff management ─────────────────────────────────────────── */
[data-theme="dark"] .staff-table th { background: var(--bg-muted) !important; color: var(--text-muted) !important; }
[data-theme="dark"] .staff-table td { border-color: var(--border-subtle) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] .staff-table tr:hover td { background: var(--bg-muted) !important; }
[data-theme="dark"] .staff-filter-bar input,
[data-theme="dark"] .staff-filter-bar select { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; }

/* ── Community home tiles (same tile-compact CSS vars, no extra needed) */

/* ── Solar/Engineering pages ──────────────────────────────────── */
[data-theme="dark"] .solar-card,
[data-theme="dark"] .solar-stat-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .solar-label     { color: var(--text-muted) !important; }
[data-theme="dark"] .solar-value     { color: var(--text-primary) !important; }

/* ── Security pages ───────────────────────────────────────────── */
[data-theme="dark"] .pass-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .pass-name { color: var(--text-primary) !important; }
[data-theme="dark"] .pass-meta { color: var(--text-muted) !important; }

/* ── Header shell (home.html) ─────────────────────────────────── */
[data-theme="dark"] #app-shell > header {
  background-color: var(--bg-header) !important;
  border-color: var(--border-card) !important;
}
[data-theme="dark"] #app-shell > header h1 { color: var(--text-primary) !important; }
[data-theme="dark"] #app-shell aside {
  background-color: var(--bg-sidebar) !important;
  border-color: var(--border-card) !important;
}
[data-theme="dark"] #mobile-bottom-tabs {
  background-color: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: var(--shadow-mobile-nav) !important;
}

/* ── Page header (injected by router.js) ──────────────────────── */
[data-theme="dark"] [data-page-header] + div,
[data-theme="dark"] div[class*="px-3"][class*="border-b"][class*="bg-white"] {
  background-color: var(--bg-header) !important;
  border-color: var(--border-card) !important;
}

/* ── Modal content ────────────────────────────────────────────── */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body > .bg-white,
[data-theme="dark"] div.bg-white.rounded-2xl.shadow-2xl {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-card) !important;
}
[data-theme="dark"] .modal-header { border-color: var(--border-card) !important; }
[data-theme="dark"] .modal-header h3 { color: var(--text-primary) !important; }

/* ── Notice board ─────────────────────────────────────────────── */
[data-theme="dark"] .notice-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .notice-card h3,
[data-theme="dark"] .notice-card h4 { color: var(--text-primary) !important; }
[data-theme="dark"] .notice-card p   { color: var(--text-muted) !important; }

/* ── Facility care / timings ──────────────────────────────────── */
[data-theme="dark"] .fac-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .timings-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }

/* ── Exit pass / transit ──────────────────────────────────────── */
[data-theme="dark"] .ep-section { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .ep-radio-label span { border-color: var(--border-input) !important; color: var(--text-secondary) !important; }

/* ── Form labels ──────────────────────────────────────────────── */
[data-theme="dark"] label { color: var(--text-muted) !important; }
[data-theme="dark"] .form-group label { color: var(--text-muted) !important; }

/* ── Scrollbar in dark ────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-card) !important; }



/* ╔═══════════════════════════════════════════════════════════════╗
   ║  PAGE HEADER — CSS-variable-based (dark-mode aware)          ║
   ║  Classes injected by router.js buildPageHeader()             ║
   ╚═══════════════════════════════════════════════════════════════╝ */

.rk-page-header {
  /* bleed left/right beyond the content padding; no top margin — handled via :has() below */
  margin: 0 -1rem 1.5rem;
  padding: 11px 14px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-card);
  box-shadow: var(--page-header-shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: var(--app-sticky-top, 0px);
  z-index: 20;
}
@media (min-width: 768px) {
  .rk-page-header {
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* Remove top padding from view-content when it contains a page header
   so header is flush at top. Falls back gracefully in older browsers. */
#view-content:has(.rk-page-header) {
  padding-top: 0;
}

/* .rk-sidebar's `top: 57px` (see below) leaves a blank gap at the top-left
   corner — above the sidebar, to the left of the page header — since the
   per-route page header lives inside #view-content and normally only bleeds
   far enough to undo #view-content's own padding, not the sidebar's width.
   Fill that corner with a dedicated element (#sidebar-corner-fill in
   home.html), NOT a pseudo-element/negative-margin bleed on the header:
   #view-content has overflow-y:auto, and per the CSS overflow spec that
   forces overflow-x to also compute as 'auto' (clipping) even though only
   overflow-y was ever set — any descendant of #view-content bleeding left
   past its own box gets silently clipped at #view-content's edge no matter
   what left/width/z-index/!important is thrown at it (confirmed by testing
   a real, non-pseudo element there — same clip). #sidebar-corner-fill is a
   sibling of <aside>/<main> instead, so #view-content's clipping ancestor
   never applies to it — it just sits in the row's own (unclipped-for-this-
   purpose) box. router.js measures the live header height into
   --rk-header-h on every route render (heights differ: ~63px for the
   back+title header, ~67px for the home hero header), and both this fill
   and .rk-sidebar's own top/height read that same variable so they always
   line up with whichever header is actually on screen. */
.rk-sidebar-corner-fill {
  display: none;
}
@media (min-width: 1024px) {
  .rk-sidebar:not(.rk-sidebar--collapsed) ~ .rk-sidebar-corner-fill {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 264px;
    height: var(--rk-header-h, 57px);
    z-index: 25;
    background: var(--bg-header);
    transition: background 0.35s ease;
  }
  /* The home header is transparent (not scrolled) so the hero image can
     show through it — but the hero only starts to the right of the
     sidebar, so this corner never overlaps it; "transparent" here just
     reveals #view-content's flat --bg-page. Matching that exactly (rather
     than the sidebar's own --bg-card, which is a slightly different white)
     is what actually makes the corner disappear seamlessly: the sidebar's
     white box already meets --bg-page at its own right border everywhere
     else in the app, so reusing that same boundary here keeps it
     consistent instead of introducing a second, slightly-different white. */
  .rk-sidebar:not(.rk-sidebar--collapsed) ~ .rk-sidebar-corner-fill:has(~ #view-content .rk-page-header--home) {
    background: var(--bg-page);
  }
  .rk-sidebar:not(.rk-sidebar--collapsed) ~ .rk-sidebar-corner-fill:has(~ #view-content .rk-page-header--home.is-scrolled) {
    background: #1e293b;
  }
  .rk-sidebar:not(.rk-sidebar--collapsed) ~ .rk-sidebar-corner-fill:has(~ #view-content .rk-page-header--home.is-scrolled) .rk-hdr-brand {
    color: #ffffff;
  }
  .rk-sidebar:not(.rk-sidebar--collapsed) ~ .rk-sidebar-corner-fill:has(~ #view-content .rk-page-header--home.is-scrolled) .rk-hdr-tagline {
    color: rgba(255,255,255,0.78);
  }
  .rk-sidebar:not(.rk-sidebar--collapsed) ~ .rk-sidebar-corner-fill .rk-sidebar-brand-link {
    display: flex;
  }
  .rk-sidebar:not(.rk-sidebar--collapsed) ~ #view-content .rk-page-header--home > a {
    visibility: hidden;
    pointer-events: none;
  }
}

/* ── Home header: transparent over the hero, solid once scrolled ────────
   The home route's header sits directly on top of the dark welcome-card /
   carousel hero, so it starts fully transparent with light text and no
   border (just the existing bottom margin before the hero starts) — then
   js/pages/home.js toggles .is-scrolled once the page has been scrolled
   past a small threshold, swapping in the normal solid header background,
   normal text colors, and the branding-configured logo (in place of the
   fixed logo shown while transparent). The header is already
   `position: sticky` (see .rk-page-header above), so it naturally never
   overlaps page content the way a `position: fixed` header would. */
.rk-page-header--home {
  position: sticky !important;
  top: 0 !important;
  z-index: 20;
  border-bottom: none;
  background: transparent;
  box-shadow: none;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.rk-page-header--home .rk-hdr-brand { color: #1e293b; transition: color 0.35s ease; }
.rk-page-header--home .rk-hdr-tagline { color: rgba(30,41,59,0.65); transition: color 0.35s ease; }

.rk-page-header--home.is-scrolled {
  background: #1e293b;
  border-bottom: none;
  box-shadow: var(--page-header-shadow);
}
.rk-page-header--home.is-scrolled .rk-hdr-brand { color: #ffffff; }
.rk-page-header--home.is-scrolled .rk-hdr-tagline { color: rgba(255,255,255,0.78); }

/* Brand text (home variant) — mirrors .auth-brand-name/.auth-brand-tagline
   so the wordmark reads the same across the compact header and the
   login/change-password cards. */
.rk-hdr-brand {
  font-size: clamp(0.85rem, 3vw, 1rem);
  font-weight: 800;
  color: #334155;
  letter-spacing: -0.01em;
  line-height: 1.15;
  display: block;
  text-transform: uppercase;
}
.rk-hdr-tagline {
  /* scales with .rk-hdr-brand's clamp (~65% of its size throughout) */
  font-size: clamp(0.55rem, 1.95vw, 0.65rem);
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
  display: block;
}

/* Back button */
.rk-back-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border-card);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-size: 0.85rem;
}
.rk-back-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* Title block (page variant) */
.rk-hdr-titlewrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex: 1;
  min-width: 0;
}
.rk-hdr-eyebrow {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: block;
}
.rk-hdr-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 3px;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Search bar inside header */
.rk-hdr-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.rk-hdr-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 0.8rem;
  pointer-events: none;
}
.rk-hdr-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  background: var(--bg-input);
  border: 1.5px solid var(--border-input);
  border-radius: 12px;
  font-size: 0.82rem;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rk-hdr-search-input::placeholder { color: var(--text-faint); }
.rk-hdr-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* On mobile, an opened search bar used to compete for flex space with the
   logo/title block (both had flex:1), squeezing the title into a broken
   layout. Below md, when search is open, hide the logo/title + the search
   trigger button entirely so the input can take the full row cleanly. */
@media (max-width: 767px) {
  .rk-page-header:has(#page-header-search:not(.hidden)) > a,
  .rk-page-header:has(#page-header-search:not(.hidden)) > .rk-back-btn,
  .rk-page-header:has(#page-header-search:not(.hidden)) > .rk-hdr-titlewrap,
  .rk-page-header:has(#page-header-search:not(.hidden)) > .rk-header-hamburger,
  .rk-page-header:has(#page-header-search:not(.hidden)) #page-search-btn {
    display: none;
  }
}

/* Icon buttons in header */
.rk-hdr-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.rk-hdr-icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-size: 0.9rem;
}
.rk-hdr-icon-btn:hover { background: var(--bg-muted); color: var(--text-secondary); }

/* Avatar */
.rk-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(179,154,95,0.90);
  color: var(--text-on-accent);
  border: 2px solid var(--border-card);
  font-weight: 800;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.rk-avatar:hover { background: var(--accent); }


/* ────────────────────────────────────────────────────────────────
   WORKSPACE SETTINGS — dark-mode overrides
   (.ws-* base styles live in views/settings/home.html <style>
    but need CSS-var overrides to be explicit in dark theme)
   ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] .ws-layout {
  background: var(--bg-card);
  border-color: var(--border-card);
}
[data-theme="dark"] .ws-nav-panel {
  background: var(--bg-sidebar);
  border-color: var(--border-card);
}
[data-theme="dark"] .ws-nav-btn { color: var(--text-secondary); }
[data-theme="dark"] .ws-nav-btn:hover { background: var(--bg-muted); color: var(--text-primary); }
[data-theme="dark"] .ws-nav-btn.active { background: var(--accent-bg); color: var(--accent); }
[data-theme="dark"] #ws-panel { background: var(--bg-card); }
[data-theme="dark"] .ws-section-icon {
  background: var(--accent-bg);
  border-color: var(--accent-ring);
  color: var(--accent);
}
[data-theme="dark"] .ws-text-input {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}
[data-theme="dark"] .ws-text-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
[data-theme="dark"] .ws-toggle-track { background: var(--border-card); }
[data-theme="dark"] .ws-color-picker {
  background: var(--bg-input);
  border-color: var(--border-input);
}
[data-theme="dark"] .ws-radio-btn {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-secondary);
}
[data-theme="dark"] .ws-radio-btn:has(input:checked),
[data-theme="dark"] .ws-radio-btn.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="dark"] .ws-logo-preview {
  background: var(--bg-muted);
  border-color: var(--border-card);
}
[data-theme="dark"] .ws-upload-btn {
  background: var(--bg-muted);
  border-color: var(--border-card);
  color: var(--text-secondary);
}
[data-theme="dark"] .ws-upload-btn:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
[data-theme="dark"] .ws-remove-logo-btn {
  border-color: rgba(248,113,113,.35);
  color: #f87171;
}
[data-theme="dark"] .ws-remove-logo-btn:hover {
  background: rgba(248,113,113,.12);
  border-color: #f87171;
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT & SPACING POLISH
   ════════════════════════════════════════════════════════════════ */

/* ── Sidebar: full-height sticky, no gap when content is tall ───────────
   Brand/logo now lives back in the global top header (see .rk-app-header
   below), not the sidebar — so the sidebar itself carries zero top padding
   and its nav menu (#desktop-sidebar-menu / .rk-sidebar-menu) starts flush
   at the top, "Dashboard" as the literal first item. That item's row also
   carries the collapse toggle (js/router.js: renderNavMenu's dash row) —
   see .rk-sidebar-dash-row / .rk-sidebar-hamburger-inline below.

   Two independent collapsed states, both toggled by the same
   js/router.js:toggleSidebarCollapsed():
     - Desktop (>=1024px): "collapsed" shrinks width to 0 (fully hides, not
       an icon rail) — .rk-sidebar--collapsed. When collapsed, a second
       hamburger appears in the header (js/router.js:
       syncHeaderHamburgerVisibility) to reopen it.
     - Mobile/tablet (<1024px): sidebar is hidden by default (mobile nav
       uses #mobile-bottom-tabs instead); the header hamburger there opens
       it as a full-screen overlay — .rk-sidebar--mobile-open. */
.rk-sidebar {
  position: sticky;
  top: var(--rk-header-h, 57px);
  height: calc(var(--app-vvh) - var(--rk-header-h, 57px));
  overflow: hidden;
  flex-shrink: 0;
  width: 264px;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-card);
}

.rk-sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding: 8px 12px 20px;
}

.rk-sidebar-mobile-head {
  display: none;
}

.rk-sidebar-dash-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.rk-sidebar-dash-row [data-nav-link] { flex: 1 1 auto; }

.rk-sidebar-hamburger-inline {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(179,154,95,0.22);
  background: rgba(179,154,95,0.10);
  color: var(--accent-gold);
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.rk-sidebar-hamburger-inline:hover {
  background: var(--secondary);
  color: #ffffff;
  border-color: var(--secondary);
  transform: translateY(-50%) translateX(-1px);
}

.rk-sidebar-brand-link {
  display: none;
  width: calc(100% - 48px);
  height: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 10px 18px;
  text-decoration: none;
  min-width: 0;
}
.rk-sidebar-brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}
.rk-sidebar-brand-copy {
  min-width: 0;
  display: block;
}
.rk-sidebar-brand-copy .rk-hdr-brand,
.rk-sidebar-brand-copy .rk-hdr-tagline {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.rk-sidebar-brand-copy .rk-hdr-tagline {
  display: none;
}

.rk-sidebar-menu .nav-section-label,
.rk-sidebar-menu span.text-\[9px\] {
  color: #94a3b8;
}
.rk-sidebar-group-toggle {
  border: 1px solid transparent;
}
.rk-sidebar-group[data-expanded="true"] .rk-sidebar-group-toggle .fa-chevron-down {
  transform: rotate(180deg);
}
.rk-sidebar-menu .sidebar-nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 20px;
  border-radius: 12px;
  color: #172033;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.rk-sidebar-menu .sidebar-nav-link:hover {
  background: rgba(30,41,59,0.045);
  color: #0f172a;
  transform: translateX(1px);
}
.rk-sidebar-menu .sidebar-nav-link.is-active {
  background: rgba(179,154,95,0.12);
  color: var(--accent-gold);
}
.rk-sidebar-menu .sidebar-nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--secondary);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: inset 0 0 0 1px rgba(179,154,95,0.16);
  font-size: 0.82rem;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.rk-sidebar-menu .sidebar-nav-icon i.fa-solid {
  color: inherit !important;
  width: auto;
}
.rk-sidebar-menu .sidebar-nav-link:hover .sidebar-nav-icon,
.rk-sidebar-menu .sidebar-nav-link.is-active .sidebar-nav-icon {
  background: #ffffff;
  color: var(--accent-gold);
  border-color: rgba(179,154,95,0.35);
}
[data-theme="dark"] .rk-sidebar-menu .sidebar-nav-link {
  color: #e2e8f0;
}
[data-theme="dark"] .rk-sidebar-menu .sidebar-nav-link:hover {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
[data-theme="dark"] .rk-sidebar-menu .sidebar-nav-link.is-active {
  background: rgba(179,154,95,0.18);
  color: #e4c984;
}

/* Desktop collapsed: shrink to 0 width (fully hidden, not an icon rail). */
@media (min-width: 1024px) {
  .rk-sidebar.rk-sidebar--collapsed {
    width: 0;
    border: none;
  }
}

/* Mobile/tablet: hidden by default; opened as a full-screen overlay. The
   !important on display guards against the same "later, more specific
   selector wins by source order" cascade trap that broke .hidden/.lg\:flex
   earlier in this project (see the .hidden removal note further up this
   file) — this class needs to reliably win over Tailwind's `.hidden`
   regardless of load order. */
@media (max-width: 1023px) {
  .rk-sidebar.rk-sidebar--mobile-open {
    display: flex !important;
    position: fixed;
    inset: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
  }

  .rk-sidebar.rk-sidebar--mobile-open .rk-sidebar-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-card);
  }

  .rk-sidebar-mobile-title {
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .rk-sidebar-mobile-close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border-card);
    background: var(--bg-muted);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.95rem;
  }

  .rk-sidebar-mobile-close:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: rgba(179,154,95,0.28);
  }

  .rk-sidebar.rk-sidebar--mobile-open .rk-sidebar-menu {
    height: auto;
    padding-top: 10px;
  }
}

/* ── Global section spacing: direct children of view-content
      get a consistent gap from each other ──────────────────────── */
#view-content > * + * { margin-top: 1.25rem; }

/* But not after the page header itself */
#view-content > .rk-page-header + * { margin-top: 0; }

/* Fixed overlays/drawers/modals — margin-top would push them off the top edge */
#view-content > .modal-overlay,
#view-content > [class*="-overlay"],
#view-content > [class*="modal-overlay"],
#view-content > [class*="-drawer"],
#view-content > [class*="-modal"] { margin-top: 0 !important; }

/* ── Date inputs: never clip on small containers ────────────────── */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  min-width: 140px;
  width: auto;
  max-width: 100%;
}

/* ── Search bar: kill the double-border-on-focus collision ───────
   .search-box:focus-within adds a border; input:focus adds another.
   Suppress the input's own outline inside a search-box wrapper. */
.search-box input:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}
.search-box:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Old-style filter inputs that look like rectangular boxes */
.t-input, .t-select, .t-date, input.t-input, input.t-date, textarea.t-input, select.t-select, .filter-input, input.filter, select.filter {
  background: var(--bg-input);
  border: 1.5px solid var(--border-input);
  border-radius: 10px;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 0.82rem;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.t-input:focus, .t-select:focus, .t-date:focus, .filter-input:focus, input.filter:focus, select.filter:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Tailwind utility inputs that collide — standardise focus ring */
input[class*="focus:border"]:focus,
input[class*="focus:ring"]:focus,
select[class*="focus:border"]:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ── Back button: circular, CSS-var aware, matches rk-back-btn look ── */
/* Override the old text-link style back-btn used in transit-pass etc. */
.back-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 50% !important;
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.back-btn:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .back-btn {
  background: var(--bg-muted) !important;
  border-color: var(--border-card) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .back-btn:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* Old-style inline page headers (transit-pass, deductions, etc.)
   get mb spacing so content below isn't touching */
.flex.items-center.gap-3:first-child {
  margin-top: 14px;
}

/* ── Refactor: cross-page input geometry alignment ───────────────── */
.ap-select, .cms-filter-select, .cms-per-page-select, .rpt-select-report {
  border-radius: 10px;
  min-height: 40px;
}
.rpt-select-report { height: 40px; }
.rpt-field input[type="date"], .rpt-field input[type="number"], .rpt-field select { height: 40px; }

/* ── Refactor: native date-picker legibility in dark mode ────────── */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.85); }

/* ── Refactor: modals become full-screen sheets on mobile ────────── */
@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-content {
    max-width: 100%;
    width: 100%;
    max-height: var(--app-vvh);
    height: var(--app-vvh);
    border-radius: 0;
    overflow-y: auto;
    padding-bottom: calc(1rem + var(--keyboard-inset) + var(--safe-bottom-inset));
    scroll-padding-bottom: calc(7rem + var(--keyboard-inset));
  }
  .modal-header { border-radius: 0; }
  .modal-body { padding: 16px; }
}

/* ── Refactor: modals also go full-width on tablets (641–1024px) ──────
   Previously only phones (<=640px) got the full-width treatment above;
   tablet widths (e.g. iPad portrait 768px, iPad landscape 1024px) fell
   through to the desktop centered card (max-width 700px), even though
   the requirement was full width on "mobile or tablet". Kept centered
   (not a bottom sheet) since tablets have enough vertical room that a
   phone-style sheet would look out of place. */
@media (min-width: 641px) and (max-width: 1024px) {
  .modal-overlay { padding: 16px; align-items: center; }
  .modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
  }
}

/* ── Refactor v2: reported-bug fixes ─────────────────────────────── */
/* events date filter: reserve room for its calendar icon + align height */
#event-date-filter { min-height: 40px; padding-left: 2rem; }

.notice-card.notice-expired {
    opacity: 0.55;
    filter: grayscale(0.85);
}

.notice-card.notice-expanded h4,
.notice-card.notice-expanded p {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
}

/* keep native date/time pickers dark-legible (belt & suspenders) */
[data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"] { color-scheme: dark; }

/* card + table standard dark-mode safety (unify hardcoded light surfaces) */
[data-theme="dark"] .reg-table th { background: var(--bg-muted); color: var(--text-secondary); }
[data-theme="dark"] .ap-card, [data-theme="dark"] .staff-modal, [data-theme="dark"] .staff-drawer { background: var(--bg-card); }

/* ── Refactor v2: shared search-box / filter-wrapper icon spacing ─── */
.search-box input { padding-left: 34px; background: transparent; }
.filter-wrapper { }
.filter-wrapper select, .filter-wrapper .t-select { width: 100%; padding-left: 36px; }

/* Keep absolutely-positioned search icons clear of placeholder/value text
   across older pages that use .search-box + .search-icon. */
.search-box .search-icon {
  left: 14px;
  width: 16px;
  text-align: center;
  pointer-events: none;
}
.search-box input {
  padding-left: 42px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CATEGORY 1 — GLOBAL UI & LAYOUT FIXES
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Global Skeleton / Shimmer Loader ─────────────────────────────── */
@keyframes rk-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-card, #e2e8f0);
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
}

.skeleton-line,
.skeleton-block,
.skeleton-avatar {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f1f5f9 50%,
    #e2e8f0 75%
  );
  background-size: 600px 100%;
  animation: rk-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-line   { height: 14px; width: 100%; margin-bottom: 10px; }
.skeleton-line.sm { height: 10px; width: 60%; }
.skeleton-line.lg { height: 20px; }
.skeleton-block  { height: 80px; width: 100%; border-radius: 12px; margin-bottom: 10px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

/* Skeleton row (table-style) */
.skeleton-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-card, #f1f5f9);
}
.skeleton-row:last-child { border-bottom: none; }

/* Dark-mode adjustments */
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-block,
[data-theme="dark"] .skeleton-avatar {
  background: linear-gradient(90deg, #1e293b 25%, #293548 50%, #1e293b 75%);
  background-size: 600px 100%;
  animation: rk-shimmer 1.4s ease-in-out infinite;
}

/* Utility: hide skeleton once content is ready */
.skeleton-hidden { display: none !important; }

/* ── 2. Datepicker & Date/Time Input Sizing Fix ──────────────────────── */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  min-width: 0;          /* prevent flex children from overflowing */
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 1;
  /* ensure the picker text is always visible */
  color: var(--text-primary, #1e293b);
  -webkit-appearance: none;
}

/* Inside modals: lock width so they don't shrink on focus */
.modal-body input[type="date"],
.modal-body input[type="time"],
.modal-body input[type="datetime-local"],
.v-modal input[type="date"],
.v-modal input[type="time"],
.v-modal input[type="datetime-local"],
.staff-modal-body input[type="date"],
.staff-modal-body input[type="time"] {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Fix for #training, #events, #ferry, #exit-pass filter inputs */
#training input[type="date"], #training input[type="time"],
#events input[type="date"],   #events input[type="time"],
#ferry input[type="date"],    #ferry input[type="time"],
#exit-pass input[type="date"],#exit-pass input[type="time"] {
  min-width: 130px;
  width: 100%;
  box-sizing: border-box;
}

/* Prevent erratic resize on focus via transform hack */
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  transform: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* ── 3. Grey Background Bug — Ferry & Approvals ──────────────────────── */
/* Force inputs/selects inside white cards to be transparent/white */
.ferry-card input,
.ferry-card select,
.ferry-card input[type="date"],
.ferry-card input[type="time"],
.pax-panel input,
.pax-panel select {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Approvals / search filters */
#approvals .search-box input,
#approvals .filter-wrapper select,
#approvals .filter-wrapper input,
#approvals input[type="text"],
#approvals input[type="date"],
#approvals input[type="search"],
.ap-filters input,
.ap-filters select {
  background: transparent !important;
  background-color: transparent !important;
}

/* ID filter input inside a white card */
.ap-filter-bar input,
.ap-filter-bar select {
  background: transparent !important;
}

/* Dark-mode: keep dark surface instead of forcing white */
[data-theme="dark"] .ferry-card input,
[data-theme="dark"] .ferry-card select,
[data-theme="dark"] .pax-panel input,
[data-theme="dark"] .pax-panel select {
  background: var(--bg-input, #1e293b) !important;
  background-color: var(--bg-input, #1e293b) !important;
}

/* ── 4a. Header Logo & Profile Avatar — Vertical Alignment ──────────── */
.rk-app-header {
  align-items: center !important; /* already set but ensure no override */
  top: 0 !important;
}

.rk-app-header > a {           /* brand link — logo + name/tagline, all viewports */
  align-items: center;
  display: flex;
}

/* Hamburger that opens/closes the sidebar, sitting just left of the logo.
   Visibility is managed entirely by JS (js/router.js:
   syncHeaderHamburgerVisibility) rather than CSS media queries: shown
   whenever the sidebar is collapsed/closed (desktop) or unconditionally
   below the lg breakpoint (mobile/tablet, where it opens the full-screen
   overlay version — see .rk-sidebar--mobile-open). */
.rk-header-hamburger {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(179,154,95,0.24);
  background: rgba(179,154,95,0.10);
  color: var(--accent-gold);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.rk-header-hamburger:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #ffffff;
  transform: translateX(1px);
}

/* Search bar + mobile search icon + avatar: grouped and pinned to the
   header's right edge regardless of how much space the brand/logo takes. */
.rk-header-right-group {
  margin-left: auto;
}

.rk-app-header .user-profile-mini {
  display: flex;
  align-items: center;
}

.rk-app-header .avatar,
.rk-app-header .rk-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* ensure no top offset from line-height */
  line-height: 1;
}

/* ── 4b. Training View — Search Icon / Label Overlap Fix ─────────────── */
/* #view-search sits in a relative container with an absolute icon at left-3.
   Ensure left-icon padding is wide enough and icon is perfectly centred. */
.relative:has(#view-search) i.fa-search,
.relative:has(#view-search) i.fas.fa-search {
  pointer-events: none;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: #94a3b8;
  z-index: 1;
}

#view-search {
  padding-left: 30px !important; /* push text clear of icon */
}

/* ── 5. CMS — New Ticket & Settings Button Height Parity ─────────────── */
.cms-action-bar .btn,
.cms-settings-inline-btn {
  height: 38px !important;
  min-height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box;
}

/* ── 6a. Reports — Multi-select Responsive Fix ───────────────────────── */
@media (max-width: 640px) {
  .rpt-filters {
    grid-template-columns: 1fr !important;
  }

  .rpt-select-report {
    max-width: 100% !important;
  }

  .rpt-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rpt-actions .rpt-btn {
    width: 100%;
    justify-content: center;
  }

  /* Select2 overrides for small screens */
  .select2-container {
    width: 100% !important;
  }
  .select2-container .select2-selection--multiple {
    min-height: 38px;
  }
}

/* ── 7. Carousel — Remove Black Border ───────────────────────────────── */
#carousel-outer-shell {
  border: none !important;
  box-shadow: none !important;
}

/* ── Smooth content-reveal transition (skeleton → real content) ──────── */
.content-fade-in {
  animation: rk-content-in 0.3s ease forwards;
}
@keyframes rk-content-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Unified UI controls, filters, modals, and exit pass step form */
:root {
  --rk-control-height: 42px;
  --rk-control-radius: 8px;
  --rk-control-pad-x: 12px;
  --rk-control-font: 0.86rem;
  --rk-button-height: 40px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.t-input,
.t-select,
.t-date,
.filter-input,
input.filter,
select.filter,
.ap-select,
.cms-search-input,
.cms-filter-select,
.cms-per-page-select,
.staff-filter-bar input,
.staff-filter-bar select,
.cms-set-filter-bar input,
.cms-set-filter-bar select,
.solar-filter-group input,
.solar-filter-group select {
  width: 100%;
  min-height: var(--rk-control-height) !important;
  border: 1.5px solid var(--border-input) !important;
  border-radius: var(--rk-control-radius) !important;
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  font-family: inherit;
  font-size: var(--rk-control-font) !important;
  line-height: 1.35;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea,
.t-input,
.t-select,
.t-date,
.filter-input,
input.filter,
select.filter,
.ap-select,
.cms-search-input,
.cms-filter-select,
.cms-per-page-select,
.staff-filter-bar input,
.staff-filter-bar select,
.cms-set-filter-bar input,
.cms-set-filter-bar select,
.solar-filter-group input,
.solar-filter-group select {
  padding: 9px var(--rk-control-pad-x);
}

textarea {
  min-height: 92px !important;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px !important;
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg-muted) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
  opacity: 1;
}

.select2-container--default .select2-selection--single {
  display: flex !important;
  align-items: center;
  padding: 0 var(--rk-control-pad-x);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  line-height: 1.35 !important;
  padding: 0 !important;
}

.select2-container--default .select2-selection--multiple {
  padding: 3px 7px !important;
}

.select2-dropdown,
.dropdown-content,
.profile-dropdown {
  border: 1px solid var(--border-card) !important;
  border-radius: var(--rk-control-radius) !important;
  background: var(--bg-elevated) !important;
  box-shadow: var(--shadow-float) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--bg-muted) !important;
  color: var(--text-primary) !important;
}

.rk-btn,
button.rk-btn,
a.rk-btn,
.btn,
.solar-btn,
.event-action-btn,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--rk-button-height);
  padding: 9px 14px;
  border-radius: var(--rk-control-radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.rk-btn:hover,
.btn:hover,
.solar-btn:hover,
.event-action-btn:hover {
  transform: translateY(-1px);
}

.rk-btn-primary,
.btn,
.solar-btn--primary,
button[type="submit"],
input[type="submit"] {
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
  color: #ffffff !important;
}

.rk-btn-primary:hover,
.btn:hover,
.solar-btn--primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.rk-btn-secondary,
.rk-btn-ghost,
.solar-btn--ghost,
.event-action-btn {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-secondary) !important;
}

.rk-btn-secondary:hover,
.rk-btn-ghost:hover,
.solar-btn--ghost:hover,
.event-action-btn:hover {
  background: var(--bg-muted) !important;
  border-color: var(--border-card) !important;
  color: var(--text-primary) !important;
}

.rk-btn:disabled,
.btn:disabled,
button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

.rk-segment-group,
.filter-pills,
.feed-filter,
.cms-tabs,
.staff-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rk-segment-option span,
.filter-pill,
.filter-chip,
.cms-tab,
.staff-filter-chip,
.timeslot-pill,
.solar-device-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border-input);
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.rk-segment-option.is-selected span,
.rk-segment-option:has(input:checked) span,
.filter-pill.active,
.filter-chip.active,
.cms-tab.active,
.staff-filter-chip.active,
.timeslot-pill.selected,
.solar-device-option:has(input:checked) {
  border-color: var(--accent-gold);
  background: var(--accent-bg);
  color: var(--accent);
}

.rk-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.rk-form-error {
  padding: 11px 13px;
  border: 1px solid #fecdd3;
  border-radius: var(--rk-control-radius);
  background: #fff1f2;
  color: #be123c;
  font-size: 0.82rem;
  font-weight: 700;
}

.modal-overlay,
[class*="modal-overlay"],
[class*="-modal-overlay"],
.staff-modal-overlay,
.mem-modal,
.v-modal,
.fixed.inset-0.bg-black {
  align-items: center !important;
  justify-content: center !important;
}

.modal-content,
.modal-inner,
.modal-box,
.t-modal-box,
.staff-modal,
.modal-light,
.mem-dialog,
.mem-lightbox-figure {
  border-radius: 8px !important;
}

.ep-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}

.ep-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.ep-guide,
.ep-card {
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--card-shadow);
}

.ep-guide {
  position: sticky;
  top: 1rem;
  padding: 1rem;
}

.ep-guide--intro {
  position: static;
  display: grid;
  justify-items: start;
  min-height: 18rem;
  align-content: center;
}

.ep-guide__icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 0.8rem;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-bg);
  color: var(--accent);
}

.ep-guide h3,
.ep-step-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 900;
}

.ep-guide p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.ep-route {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.ep-route span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
}

.ep-route b {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--accent);
  font-size: 0.7rem;
}

.ep-guide__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.ep-card {
  padding: 1rem;
}

.ep-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ep-step-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 46px;
  padding: 0.55rem;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-muted);
  text-align: left;
}

.ep-step-indicator span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.ep-step-indicator strong {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ep-step-indicator.is-active,
.ep-step-indicator.is-complete {
  border-color: var(--accent-gold);
  background: var(--accent-bg);
  color: var(--accent);
}

.ep-step-indicator.is-active span,
.ep-step-indicator.is-complete span {
  background: var(--accent-gold);
  color: #fff;
}

.ep-form,
.ep-step-panel.is-active,
.ep-dynamic-section {
  display: grid;
  gap: 1rem;
}

.ep-step-panel {
  display: none;
  animation: epStepIn 0.22s ease both;
}

.ep-step-head span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ep-step-head h3 {
  margin-top: 0.2rem;
}

.ep-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.ep-transfer-panel {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg-muted);
}

.ep-transfer-panel h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 900;
}

.ep-visitor-list {
  display: grid;
  gap: 0.5rem;
}

.ep-visitor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 0.5rem;
}

.ep-remove-visitor {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-muted);
}

.ep-remove-visitor:hover {
  border-color: #fecdd3;
  color: #e11d48;
}

.ep-help {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.ep-help.is-valid {
  color: #059669;
}

.ep-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ep-review-item {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: var(--bg-muted);
}

.ep-review-item span {
  display: block;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ep-review-item strong {
  display: block;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 0.88rem;
}

.ep-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding-top: 0.25rem;
}

@keyframes epStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .ep-layout {
    grid-template-columns: 1fr;
  }

  .ep-guide {
    position: static;
  }
}

@media (max-width: 640px) {
  :root {
    --rk-control-height: 38px;
    --rk-button-height: 38px;
    --rk-control-font: 0.8rem;
  }

  .modal-overlay,
  [class*="modal-overlay"],
  [class*="-modal-overlay"],
  .staff-modal-overlay,
  .mem-modal,
  .v-modal,
  #hreq-reject-modal,
  #hreq-change-date-modal,
  #hr-confirm-modal,
  #ap-reject-modal,
  #sec-qr-modal,
  .fixed.inset-0.bg-black {
    position: fixed !important;
    top: var(--visual-viewport-top, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100vw !important;
    height: var(--app-vvh, 100vh) !important;
    min-height: 0 !important;
    max-height: var(--app-vvh, 100vh) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .modal-content,
  #cmsNewTicketModal .modal-content,
  .modal-inner,
  .modal-box,
  .t-modal-box,
  .staff-modal,
  .modal-light,
  .ap-reject-card,
  .hreq-cd-card,
  .hr-confirm-box,
  .mem-dialog,
  .mem-lightbox-figure,
  #sec-qr-modal > div,
  .modal-body > .bg-white,
  .fixed.inset-0.bg-black > .bg-white,
  .fixed.inset-0.bg-black > [class*="rounded"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-padding-bottom: calc(7rem + var(--safe-bottom-inset, 0px)) !important;
    transform: none !important;
  }

  .modal-header,
  .t-modal-header,
  .staff-modal-header,
  .staff-modal-footer {
    border-radius: 0 !important;
  }

  .modal-header,
  .t-modal-header,
  .staff-modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .staff-modal {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
  }

  .staff-modal-body,
  .t-modal-body,
  .modal-body {
    overscroll-behavior: contain !important;
    scroll-padding-bottom: calc(7rem + var(--safe-bottom-inset, 0px)) !important;
  }

  body.keyboard-open .modal-content,
  body.keyboard-open #cmsNewTicketModal .modal-content,
  body.keyboard-open .modal-inner,
  body.keyboard-open .modal-box,
  body.keyboard-open .t-modal-box,
  body.keyboard-open .staff-modal,
  body.keyboard-open .modal-light,
  body.keyboard-open .ap-reject-card,
  body.keyboard-open .hreq-cd-card,
  body.keyboard-open .hr-confirm-box,
  body.keyboard-open .mem-dialog,
  body.keyboard-open #sec-qr-modal > div,
  body.keyboard-open .modal-body > .bg-white,
  body.keyboard-open .fixed.inset-0.bg-black > .bg-white,
  body.keyboard-open .fixed.inset-0.bg-black > [class*="rounded"] {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  body.keyboard-open .staff-modal-body,
  body.keyboard-open .t-modal-body,
  body.keyboard-open .modal-body,
  body.keyboard-open #cmsNewTicketModal .cms-step-panel.active {
    scroll-padding-bottom: calc(7rem + var(--safe-bottom-inset, 0px)) !important;
  }

  /* Keep form controls and their scroll containers inside the visible
     viewport while the software keyboard is open. */
  .modal-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .modal-overlay textarea,
  .modal-overlay select,
  .staff-modal-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .staff-modal-overlay textarea,
  .staff-modal-overlay select,
  .staff-drawer input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .staff-drawer textarea,
  .staff-drawer select {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .cms-settings-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .cms-settings-modal textarea,
  .cms-settings-modal select {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .staff-drawer.open {
    top: var(--visual-viewport-top, 0px);
    bottom: auto;
    height: var(--app-vvh, 100vh);
    max-height: var(--app-vvh, 100vh);
  }

  .drawer-body,
  .staff-modal-body,
  .modal-content,
  #cmsNewTicketModal .cms-step-panel.active {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  .ep-card,
  .ep-guide {
    padding: 0.85rem;
  }

  .ep-stepper {
    gap: 0.35rem;
  }

  .ep-step-indicator {
    justify-content: center;
    min-height: 38px;
    padding: 0.4rem;
  }

  .ep-step-indicator strong {
    display: none;
  }

  .ep-field-grid,
  .ep-review-grid {
    grid-template-columns: 1fr;
  }

  .ep-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ep-actions .rk-btn {
    width: 100%;
  }

  .ep-actions #ep-back-btn.hidden + #ep-next-btn,
  .ep-actions #ep-back-btn.hidden ~ #ep-submit-btn {
    grid-column: 1 / -1;
  }
}

.ep-dynamic-section.hidden,
.ep-transfer-panel.hidden,
.ep-actions .hidden,
.ep-step-panel.hidden {
  display: none !important;
}

/* Final shared search-box normalization: the wrapper owns the border/ring,
   while the input stays borderless and padded clear of the icon. */
.search-box {
  position: relative !important;
}
.search-box .search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  margin-right: 0 !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.search-box input,
.search-box input[type="text"],
.search-box input[type="search"] {
  padding-left: 44px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.search-box input:focus,
.search-box input[type="text"]:focus,
.search-box input[type="search"]:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.search-box.search-box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.search-box.search-box input[type="text"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.search-box.search-box input[type="search"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  min-height: 0 !important;
  padding: 9px 12px 9px 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.search-box.search-box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
.search-box.search-box input[type="text"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
.search-box.search-box input[type="search"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.rk-hdr-search.rk-hdr-search .rk-hdr-search-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  padding: 8px 12px 8px 34px !important;
  background: var(--bg-input) !important;
}
.rk-hdr-search.rk-hdr-search .rk-hdr-search-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

.relative:has(#view-search) #view-search:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
#view-search#view-search:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  padding-left: 34px !important;
}

/* Icon-bearing inputs need to opt out of the shared .t-input padding reset. */
.staff-filter-bar .search-wrap input.t-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.staff-filter-bar .search-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  padding: 9px 12px 9px 38px !important;
}

div:has(> #qr-room-search) #qr-room-search:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
#qr-room-search#qr-room-search:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  padding: 9px 12px 9px 34px !important;
}

.search-wrap:has(> i.fa-magnifying-glass) > input.t-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.search-wrap:has(> i.fa-search) > input.t-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.relative:has(> i.fa-magnifying-glass) > input.t-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.relative:has(> i.fa-search) > input.t-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  padding-left: 38px !important;
}

/* ==========================================================================
   Centralized CSS migrated from view <style> blocks - 2026-08-02
   Source fragments are noted before each block.
   ========================================================================== */

/* Source: home.html <style> block 1 */
@keyframes fadeIn {
        from { opacity:0; transform:translateY(8px); }
        to   { opacity:1; transform:translateY(0); }
      }
      .animate-fade-in { animation: fadeIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards; }
      ::-webkit-scrollbar { width:6px; height:6px; }
      ::-webkit-scrollbar-track { background:transparent; }
      ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:9999px; }
      ::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

      .rk-app-header {
        background: var(--bg-header);
        border-bottom: 1px solid var(--border-card);
        box-shadow: var(--shadow-header);
      }
      .rk-sidebar {
        background: var(--bg-sidebar);
        border-right: 1px solid var(--border-card);
        top: var(--rk-header-h, 57px);
        height: calc(var(--app-vvh, 100vh) - var(--rk-header-h, 57px));
      }
      #view-content { background: var(--bg-page); }


/* ==========================================================================
   Central Component Standards - 2026-08-02
   This layer intentionally loads last. New UI should use ui-* classes; legacy
   page classes are mapped here so existing pages inherit the same controls.
   ========================================================================== */
:root {
    --ui-radius-xs: 6px;
    --ui-radius-sm: 8px;
    --ui-radius-md: 10px;
    --ui-radius-lg: 12px;
    --ui-control-h: 42px;
    --ui-control-pad-x: 12px;
    --ui-focus-ring: 0 0 0 3px var(--accent-ring);
    --ui-danger-bg: #fef2f2;
    --ui-danger-border: #fecaca;
    --ui-danger-text: #dc2626;
    --ui-success-bg: #f0fdf4;
    --ui-success-border: #bbf7d0;
    --ui-success-text: #166534;
}

.ui-control,
.ui-input,
.ui-select,
.ui-textarea,
input[type="text"]:not(.unstyled),
input[type="search"]:not(.unstyled),
input[type="email"]:not(.unstyled),
input[type="password"]:not(.unstyled),
input[type="number"]:not(.unstyled),
input[type="date"]:not(.unstyled),
input[type="time"]:not(.unstyled),
select:not(.unstyled),
textarea:not(.unstyled),
.form-input,
.t-input,
.cms-input,
.cms-select,
.cms-ticket-input,
.cms-ticket-select,
.cms-ticket-textarea,
.cms-roster-search,
.transport-select,
.filter-input,
.ap-search,
.rpt-input,
.rpt-select,
.staff-search,
.staff-filter-select {
    min-height: var(--ui-control-h);
    width: 100%;
    border: 1px solid var(--border-input);
    border-radius: var(--ui-radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.35;
    padding: 9px var(--ui-control-pad-x);
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

textarea:not(.unstyled),
.ui-textarea,
.cms-ticket-textarea {
    min-height: 92px;
    resize: vertical;
}

.ui-control:focus,
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
input:not(.unstyled):focus,
select:not(.unstyled):focus,
textarea:not(.unstyled):focus,
.form-input:focus,
.t-input:focus,
.cms-input:focus,
.cms-select:focus,
.cms-ticket-input:focus,
.cms-ticket-select:focus,
.cms-ticket-textarea:focus,
.cms-roster-search:focus,
.transport-select:focus,
.filter-input:focus,
.rpt-input:focus,
.rpt-select:focus {
    border-color: var(--border-focus);
    box-shadow: var(--ui-focus-ring);
    background: var(--bg-card);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}

select:not(.unstyled),
.ui-select,
.cms-select,
.cms-ticket-select,
.transport-select,
.rpt-select {
    appearance: none;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: var(--ui-control-h);
    border: 1px solid var(--border-input);
    border-radius: var(--ui-radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--border-focus);
    box-shadow: var(--ui-focus-ring);
}

.select2-dropdown,
.ui-dropdown,
.ui-typeahead-menu,
.cms-combo-menu,
.esc-staff-results,
.cms-roster-results,
.staff-room-results,
.room-dropdown,
.typeahead-results,
.search-results {
    border: 1px solid var(--border-card);
    border-radius: var(--ui-radius-md);
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-float);
    overflow: hidden;
    z-index: 200;
}

.ui-dropdown-option,
.ui-typeahead-option,
.cms-combo-opt,
.cms-issue-opt,
.cms-roster-result,
.staff-room-option,
.typeahead-option,
.select2-results__option {
    min-height: 38px;
    padding: 9px 12px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.ui-dropdown-option:hover,
.ui-typeahead-option:hover,
.cms-combo-opt:hover,
.cms-issue-opt:hover,
.cms-roster-result:hover,
.staff-room-option:hover,
.typeahead-option:hover,
.select2-results__option--highlighted {
    background: var(--accent-bg);
    color: var(--text-primary);
}

.ui-actions,
.form-actions,
.modal-actions,
.staff-modal-footer,
.cms-modal-footer,
.transport-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-outline,
.cms-btn,
.rpt-btn,
.transport-btn,
.ui-btn {
    min-height: var(--ui-control-h);
    width: auto;
    border-radius: var(--ui-radius-md);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-outline:hover,
.cms-btn:hover,
.rpt-btn:hover,
.transport-btn:hover,
.ui-btn:hover {
    transform: translateY(-1px);
}

.btn,
.btn-primary,
.cms-btn.primary,
.rpt-btn.primary,
.transport-btn.primary,
.ui-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
    box-shadow: 0 5px 14px rgba(179,154,95,.18);
}

.btn:hover,
.btn-primary:hover,
.cms-btn.primary:hover,
.rpt-btn.primary:hover,
.transport-btn.primary:hover,
.ui-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-secondary,
.btn-outline,
.cms-btn,
.rpt-btn,
.transport-btn,
.ui-btn-secondary {
    background: var(--bg-card);
    border-color: var(--border-card);
    color: var(--text-secondary);
    box-shadow: none;
}

.btn-secondary:hover,
.btn-outline:hover,
.cms-btn:hover,
.rpt-btn:hover,
.transport-btn:hover,
.ui-btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
}

.btn-danger,
.cms-btn.danger,
.ui-btn-danger {
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-border);
    color: var(--ui-danger-text);
    box-shadow: none;
}

.btn-danger:hover,
.cms-btn.danger:hover,
.ui-btn-danger:hover {
    background: var(--ui-danger-text);
    border-color: var(--ui-danger-text);
    color: #fff;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-outline:disabled,
.cms-btn:disabled,
.rpt-btn:disabled,
.transport-btn:disabled,
.ui-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cms-btn-icon,
.ui-icon-btn,
.rk-hdr-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cms-btn-icon:hover,
.ui-icon-btn:hover,
.rk-hdr-icon-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
}

.modal-content,
.staff-modal,
.cms-modal,
.ui-modal {
    border-radius: var(--ui-radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-float);
}

.ui-empty,
.cms-empty,
.transport-empty,
.staff-empty,
.rpt-empty,
.empty-state {
    border: 1px dashed var(--border-card);
    border-radius: var(--ui-radius-lg);
    background: var(--bg-muted);
    color: var(--text-muted);
    text-align: center;
    padding: 28px 18px;
    font-size: var(--fs-sm);
}

.ui-error,
.form-error,
.field-error,
.cms-error,
.transport-error,
.staff-error {
    border: 1px solid var(--ui-danger-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
    padding: 10px 12px;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.ui-help,
.form-help,
.field-help,
.cms-help,
.transport-help,
.staff-help {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.ui-pill,
.chip,
.cms-badge,
.transport-badge,
.status-badge {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 9px;
    border: 1px solid var(--border-card);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 800;
}

.u-w-auto { width: auto !important; }
.u-flex-1 { flex: 1 1 0 !important; }
.u-hidden { display: none !important; }
.u-muted { color: var(--text-muted) !important; }
.u-danger { color: var(--ui-danger-text) !important; }
.u-center { text-align: center !important; }

@media (max-width: 640px) {
    .ui-actions,
    .form-actions,
    .modal-actions,
    .staff-modal-footer,
    .cms-modal-footer,
    .transport-modal-actions {
        justify-content: stretch;
    }

    .ui-actions > *,
    .form-actions > *,
    .modal-actions > *,
    .staff-modal-footer > *,
    .cms-modal-footer > *,
    .transport-modal-actions > * {
        flex: 1 1 auto;
    }
}