/* ==========================================================
   Smart Scheduler — "Cosmic Neon" (Dark/Light + Glass)
   - Dark = default (tokens on :root), deeper overlay
   - Light = crisp, centered, no upscaling
   ========================================================== */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---------------- THEME TOKENS ---------------- */
/* DARK (default) */
:root,
:root[data-theme="dark"]{
  /* Palette */
  --bg-top:#0a0f1c;
  --bg-mid:#0a0f1c;
  --bg-bot:#0a0d18;

  --text:#eaf1ff;
  --muted:#aab4d9;

  --blue:#7aa2ff;          /* neon blue */
  --cyan:#41cfff;          /* neon cyan */
  --violet:#b98aff;        /* neon violet */

  --danger:#ff6f82;
  --danger-2:#ff4d67;

  --paper: rgba(255,255,255,.06);
  --paper-bd: rgba(255,255,255,.16);

  --ring: rgba(122,162,255,.45);
  --shadow-1: 0 24px 70px rgba(0,0,0,.55);
  --shadow-2: 0 12px 26px rgba(122,162,255,.16);

  --radius-xl:22px;
  --radius-md:14px;
  /* Make Bootstrap headings follow our theme text color */
  --bs-heading-color: var(--text);
  --bs-body-color: var(--text); /* keeps general text consistent too */

  /* Background layers (overlay is painted ABOVE the image) */
  --bg-overlay: linear-gradient(
    180deg,
    rgba(10,15,28,.70) 0%,
    rgba(10,13,24,.70) 55%,
    rgba(8,12,22,.70) 100%
  );
  --bg-image: url("/static/img/cosmic-bg.jpg");   /* dark wallpaper */
}
/* Headings should always use theme text color */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text) !important;
  font-weight: 900;
  letter-spacing: .2px;
}
h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }
.table {
  background-color: rgba(255,255,255,0.02) !important; /* faint translucent */
  color: var(--text) !important;
}

/* Dark mode - darker table cells */
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th {
  background-color: rgba(255,255,255,0.04) !important; /* softer dark */
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.08) !important;     /* lighter borders */
}

/* Dark mode - header row a bit brighter */
:root[data-theme="dark"] .table thead th {
  background-color: rgba(255,255,255,0.08) !important;
  font-weight: 900;
}

/* Dark mode - row hover effect */
:root[data-theme="dark"] .table-hover tbody tr:hover td {
  background-color: rgba(122,162,255,0.12) !important; /* soft neon glow */
}
/* LIGHT (crisp, centered, no upscaling) */
:root[data-theme="light"]{
  /* Palette */
  --bg-top:#f7f9ff;
  --bg-mid:#eef3ff;
  --bg-bot:#e9f0ff;

  --text:#101525;
  --muted:#5a668b;

  --blue:#2b5dff;
  --cyan:#0fb3e0;
  --violet:#6d52ff;

  --danger:#d73b39;
  --danger-2:#b12e2d;

  /* Glass & shadows */
  --paper: rgba(255,255,255,.78);
  --paper-bd: rgba(30,45,120,.14);
  --ring: rgba(43,93,255,.35);
  --shadow-1: 0 22px 60px rgba(35,55,130,.20), 0 2px 8px rgba(16,21,37,.08);
  --shadow-2: 0 10px 22px rgba(35,55,130,.14);

  --radius-xl:22px;
  --radius-md:14px;

  /* Softer overlay so the image stays defined */
  --bg-overlay: linear-gradient(
    180deg,
    rgba(246,248,255,.72) 0%,
    rgba(239,243,255,.70) 50%,
    rgba(234,240,255,.68) 100%
  );

  /* CRISP images (swap names to yours) */
  --bg-image: image-set(
    url("/static/img/cosmic-bg-light.jpeg") 1x,
    url("/static/img/cosmic-bg-light.jpeg") 2x
  );

  /* Native size of your @2x image (4K shown) */
  --bg-native-w: 3840px;
  --bg-native-h: 2160px;
}

