/* The staff console's look: a softly blurred office photo behind frosted-glass panels.
   Staff pages only (it is linked from staff/base.html), and only on pages with the app shell,
   so the sign-in pages and both portals are unchanged. Colours follow the light/dark theme. */

:root {
  --glass: rgba(250, 250, 247, 0.64);
  --glass-strong: rgba(246, 246, 241, 0.70);
  --glass-line: rgba(255, 255, 255, 0.72);
  --glass-shade: 0 8px 28px rgba(40, 34, 22, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --glass-veil: linear-gradient(160deg, rgba(240, 238, 232, 0.72), rgba(236, 237, 231, 0.88));
  --glass-sunken: rgba(226, 227, 219, 0.55);
  --glass-filter: blur(20px) saturate(1.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(18, 22, 28, 0.46);
    --glass-strong: rgba(12, 15, 20, 0.52);
    --glass-line: rgba(255, 255, 255, 0.11);
    --glass-shade: 0 10px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --glass-veil: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(160deg, rgba(8, 11, 15, 0.10), rgba(8, 11, 15, 0.38));
    --glass-sunken: rgba(10, 13, 18, 0.34);
    --glass-filter: blur(22px) saturate(1.3);
  }
}

:root[data-theme="dark"] {
  --glass: rgba(18, 22, 28, 0.46);
  --glass-strong: rgba(12, 15, 20, 0.52);
  --glass-line: rgba(255, 255, 255, 0.11);
  --glass-shade: 0 10px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-veil: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(160deg, rgba(8, 11, 15, 0.10), rgba(8, 11, 15, 0.38));
  --glass-sunken: rgba(10, 13, 18, 0.34);
  --glass-filter: blur(22px) saturate(1.3);
}

/* The photo sits behind everything, fixed in place while the page scrolls. */
body:has(.app-shell)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--glass-veil), url("staff-bg.69e2a99fdd97.jpg") 70% 60% / cover no-repeat;
}
.app-shell { position: relative; z-index: 1; }
body:has(.app-shell) .app-main { background: transparent; }

/* Side menu, top bar and phone bar */
.app-shell .sidebar,
.app-shell .app-topbar,
.app-shell .mobile-bar {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-color: var(--glass-line);
}

/* Panels and cards */
.app-shell .card,
.app-shell .panel,
.app-shell .form-panel,
.app-shell .stat-card,
.app-shell .empty-note {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shade);
}
.app-shell .empty-note { box-shadow: none; }

/* A card that has a menu open must sit above the cards after it (each glass card is its own layer). */
.app-shell .card:has(details[open]),
.app-shell .panel:has(details[open]) { position: relative; z-index: 20; }

/* Tables inside a card are see-through too */
.app-shell .table-scroll { border-color: var(--glass-line); }
.app-shell table { background: var(--glass-sunken); }
.app-shell thead th { background: transparent; border-bottom-color: var(--glass-line); }
.app-shell tbody td { border-bottom-color: color-mix(in srgb, var(--glass-line) 70%, transparent); }
.app-shell .stage-pill { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: var(--glass-line); }
.app-shell .btn-ghost { background: color-mix(in srgb, var(--text) 5%, transparent); }

/* The interview calendar's grid */
.app-shell .cal-cell { background: transparent; }
.app-shell .cal-cell.is-today { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.app-shell .cal-day-head { background: transparent; }
.app-shell .seg-item { background: transparent; }

/* Without see-through support, or if the person asked their system for less transparency, go solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-shell .sidebar, .app-shell .app-topbar, .app-shell .mobile-bar { background: var(--bg-raised); }
  .app-shell .card, .app-shell .panel, .app-shell .form-panel, .app-shell .stat-card, .app-shell .empty-note { background: var(--bg-raised); }
  .app-shell table { background: var(--bg-raised); }
}
@media (prefers-reduced-transparency: reduce) {
  body:has(.app-shell)::before { background: var(--bg); }
  .app-shell .sidebar, .app-shell .app-topbar, .app-shell .mobile-bar,
  .app-shell .card, .app-shell .panel, .app-shell .form-panel, .app-shell .stat-card, .app-shell .empty-note {
    background: var(--bg-raised); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .app-shell table { background: var(--bg-raised); }
}

/* Printed pages (invoices) stay plain */
@media print {
  body:has(.app-shell)::before { display: none; }
  .app-shell .sidebar, .app-shell .app-topbar, .app-shell .card, .app-shell .panel, .app-shell .stat-card {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
}