/* =====================================================================
   LMS — "Premium Glass" theme layer
   Governu Timor-Leste · IGEADI National OHS Licensing System

   Loaded AFTER app.css on every page. app.css still owns the structure,
   the spacing and the component anatomy; this file only changes the
   *material*: opaque paper becomes frosted glass floating over an ambient
   light field.

   The Timor state red (#b5121b) is untouched — it remains the single
   accent, so the system still reads as an official government service
   rather than a consumer product.

   Removing the one <link> that pulls this file reverts the whole
   application to the original institutional theme. Nothing else depends
   on it.

   Contents
     1.  Glass tokens
     2.  Page surface (ambient light)
     3.  Masthead · portal bar · admin bar
     4.  Sidebar
     5.  Cards, tiles and tables
     6.  Buttons
     7.  Form fields
     8.  Pills, notices, chips
     9.  Licence card, course cards, timeline, steps
     10. Toast
     11. Login / OTP / register
     12. Error pages
     13. Public site (body.pub-glass)
     14. Print — glass is flattened so paper output stays clean
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · Glass tokens
   --------------------------------------------------------------------- */
:root {
  --g-blur:        saturate(180%) blur(20px);
  --g-blur-strong: saturate(180%) blur(28px);

  --g-surface:     rgba(255, 255, 255, .72);   /* standard glass       */
  --g-surface-2:   rgba(255, 255, 255, .86);   /* raised / modal glass */
  --g-surface-3:   rgba(255, 255, 255, .55);   /* recessed, e.g. rails */
  --g-hairline:    rgba(20, 27, 36, .07);
  --g-edge:        rgba(255, 255, 255, .88);   /* lit top edge         */

  --g-ink-glass:   rgba(20, 27, 36, .82);      /* smoked glass (masthead) */

  --g-shadow-sm:   0 1px 2px rgba(20,27,36,.04), 0 4px 14px -6px rgba(20,27,36,.10);
  --g-shadow:      0 2px 4px rgba(20,27,36,.03), 0 14px 34px -14px rgba(20,27,36,.20);
  --g-shadow-lg:   0 4px 10px rgba(20,27,36,.04), 0 30px 64px -22px rgba(20,27,36,.28);

  --g-radius:      14px;
  --g-radius-sm:   10px;

  /* the state red, as a glow rather than a flat fill */
  --g-state-glow:  0 8px 22px -10px rgba(181, 18, 27, .70);
}

/* ---------------------------------------------------------------------
   2 · Page surface — the light the glass floats on
   --------------------------------------------------------------------- */
body {
  background: #f4f3ef;
  position: relative;
}

/* Fixed so the light does not scroll with the content: the glass moves,
   the light stays. aria-hidden by construction (pseudo-element). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(880px 620px at  6% -10%, rgba(181, 18, 27, .10), transparent 62%),
    radial-gradient(760px 540px at 96%   2%, rgba(199, 154, 30, .12), transparent 62%),
    radial-gradient(820px 560px at 60% 106%, rgba(31,  95, 139, .10), transparent 60%),
    linear-gradient(168deg, #fdfdfb 0%, #f4f4ef 46%, #f7f4ee 100%);
}

/* Anything that paints its own background must sit above the light. */
.lms-shell, .lms-main, .lms-side { position: relative; z-index: 1; }

/* A slightly wider, calmer shell reads as more premium at desktop sizes. */
.lms-main { padding-top: 22px; }

/* ---------------------------------------------------------------------
   3 · Masthead · portal bar · admin bar
   --------------------------------------------------------------------- */
.lms-mast {
  background: var(--g-ink-glass);
  -webkit-backdrop-filter: var(--g-blur-strong);
          backdrop-filter: var(--g-blur-strong);
  border-bottom: 1px solid rgba(181, 18, 27, .55);
  box-shadow: 0 1px 30px -8px rgba(20, 27, 36, .55);
  position: sticky;
  top: 0;
  z-index: 40;
}
.lms-mast__rule { background: rgba(255, 255, 255, .22); }

.lms-portalbar {
  background: rgba(255, 255, 255, .66);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border-bottom: 1px solid var(--g-hairline);
  position: sticky;
  top: 0;
  z-index: 30;
}
.lms-portal-tab { border-radius: 10px 10px 0 0; transition: color .15s, background .15s, border-color .15s; }
.lms-portal-tab:hover { background: rgba(20, 27, 36, .045); }
.lms-portal-tab.is-on { background: rgba(181, 18, 27, .07); }

.lms-brandbar {
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border-bottom: 1px solid var(--g-hairline);
}