/* ---------------- Background: overlay (top) + image (bottom) ---------------- */
/* Single source of truth for the wallpaper */
body{
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial;

  background-image: var(--bg-overlay), var(--bg-image);
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;

  /* Always scroll on mobile to avoid cropping/tearing, fixed only on desktop */
  background-attachment: scroll, scroll;
  background-color: var(--bg-bot);

  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}

/* If you like the parallax on big screens, re-enable fixed there only */
@media (min-width: 1025px){
  body{ background-attachment: fixed, fixed; }
}

/* Light mode background should always cover full page */
html[data-theme="light"] body{
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;        /* both overlay & image cover */
  background-attachment: scroll, scroll; /* <- avoid fixed to stop cropping */
  background-repeat: no-repeat, no-repeat;
}

/* (Optional) also force this on small screens where fixed is buggy */
@media (max-width: 1024px){
  html[data-theme="light"] body{
    background-size: cover, cover;
    background-attachment: scroll, scroll;
  }}

/* Star bloom + soft wash (DARK default) */
body::before{
  content:"";
  position:fixed; inset:-20% -10% -10% -10%;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(44% 34% at 72% 15%, rgba(65,207,255,.24), transparent 62%),
    radial-gradient(35% 28% at 12% 12%, rgba(185,138,255,.12), transparent 60%);
  filter: blur(60px) saturate(1.05);
}

/* Fine grain so the glass sits nicely on top */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* LIGHT: reduce bloom & noise so details stay crisp */
html[data-theme="light"] body::before{
  content:"";
  position:fixed; inset:-16% -10% -10% -10%;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(30% 24% at 85% 12%, rgba(111,163,255,.12), transparent 62%),
    radial-gradient(26% 20% at 12% 88%, rgba(127,222,255,.10), transparent 60%);
  filter: blur(32px) saturate(1.02);
  opacity:.55;
}
html[data-theme="light"] body::after{ opacity:.035; }

/* ---------------- Navbar (glass/transparent) ---------------- */
.navbar{
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--paper-bd);
}
.navbar .navbar-brand, .navbar .nav-link, .navbar a{ color: var(--text) !important; }
.navbar .nav-link:hover, .navbar a:hover{
  color: color-mix(in srgb, var(--blue) 70%, var(--text)) !important;
}
.navbar .active, .navbar .nav-link.active{
  color: color-mix(in srgb, var(--cyan) 70%, var(--text)) !important;
}

/* Lighter nav variant (crisper frost) */
html[data-theme="light"] .navbar{
  background: color-mix(in srgb, var(--paper) 88%, white);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom:1px solid color-mix(in srgb, var(--paper-bd) 80%, transparent);
  box-shadow: 0 10px 24px rgba(40,60,120,.08);
}

/* ---------------- Panels / Card ---------------- */
.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--paper-bd);
  border-radius:var(--radius-xl);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.06);
}
/* neon gradient border ring */
.card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(122,162,255,.6), rgba(65,207,255,.45), rgba(185,138,255,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.65;
}

/* Light card boost (thicker frost + inner stroke) */
html[data-theme="light"] .card{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  box-shadow: var(--shadow-1);
}
html[data-theme="light"] .card::before{ opacity:.55; }
html[data-theme="light"] .manager-card{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(30,45,120,.06);
}

/* ---------------- Layout ---------------- */
.manager-stage{ padding: clamp(28px, 5vw, 68px) 18px; }
.container-narrow{ width:min(1120px,96vw); margin-inline:auto; }
.manager-card{ padding: clamp(24px, 4vw, 36px); }

/* Manager dashboard – slightly wider, centered */
.manager-stage .container-narrow{
  width: min(1040px, 94vw) !important;   /* bump the max width up a bit */
  margin-inline: auto;                   /* keep it perfectly centered */
}

.manager-head{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; margin-bottom:16px;
}
.manager-title{
  font-weight:900;
  letter-spacing:.3px;
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--text) !important;
  position:relative;
  z-index:5;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* stronger contrast for light */
html[data-theme="light"] .manager-title{
  text-shadow: 0 6px 24px rgba(30,45,120,.18), 0 2px 0 rgba(255,255,255,.65);
}
.manager-title [aria-hidden="true"]{ display:none !important; }
.manager-sub{ display:none !important; }

