/* ---------------------------------------------------------- shared glass layer (all three styles) */
:root {
  --panel: var(--glass);
  --panel-2: var(--glass-2);
  --input: rgba(0, 0, 0, .28);
  --line: var(--glass-line);
  --line-strong: var(--glass-hi);
  --sans: var(--font), 'Segoe UI', system-ui, Arial, sans-serif;
  --serif: var(--sans);
}
html { background: var(--base); }
body { background: transparent; background-image: none; font-family: var(--sans); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--aura); }

/* the glass recipe: see-through fill, light top edge, soft shadow */
.panel, .lcard, .today-t, .kpi, .req, .aside-box, .cal, .xl-wrap, .card, .pcard, .item, .inv, .cat-chip, .login-box, .sec-card {
  background: var(--glass-fill); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
.panel, .today-t, .kpi, .cal, .inv, .aside-box, .req { -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%); }
.lcard:hover, .today-t:hover, .kpi:hover { border-color: var(--glass-hover); }

/* bars and floating things: more blur, more body, so text behind never fights */
.sbar { background: var(--bar-fill); border-right: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); }
.app-header, .topbar { background: var(--bar-fill); border-bottom: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.menu, .popover, .bell-pop, .modal, .pal, .toast, .sheet, .cc-menu, .qf-wrap .popover {
  background: var(--float-fill); border: 1px solid var(--glass-hi);
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 30px 80px rgba(0, 0, 0, .6); }
.tabbar { background: var(--bar-fill); border-top: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.savebar { background: var(--float-fill); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-top: 1px solid var(--glass-hi); }

/* search fields */
.search-trigger, .bigsearch, .hero2 .bigsearch { background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--glass-edge); }
.search-trigger:hover { border-color: var(--glass-hover); }

/* dashboard hero: the featured photo shows through a glass card */
.hero2 { background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
.hero2::before { opacity: .55; }
.hero2::after { background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .15) 100%); }
.hero2-tag { background: rgba(0, 0, 0, .35); border: 1px solid var(--glass-hi); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cat-tile { border: 1px solid var(--glass-line); }
.cat-tile-top { background: rgba(255, 255, 255, .08); border-color: var(--glass-hi); }

/* listing card photo labels: frosted chips */
.lcard-ref, .lcard-count { background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lcard-foot::before { background: rgba(0, 0, 0, .3); border-color: var(--glass-line); }
.lcard-img { background: rgba(0, 0, 0, .4); }

/* small controls */
.seg, .rte, .toast { background-color: rgba(0, 0, 0, .3); }
.qf, .chip-btn, .seg, .tb-back, .side-collapse { background: rgba(255, 255, 255, .04); border-color: var(--glass-line); }
.qf:hover, .chip-btn:hover { background: rgba(255, 255, 255, .08); border-color: var(--glass-hover); }
.field input, .field select, .field textarea, .filters input, .filters select, .lbar-right select {
  background: rgba(0, 0, 0, .3); border-color: var(--glass-line); }
.btn.ghost { background: rgba(255, 255, 255, .04); border-color: var(--glass-hi); }
.btn.ghost:hover { background: rgba(255, 255, 255, .09); }
.inv-bar { background: rgba(255, 255, 255, .06); }
.xl th, .xl th:first-child { background: var(--table-head); }
.xl th:first-child, .xl td:first-child { background: var(--table-head); }

/* phones: keep the look but skip the heaviest blur so scrolling stays smooth */
@media (max-width: 900px) {
  .panel, .today-t, .kpi, .cal, .inv, .aside-box, .req { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .panel, .lcard, .today-t, .kpi, .req, .aside-box, .cal, .inv { background: var(--solid-fill); }
}
/* =====================================================================
   Style 3: Floating. Menu and top bar float as glass islands,
   rounder shapes, plain black background.
   ===================================================================== */
@font-face { font-family: 'Outfit Var'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/outfit-latin-wght-normal.woff2') format('woff2-variations'); }
:root {
  --font: 'Outfit Var';
  --base: #000;
  --aura: #000;
  --glass: rgba(255, 255, 255, .05);
  --glass-2: rgba(255, 255, 255, .085);
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  --glass-line: rgba(255, 255, 255, .1);
  --glass-hi: rgba(255, 255, 255, .18);
  --glass-edge: rgba(255, 255, 255, .1);
  --glass-hover: rgba(217, 166, 46, .55);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  --bar-fill: rgba(16, 16, 16, .55);
  --float-fill: rgba(24, 24, 24, .8);
  --solid-fill: #141414;
  --table-head: #161616;
  --blur: 24px;
  --radius: 24px;
  --gap: 14px;
}
body { font-size: 15.5px; }
.btn { border-radius: 999px; font-weight: 600; }
.panel, .cal, .xl-wrap, .inv, .req, .aside-box, .kpi { border-radius: 24px; }
.today-t { border-radius: 22px; }
.lcard { border-radius: 26px; }
.lcard-img { border-radius: 25px 25px 0 0; }
.hero2 { border-radius: 30px; }
.cat-tile { border-radius: 24px; }
.page-head h1 { font-weight: 600; font-size: 36px; letter-spacing: -.02em; }
.hero2 h1 { font-weight: 600; }
.side-a { border-radius: 999px; padding: 10px 14px; }
.side-a.active { background: var(--gold); color: #120d02; font-weight: 600; box-shadow: 0 8px 24px rgba(217, 166, 46, .28); }
.side-a.active .ic { color: #120d02; }
.side-a.active::before { display: none; }
.side-a.active .side-c { color: rgba(18, 13, 2, .65); }
.side-new-btn { border-radius: 999px; }
.side-user { border-radius: 18px; }
.search-trigger { border-radius: 999px; height: 40px; }
.tb-back, .tb-icon, .bell-btn { border-radius: 999px; }
/* floating islands on computers */
@media (min-width: 1101px) {
  .sbar { top: var(--gap); left: var(--gap); bottom: var(--gap); border: 1px solid var(--glass-line); border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px rgba(0, 0, 0, .45); }
  .shell > .topbar, .shell > main { margin-left: calc(var(--side) + var(--gap) * 2); }
  .shell.mini > .topbar, .shell.mini > main { margin-left: calc(var(--side-mini) + var(--gap) * 2); }
  .shell > .topbar { top: var(--gap); margin-top: var(--gap); margin-right: var(--gap); border: 1px solid var(--glass-line); border-radius: 22px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 44px rgba(0, 0, 0, .4); }
  main > .gallery { margin: var(--gap) var(--gap) 0 0; border-radius: 26px; overflow: hidden; }
}

/* ---------------------------------------------------------- finishing touches */
/* sign-in page: the glass card floats over the gold light */
.auth { background: transparent; }
.auth-panel { background: transparent; }
.auth-card { padding: 34px 32px 28px; border-radius: 28px; background: var(--glass-fill); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 30px 70px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
.auth-hero { border-radius: 0 32px 32px 0; overflow: hidden; }

/* report panels with nothing in them yet get proper spacing */
.reports .panel > p.muted { margin: 0; padding: 16px 22px 20px; }

/* side menu on phones and tablets: more solid so the page behind doesn't show through the words */
@media (max-width: 1100px) {
  .sbar { background: rgba(14, 14, 14, .94); border-radius: 0 26px 26px 0; }
}

/* computers: chat and the save bar float too */
@media (min-width: 1101px) {
  .chat { height: calc(calc(100dvh / var(--z)) - 66px - var(--gap) * 3); margin: var(--gap) var(--gap) 0 0;
    border: 1px solid var(--glass-line); border-radius: 26px; overflow: hidden; background: var(--glass-fill);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow); }
  .savebar { bottom: var(--gap); margin: 0 var(--gap) var(--gap) 0; border: 1px solid var(--glass-hi); border-radius: 22px;
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 44px rgba(0, 0, 0, .45); }
}

/* phones: the bottom bar floats as a glass pill */
@media (max-width: 760px) {
  .tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 64px; padding-bottom: 0;
    border: 1px solid var(--glass-hi); border-radius: 26px; background: rgba(20, 20, 20, .92);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 16px 40px rgba(0, 0, 0, .55); }
  .shell > main { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .savebar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); margin: 0 12px; border: 1px solid var(--glass-hi); border-radius: 20px; }
  .chat { height: calc(calc(100dvh / var(--z)) - 60px - 84px - env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------- no bars: the buttons float on the page (Nov 2026)
   The top bar and the Save bar have no panel of their own any more; each button keeps its own glass so it stays
   readable over whatever scrolls underneath. */
.app-header, .topbar, .shell > .topbar {
  background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar .tb-back, .topbar .tb-icon, .topbar .bell-btn, .topbar .hamburger, .topbar .search-trigger {
  background: var(--float-fill); border: 1px solid var(--glass-hi);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 10px 28px rgba(0, 0, 0, .45); }
.topbar .tb-back:hover, .topbar .tb-icon:hover, .topbar .bell-btn:hover, .topbar .hamburger:hover, .topbar .search-trigger:hover { border-color: var(--glass-hover); }
/* the page name floats too: a small glass pill so text scrolling underneath never runs into it */
.topbar .tb-title:not(:empty) { padding: 7px 16px; border-radius: 999px; background: var(--float-fill); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 10px 28px rgba(0, 0, 0, .4); }
.topbar .tb-back + .tb-title { margin-left: 0; }

/* the Save bar: only Cancel and Save changes float at the bottom */
.savebar, .shell .savebar { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.savebar .savebar-in > * { pointer-events: auto; }
.savebar .btn { box-shadow: inset 0 1px 0 var(--glass-edge), 0 14px 34px rgba(0, 0, 0, .55); }
.savebar .btn.ghost { background: var(--float-fill); border: 1px solid var(--glass-hi); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.savebar .msg:not(:empty) { padding: 8px 14px; border-radius: 999px; background: rgba(40, 12, 12, .92); border: 1px solid rgba(248, 113, 113, .35); }