/* theme-plus.css — a polish layer ON TOP of theme.css.
 *
 * Nothing here defines a colour of its own: every value comes from theme.css's
 * variables (--brand, --surface, --line, --ink …), so it follows light/dark and
 * any future palette change. It restyles; it never moves, hides or renames
 * anything — layout, markup and behaviour are exactly as before.
 *
 * To undo it completely, delete the one <link> to this file in
 * views/partials/assets.ejs.
 */

/* ── 1. Atmosphere ──────────────────────────────────────────────────────────
   Soft brand glows behind the content. Scoped to .shell (the panel's root), so
   the login page — which has its own backdrop — is untouched. Browsers without
   color-mix() ignore the declaration and keep the flat background. */
.shell{
  background-image:
    radial-gradient(900px 460px at 88% -6%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 62%),
    radial-gradient(760px 420px at -4% 34%, color-mix(in srgb, var(--violet, #8b5cf6) 10%, transparent), transparent 60%);
  background-attachment: fixed;
}

/* ── 2. Sidebar: one icon style ─────────────────────────────────────────────
   The menu mixes emoji (📦 🧾) with plain glyphs (▧ # ⚙). Boxing each one in the
   same small tile makes them read as a single set without replacing any icon. */
.sidebar .nav a{ transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.sidebar .nav a .ic,
.sidebar .nav .sub-toggle .ic{
  display:inline-grid; place-items:center; flex:0 0 26px;
  width:26px; height:26px; margin-right:2px; border-radius:8px;
  background:rgba(255,255,255,.07); font-size:13px; line-height:1;
  transition: background .18s ease, transform .18s ease;
}
.sidebar .nav a:hover .ic{ background:rgba(255,255,255,.15); transform:scale(1.07); }
.sidebar .nav a:hover:not(.active){ transform:translateX(2px); }
.sidebar .nav a.active .ic{ background:rgba(255,255,255,.24); }

/* ── 3. Cards ───────────────────────────────────────────────────────────────*/
.card{ transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease; }
.card:hover{ border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }
.dx-kpis > *{ transition: transform .2s ease, box-shadow .2s ease; }
.dx-kpis > *:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 14px 34px rgba(60,40,180,.22)); }

/* ── 4. Page titles ─────────────────────────────────────────────────────────
   Ink fading into the brand colour. Both ends are the theme's own, so contrast
   holds in either mode. */
.page-head h1{
  background: linear-gradient(90deg, var(--ink), var(--brand-link));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content; max-width: 100%;
}

/* ── 5. Tables ──────────────────────────────────────────────────────────────*/
table thead th{ letter-spacing: .055em; }
table tbody tr{ transition: background-color .12s ease; }
table tbody tr:not(.rt-sec):not(.rt-eff):hover{ background: var(--brand-soft); }

/* ── 6. Controls ────────────────────────────────────────────────────────────*/
.btn{ transition: transform .12s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover{ filter: brightness(1.06); }
.btn:active{ transform: translateY(1px); }
input:not([type=checkbox]):not([type=radio]):focus,
select:focus, textarea:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  outline: none;
}
/* keyboard users get a visible ring everywhere (mouse clicks do not) */
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 7. Topbar glass ────────────────────────────────────────────────────────*/
.topbar{ -webkit-backdrop-filter: saturate(1.5) blur(10px); backdrop-filter: saturate(1.5) blur(10px); }

/* ── 8. Quiet scrollbars ────────────────────────────────────────────────────*/
*{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 45%, transparent) transparent; }
::-webkit-scrollbar{ width: 9px; height: 9px; }
::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--brand) 42%, transparent); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--brand) 65%, transparent); }
::-webkit-scrollbar-track{ background: transparent; }

/* ── 9. Respect "reduce motion" ─────────────────────────────────────────────
   Only transitions are shortened; spinners and progress animations keep working. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; }
  .sidebar .nav a:hover:not(.active), .dx-kpis > *:hover{ transform: none; }
}