/* theme-bento.css — a "bento tile" polish layer ON TOP of theme-plus.css.
 *
 * Nothing here defines a colour of its own: radius and shadow only, built from
 * theme.css's variables, so it follows light/dark and any palette change. It
 * restyles the cards and KPI tiles into ONE rounded, soft-shadowed, lift-on-hover
 * set — the bento look — without moving, hiding or renaming 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. ONE TILE LANGUAGE — rounder corners + a soft, layered shadow ──────────
   Every card and KPI across Dashboard, Reports and Accounts gets the same radius
   and depth, so the whole portal reads as a single bento set instead of five
   different card styles (16px / 14px / 8px …). */
.card,
.statc,
.rpt-box,
.ra-card,
.ra-mcard,
.acctx .lapu-stat,
.rptx .rptx-tcard,
.rptx .rptx-fcard{
  border-radius:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 30px -14px rgba(15,23,42,.13);
  transition:transform .15s ease, box-shadow .15s ease;
}
/* Dark mode: the same depth, tuned for a dark surface. */
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .statc,
:root:not([data-theme="light"]) .rpt-box,
:root:not([data-theme="light"]) .ra-card,
:root:not([data-theme="light"]) .ra-mcard,
:root:not([data-theme="light"]) .acctx .lapu-stat{
  box-shadow:0 1px 2px rgba(0,0,0,.30), 0 14px 32px -14px rgba(0,0,0,.55);
}

/* ── 2. LIFT ON HOVER — the tactile bento feel on the KPI tiles ──────────────
   .statc already lifts; give the same to the Reports and Accounts KPI tiles so
   the gesture is consistent everywhere. (Section .card bodies stay still — they
   hold tables and forms, not a single tappable figure.) */
.rpt-box:hover,
.ra-card:hover,
.acctx .lapu-stat:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(15,23,42,.06), 0 20px 42px -14px rgba(15,23,42,.22);
}

/* ── 3. KPI TILES — a little more breathing room, rounder inner chips ─────────*/
.rpt-box{padding:15px 16px}
.rptx .rptx-ic{border-radius:12px}
.stats.oneline .statc{padding:18px}
.stats.oneline .statc .ic{border-radius:13px}

/* ── 4. GRADIENT KPI TILES (Dashboard) — keep the colour, deepen the shadow so
   they sit as proper bento tiles rather than flat blocks. border:none is theirs. */
.statc.gradient-purple,
.statc.gradient-dark,
.statc.gradient-green,
.statc.gradient-yellow,
.statc.gradient-red,
.statc.gradient-blue{
  box-shadow:0 10px 26px -10px rgba(15,23,42,.38);
}
.statc.gradient-purple:hover,
.statc.gradient-dark:hover,
.statc.gradient-green:hover,
.statc.gradient-yellow:hover,
.statc.gradient-red:hover,
.statc.gradient-blue:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px -10px rgba(15,23,42,.48);
}

/* ── 5. KPI ROWS as a true bento grid — even gutters, tidy wrap ───────────────*/
.rpt-boxes{gap:14px}
.lapu-stats{gap:12px}

/* ── 6. SIDEBAR FOLLOWS THE THEME ────────────────────────────────────────────
   theme.css paints the side menu a deep indigo gradient in BOTH modes (its own
   "light-on-dark" variable scope). The owner wants it to match the theme: in
   LIGHT it becomes a light surface with dark text. DARK theme — and the default
   when the OS is dark — are left exactly as they were (indigo sidebar).
   The light look is given to the explicit light toggle, and to the no-choice
   default ONLY when the OS itself is light (so an OS-dark default stays indigo). */
:root[data-theme="light"] .sidebar{
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --muted-2:#94a3b8;
  --line:#e8edf3; --line-2:#eef2f7;
  --brand-soft:#eef2ff; --brand-700:#4338ca; --brand:#6366f1;
  --sidebar-ink:#475569; --sidebar-active:#eef2f8; --sidebar-2:#f6f8fc;
  background:linear-gradient(185deg,#ffffff 0%,#f7f8fd 100%);
  border-right:1px solid #e8edf3;
  scrollbar-color:rgba(15,23,42,.18) transparent;
}
:root[data-theme="light"] .sidebar .logo{border-bottom-color:#eef2f7;color:#0f172a}
:root[data-theme="light"] .sidebar .who{background:#f6f8fc;border-color:#eef2f7}
:root[data-theme="light"] .sidebar .nav a .ic,
:root[data-theme="light"] .sidebar .nav .sub-toggle .ic{background:rgba(15,23,42,.05)}
:root[data-theme="light"] .sidebar .nav a:hover .ic{background:rgba(15,23,42,.08)}
:root[data-theme="light"] .sidebar .nav a.active .ic{background:rgba(255,255,255,.28)}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .sidebar{
    --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --muted-2:#94a3b8;
    --line:#e8edf3; --line-2:#eef2f7;
    --brand-soft:#eef2ff; --brand-700:#4338ca; --brand:#6366f1;
    --sidebar-ink:#475569; --sidebar-active:#eef2f8; --sidebar-2:#f6f8fc;
    background:linear-gradient(185deg,#ffffff 0%,#f7f8fd 100%);
    border-right:1px solid #e8edf3;
  }
  :root:not([data-theme="dark"]) .sidebar .logo{border-bottom-color:#eef2f7;color:#0f172a}
  :root:not([data-theme="dark"]) .sidebar .who{background:#f6f8fc;border-color:#eef2f7}
  :root:not([data-theme="dark"]) .sidebar .nav a .ic,
  :root:not([data-theme="dark"]) .sidebar .nav .sub-toggle .ic{background:rgba(15,23,42,.05)}
  :root:not([data-theme="dark"]) .sidebar .nav a:hover .ic{background:rgba(15,23,42,.08)}
  :root:not([data-theme="dark"]) .sidebar .nav a.active .ic{background:rgba(255,255,255,.28)}
}