/* ---------------------------------------------------------------------
   4 · Sidebar
   --------------------------------------------------------------------- */
.lms-side {
  background: var(--g-surface-3);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border-right: 1px solid var(--g-hairline);
}
.lms-nav {
  border-radius: var(--g-radius-sm);
  transition: background .14s, color .14s, box-shadow .14s, transform .14s;
}
.lms-nav:hover {
  background: rgba(255, 255, 255, .85);
  box-shadow: var(--g-shadow-sm);
}
.lms-nav.is-active {
  background: linear-gradient(135deg, var(--state), var(--state-dk));
  color: #fff;
  box-shadow: var(--g-state-glow);
}
.lms-nav.is-active .lms-modid { color: rgba(255, 255, 255, .74); }
.lms-side__label { color: var(--ink-3); }

.lms-badge { box-shadow: 0 4px 10px -4px rgba(181, 18, 27, .8); }

/* ---------------------------------------------------------------------
   5 · Cards, tiles and tables
   --------------------------------------------------------------------- */
.lms-card {
  background: var(--g-surface);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
  overflow: hidden;
}
.lms-card__h {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
  border-bottom: 1px solid var(--g-hairline);
}

.lms-tile {
  background: var(--g-surface);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.lms-tile:hover { transform: translateY(-2px); box-shadow: var(--g-shadow); }
/* The accent rail becomes a lit top edge — reads better on glass. */
.lms-tile::before { width: 100%; height: 3px; bottom: auto; opacity: .92; }
/* …and a soft halo of the same colour in the corner. */
.lms-tile::after {
  content: "";
  position: absolute; right: -38px; bottom: -44px;
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, var(--state), transparent 68%);
  opacity: .10; pointer-events: none;
}
.lms-tile--gold::after { background: radial-gradient(circle at 34% 34%, var(--gold), transparent 68%); }
.lms-tile--info::after { background: radial-gradient(circle at 34% 34%, var(--info), transparent 68%); }
.lms-tile--ink::after  { background: radial-gradient(circle at 34% 34%, var(--ink),  transparent 68%); }

/* Tables sit inside glass, so they must not paint their own paper. */
.lms-table th {
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border-bottom: 1px solid var(--g-hairline);
}
.lms-table td { border-bottom: 1px solid rgba(20, 27, 36, .05); }
.lms-table tbody tr { transition: background .12s; }
.lms-table tbody tr:hover { background: rgba(255, 255, 255, .55); }
.lms-table tbody tr.is-clickable:hover { background: rgba(181, 18, 27, .045); }

/* ---------------------------------------------------------------------
   6 · Buttons
   --------------------------------------------------------------------- */
.lms-btn {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border: 1px solid rgba(20, 27, 36, .12);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-shadow-sm);
  transition: transform .14s, box-shadow .14s, background .14s, border-color .14s, color .14s;
}
.lms-btn:hover { transform: translateY(-1px); border-color: rgba(20, 27, 36, .24); }
.lms-btn:active { transform: translateY(0); }

.lms-btn--primary {
  background: linear-gradient(135deg, var(--state), var(--state-dk));
  border-color: transparent;
  box-shadow: var(--g-state-glow);
}
.lms-btn--primary:hover {
  background: linear-gradient(135deg, #c2151f, var(--state-dk));
  box-shadow: 0 12px 28px -10px rgba(181, 18, 27, .82);
}
.lms-btn--ink {
  background: linear-gradient(135deg, #232f3c, var(--ink));
  border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(20, 27, 36, .8);
}
.lms-btn--ghost { background: transparent; box-shadow: none; border-color: transparent; }
.lms-btn--ghost:hover { background: rgba(255, 255, 255, .7); box-shadow: var(--g-shadow-sm); }

/* ---------------------------------------------------------------------
   7 · Form fields
   --------------------------------------------------------------------- */
.lms-input, .lms-select, .lms-textarea {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(20, 27, 36, .13);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-shadow-sm);
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.lms-input:focus, .lms-select:focus, .lms-textarea:focus {
  background: #fff;
  border-color: var(--state);
  box-shadow: 0 0 0 3px rgba(181, 18, 27, .14);
}
.lms-input:disabled, .lms-input[readonly] { background: rgba(255, 255, 255, .5); }

.lms-radio-card {
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border-color: var(--g-hairline);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-shadow-sm);
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
.lms-radio-card:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .88); }
.lms-radio-card:has(input:checked) {
  background: rgba(181, 18, 27, .05);
  box-shadow: 0 0 0 3px rgba(181, 18, 27, .10), var(--g-shadow-sm);
}

