/* FPG "glass" look (template v2.1, Peter 2026-11-13) - loaded AFTER style.css and the site's own CSS.
   Same recipe as sandbox.fpgwholesale.net in light mode: a FIXED pale background with soft color glows, frosted-glass
   panels that float over it, a FIXED navy menu on the left (the page scrolls, the menu stays), a sticky glass top bar.
   Only overrides - remove the <link> to glass.css in base.html to get the plain v2.0 look back. */
:root { --glass: rgba(255,255,255,.55); --glass-edge: rgba(0,0,0,.13); --side-w: 250px; }

body { background: #EEF1F7; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42vmax 42vmax at 4% 2%, rgba(0,122,255,.30), transparent 70%),
              radial-gradient(40vmax 40vmax at 98% 4%, rgba(175,82,222,.22), transparent 70%),
              radial-gradient(44vmax 44vmax at 2% 100%, rgba(48,176,199,.26), transparent 70%),
              radial-gradient(40vmax 40vmax at 100% 98%, rgba(255,149,0,.14), transparent 70%); }

/* the floating bubbles */
.card, .panel, .stat, .tile, .topbar, .login-card, .ddcard, .stub, .es, .flash, .pn {
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0) 42%), var(--glass);
  -webkit-backdrop-filter: saturate(1.9) blur(22px); backdrop-filter: saturate(1.9) blur(22px);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -.5px 0 rgba(255,255,255,.45), 0 14px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05); }
.card, .panel { border-radius: 22px; }
.stat { border-radius: 18px; border-top: 5px solid var(--navy); }
.stat.red { border-top-color: var(--err); } .stat.amber { border-top-color: #B26A00; } .stat.green { border-top-color: var(--ok); }
.pn { border-radius: 0; border-width: 1px 0 0; }   /* Employee Portal bottom menu */
.flash.ok { background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 42%), rgba(52,199,89,.16); }
.flash.error { background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0) 42%), rgba(255,59,48,.13); }
table, .card table, .panel table { background: transparent; }
tbody tr:hover td { background: rgba(255,255,255,.45); }
th, td { border-bottom-color: rgba(0,0,0,.07); }

/* FIXED navy menu (computer); the page scrolls next to it */
@media (min-width: 761px) {
  .shell { display: block; min-height: 100vh; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; width: var(--side-w); max-width: none; overflow-y: auto; z-index: 30;
          background: linear-gradient(180deg, #000066, #00004A); box-shadow: 6px 0 30px rgba(0,0,40,.16); }
  .side a.nav { border-left: 3px solid transparent; }
  .side a.nav.on { border-left-color: #fff; }
  .main { margin-left: var(--side-w); min-height: 100vh; }
}
/* phone: the navy menu stays at the top while the page scrolls */
@media (max-width: 760px) { .side { position: sticky; top: 0; z-index: 30; } }

/* glass top bar that stays at the top */
.topbar { position: sticky; top: 12px; z-index: 20; margin: 12px 24px 0; border-radius: 20px; border-bottom: 1px solid var(--glass-edge); }
.topbar .search { background: rgba(255,255,255,.75); }
@media (max-width: 760px) { .topbar { top: auto; position: relative; margin: 10px 16px 0; } }
footer.foot { border-top: 0; background: transparent; }

/* sign-in page: glass card over the glows */
.login-page { background: transparent; }
.login-page .band-top, .login-page .band-bottom { display: none; }
.login-card { border-radius: 24px; }
.login-foot, .login-foot a { color: var(--muted); }

@media (prefers-reduced-transparency: reduce) {
  .card, .panel, .stat, .tile, .topbar, .login-card, .ddcard, .stub, .es, .flash { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}