/* ============================================================
   iME "glass" layer - PROPOSAL 2026-10-08/09, modelled on EMS's applied layer
   (ems/src/main/webapp/resources/css/ems-glass.css). iME uses the Workspace frame
   (ws-shell / ws-side / ws-top / ws-picker, .auth sign-in, .band, .decide-bar), not EMS's
   shell, so the rules are re-aimed at those classes; the tokens are the same design system 2.

   One switch: every rule is scoped to html.ime-glass. To turn it on, link this sheet AFTER ime.css
   (inside <h:body>, which is where ime.css already is, so it lands after PrimeFaces' components.css)
   and add class="ime-glass" to <html> in WEB-INF/template.xhtml and login.xhtml. Remove the class
   and nothing here applies.

   Rules of the layer:
   - Glass only where something sits OVER something else: the sign-in card over the substation
     photograph, the top bar and the decision bar that content scrolls under, floating menus,
     the dimmed page behind a dialog.
   - Never on reading or data surfaces: cards, tables, forms, long text and stat tiles with
     nothing behind them stay solid --surface.
   - Glass needs a backdrop: the photo on the sign-in page; inside the app, a faint amber/red
     glow at the head of the canvas (brand tokens only, 8-13%).
   - Text on glass keeps >= 4.5:1 (measured on the rendered page). Tints are high (74-92%) and
     the glass scopes darker --text-2/--text-3 locally.
   - Fallbacks: no backdrop-filter, prefers-reduced-transparency, prefers-contrast: more and
     forced-colors all get solid surfaces. Nothing here animates.
   ============================================================ */

html.ime-glass {
  --glass-card: rgba(255, 251, 246, .86);
  --glass-tint-strong: color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-edge: rgba(255, 255, 255, .62);
  --glass-line: rgba(28, 26, 23, .08);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .75);
  --glass-blur: blur(22px) saturate(175%);
  --glass-blur-soft: blur(14px) saturate(160%);
  --glass-text-2: #48443E;
  --glass-text-3: #514C45;
  --glass-link: #7A4A05;     /* deep amber for links on the light card */
}
html.ime-glass[data-theme="dark"] {
  --glass-card: rgba(24, 20, 17, .70);
  --glass-edge: rgba(255, 255, 255, .10);
  --glass-line: rgba(255, 255, 255, .07);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .07);
  --glass-text-2: #C4BEB4;
  --glass-text-3: #ADA79C;   /* lighter than EMS (#A39D92): 4.6:1 on the dark top bar was too close */
  --glass-link: #F6B42E;
}

/* ============================================================
   1. Sign-in: the photograph becomes the whole page and the form floats on it as a frosted
      card. CSS only - login.xhtml is not touched.
   ============================================================ */
html.ime-glass .auth-brand {
  position: fixed; inset: 0; z-index: 0;
  padding-right: calc(46% + 48px);            /* its words stay on the left */
}
html.ime-glass .auth-brand::before {
  /* lighter on the right than before, so the card has a picture to frost */
  background:
    radial-gradient(620px 520px at 76% 52%, rgba(229, 142, 10, .30), transparent 70%),
    linear-gradient(100deg, rgba(18, 10, 8, .88) 0%, rgba(18, 10, 8, .62) 42%, rgba(120, 22, 12, .42) 100%);
}
html.ime-glass .auth-form { grid-column: 2; background: transparent; z-index: 1; }
html.ime-glass .auth-card {
  max-width: 430px; padding: 38px 36px 28px;
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: 28px;
  box-shadow: 0 30px 80px rgba(10, 6, 4, .38), 0 8px 22px rgba(10, 6, 4, .18), var(--glass-shine);
  --text-2: var(--glass-text-2); --text-3: var(--glass-text-3);
}
/* fields stay near-solid: typing happens here */
html.ime-glass .auth-card .ui-inputtext,
html.ime-glass .auth-card input {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}
html.ime-glass .auth-card .ui-messages:empty { display: none; }
/* the Show button is inline-styled var(--primary): about 2.4:1 on the white field. Deep amber on the glass card. */
html.ime-glass .auth-card .ie-linkbtn { color: var(--glass-link) !important; }
/* the theme switch now sits on the photo */
html.ime-glass .auth-form > .theme-btn {
  background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .30); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html.ime-glass .auth-form > .theme-btn .lbl { color: #fff; }

/* phones: the photo stays as the backdrop, its long words go, the card floats */
@media (max-width: 860px) {
  html.ime-glass .auth-brand { padding: 28px 24px; justify-content: flex-start; min-height: 0; }
  html.ime-glass .auth-brand > div:not(.logo), html.ime-glass .auth-brand h1, html.ime-glass .auth-brand p,
  html.ime-glass .auth-brand .tiny { display: none; }
  html.ime-glass .auth-brand::before {
    background:
      radial-gradient(420px 420px at 70% 60%, rgba(229, 142, 10, .26), transparent 70%),
      linear-gradient(170deg, rgba(18, 10, 8, .80) 0%, rgba(18, 10, 8, .58) 50%, rgba(120, 22, 12, .52) 100%);
  }
  html.ime-glass .auth-form { grid-column: 1; padding: 104px 16px 28px; align-items: flex-start; min-height: 100vh; }
  html.ime-glass .auth-card { padding: 28px 22px 22px; border-radius: 24px; }
}

/* ============================================================
   2. Canvas: a faint brand glow at the head of the page - the backdrop the top bar needs.
   ============================================================ */
html.ime-glass .ws-main {
  background:
    radial-gradient(900px 520px at 6% -8%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 62%),
    radial-gradient(760px 560px at 104% 2%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--canvas);
}

/* ============================================================
   3. Top bar: it already blurs - this makes it read as glass (see-through, saturated, a lit edge).
   ============================================================ */
html.ime-glass .ws-top {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--glass-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 20px -14px rgba(28, 26, 23, .25);
  --text-2: var(--glass-text-2); --text-3: var(--glass-text-3);   /* muted crumb text: the house --text-3 is about 3:1 here */
}

/* ============================================================
   4. Record header band: a light frost over the glow. OPTIONAL - it is a header.
   ============================================================ */
html.ime-glass .band {
  background: linear-gradient(120deg, color-mix(in srgb, var(--primary-soft) 82%, transparent) 0%,
                                      color-mix(in srgb, var(--surface) 66%, transparent) 64%);
  -webkit-backdrop-filter: var(--glass-blur-soft); backdrop-filter: var(--glass-blur-soft);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shine), var(--shadow-sm);
  --text-2: var(--glass-text-2);
}

