/* =====================================================================
   AREMIS - the "Aero navy & gold" skin, shared with AMBE CoreSupply.

   Loaded after aero.css. aero.css still owns the layout - the grid, the
   room map, the chat dock, the roster, every media query. This file owns
   how it looks: a deep navy sidebar, a pearl working surface, white glass
   panels, 3D buttons, gold where something is selected or matters.

   The two products sit on the same desk in the same hotel, and they should
   not look like two vendors. Everything here is lifted from AMBE's
   10-base / 20-shell / 30-content stylesheets and re-expressed against
   AREMIS's class names, so that a change to the palette is one block below.
   ===================================================================== */

/* ------------------------------- the face ------------------------------ */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nunito-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nunito-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nunito-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-vietnamese-700-normal.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-vietnamese-800-normal.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }

/* ------------------------------ the palette ---------------------------- */
:root {
  --navy: #152A4A; --navy-2: #22406E; --navy-3: #0E1D35; --navy-hi: #2D5089;
  --gold: #C19A55; --gold-hi: #E7CB8E; --gold-lo: #9C7735;
  --ink: #14213A; --ink-2: #4A5874; --ink-3: #566481;
  --sky: #DDE6F3; --pearl: #F4F7FC;

  /* aero.css reads these; re-pointing them restyles most of the system */
  --primary: var(--navy-2);
  --primary-600: var(--navy);
  --primary-300: #9DB3D6;
  --accent: var(--navy-hi);
  --accent-600: var(--navy);
  --bg: #E4EBF6;
  --bg-2: #D4DFEF;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --surface-2: rgba(255, 255, 255, 0.55);
  --surface-3: rgba(21, 42, 74, 0.06);
  --border: rgba(255, 255, 255, 0.78);
  --border-2: rgba(21, 42, 74, 0.11);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 4px 12px -6px rgba(14, 29, 53, .30);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 30px -14px rgba(14, 29, 53, .38), 0 2px 6px -2px rgba(14, 29, 53, .12);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 56px -20px rgba(14, 29, 53, .45), 0 6px 14px -6px rgba(14, 29, 53, .18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(21, 42, 74, .04);
  --glow: 0 0 0 3px rgba(193, 154, 85, .22);
  --nav-on-1: var(--gold-hi);
  --nav-on-2: var(--gold);
  --nav-on-glow: rgba(193, 154, 85, .35);
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sidebar-w: 256px;
  --header-h: 62px;
}

html[data-theme="dark"] {
  --bg: #0B172A;
  --bg-2: #0E1D35;
  --surface: rgba(21, 36, 62, 0.72);
  --surface-solid: #152440;
  --surface-2: rgba(34, 52, 86, 0.55);
  --surface-3: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.10);
  --border-2: rgba(255, 255, 255, 0.08);
  --text: #E8EEF9;
  --text-2: #B3C0D8;
  --text-3: #8E9DB8;
  --primary-300: #6E8CBD;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .32);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .45);
  --shadow-3: 0 10px 24px rgba(0, 0, 0, .5), 0 30px 70px rgba(0, 0, 0, .6);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .3);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root { --surface: #ffffff; --surface-2: #F4F7FC; --border: rgba(21, 42, 74, .10); }
  html[data-theme="dark"] { --surface: #152440; --surface-2: #1C2E4E; }
}

body { font-family: var(--font); letter-spacing: 0; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { color: var(--navy); letter-spacing: -.01em; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ----------------------------- the backdrop ---------------------------- */
/* AMBE's pearl: a cold wash top-left, a warm gold wash bottom-right, and a
   bright patch where the content sits. The orbs are gone - they belonged to
   the old cyan system and read as noise against navy. */
.aero-bg {
  background:
    radial-gradient(900px 560px at 4% 0%, rgba(42, 78, 134, .40), transparent 62%),
    radial-gradient(820px 520px at 100% 100%, rgba(193, 154, 85, .42), transparent 60%),
    radial-gradient(640px 380px at 62% 8%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(520px 420px at 30% 92%, rgba(120, 160, 214, .28), transparent 70%),
    linear-gradient(160deg, #E4EBF6 0%, #D4DFEF 46%, #EAEDF3 100%);
}
.aero-bg::after { display: none; }
html[data-theme="dark"] .aero-bg {
  background:
    radial-gradient(900px 560px at 4% 0%, rgba(42, 78, 134, .35), transparent 62%),
    radial-gradient(820px 520px at 100% 100%, rgba(193, 154, 85, .16), transparent 60%),
    linear-gradient(160deg, #0B172A 0%, #0E1D35 50%, #0B1526 100%);
}
.aero-orb { display: none; }

/* --------------------------------- glass -------------------------------- */
.glass, .card, .stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .60));
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-2);
}
html[data-theme="dark"] .glass, html[data-theme="dark"] .card, html[data-theme="dark"] .stat {
  background: linear-gradient(180deg, rgba(27, 44, 74, .82), rgba(21, 36, 62, .72));
  border-color: rgba(255, 255, 255, .09);
}
.card::before, .card::after { display: none; }
.card { padding: 16px 18px; }
.card-hover:hover, .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.card-title { font-size: 14px; font-weight: 800; color: var(--navy); }
html[data-theme="dark"] .card-title { color: var(--text); }
.card-sub { color: var(--ink-3); }
.stat-label { color: var(--ink-3); letter-spacing: .6px; }
.stat-value { color: var(--navy); }
html[data-theme="dark"] .stat-value { color: var(--text); }
.stat-icon { box-shadow: 0 6px 14px -4px rgba(14, 29, 53, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }

/* -------------------------------- sidebar ------------------------------- */
.sidebar {
  color: #D6DEEB; gap: 4px; padding: 14px 10px 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .06), transparent 1px) right / 1px 100% no-repeat,
    radial-gradient(420px 260px at 0 0, rgba(70, 110, 170, .45), transparent 70%),
    radial-gradient(360px 300px at 100% 100%, rgba(193, 154, 85, .18), transparent 70%),
    linear-gradient(180deg, #1B355D 0%, #152A4A 45%, #0E1D35 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-right: 0;
  box-shadow: 1px 0 0 rgba(255, 255, 255, .08) inset, 8px 0 30px -12px rgba(14, 29, 53, .6);
}
html[data-theme="dark"] .sidebar {
  background:
    radial-gradient(420px 260px at 0 0, rgba(70, 110, 170, .30), transparent 70%),
    linear-gradient(180deg, #132A4D 0%, #0F2140 45%, #0A1628 100%);
}
.brand { padding: 4px 8px 6px; gap: 10px; align-items: center; }
.brand img { height: 42px; max-width: 42px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.brand-text { min-width: 0; line-height: 1.05; }
.brand-text b { display: block; font-size: 18px; font-weight: 800; letter-spacing: .06em; color: #fff; }
.brand-text small { display: block; color: var(--gold-hi); font-weight: 700; letter-spacing: .16em; font-size: 8.5px; margin-top: 1px; white-space: nowrap; }
.brand-text .brand-prop { display: block; font-size: 11px; font-weight: 700; color: rgba(214, 222, 235, .85); margin-top: 4px; white-space: normal; line-height: 1.2; }
.brand-fallback { color: #fff; -webkit-text-fill-color: #fff; background: none; }

.nav { padding: 2px 2px 10px; gap: 1px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); }
.nav-section { color: rgba(214, 222, 235, .5); font-size: 10.5px; letter-spacing: .4px; text-transform: none; padding: 14px 10px 4px; }
.nav-section::after { display: none; }
.nav-section:first-child { padding-top: 4px; }
.nav-item {
  gap: 11px; height: 36px; padding: 0 10px; border-radius: 10px; color: #D6DEEB;
  font-weight: 600; font-size: 13px; letter-spacing: 0; border: 0; overflow: visible;
}
.nav-ico { flex: 0 0 auto; width: auto; height: auto; background: none; border: 0; color: inherit; opacity: .9; box-shadow: none; }
.nav-item svg { width: 19px; height: 19px; flex: 0 0 19px; }
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; font-weight: 600; transform: none; box-shadow: none; border-color: transparent; }
.nav-item:hover .nav-ico { color: #fff; background: none; border: 0; transform: none; box-shadow: none; }
.nav-item::before { left: -10px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 0 10px rgba(231, 203, 142, .7); }
.nav-item:hover::before { height: 0; }
.nav-item.active {
  color: #fff; font-weight: 700; border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 14px -8px rgba(0, 0, 0, .6);
}
.nav-item.active::before { height: 20px; }
.nav-item.active::after { display: none; }
.nav-item.active .nav-ico { color: var(--gold-hi); background: none; border: 0; box-shadow: none; }
.nav-item.active:hover { transform: none; }
.nav-item .badge { margin-left: auto; }
html[data-theme="dark"] .nav-ico, html[data-theme="dark"] .nav-item:hover .nav-ico { background: none; border: 0; }

/* the version line and the collapse control, at the foot */
.nav-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px 2px; font-size: 10.5px; color: rgba(214, 222, 235, .55); border-top: 1px solid rgba(255, 255, 255, .08); }
.nav-foot a, .nav-foot button { color: rgba(214, 222, 235, .75); background: none; border: 0; font: inherit; cursor: pointer; padding: 0; text-decoration: none; }
.nav-foot a:hover, .nav-foot button:hover { color: #fff; }
.acct-row { color: #fff; }
.acct-row:hover { background: rgba(255, 255, 255, .07); transform: none; }
.acct-row .small.muted, .sidebar .muted { color: rgba(214, 222, 235, .62) !important; }
.sidebar .btn-ghost { color: #D6DEEB; border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); box-shadow: none; }
.sidebar .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sidebar > div[style*="border-top"] { border-top-color: rgba(255, 255, 255, .08) !important; }

/* the emergency button keeps its red - it is the one control that must not
   blend in - but takes the 3D treatment of every other button.

   It is not a .btn, so it never inherited the page face: on Windows it came
   up in the browser's default button font, which is why the label looked
   like a different product. The face is set explicitly here, and the button
   breathes - a slow red glow that never stops, a light that sweeps across
   the label every few seconds, and a heartbeat on the icon - so the eye
   finds it in a dark plant room without it shouting. */
.emergency-btn {
  margin: 8px 6px 6px; width: calc(100% - 12px); height: 40px; padding: 0 12px;
  border-radius: 11px;
  font-family: var(--font); font-weight: 800; font-size: 12.5px; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; text-rendering: optimizeLegibility;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, #E8655A 0%, #C93A2D 55%, #A8281E 100%);
  border: 1px solid #85211A;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 2px 0 #6E1A14, 0 8px 18px -8px rgba(184, 50, 39, .9),
              0 0 0 0 rgba(232, 101, 90, .55);
  animation: emBreathe 2.4s ease-in-out infinite;
}
.emergency-btn::after {
  /* the sweep: a narrow band of light crossing the label */
  inset: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%);
  animation: emSweep 3.6s ease-in-out infinite;
}
.emergency-btn svg { width: 16px; height: 16px; animation: emBeat 1.2s ease-in-out infinite; transform-origin: 50% 55%; }
.emergency-btn:hover { transform: none; filter: brightness(1.06); animation-play-state: paused;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 2px 0 #6E1A14, 0 10px 20px -8px rgba(184, 50, 39, 1), 0 0 0 6px rgba(232, 101, 90, .28); }
.emergency-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 0 0 #6E1A14, 0 0 0 0 rgba(232, 101, 90, 0); }
.emergency-btn.armed { animation: pulseRed 1s infinite; }
@keyframes emBreathe {
  0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 2px 0 #6E1A14, 0 8px 18px -8px rgba(184, 50, 39, .9), 0 0 0 0 rgba(232, 101, 90, .6); }
  55%      { box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 2px 0 #6E1A14, 0 10px 22px -8px rgba(184, 50, 39, 1), 0 0 0 9px rgba(232, 101, 90, 0); }
}
@keyframes emSweep {
  0%, 55% { left: -60%; }
  85%, 100% { left: 115%; }
}
@keyframes emBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.18); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  56% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .emergency-btn, .emergency-btn::after, .emergency-btn svg { animation: none; }
}

/* --------------------------------- topbar ------------------------------- */
.topbar {
  gap: 10px; padding-left: 18px; padding-right: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58));
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 12px 30px -14px rgba(14, 29, 53, .25);
}
html[data-theme="dark"] .topbar { background: linear-gradient(180deg, rgba(27, 44, 74, .9), rgba(21, 36, 62, .82)); border-bottom-color: rgba(255, 255, 255, .08); }
.topbar h1 { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
html[data-theme="dark"] .topbar h1 { color: var(--text); }
.topbar .sub { color: var(--ink-3); font-weight: 600; }
.topbar-actions { gap: 6px; }
.topbar .btn-icon.btn-ghost { border: 0; background: transparent; color: var(--navy); box-shadow: none; border-radius: 10px; }
.topbar .btn-icon.btn-ghost:hover { background: rgba(21, 42, 74, .07); transform: none; }
html[data-theme="dark"] .topbar .btn-icon.btn-ghost { color: var(--text); }
html[data-theme="dark"] .topbar .btn-icon.btn-ghost:hover { background: rgba(255, 255, 255, .08); }

/* the "?" that opens the guide: AMBE's gold ring */
.topbar #btnHelp {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; margin-left: 2px;
  color: var(--gold-lo); border: 1px solid rgba(193, 154, 85, .55);
  background: radial-gradient(circle at 35% 30%, #fff, #F6ECD8); box-shadow: 0 1px 2px rgba(156, 119, 53, .3);
  font: 800 12px/1 var(--font);
}
.topbar #btnHelp svg { width: 13px; height: 13px; }
.topbar #btnHelp:hover { color: #fff; background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold)); }
.topbar-title { display: flex; align-items: center; gap: 2px; min-width: 0; }

/* VI | EN, as a two-position switch */
.lang-switch {
  display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-2); background: rgba(255, 255, 255, .7); font: 800 11px var(--font); height: 30px;
  box-shadow: none;
}
.lang-switch span { padding: 4px 9px; border-radius: 999px; color: var(--ink-3); line-height: 1; }
.lang-switch span.on { background: linear-gradient(180deg, #2D5089, #152A4A); color: #fff; box-shadow: 0 2px 6px -2px rgba(14, 29, 53, .6); }
html[data-theme="dark"] .lang-switch { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .lang-switch span { color: var(--text-3); }

/* the person, top right, where AMBE puts it */
.user-chip {
  display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 999px; height: 36px;
  border: 1px solid var(--border-2); background: rgba(255, 255, 255, .75); cursor: pointer; font-family: inherit;
  max-width: 230px; color: inherit; box-shadow: none;
}
.user-chip:hover { background: #fff; }
.uc-text { text-align: left; line-height: 1.15; min-width: 0; }
.uc-text b { display: block; font-size: 12px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-text small { color: var(--ink-3); white-space: nowrap; display: block; font-size: 10.5px; }
html[data-theme="dark"] .user-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .user-chip:hover { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .uc-text b { color: var(--text); }
.avatar, .user-chip .avatar, .acct-row .avatar {
  background: linear-gradient(140deg, var(--gold-hi), var(--gold-lo)); color: #fff; font-weight: 800;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px -3px rgba(14, 29, 53, .5);
}
.acct-row .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
html[data-theme="dark"] .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 3px 8px -3px rgba(0, 0, 0, .5); }

/* ---------------------------------- buttons ------------------------------ */
.btn {
  --b1: #FFFFFF; --b2: #E7ECF4; --bc: rgba(21, 42, 74, .18); --bt: var(--navy); --bs: rgba(21, 42, 74, .22);
  gap: 6px; height: 34px; padding: 0 14px; font: 700 13px/1 var(--font); color: var(--bt);
  background: linear-gradient(180deg, var(--b1), var(--b2)); border: 1px solid var(--bc); border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 -1px 0 rgba(0, 0, 0, .05) inset, 0 2px 0 var(--bs), 0 4px 10px -4px var(--bs);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { transform: none; filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 -1px 0 rgba(0, 0, 0, .05) inset, 0 2px 0 var(--bs), 0 6px 14px -5px var(--bs); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 0 0 var(--bs), 0 1px 3px -1px var(--bs); }
.btn:disabled { opacity: .55; transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { --b1: #2D5089; --b2: #152A4A; --bc: #0E1D35; --bt: #fff; --bs: #0A1528; box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 2px 0 var(--bs), 0 6px 14px -6px rgba(14, 29, 53, .7); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 2px 0 var(--bs), 0 8px 18px -6px rgba(14, 29, 53, .8); }
.btn-gold, .btn-success { --b1: #EED39A; --b2: #C19A55; --bc: #9C7735; --bt: #2B1D05; --bs: #85622A; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 0 var(--bs), 0 8px 18px -8px rgba(156, 119, 53, .9); }
.btn-success { --b1: #3FB37F; --b2: #18825A; --bc: #126647; --bt: #fff; --bs: #0F5139; }
.btn-danger { --b1: #D9534A; --b2: #A82A20; --bc: #85211A; --bt: #fff; --bs: #6E1A14; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 0 var(--bs), 0 8px 18px -8px rgba(184, 50, 39, .9); }
.btn-warning { --b1: #F2B443; --b2: #C47A00; --bc: #9A6000; --bt: #fff; --bs: #7A4C00; }
.btn-ghost { --b1: rgba(255, 255, 255, .85); --b2: rgba(240, 244, 250, .85); background: linear-gradient(180deg, var(--b1), var(--b2)); border-color: var(--bc); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.btn-xs { height: 22px; padding: 0 7px; font-size: 11px; border-radius: 6px; }
.btn-lg { height: 42px; padding: 0 20px; font-size: 14px; border-radius: 12px; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 10px; }
.btn-icon.btn-sm { width: 28px; height: 28px; }
@media (pointer: coarse) { .btn-icon { width: 40px; height: 40px; } }
html[data-theme="dark"] .btn { --b1: #2A3F66; --b2: #1A2C4C; --bc: rgba(255, 255, 255, .12); --bt: var(--text); --bs: #0A1528; }
html[data-theme="dark"] .btn-ghost { --b1: rgba(255, 255, 255, .10); --b2: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .btn-primary { --b1: #3B63A6; --b2: #1E3A66; --bt: #fff; }

/* ---------------------------------- inputs ------------------------------- */
.input, .select, .textarea {
  font: 600 13px var(--font); color: var(--ink); min-height: 36px; padding: 7px 11px;
  background-color: rgba(255, 255, 255, .92); border: 1px solid rgba(21, 42, 74, .16); border-radius: 9px;
  box-shadow: 0 2px 3px -2px rgba(14, 29, 53, .18) inset;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193, 154, 85, .22); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5874' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; padding-right: 36px; }
html[data-theme="dark"] .input, html[data-theme="dark"] .select, html[data-theme="dark"] .textarea {
  background-color: rgba(10, 21, 40, .6); color: var(--text); border-color: rgba(255, 255, 255, .14);
}
html[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3C0D8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
html[data-theme="dark"] .label { color: var(--text-2); }
.hint { font-size: 11.5px; color: var(--ink-3); }
.switch input:checked + .track { background: linear-gradient(180deg, #2D5089, #152A4A); }
.switch .track { background: rgba(21, 42, 74, .22); }
input[type=checkbox], input[type=radio] { accent-color: var(--navy); }

/* -------------------------------- badges, chips -------------------------- */
.badge { font-size: 11px; font-weight: 800; padding: 2px 9px; height: 21px; background: #EEF2F8; color: var(--ink-2); border: 1px solid rgba(21, 42, 74, .08); }
.badge.b-success { background: #DCF3E9; color: #18825A; border-color: rgba(24, 130, 90, .2); }
.badge.b-warning { background: #FDF0D9; color: #B76E00; border-color: rgba(183, 110, 0, .2); }
.badge.b-danger { background: #FBE3E0; color: #B83227; border-color: rgba(184, 50, 39, .2); }
.badge.b-info { background: #E2EBFA; color: var(--navy-2); border-color: rgba(34, 64, 110, .18); }
.badge.b-purple { background: #EFE6FB; color: #6D3FB5; border-color: rgba(109, 63, 181, .2); }
html[data-theme="dark"] .badge { background: rgba(255, 255, 255, .08); color: var(--text-2); border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .badge.b-success { background: rgba(24, 130, 90, .25); color: #6FD3A6; }
html[data-theme="dark"] .badge.b-warning { background: rgba(183, 110, 0, .25); color: #F2B443; }
html[data-theme="dark"] .badge.b-danger { background: rgba(184, 50, 39, .25); color: #F09A92; }
html[data-theme="dark"] .badge.b-info { background: rgba(45, 80, 137, .35); color: #9DB3D6; }
html[data-theme="dark"] .badge.b-purple { background: rgba(109, 63, 181, .3); color: #C9B3F0; }
.chip { font-weight: 700; background: rgba(255, 255, 255, .7); border-color: rgba(21, 42, 74, .12); color: var(--ink-2); }
.chip:hover { background: #fff; }
.chip.active { background: linear-gradient(180deg, #2D5089, #152A4A); color: #fff; border-color: #0E1D35; box-shadow: 0 2px 0 #0A1528, 0 6px 14px -6px rgba(14, 29, 53, .7); }
html[data-theme="dark"] .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: var(--text-2); }

/* ---------------------------------- tables ------------------------------- */
table.tbl th { font-size: 11px; letter-spacing: .3px; text-transform: none; font-weight: 800; color: var(--ink-2); background: rgba(221, 230, 243, .55); border-bottom: 1px solid rgba(21, 42, 74, .1); }
html[data-theme="dark"] table.tbl th { background: rgba(255, 255, 255, .05); color: var(--text-2); }
table.tbl td { border-bottom-color: rgba(21, 42, 74, .07); }
html[data-theme="dark"] table.tbl td { border-bottom-color: rgba(255, 255, 255, .06); }
table.tbl tbody tr:hover { background: rgba(221, 230, 243, .35); }

/* ------------------------------- notices --------------------------------- */
/* AMBE's cream banner: the thing the screen most wants you to read. */
.callout { border-radius: 12px; }
.callout.info { background: #FBF3E3; border: 1px solid rgba(193, 154, 85, .35); color: var(--ink); }
.callout.info svg { color: var(--gold-lo); }
.callout.warn { background: #FDF0D9; border-color: rgba(183, 110, 0, .3); color: var(--ink); }
.callout.ok { background: #DCF3E9; border-color: rgba(24, 130, 90, .3); color: var(--ink); }
html[data-theme="dark"] .callout.info { background: rgba(193, 154, 85, .14); border-color: rgba(193, 154, 85, .3); color: var(--text); }
html[data-theme="dark"] .callout.warn { background: rgba(183, 110, 0, .18); color: var(--text); }
html[data-theme="dark"] .callout.ok { background: rgba(24, 130, 90, .2); color: var(--text); }

/* ----------------------------- dialogs, menus ----------------------------- */
.modal { border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(246, 249, 253, .94)); }
html[data-theme="dark"] .modal { background: linear-gradient(180deg, rgba(27, 44, 74, .98), rgba(21, 36, 62, .96)); }
.modal-backdrop { background: rgba(14, 29, 53, .38); }
.ctx-menu { border-radius: 14px; }
.ctx-item { border-radius: 10px; font-weight: 700; }
.ctx-item:hover { background: rgba(21, 42, 74, .06); }
html[data-theme="dark"] .ctx-item:hover { background: rgba(255, 255, 255, .07); }

/* --------------------------------- login --------------------------------- */
.login-card { width: min(400px, 100%); border-radius: 24px; padding: 28px 28px 22px; }
.login-card img { height: 68px; filter: drop-shadow(0 12px 18px rgba(14, 29, 53, .18)); }
.login-card h1 { color: var(--navy); font-size: 20px; }
html[data-theme="dark"] .login-card h1 { color: var(--text); }
.login-card .muted { color: var(--ink-2); font-weight: 700; }

/* ------------------------------ phone tab bar ----------------------------- */
@media (max-width: 860px) {
  .tabbar {
    background: linear-gradient(180deg, #1B355D, #0E1D35);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 14px 34px -14px rgba(14, 29, 53, .8);
    border-radius: 18px;
  }
  html[data-theme="dark"] .tabbar { background: linear-gradient(180deg, #132A4D, #0A1628); }
  .tab { color: rgba(214, 222, 235, .75); border-radius: 12px; }
  .tab.active { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset; }
  .tab.active svg { color: var(--gold-hi); }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .user-chip { display: none; }
}

/* a few leftovers of the old cyan that aero.css paints by hand */
.spinner { border-top-color: var(--navy-2); }
a { color: var(--navy-2); }
html[data-theme="dark"] a { color: #9DB3D6; }
.stat-link:hover .stat-go { color: var(--gold-lo); }
.room:hover { box-shadow: var(--shadow-3); }

/* aero.css tints each top-bar button its own colour; AMBE keeps them quiet
   and lets the badge do the shouting. */
.topbar #btnTheme, .topbar #btnChat, .topbar #btnBell, .topbar #btnNet, .topbar #btnDuty, .topbar #btnAccount {
  color: var(--navy); background: transparent; border-color: transparent;
}
.topbar #btnTheme:hover, .topbar #btnChat:hover, .topbar #btnBell:hover, .topbar #btnNet:hover, .topbar #btnDuty:hover {
  background: rgba(21, 42, 74, .07); border-color: transparent;
}
html[data-theme="dark"] .topbar #btnTheme, html[data-theme="dark"] .topbar #btnChat, html[data-theme="dark"] .topbar #btnBell,
html[data-theme="dark"] .topbar #btnNet, html[data-theme="dark"] .topbar #btnDuty { color: var(--text); }
.topbar-actions .btn-icon svg { stroke-width: 2; }
.topbar-title #btnHelp { align-self: center; }
.login-card .mb-4 { height: 4px; }

/* guide: a screenshot sits in a frame, like a photograph in a manual */
.g-fig.g-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(21, 42, 74, .14); box-shadow: 0 12px 30px -14px rgba(14, 29, 53, .38); }
html[data-theme="dark"] .g-fig.g-shot img { border-color: rgba(255, 255, 255, .1); }
.g-fig svg { border-radius: 12px; }

/* ------------------------------ support ------------------------------- */
/* a count on a sidebar entry: replies waiting, cases unanswered */
.nav-badge {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: linear-gradient(180deg, #E8655A, #C93A2D); color: #fff;
  font: 800 11px/20px var(--font); text-align: center; letter-spacing: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(184, 50, 39, .45);
}
.nav-item.active .nav-badge { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--navy-3); }

/* the list */
.sp-card { text-decoration: none; color: inherit; align-items: flex-start; }
.sp-card .chat-av { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; font-size: 13px; margin-top: 2px; }
.sp-card.unread .job-title { color: var(--navy); }
.sp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #E8655A; margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(232, 101, 90, .18); }
.sp-preview { max-width: 100%; max-height: 220px; border-radius: 12px; border: 1px solid rgba(21, 42, 74, .14); display: block; }

/* the conversation: the chat dock's bubbles, on a page instead of a panel */
.sp-head .card-title { font-size: 16px; }
.sp-headbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sp-headrow { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; }
.sp-headmain { flex: 1; min-width: 0; }
.sp-headmain .card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sp-headacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sp-back svg { transform: rotate(180deg); }
@media (max-width: 760px) {
  .sp-headmain .card-title { white-space: normal; }
  .sp-headacts { margin-left: 0; width: 100%; }
}
.sp-thread-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sp-thread { max-height: calc(100vh - 330px); min-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px 8px; background: linear-gradient(180deg, rgba(221, 230, 243, .35), rgba(221, 230, 243, 0)); }
.sp-thread .chat-av { background: var(--navy-2); color: #fff; display: grid; place-items: center; }
.sp-thread .chat-av svg { width: 14px; height: 14px; }
.sp-thread .chat-photo { max-width: min(360px, 100%); }
.sp-compose { border-top: 1px solid rgba(21, 42, 74, .1); background: rgba(255, 255, 255, .7); }
html[data-theme="dark"] .sp-thread { background: none; }
html[data-theme="dark"] .sp-compose { background: rgba(255, 255, 255, .03); border-top-color: rgba(255, 255, 255, .08); }
.sp-head .callout { margin: 12px 0 0; }
@media (max-width: 760px) {
  .sp-thread { max-height: none; min-height: 40vh; }
}