/* quick chip (Auto-generate) */
.btn-ghost{
  appearance:none; border:1px solid var(--paper-bd); border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  color:var(--blue); font-weight:800; padding:9px 14px; cursor:pointer;
  transition:border-color .18s, transform .12s, color .18s, background .18s, box-shadow .18s;
}
.btn-ghost:hover{
  transform:translateY(-1px); color:var(--text);
  border-color:rgba(140,170,255,.55);
  background:linear-gradient(180deg, rgba(122,162,255,.22), rgba(255,255,255,0));
  box-shadow: 0 0 0 3px rgba(122,162,255,.20);
}
.btn-ghost:focus-visible{ outline:0; box-shadow: 0 0 0 3px var(--ring), 0 0 30px rgba(122,162,255,.25); }

/* Light ghost: clearer edge */
html[data-theme="light"] .btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border-color: color-mix(in srgb, var(--paper-bd) 90%, transparent);
  color: var(--blue);
}
html[data-theme="light"] .btn-ghost:hover{
  background:linear-gradient(180deg, rgba(122,162,255,.16), rgba(255,255,255,.75));
  border-color: rgba(111,163,255,.45);
  box-shadow: 0 0 0 3px rgba(111,163,255,.20);
}

/* ---------------- Grid & Tiles ---------------- */
.manager-grid{
  list-style:none; padding:6px; margin:12px 0 0;
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:760px){ .manager-grid{ grid-template-columns:1fr 1fr; } }

/* tile = glass chip with neon rail */
.tile{
  position:relative;
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--paper-bd);
  border-radius:var(--radius-md);
  padding:14px 18px; font-weight:800;
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.tile::before{
  content:""; flex:0 0 3px; align-self:stretch; border-radius:8px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  opacity:.95;
}
.tile .icon{
  flex:0 0 28px; display:inline-flex; justify-content:center; align-items:center;
  font-size:1.06rem; line-height:1;
}
.tile .label{
  flex:1 1 auto; min-width:0;
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.1px;
}
@media (max-width:520px){ .tile .label{ white-space:normal; } }

.tile:hover{
  transform:translateY(-1px);
  border-color:rgba(122,162,255,.55);
  box-shadow: 0 12px 28px rgba(122,162,255,.18), inset 0 1px 0 rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(122,162,255,.12), rgba(255,255,255,0));
}
.tile:focus-visible{
  outline:0; box-shadow: 0 0 0 3px var(--ring), 0 10px 28px rgba(122,162,255,.22);
}

/* Light tile lift */
html[data-theme="light"] .tile{
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.60));
  border-color: color-mix(in srgb, var(--paper-bd) 90%, transparent);
  box-shadow: 0 4px 10px rgba(40,60,120,.08);
}
html[data-theme="light"] .tile:hover{
  transform: translateY(-2px);
  border-color: rgba(43,93,255,.35);
  box-shadow: 0 16px 32px rgba(40,60,120,.14), inset 0 1px 0 rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(122,162,255,.14), rgba(255,255,255,.58));
}