/* ============================================================
   5. Sticky decision bar: the case scrolls UNDER it (the iOS toolbar case). Buttons stay solid.
   ============================================================ */
html.ime-glass .decide-bar {
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-top-color: var(--glass-line);
  --text-2: var(--glass-text-2); --text-3: var(--glass-text-3);
}

/* ============================================================
   6. Dialogs: the page behind is frosted and dimmed; the dialog itself stays solid (forms).
   ============================================================ */
html.ime-glass .ui-widget-overlay {
  background: rgba(20, 14, 10, .34);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
}
html.ime-glass .ui-dialog { box-shadow: 0 40px 90px rgba(10, 6, 4, .35), var(--glass-shine); }

/* ============================================================
   7. Floating menus: the page picker (the phone navigation) and dropdown panels.
   The picker menu lives INSIDE the top bar, and a blurred bar is a backdrop root - the menu could
   only frost the bar and the page would show through it sharp (seen on EMS). While the menu is
   open the bar gives up its own filter and goes near-solid; the menu frosts the page.
   ============================================================ */
html.ime-glass .ws-top:has(.ws-picker.open) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
html.ime-glass .ws-picker .picker-menu,
html.ime-glass .ui-selectonemenu-panel,
html.ime-glass .ui-selectcheckboxmenu-panel,
html.ime-glass .ui-autocomplete-panel {
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge);
  --text-2: var(--glass-text-2); --text-3: var(--glass-text-3);
}
/* the phone picker is the navigation: 93%, so tiles under it do not ghost through the item names */
html.ime-glass .ws-picker .picker-menu { background: color-mix(in srgb, var(--surface) 93%, transparent); }

/* ============================================================
   8. Side rail: stays dark and opaque (it is the frame; nothing scrolls under it). A soft brand
      glow at its head and foot, and a lit edge on the current item. OPTIONAL.
   ============================================================ */
html.ime-glass .ws-side {
  background:
    radial-gradient(260px 220px at 0% 0%, rgba(246, 180, 46, .13), transparent 70%),
    radial-gradient(300px 260px at 100% 100%, rgba(210, 42, 32, .14), transparent 70%),
    var(--sidebar);
}
html.ime-glass .ws-nav .item.active {
  background: linear-gradient(90deg, rgba(246, 180, 46, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ============================================================
   Fallbacks
   ============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.ime-glass { --glass-tint-strong: var(--surface); --glass-card: var(--surface); }
  html.ime-glass .ws-top, html.ime-glass .band { background: var(--surface); }
  html.ime-glass .ui-widget-overlay { background: rgba(15, 13, 11, .5); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html.ime-glass { --glass-tint-strong: var(--surface); --glass-card: var(--surface); }
  html.ime-glass .auth-card, html.ime-glass .ws-top, html.ime-glass .band, html.ime-glass .decide-bar,
  html.ime-glass .ws-picker .picker-menu, html.ime-glass .ui-selectonemenu-panel,
  html.ime-glass .ui-selectcheckboxmenu-panel, html.ime-glass .ui-autocomplete-panel,
  html.ime-glass .ui-widget-overlay, html.ime-glass .auth-form > .theme-btn {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.ime-glass .auth-card, html.ime-glass .ws-top, html.ime-glass .band { background: var(--surface); }
  html.ime-glass .ui-widget-overlay { background: rgba(15, 13, 11, .5); }
  html.ime-glass .ws-main { background: var(--canvas); }
}
@media (forced-colors: active) {
  html.ime-glass * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}