/* ---------------------------------------------------------------------
   8 · Pills, notices, chips
   --------------------------------------------------------------------- */
.lms-pill { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.lms-notice {
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-shadow-sm);
  background: rgba(230, 238, 245, .62);
}
.lms-notice--bad  { background: rgba(251, 231, 231, .66); }
.lms-notice--warn { background: rgba(251, 240, 221, .66); }
.lms-notice--ok   { background: rgba(230, 242, 234, .66); }

.lms-chip, .lms-sector-chip {
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-color: var(--g-hairline);
  box-shadow: var(--g-shadow-sm);
}

.lms-ph { border-bottom-color: var(--g-hairline); }
.lms-hr { background: var(--g-hairline); }

/* ---------------------------------------------------------------------
   9 · Licence card, course cards, timeline, steps
   --------------------------------------------------------------------- */
.lms-dlc {
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-lg);
  overflow: hidden;
}
.lms-vcard, .lms-chero, .lms-stile {
  border-radius: var(--g-radius);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255, 255, 255, .85);
  overflow: hidden;
}
.lms-vcard {
  background: var(--g-surface);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.lms-vcard:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-lg); }

.lms-timeline::before { background: var(--g-hairline); }
.lms-timeline__m { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.lms-step__n { box-shadow: var(--g-shadow-sm); }
.lms-bar { background: rgba(20, 27, 36, .07); }
.lms-bar i { background: linear-gradient(90deg, var(--state), #d6323c); }

/* ---------------------------------------------------------------------
   10 · Toast
   --------------------------------------------------------------------- */
.lms-toast {
  background: rgba(20, 27, 36, .84);
  -webkit-backdrop-filter: var(--g-blur-strong);
          backdrop-filter: var(--g-blur-strong);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-shadow-lg);
}

/* ---------------------------------------------------------------------
   11 · Login / OTP / register
   The auth screens keep their dark cinematic aside; the form panel
   becomes a floating glass sheet on top of it.
   --------------------------------------------------------------------- */
.lms-login-panel {
  background: transparent;
  position: relative;
}
.lms-login-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(700px 520px at 30% 0%, rgba(181, 18, 27, .12), transparent 62%),
    linear-gradient(168deg, #fdfdfb 0%, #f4f4ef 60%, #f7f4ee 100%);
}
.lms-login-panel > * {
  position: relative; z-index: 1;
  background: var(--g-surface-2);
  -webkit-backdrop-filter: var(--g-blur-strong);
          backdrop-filter: var(--g-blur-strong);
  border: 1px solid var(--g-edge);
  border-radius: 18px;
  box-shadow: var(--g-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .95);
  padding: 30px 28px;
  max-width: 460px;
  width: 100%;
}

/* ---------------------------------------------------------------------
   12 · Error pages (403 / 404 / 405 / 419 / 500)

   These views are a centred <main> with no component class of their own,
   so the panel is built from the layout they already use. NOTE: .lms-error
   is app.css's inline field-validation text — it must NOT be touched here.
   --------------------------------------------------------------------- */
body.grid.place-items-center > main {
  background: var(--g-surface-2);
  -webkit-backdrop-filter: var(--g-blur-strong);
          backdrop-filter: var(--g-blur-strong);
  border: 1px solid var(--g-edge);
  border-radius: 18px;
  box-shadow: var(--g-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .95);
  padding: 38px 32px;
}

/* ---------------------------------------------------------------------
   13 · Public site  (resources/views/site/home.php → <body class="pub-glass">)

   The public site ships its own variables and component classes. They are
   redefined on the body so the government identity — flag bar, tais
   border, state red — survives, while every surface becomes glass.
   --------------------------------------------------------------------- */
body.pub-glass {
  --paper:   #f4f3ef;
  --paper-2: rgba(255, 255, 255, .74);
  --paper-3: rgba(255, 255, 255, .52);
  --line:    rgba(20, 19, 15, .09);
  --line-2:  rgba(20, 19, 15, .06);
  background: #f4f3ef;
}
body.pub-glass::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 640px at  4% -8%, rgba(181, 18, 27, .11), transparent 62%),
    radial-gradient(780px 560px at 97%  2%, rgba(199, 154, 30, .13), transparent 62%),
    radial-gradient(840px 580px at 58% 105%, rgba(31, 95, 139, .09), transparent 60%),
    linear-gradient(168deg, #fdfdfb 0%, #f4f4ef 46%, #f8f5ef 100%);
}
body.pub-glass .mast {
  background: rgba(255, 255, 255, .70);
  -webkit-backdrop-filter: var(--g-blur-strong);
          backdrop-filter: var(--g-blur-strong);
  border-bottom: 1px solid var(--g-hairline);
  box-shadow: 0 1px 26px -10px rgba(22, 19, 15, .30);
}
body.pub-glass .govbar {
  background: rgba(22, 19, 15, .88);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
}
body.pub-glass .card {
  background: var(--g-surface);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
body.pub-glass .card:hover { transform: translateY(-2px); box-shadow: var(--g-shadow-lg); }
body.pub-glass .btn {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  border: 1px solid rgba(22, 19, 15, .12);
  border-radius: var(--g-radius-sm);
  box-shadow: var(--g-shadow-sm);
  transition: transform .14s, box-shadow .14s, background .14s, border-color .14s;
}
body.pub-glass .btn:hover { transform: translateY(-1px); }
body.pub-glass .btn.pri {
  background: linear-gradient(135deg, var(--red), var(--red-dk));
  border-color: transparent; color: #fff;
  box-shadow: var(--g-state-glow);
}
body.pub-glass .btn.ghost {
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
body.pub-glass nav.main button { border-radius: var(--g-radius-sm); transition: background .14s, color .14s; }
body.pub-glass nav.main button:hover { background: rgba(255, 255, 255, .8); }
body.pub-glass .vstrip {
  -webkit-backdrop-filter: var(--g-blur-strong);
          backdrop-filter: var(--g-blur-strong);
}
body.pub-glass .vstrip .box,
body.pub-glass .vstrip form.box {
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--g-radius-sm);
  overflow: hidden;
}
body.pub-glass .pill { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ── Panels that hang OVER the page, not on it ─────────────────────────
   --paper-2 is redefined in this file as rgba(255,255,255,.74). That is
   right for a card resting on the page background, which is pale and
   quiet. It is wrong for anything that floats above arbitrary content:
   the burger drawer and the search panel both take their background
   from it, and both were laid over the hero — a dark photograph and a
   48px headline — which read straight through them.

   Neither had a backdrop-filter of its own either. A translucent panel
   with no blur is just a weak veil; the blur is what turns whatever is
   behind it into a surface. Both get one here, plus a much heavier
   wash, because a menu you cannot read is not a menu. */
@media (max-width: 1024px) {
  body.pub-glass nav.main {
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: var(--g-blur-strong);
            backdrop-filter: var(--g-blur-strong);
    border-bottom: 1px solid var(--g-hairline);
    box-shadow: 0 26px 50px -18px rgba(22, 19, 15, .38);
  }
}
body.pub-glass .qs-panel {
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: var(--g-blur-strong);
          backdrop-filter: var(--g-blur-strong);
}
/* No backdrop-filter (Safari < 16, older Android): a 93% wash with
   nothing behind it to blur still shows the headline through. Go solid
   rather than pretty. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.pub-glass nav.main,
  body.pub-glass .qs-panel { background: #fff; }
}
body.pub-glass .lic-card {
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-lg);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
}

/* ---------------------------------------------------------------------
   14 · Print — flatten the glass
   Blur and translucency print as grey mush and waste toner, so on paper
   every surface returns to plain white with a hairline rule.
   --------------------------------------------------------------------- */
@media print {
  body, body.pub-glass { background: #fff !important; }
  body::before, body.pub-glass::after { display: none !important; }

  .lms-card, .lms-tile, .lms-side, .lms-mast, .lms-portalbar, .lms-notice,
  .lms-btn, .lms-input, .lms-vcard, .lms-chero, .lms-stile, .lms-radio-card,
  .lms-login-panel > *, body.grid.place-items-center > main,
  body.pub-glass .card, body.pub-glass .btn, body.pub-glass .mast {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    transform: none !important;
  }
  .lms-tile::after, .lms-card__h { background: none !important; }
}

/* ---------------------------------------------------------------------
   Graceful degradation — browsers without backdrop-filter (older Firefox
   ESR, Edge < 79) get solid surfaces instead of see-through ones, so the
   text never loses contrast.
   --------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lms-card, .lms-tile, .lms-btn, .lms-notice, .lms-vcard, .lms-radio-card,
  .lms-login-panel > *, body.grid.place-items-center > main,
  body.pub-glass .card, body.pub-glass .btn {
    background: #fff;
  }
  .lms-side, .lms-portalbar, body.pub-glass .mast { background: #fbfbf9; }
  .lms-mast { background: var(--ink); }
  .lms-table th { background: #f7f6f2; }
}