/* Variants */
.tile--brand::before{ background: linear-gradient(180deg, var(--blue), var(--cyan)); }
.tile--danger{ color:var(--danger); border-color:rgba(255,120,140,.35); }
.tile--danger:hover{ color:var(--danger-2); border-color:rgba(255,120,140,.55); background:linear-gradient(180deg, rgba(255,120,140,.12), rgba(255,255,255,0)); }
.tile--danger::before{ background: linear-gradient(180deg, #ff9aa8, #ff5f77); }
.tile--dim{ color:#c9d2ff; }
.tile--dim:hover{ color:var(--text); border-color:rgba(255,255,255,.24); }

/* Hide optional extras if present */
.tile .desc, .tile .chev{ display:none !important; }

/* Links elsewhere */
a{ color:var(--blue); text-decoration:none; font-weight:700; }
a:hover{ color:var(--cyan); }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .tile, .tile:hover, .btn-ghost, .btn-ghost:hover { transition:none; transform:none; }
}

/* Slightly tighter padding on very wide view to avoid emptiness on light */
@media (min-width:1200px){
  .manager-stage{ padding: clamp(24px, 4.2vw, 56px) 18px; }
}

/* ---------------- New: Shift & Date Chips ---------------- */
/* =========================================
   Shift badges — dark vs light contrast
   Used on: /manager/shifts/ + /manager/requests/
   ========================================= */

/* Base shape */
.shift-badge{
  display:inline-block;
  padding:2px 10px;
  font-size:.86rem;
  font-weight:800;
  border-radius:10px;
  line-height:1.2;
  border:1px solid transparent;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* --------- DARK THEME (frosted) --------- */
:root[data-theme="dark"] .shift-badge{
  background:rgba(255,255,255,.18);
  color:#fff !important;
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
:root[data-theme="dark"] .shift-badge.OFF{ background:rgba(255,80,80,.30); color:#fff !important; }
:root[data-theme="dark"] .shift-badge.AM { background:rgba(122,162,255,.28); color:#fff !important; }
:root[data-theme="dark"] .shift-badge.PM { background:rgba(185,138,255,.28); color:#fff !important; }
:root[data-theme="dark"] .shift-badge.CLS{ background:rgba(65,207,255,.28);  color:#fff !important; }

/* --------- LIGHT THEME (solid, crisp) --------- */
:root:not([data-theme="dark"]) .shift-badge{
  background:#eef2ff;
  color:#253273 !important;
  border-color:#cfd8ff;
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset;
}

/* high-contrast variants for light */
:root:not([data-theme="dark"]) .shift-badge.OFF{
  background:#ffe6e6; color:#9b1c1c !important; border-color:#ffc9c9;
}
:root:not([data-theme="dark"]) .shift-badge.AM{
  background:#e8efff; color:#1b3ea8 !important; border-color:#cddaff;
}
:root:not([data-theme="dark"]) .shift-badge.PM{
  background:#efe6ff; color:#5b2bb6 !important; border-color:#dbc9ff;
}
:root:not([data-theme="dark"]) .shift-badge.CLS{
  background:#e6fbff; color:#0a6b78 !important; border-color:#bfefff;
}

/* Optional: small date chip (used under headers sometimes) */
.date-chip{
  display:inline-block; padding:2px 8px; border-radius:8px;
  font-weight:800; font-size:.82rem; letter-spacing:.2px;
  border:1px solid var(--paper-bd);
  color:var(--text);
  background: color-mix(in srgb, var(--paper) 75%, transparent);
}


/* ==========================================================
   Dark-mode Glass Tables (global)
   Applies to Bootstrap .table elements everywhere.
   If you want page-specific scoping, see note below.
   ========================================================== */

:root[data-theme="dark"] {
  /* Tunable tokens (a touch darker than current) */
  --tbl-glass: rgba(16, 22, 36, 0.64);         /* base cell bg */
  --tbl-head:  rgba(16, 22, 36, 0.78);         /* thead bg */
  --tbl-row:   rgba(255, 255, 255, 0.03);      /* body row bg */
  --tbl-row-2: rgba(255, 255, 255, 0.055);     /* striped alt */
  --tbl-hover: rgba(122, 162, 255, 0.09);      /* hover */
  --tbl-border: color-mix(in srgb, var(--paper-bd) 90%, transparent);
}

/* Table frame */
:root[data-theme="dark"] .table {
  color: var(--text);
  background-color: transparent; /* we color individual cells */
  border-collapse: separate;      /* prevents hover bleed */
  border-spacing: 0;
  border: 1px solid var(--tbl-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Head cells */
:root[data-theme="dark"] .table thead th {
  background: var(--tbl-head) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--tbl-border) !important;
  font-weight: 900;
}

/* All cells (thead/tbody/tfoot) — Bootstrap selector */
:root[data-theme="dark"] .table>:not(caption)>*>* {
  background-color: var(--tbl-glass) !important;
  color: var(--text) !important;
  border-color: var(--tbl-border) !important;
}

/* Body rows default + striped alt */
:root[data-theme="dark"] .table tbody tr {
  background-color: var(--tbl-row) !important;
}
:root[data-theme="dark"] .table.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--tbl-row-2) !important;
}

/* Hover */
:root[data-theme="dark"] .table.table-hover > tbody > tr:hover > * {
  background-color: var(--tbl-hover) !important;
}

/* Make header stick out a bit with subtle elevation */
:root[data-theme="dark"] .table thead {
  box-shadow: inset 0 -1px 0 var(--tbl-border);
}

/* Optional: soften cell padding a tad for dense grids */
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th {
  padding: 10px 12px;
}

/* Optional badge look for OFF/AM/PM in those grids, if used */
:root[data-theme="dark"] .shift-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  color: #fff !important;
  letter-spacing: 0.3px;
}
:root[data-theme="dark"] .shift-badge.OFF { background: rgba(255,80,80,0.30); }
:root[data-theme="dark"] .shift-badge.AM  { background: rgba(122,162,255,0.30); }
:root[data-theme="dark"] .shift-badge.PM  { background: rgba(185,138,255,0.30); }
:root[data-theme="dark"] .shift-badge.CLS { background: rgba(65,207,255,0.30); }

/* Date chip if you want to use it inside those tables */
:root[data-theme="dark"] .date-chip {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  color: var(--muted);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

/* ==========================================================
   COMPACT MODE OVERRIDES (append at end of styles.css)
   Goal: smaller, denser UI with crisp text (no transforms)
   ========================================================== */

/* 1) Global scale down: ~20% tighter overall */
html { font-size: 13px; }                /* default ~16px → 13px */
@media (max-width: 1366px){
  html { font-size: 12.5px; }            /* a tad smaller on 13" laptops */
}

/* 2) Layout & spacing tightening */
.container, .container-fluid { padding-left: 10px; padding-right: 10px; }

.manager-stage { padding: 16px; }        /* was larger via clamp */
.manager-card  { padding: 14px; }        /* inner card padding down */

.manager-grid { gap: 10px; }             /* tighter dashboard grid spacing */

/* 3) Headings & text sizes (keep strong hierarchy but smaller) */
.manager-title{
  font-size: clamp(1.6rem, 2.4vw, 2rem); /* down from 2–2.6rem */
  letter-spacing: .2px;
}
h1 { font-size: 1.6rem !important; }
h2 { font-size: 1.35rem !important; }
h3 { font-size: 1.15rem !important; }

/* 4) Navbar height + link sizing */
.navbar { padding-top: 4px; padding-bottom: 4px; }
.navbar-brand { font-size: 1rem; font-weight: 800; }
.navbar .nav-link { padding: 4px 8px; font-size: .9rem; }

/* 5) Card/tile density */
.card { border-radius: 12px; box-shadow: var(--shadow-2); } /* softer shadow */
.tile {
  padding: 8px 12px;
  font-size: .9rem;
  gap: 10px;
}
.tile .icon { flex: 0 0 22px; font-size: .95rem; }
.tile::before { flex-basis: 2px; }        /* slimmer neon rail */

/* 6) Buttons (ghost & general) */
.btn, .btn-ghost {
  padding: 6px 10px;
  font-size: .9rem;
  border-radius: 10px;
}

/* 7) Tables — compact but readable, keep glass look */
.table { margin-bottom: 0.75rem; }
.table td, .table th { padding: 6px 8px !important; font-size: .9rem; }
.table thead th { font-weight: 800; }

/* 8) Shift badges & chips */
.shift-badge { padding: 1px 8px; font-size: .78rem; border-radius: 8px; }
.date-chip   { padding: 1px 6px; font-size: .78rem; border-radius: 7px; }

/* 9) Forms: inputs & selects smaller but accessible */
.form-control, .form-select {
  padding: .3rem .5rem;
  font-size: .9rem;
  border-radius: 8px;
}
.form-label { margin-bottom: .25rem; }

/* 10) Reduce vertical whitespace globally */
.row > [class*="col-"] { padding-top: 6px; padding-bottom: 6px; }
.mt-3 { margin-top: .9rem !important; }
.mb-3 { margin-bottom: .9rem !important; }

/* 11) Background performance/clarity (no blur/zoom tricks) */
body { will-change: auto; }  /* remove the earlier 'will-change: background-position' effect */

/* (Optional) If you still want to cap the page to the viewport height without
   blurring, uncomment the two lines below. Only do this if you’re confident
   all pages fit after compacting; otherwise content can be cut off.
   html, body { height: 100vh; overflow: hidden; }
*/

/* ==== Dark-mode fixes for checkboxes/radios & form fields ==== */
:root[data-theme="dark"] .form-check-label,
:root[data-theme="dark"] .form-label {
  color: var(--text) !important;                 /* make labels white */
}

/* Checkbox / radio box itself */
:root[data-theme="dark"] .form-check-input {
  background-color: rgba(255,255,255,.06);       /* subtle dark fill */
  border-color: rgba(255,255,255,.35);
}

/* Checked state color (neon blue) */
:root[data-theme="dark"] .form-check-input:checked {
  background-color: var(--blue);
  border-color: var(--blue);
}

/* Focus ring so it’s visible on dark */
:root[data-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(122,162,255,.28);
  border-color: rgba(122,162,255,.7);
}

/* If your template uses inline text-dark somewhere, override it here */
:root[data-theme="dark"] .form-check-label.text-dark {
  color: var(--text) !important;
}

/* Bonus: inputs/selects readable in dark too */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background-color: rgba(255,255,255,.08);
  color: var(--text);
  border-color: var(--paper-bd);
}
:root[data-theme="dark"] .form-control::placeholder {
  color: var(--muted);
}

/* ==== Forms: dark-mode readability (inputs, selects, dropdown options) ==== */
:root[data-theme="dark"] label,
:root[data-theme="dark"] .form-label { color: var(--text) !important; }

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  border: 1px solid var(--paper-bd) !important;
}

/* The popup list for <select> */
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup {
  background-color: #101626;   /* or use var(--tbl-head) if you prefer */
  color: var(--text);
}
:root[data-theme="dark"] select option:disabled { color: var(--muted); }

/* Placeholder contrast */
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--muted); }

/* If your form lives inside a "card" container, keep the card glassy in dark */
:root[data-theme="dark"] .card {
  background: var(--paper);
  border-color: var(--paper-bd);
  color: var(--text);
}

/* === Navbar dropdown: dark/light styling + always on top === */

/* keep the navbar above page cards (cards use backdrop-filter which makes new stacking contexts) */
.navbar{ position: sticky; top: 0; z-index: 1100; }

/* put the dropdown above everything */
.dropdown-menu{ z-index: 2000; border-radius: 12px; padding: 6px; }

/* DARK THEME – readable text, glassy dark panel */
:root[data-theme="dark"] .dropdown-menu{
  background: rgba(16,22,36,.92);
  border: 1px solid var(--paper-bd);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  /* let Bootstrap know as well */
  --bs-dropdown-bg: rgba(16,22,36,.92);
  --bs-dropdown-border-color: var(--paper-bd);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: rgba(122,162,255,.14);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-active-bg: rgba(122,162,255,.24);
  --bs-dropdown-link-active-color: var(--text);
}

/* LIGHT THEME – crisp white with dark text */
:root:not([data-theme="dark"]) .dropdown-menu{
  background: rgba(255,255,255,.96);
  border: 1px solid color-mix(in srgb, var(--paper-bd) 85%, transparent);
  box-shadow: 0 12px 28px rgba(40,60,120,.12);

  --bs-dropdown-bg: rgba(255,255,255,.96);
  --bs-dropdown-border-color: color-mix(in srgb, var(--paper-bd) 85%, transparent);
  --bs-dropdown-link-color: #253273;
  --bs-dropdown-link-hover-bg: #eef2ff;
  --bs-dropdown-link-hover-color: #1b3ea8;
  --bs-dropdown-link-active-bg: #e0e7ff;
  --bs-dropdown-link-active-color: #1b3ea8;
}

/* belt-and-suspenders in case any card tried to sit above */
.manager-card.card{ position: relative; z-index: 1; }

/* Ensure Logout inherits the same red 'danger' look */
:root .tile--danger {
  color: var(--danger) !important;
  border-color: rgba(255,120,140,.35) !important;
}
:root .tile--danger:hover,
:root .tile--danger:focus-visible {
  color: var(--danger-2) !important;
  border-color: rgba(255,120,140,.55) !important;
  background: linear-gradient(180deg, rgba(255,120,140,.12), rgba(255,255,255,0));
}
:root .tile--danger::before { 
  background: linear-gradient(180deg, #ff9aa8, #ff5f77);
}

/* add a touch of space under the H2 */
.auto-schedule-header .week-chip{
  margin-top: .4rem;   /* tweak to taste */
}

/* === BACKGROUND FIX ===================================================== */
/* Paint the layered background on <html> so it never “runs out” */
html{
  background-image: var(--bg-overlay), var(--bg-image);
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-attachment: fixed, fixed;    /* smooth parallax on desktop */
  background-color: var(--bg-bot);
  min-height: 100%;
}

/* Body becomes transparent layer holding the UI */
body{
  background: transparent !important;
  min-height: 100%;
}

/* Mobile / low-end GPU: avoid fixed to prevent cropping/jitter */
@media (max-width: 1024px){
  html{ background-attachment: scroll, scroll; }
}

/* LIGHT MODE: lighten the overlay (was ~.70 – too white) */
:root[data-theme="light"]{
  --bg-overlay: linear-gradient(
    180deg,
    rgba(255,255,255,.12) 0%,   /* was .72 */
    rgba(255,255,255,.10) 50%,  /* was .70 */
    rgba(255,255,255,.08) 100%  /* was .68 */
  );
}

/* Optional: make the decorative blooms a touch further back */
html[data-theme="light"] body::before { opacity:.45; }  /* was .55 */

/* ===== Manager Dashboard: slightly narrower, centered, bigger text ===== */

/* Make tiles a touch larger for readability (without changing layout) */
.manager-stage .tile{
  font-size: 0.85rem;      /* was .9rem from compact rules */
  padding: 10px 13px;
  gap: 10px;
}

/* Keep the title proportionate */
.manager-stage .manager-title{
  font-size: clamp(1.9rem, 2.4vw, 2.2rem);
}

/* Drop the dashboard a bit lower (just above mid-screen) */
.manager-stage{
  padding-top: clamp(48px, 12vh, 160px);
}

/* =================== RESPONSIVE ADD-ON (safe) ===================
   – Keeps your monitor look.
   – Loosens the width on smaller screens so content breathes.
   – Makes grid 1-column on tablets/phones.
   – Adds horizontal scroll safety for wide tables on phones.
================================================================= */

/* Laptops (≤1280px): let the dashboard use a bit more width */
@media (max-width: 1280px){
  .manager-stage .container-narrow{
    width: min(1000px, 94vw) !important;
  }
}

/* Tablets (≤992px): 1 column grid, comfortable width */
@media (max-width: 992px){
  .manager-stage .container-narrow{
    width: min(860px, 94vw) !important;
  }
  .manager-grid{ grid-template-columns: 1fr; }
  .manager-stage .tile{
    font-size: .95rem;
    padding: 12px 14px;
  }
  .manager-stage .manager-title{
    font-size: clamp(1.7rem, 3.2vw, 2rem);
  }
}

/* Phones (≤600px): edge-to-edge width + table safety */
@media (max-width: 600px){
  .manager-stage .container-narrow{
    width: 94vw !important;
  }
  .tile{ padding: 12px 14px; font-size: 1rem; }
  .card, .panel, .table-responsive{ overflow-x: auto; }
  .table{ min-width: 640px; } /* scroll horizontally instead of squishing */
}

/* === Proportional shrink on smaller screens (no redesign) ============= */
/* Keep the same look; just scale the dashboard as the viewport shrinks. */

.manager-stage{
  /* Base width for the dashboard and the live zoom factor */
  --container-w: min(880px, 94vw); /* adjust 880px to taste */
  --ui-zoom: 1;                    /* 1 = full size on big monitors */
}

/* Centered block that scales but keeps the click area aligned */
.manager-stage .container-narrow{
  width: calc(var(--container-w) / var(--ui-zoom)) !important;
  margin-inline: auto;
  transform: scale(var(--ui-zoom));
  transform-origin: top center;
}

/* Chrome/Edge: use zoom for crisper text; transform remains as fallback */
@supports (zoom: 1){
  .manager-stage .container-narrow{
    zoom: var(--ui-zoom);
    transform: none;
    width: var(--container-w) !important;
  }
}

/* ------- Breakpoints: keep look, just scale down a bit ------- */
/* Tweak the numbers (.96, .92…) if you want more/less shrink. */
@media (max-width: 1600px){ .manager-stage{ --ui-zoom: .96; } }   /* large laptops */
@media (max-width: 1400px){ .manager-stage{ --ui-zoom: .92; } }   /* typical 1080p laptop with scaling */
@media (max-width: 1200px){ .manager-stage{ --ui-zoom: .88; } }
@media (max-width: 1024px){ .manager-stage{ --ui-zoom: .84; } }
@media (max-width: 820px) { 
  .manager-stage{ --ui-zoom: .80; --container-w: 96vw; }          /* phones */
}


/* === Utility: proportional scaling for any page ========================= */
/* Add class="auto-scale" to a wrapper and it will scale the inner content
   (keeps your design exactly the same, just smaller on smaller screens).  */

.auto-scale{
  --container-w: min(880px, 94vw);   /* base max width; tweak per taste */
  --ui-zoom: 1;                      /* full size on large displays     */
}

/* Default target is .container-narrow inside that wrapper */
.auto-scale .container-narrow{
  width: calc(var(--container-w) / var(--ui-zoom)) !important;
  margin-inline: auto;
  transform: scale(var(--ui-zoom));
  transform-origin: top center;
}

/* Chrome/Edge: prefer zoom for crisp text; transform is fallback */
@supports (zoom: 1){
  .auto-scale .container-narrow{
    zoom: var(--ui-zoom);
    transform: none;
    width: var(--container-w) !important;
  }
}

/* Responsive zoom steps (adjust numbers if you want more/less shrink) */
@media (max-width: 1600px){ .auto-scale{ --ui-zoom: .96; } }
@media (max-width: 1400px){ .auto-scale{ --ui-zoom: .92; } }
@media (max-width: 1200px){ .auto-scale{ --ui-zoom: .88; } }
@media (max-width: 1024px){ .auto-scale{ --ui-zoom: .84; } }
@media (max-width: 820px) { .auto-scale{ --ui-zoom: .80; --container-w: 96vw; } }

/* === MOBILE NAVBAR FIX (no black bar) =============================== */
@media (max-width: 820px){
  /* Top bar (catch common bootstrap variants too) */
  .navbar,
  .navbar.bg-body-tertiary,
  .navbar.bg-dark,
  .navbar.navbar-dark,
  .navbar.navbar-light{
    /* readable colors for links/brand/toggler */
    --bs-navbar-color: var(--text);
    --bs-navbar-hover-color: color-mix(in srgb, var(--blue) 80%, var(--text));
    --bs-navbar-active-color: var(--text);
    --bs-navbar-brand-color: var(--text);
    --bs-navbar-brand-hover-color: var(--text);
    --bs-navbar-toggler-border-color: var(--paper-bd);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,.95)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

    /* light, visible glass instead of near-black */
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--paper-bd);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    position: sticky; top: 0; z-index: 1100;
  }

  /* Collapsed panel background when menu opens */
  .navbar .navbar-collapse{
    background: rgba(18,26,40,.90); /* dark glass panel */
    border: 1px solid var(--paper-bd);
    border-radius: 12px;
    padding: 8px;
    margin-top: 8px;
  }

  /* Dropdown inside navbar */
  .navbar .dropdown-menu{
    background: rgba(18,26,40,.96);
    border: 1px solid var(--paper-bd);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }
  .navbar .dropdown-item{ color: var(--text); }
  .navbar .dropdown-item:hover{
    background: color-mix(in srgb, var(--blue) 14%, transparent);
    color: var(--text);
  }
}
/* If any page still forces a dark bg via classes, neutralize it */
.navbar.bg-dark { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important; }