/* ============================================================
   Themes — Settings › Appearance (owner, 11 Oct 2026)
   Classic = site.css untouched. Nebula and Bento only re-colour and re-shape: same layout, same markup,
   so a page never has to know which theme is on. Chosen per user, cached in the qz_look cookie and
   written onto <html data-theme data-text>. Nebula also turns Bootstrap's own dark mode on.
   ============================================================ */

/* ---------- Text size (all themes) ---------- */
html[data-text="1"] { font-size: 13px; }
html[data-text="3"] { font-size: 16px; }
@media (min-width: 768px) {
  html[data-text="1"] { font-size: 14px; }
  html[data-text="3"] { font-size: 17px; }
}

/* ---------- Appearance page previews (all themes) ---------- */
.look-opt { display: flex; flex-direction: column; gap: .8rem; padding: .8rem; border-radius: 1.2rem; cursor: pointer;
  background: var(--card); border: 3px solid transparent; box-shadow: var(--shadow-sm); height: 100%; }
.look-opt.on { border-color: var(--brand); box-shadow: 0 10px 30px -12px var(--brand); }
.look-tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 2px solid var(--line); }
.look-opt.on .look-tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.look-prev { display: flex; gap: 8px; height: 150px; padding: 10px; border-radius: .9rem; box-sizing: border-box; }
.lp-side { width: 40px; border-radius: 10px; }
.lp-grid { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.lp-a { grid-row: span 2; border-radius: 10px; }
.lp-b, .lp-c { border-radius: 10px; }
.look-prev-nebula { background: radial-gradient(240px 140px at 10% 0%, rgba(124,58,237,.6), transparent 70%),
  radial-gradient(220px 140px at 100% 10%, rgba(6,182,212,.45), transparent 70%), #090B1E; }
.look-prev-nebula .lp-side, .look-prev-nebula .lp-a, .look-prev-nebula .lp-b { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.look-prev-nebula .lp-c { background: rgba(244,63,94,.22); border: 1px solid rgba(244,63,94,.45); }
.look-prev-bento { background: #F4F1EA; }
.look-prev-bento .lp-side { background: #111; }
.look-prev-bento .lp-a, .look-prev-bento .lp-b, .look-prev-bento .lp-c { background: #fff; border-radius: 14px; }
.look-prev-bento .lp-a { box-shadow: inset 0 4px 0 #6E56F5; }
.look-prev-bento .lp-b { box-shadow: inset 0 4px 0 #84B816; }
.look-prev-bento .lp-c { box-shadow: inset 0 4px 0 #E8603C; }
.look-prev-classic { background: #e9ecfb; }
.look-prev-classic .lp-side { background: #131a3a; }
.look-prev-classic .lp-a, .look-prev-classic .lp-b, .look-prev-classic .lp-c { background: #fff; border: 1px solid #e2e5f6; }

/* ============================================================
   NEBULA — deep navy, coloured glows, glass panels (matches the phone app's Nebula)
   ============================================================ */
html[data-theme="nebula"] {
  --brand: #8B5CF6;
  --brand-2: #EC4899;
  --brand-soft: rgba(139, 92, 246, .16);
  --ink: #EEF0FF;
  --muted: #9AA0D0;
  --line: rgba(255, 255, 255, .10);
  --bg: #090B1E;
  --card: rgba(255, 255, 255, .045);
  --success: #4ADE80;
  --danger: #FB7185;
  --warning: #FBBF24;
  --radius: 1.25rem;
  --shadow-sm: none;
  --shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
  --bs-body-bg: #090B1E;
  --bs-body-color: #EEF0FF;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: #9AA0D0;
  --bs-tertiary-color: #7C82B8;
  --bs-border-color: rgba(255, 255, 255, .12);
  --bs-secondary-bg: #161A3D;
  --bs-tertiary-bg: #12153A;
  --bs-link-color: #A5B4FC;
  --bs-link-hover-color: #C7D2FE;
  --bs-link-color-rgb: 165, 180, 252;
  --qz-glass: rgba(255, 255, 255, .045);
  --qz-glass-2: rgba(255, 255, 255, .08);
  --qz-solid: #12153A;
  /* tokens for page styles: write `background: var(--qz-surface, #fff)` and the light themes keep the fallback */
  --qz-surface: rgba(255, 255, 255, .05);
  --qz-surface-2: rgba(255, 255, 255, .09);
  --qz-ink: #EEF0FF;
  --qz-muted: #9AA0D0;
  --qz-line: rgba(255, 255, 255, .12);
  color-scheme: dark;
}
html[data-theme="nebula"] body { font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
html[data-theme="nebula"] .app-body {
  background:
    radial-gradient(900px 520px at 18% -8%, rgba(124, 58, 237, .45), transparent 60%),
    radial-gradient(760px 480px at 96% 6%, rgba(6, 182, 212, .30), transparent 60%),
    radial-gradient(700px 520px at 60% 110%, rgba(236, 72, 153, .26), transparent 60%),
    #090B1E;
  background-attachment: fixed;
}
/* Only the headline figures take the numbers font; bold headings (titles, names) keep the theme's font. */
html[data-theme="nebula"] .stat-value {
  font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: -.02em;
}
:where(html[data-theme="nebula"]) a { color: #A5B4FC; }
html[data-theme="nebula"] .text-success { color: #4ADE80 !important; }
html[data-theme="nebula"] .text-danger { color: #FB7185 !important; }
html[data-theme="nebula"] .text-warning { color: #FBBF24 !important; }
html[data-theme="nebula"] .text-primary { color: #A78BFA !important; }
html[data-theme="nebula"] .text-info { color: #67E8F9 !important; }
html[data-theme="nebula"] .text-muted, html[data-theme="nebula"] .text-secondary { color: #9AA0D0 !important; }
html[data-theme="nebula"] .text-dark, html[data-theme="nebula"] .text-black, html[data-theme="nebula"] .text-body { color: #EEF0FF !important; }
html[data-theme="nebula"] ::selection { background: rgba(139, 92, 246, .45); }

/* shell */
html[data-theme="nebula"] .sidebar {
  background: rgba(10, 12, 34, .72);
  border-right: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
}
html[data-theme="nebula"] .side-brand-mark { background: linear-gradient(135deg, #8B5CF6, #06B6D4); box-shadow: 0 0 24px -4px rgba(139, 92, 246, .8); }
html[data-theme="nebula"] .side-link { color: #A9AEDD; }
html[data-theme="nebula"] .side-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html[data-theme="nebula"] .side-link.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, .55), rgba(6, 182, 212, .28));
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .55), 0 8px 24px -10px rgba(139, 92, 246, .9);
  color: #fff;
}
html[data-theme="nebula"] .side-sub.active { background: rgba(34, 211, 238, .14); color: #A5F3FC; border-left-color: #22D3EE; }
html[data-theme="nebula"] .side-sub.active i { color: #22D3EE; }
html[data-theme="nebula"] .topbar { background: rgba(9, 11, 30, .66); border-bottom: 1px solid rgba(255, 255, 255, .08); }
html[data-theme="nebula"] .btn-icon { background: var(--qz-glass); border-color: var(--line); color: #EEF0FF; }
html[data-theme="nebula"] .notif-badge { border-color: #090B1E; }
html[data-theme="nebula"] .app-foot { color: #6C71A6; }

/* surfaces */
html[data-theme="nebula"] .card,
html[data-theme="nebula"] .bg-white, html[data-theme="nebula"] .bg-light, html[data-theme="nebula"] .bg-body,
html[data-theme="nebula"] .list-group-item {
  background: var(--qz-glass) !important;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="nebula"] .card { backdrop-filter: blur(14px); border-radius: var(--radius); }
html[data-theme="nebula"] .card-header {
  background: linear-gradient(135deg, rgba(139, 92, 246, .38), rgba(6, 182, 212, .14));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
html[data-theme="nebula"] .card-footer { background: rgba(255, 255, 255, .03); border-top-color: var(--line); }
html[data-theme="nebula"] .apt-card > .card-header { color: #EEF0FF; }
html[data-theme="nebula"] .apt-card > .card-header .text-muted { color: #9AA0D0 !important; }
html[data-theme="nebula"] .modal-content, html[data-theme="nebula"] .dropdown-menu, html[data-theme="nebula"] .offcanvas,
html[data-theme="nebula"] .popover, html[data-theme="nebula"] .toast {
  background: #12153A; border-color: rgba(255, 255, 255, .12); color: var(--ink);
}
html[data-theme="nebula"] .sidebar-offcanvas { background: #0D1030; }

/* coloured cards glow in their own colour */
html[data-theme="nebula"] .card.tint-indigo { background: linear-gradient(150deg, rgba(99, 102, 241, .30), rgba(255, 255, 255, .03) 70%) !important; border-color: rgba(129, 140, 248, .35); }
html[data-theme="nebula"] .card.tint-green  { background: linear-gradient(150deg, rgba(34, 197, 94, .26), rgba(255, 255, 255, .03) 70%) !important; border-color: rgba(74, 222, 128, .32); }
html[data-theme="nebula"] .card.tint-amber  { background: linear-gradient(150deg, rgba(245, 158, 11, .26), rgba(255, 255, 255, .03) 70%) !important; border-color: rgba(251, 191, 36, .32); }
html[data-theme="nebula"] .card.tint-rose   { background: linear-gradient(150deg, rgba(244, 63, 94, .28), rgba(255, 255, 255, .03) 70%) !important; border-color: rgba(251, 113, 133, .40); box-shadow: 0 0 40px -18px rgba(244, 63, 94, .9); }
html[data-theme="nebula"] .card.tint-teal   { background: linear-gradient(150deg, rgba(20, 184, 166, .26), rgba(255, 255, 255, .03) 70%) !important; border-color: rgba(45, 212, 191, .32); }
html[data-theme="nebula"] .card.tint-blue   { background: linear-gradient(150deg, rgba(6, 182, 212, .26), rgba(255, 255, 255, .03) 70%) !important; border-color: rgba(34, 211, 238, .32); }
html[data-theme="nebula"] .card.tint-purple { background: linear-gradient(150deg, rgba(168, 85, 247, .30), rgba(255, 255, 255, .03) 70%) !important; border-color: rgba(192, 132, 252, .36); }
html[data-theme="nebula"] .card.tint-slate  { background: linear-gradient(150deg, rgba(148, 163, 184, .18), rgba(255, 255, 255, .03) 70%) !important; }

html[data-theme="nebula"] .stat-icon, html[data-theme="nebula"] .li-ic { color: #fff !important; }
html[data-theme="nebula"] .tone-indigo { background: linear-gradient(135deg, #6366F1, #8B5CF6) !important; }
html[data-theme="nebula"] .tone-green  { background: linear-gradient(135deg, #16A34A, #22C55E) !important; }
html[data-theme="nebula"] .tone-slate  { background: linear-gradient(135deg, #475569, #64748B) !important; }
html[data-theme="nebula"] .tone-amber  { background: linear-gradient(135deg, #F97316, #F59E0B) !important; }
html[data-theme="nebula"] .tone-blue   { background: linear-gradient(135deg, #0891B2, #22D3EE) !important; }
html[data-theme="nebula"] .tone-purple { background: linear-gradient(135deg, #9333EA, #C084FC) !important; }
html[data-theme="nebula"] .tone-rose, html[data-theme="nebula"] .tone-red { background: linear-gradient(135deg, #E11D48, #F43F5E) !important; }
html[data-theme="nebula"] .tone-teal   { background: linear-gradient(135deg, #0D9488, #2DD4BF) !important; }

html[data-theme="nebula"] .acc { border-left-color: rgba(255, 255, 255, .2); }
html[data-theme="nebula"] .acc-green  { background: rgba(34, 197, 94, .12) !important; }
html[data-theme="nebula"] .acc-red    { background: rgba(244, 63, 94, .12) !important; }
html[data-theme="nebula"] .acc-amber  { background: rgba(245, 158, 11, .12) !important; }
html[data-theme="nebula"] .acc-indigo { background: rgba(99, 102, 241, .14) !important; }
html[data-theme="nebula"] .acc-slate  { background: rgba(148, 163, 184, .10) !important; }
html[data-theme="nebula"] .acc-teal   { background: rgba(20, 184, 166, .12) !important; }
html[data-theme="nebula"] .acc-blue   { background: rgba(59, 130, 246, .13) !important; }
html[data-theme="nebula"] .acc-purple { background: rgba(168, 85, 247, .13) !important; }

/* tables */
html[data-theme="nebula"] .table {
  --bs-table-bg: transparent; --bs-table-color: #EEF0FF; --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-bg: rgba(139, 92, 246, .10); --bs-table-hover-color: #fff; --bs-table-border-color: rgba(255, 255, 255, .07);
}
html[data-theme="nebula"] .table thead th, html[data-theme="nebula"] .table-light, html[data-theme="nebula"] .table-light > th,
html[data-theme="nebula"] .table-light > td, html[data-theme="nebula"] .table tfoot td {
  background: rgba(255, 255, 255, .04) !important; color: #9AA0D0; border-color: rgba(255, 255, 255, .08);
  --bs-table-bg: transparent; --bs-table-color: #9AA0D0;
}
html[data-theme="nebula"] .table td { border-color: rgba(255, 255, 255, .06); }
html[data-theme="nebula"] .table-success { --bs-table-bg: rgba(34, 197, 94, .14); --bs-table-color: #DCFCE7; }
html[data-theme="nebula"] .table-danger  { --bs-table-bg: rgba(244, 63, 94, .14); --bs-table-color: #FFE4E6; }
html[data-theme="nebula"] .table-warning { --bs-table-bg: rgba(245, 158, 11, .14); --bs-table-color: #FEF3C7; }
html[data-theme="nebula"] .table-info    { --bs-table-bg: rgba(6, 182, 212, .14); --bs-table-color: #CFFAFE; }
html[data-theme="nebula"] .table-secondary { --bs-table-bg: rgba(148, 163, 184, .12); --bs-table-color: #E2E8F0; }
html[data-theme="nebula"] .table-primary { --bs-table-bg: rgba(139, 92, 246, .16); --bs-table-color: #EDE9FE; }
html[data-theme="nebula"] tr.drill-row:hover > td { background: rgba(139, 92, 246, .12); }

/* buttons */
html[data-theme="nebula"] .btn-primary {
  background: linear-gradient(135deg, #8B5CF6, #EC4899); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(236, 72, 153, .8);
}
html[data-theme="nebula"] .btn-outline-primary { color: #C4B5FD; border-color: rgba(167, 139, 250, .45); }
html[data-theme="nebula"] .btn-outline-primary:hover { background: rgba(139, 92, 246, .18); color: #fff; border-color: #A78BFA; }
html[data-theme="nebula"] .btn-outline-secondary { color: #C9CCE8; border-color: rgba(255, 255, 255, .18); }
html[data-theme="nebula"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .35); }
html[data-theme="nebula"] .btn-outline-success { color: #4ADE80; border-color: rgba(74, 222, 128, .4); }
html[data-theme="nebula"] .btn-outline-success:hover { background: rgba(34, 197, 94, .16); color: #BBF7D0; border-color: #4ADE80; }
html[data-theme="nebula"] .btn-outline-danger { color: #FB7185; border-color: rgba(251, 113, 133, .4); }
html[data-theme="nebula"] .btn-outline-danger:hover { background: rgba(244, 63, 94, .16); color: #FECDD3; border-color: #FB7185; }
html[data-theme="nebula"] .btn-outline-warning { color: #FBBF24; border-color: rgba(251, 191, 36, .4); }
html[data-theme="nebula"] .btn-outline-warning:hover { background: rgba(245, 158, 11, .16); color: #FEF3C7; border-color: #FBBF24; }
html[data-theme="nebula"] .btn-outline-info { color: #67E8F9; border-color: rgba(103, 232, 249, .4); }
html[data-theme="nebula"] .btn-outline-info:hover { background: rgba(6, 182, 212, .16); color: #CFFAFE; border-color: #67E8F9; }
html[data-theme="nebula"] .btn-light, html[data-theme="nebula"] .btn-outline-dark, html[data-theme="nebula"] .btn-outline-light {
  background: rgba(255, 255, 255, .06); color: #EEF0FF; border-color: rgba(255, 255, 255, .18);
}

/* badges */
html[data-theme="nebula"] .badge.text-bg-success   { background: rgba(34, 197, 94, .18) !important; color: #4ADE80 !important; }
html[data-theme="nebula"] .badge.text-bg-secondary { background: rgba(148, 163, 184, .18) !important; color: #CBD5E1 !important; }
html[data-theme="nebula"] .badge.text-bg-warning   { background: rgba(245, 158, 11, .18) !important; color: #FBBF24 !important; }
html[data-theme="nebula"] .badge.text-bg-danger    { background: rgba(244, 63, 94, .18) !important; color: #FB7185 !important; }
html[data-theme="nebula"] .badge.text-bg-info      { background: rgba(6, 182, 212, .18) !important; color: #67E8F9 !important; }
html[data-theme="nebula"] .badge.text-bg-light     { background: rgba(255, 255, 255, .10) !important; color: #C9CCE8 !important; }
html[data-theme="nebula"] .badge.text-bg-primary   { background: rgba(139, 92, 246, .22) !important; color: #C4B5FD !important; }
html[data-theme="nebula"] .badge.text-bg-dark      { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
html[data-theme="nebula"] .card-header .badge.text-bg-light { background: rgba(255, 255, 255, .16) !important; }

/* forms */
html[data-theme="nebula"] .form-control, html[data-theme="nebula"] .form-select, html[data-theme="nebula"] .input-group-text {
  background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #EEF0FF;
}
html[data-theme="nebula"] .form-control::placeholder { color: #6C71A6; }
html[data-theme="nebula"] .form-control:focus, html[data-theme="nebula"] .form-select:focus {
  background-color: rgba(255, 255, 255, .07); border-color: #A78BFA; color: #fff; box-shadow: 0 0 0 .22rem rgba(139, 92, 246, .28);
}
html[data-theme="nebula"] .form-control:disabled, html[data-theme="nebula"] .form-control[readonly], html[data-theme="nebula"] .form-select:disabled {
  background-color: rgba(255, 255, 255, .02); color: #9AA0D0;
}
html[data-theme="nebula"] .form-select option, html[data-theme="nebula"] select option { background: #12153A; color: #EEF0FF; }
html[data-theme="nebula"] .form-check-input { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); }
html[data-theme="nebula"] .form-check-input:checked { background-color: #8B5CF6; border-color: #8B5CF6; }

/* alerts, progress, misc */
html[data-theme="nebula"] .alert { border: 1px solid transparent; }
html[data-theme="nebula"] .alert-success { background: rgba(34, 197, 94, .13); color: #BBF7D0; border-color: rgba(74, 222, 128, .25); }
html[data-theme="nebula"] .alert-danger  { background: rgba(244, 63, 94, .13); color: #FECDD3; border-color: rgba(251, 113, 133, .25); }
html[data-theme="nebula"] .alert-info    { background: rgba(6, 182, 212, .13); color: #CFFAFE; border-color: rgba(103, 232, 249, .25); }
html[data-theme="nebula"] .alert-warning { background: rgba(245, 158, 11, .13); color: #FEF3C7; border-color: rgba(251, 191, 36, .25); }
html[data-theme="nebula"] .alert-secondary, html[data-theme="nebula"] .alert-light { background: rgba(255, 255, 255, .06); color: #E2E8F0; }
html[data-theme="nebula"] .alert .btn-close, html[data-theme="nebula"] .modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }
html[data-theme="nebula"] .progress { background: rgba(255, 255, 255, .08); }
html[data-theme="nebula"] .progress-bar:not([class*="bg-"]) { background: linear-gradient(90deg, #22D3EE, #8B5CF6); }
html[data-theme="nebula"] .bg-success { background-color: #22C55E !important; }
html[data-theme="nebula"] .border, html[data-theme="nebula"] .border-top, html[data-theme="nebula"] .border-bottom,
html[data-theme="nebula"] .border-start, html[data-theme="nebula"] .border-end { border-color: rgba(255, 255, 255, .10) !important; }
html[data-theme="nebula"] hr { border-color: rgba(255, 255, 255, .14); opacity: 1; }
html[data-theme="nebula"] .nav-tabs { border-color: rgba(255, 255, 255, .12); }
html[data-theme="nebula"] .nav-tabs .nav-link.active { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .14) rgba(255, 255, 255, .14) transparent; }
html[data-theme="nebula"] .nav-pills .nav-link.active { background: linear-gradient(135deg, #8B5CF6, #06B6D4); }
html[data-theme="nebula"] ::-webkit-scrollbar-thumb { background: #2A2E5A; border-color: #090B1E; }
/* Paper documents (receipts, contracts, posters, print previews) stay white in every theme: put
   class="qz-paper" data-bs-theme="light" on the document's outer element. */
html[data-theme="nebula"] .qz-paper { background: #fff !important; color: #111 !important; color-scheme: light;
  --qz-surface: #fff; --qz-surface-2: #f8fafc; --qz-ink: #111; --qz-muted: #64748b; --qz-line: #e5e7eb; }
html[data-theme="nebula"] .qz-paper .text-muted { color: #64748b !important; }
html[data-theme="nebula"] .qz-paper .card, html[data-theme="nebula"] .qz-paper .table thead th { background: #fff !important; color: #111; }
/* Pages that still paint a white box inline (until each is swept): give it the glass instead. */
html[data-theme="nebula"] [style*="background:#fff"], html[data-theme="nebula"] [style*="background: #fff"],
html[data-theme="nebula"] [style*="background:#ffffff"], html[data-theme="nebula"] [style*="background: #ffffff"],
html[data-theme="nebula"] [style*="background-color:#fff"], html[data-theme="nebula"] [style*="background-color: #fff"],
html[data-theme="nebula"] [style*="background: white"], html[data-theme="nebula"] [style*="background:white"],
html[data-theme="nebula"] [style*="background:#f8f9fa"], html[data-theme="nebula"] [style*="background: #f8f9fa"],
html[data-theme="nebula"] [style*="background:#f8fafc"], html[data-theme="nebula"] [style*="background: #f8fafc"] {
  background: var(--qz-glass-2) !important; color: var(--ink);
}

/* ============================================================
   BENTO — warm paper, black menu, bold solid colour blocks
   ============================================================ */
html[data-theme="bento"] {
  --brand: #7B61FF;
  --brand-2: #7B61FF;
  --brand-soft: #EFEAFF;
  --ink: #111111;
  --muted: #625D54;
  --line: #E6E0D3;
  --bg: #F4F1EA;
  --card: #FFFFFF;
  --success: #15803D;
  --danger: #D92D20;
  --warning: #B45309;
  --radius: 1.6rem;
  --shadow-sm: none;
  --shadow: none;
  --bs-body-bg: #F4F1EA;
  --bs-body-color: #111111;
  --bs-secondary-color: #625D54;
  --bs-border-color: #E6E0D3;
  --bs-link-color: #5B3FFF;
  --bs-link-color-rgb: 91, 63, 255;
  --qz-lime: #C6F432;
  --qz-coral: #FF5C39;
  --qz-sun: #FFC93C;
}
html[data-theme="bento"] body { font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
html[data-theme="bento"] .app-body { background: #F4F1EA; }
html[data-theme="bento"] h1, html[data-theme="bento"] .h1, html[data-theme="bento"] h2, html[data-theme="bento"] .h2,
html[data-theme="bento"] h3, html[data-theme="bento"] .h3 { font-weight: 800; letter-spacing: -.035em; }
/* Only the headline figures take the numbers font; bold headings (titles, names) keep the theme's font. */
html[data-theme="bento"] .stat-value {
  font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: -.03em;
}
html[data-theme="bento"] .stat-value { font-size: 1.55rem; }
html[data-theme="bento"] .text-warning { color: #B45309 !important; }
:where(html[data-theme="bento"]) a { color: #5B3FFF; }
html[data-theme="bento"] .text-muted { color: #625D54 !important; }

/* shell: a floating black menu on desktop */
html[data-theme="bento"] .sidebar { background: #111; color: #BDBDBD; }
@media (min-width: 992px) {
  html[data-theme="bento"] .sidebar:not(.sidebar-offcanvas) { inset: 14px auto 14px 14px; border-radius: 28px; }
  html[data-theme="bento"] .main { margin-left: calc(var(--sidebar-w) + 28px); }
}
html[data-theme="bento"] .side-brand-mark { background: #C6F432; color: #111; box-shadow: none; }
html[data-theme="bento"] .side-brand-sub { color: #8A8A8A; }
html[data-theme="bento"] .side-link { color: #C4C4C4; border-radius: 16px; font-weight: 600; }
html[data-theme="bento"] .side-link:hover { background: #1F1F1F; color: #fff; }
html[data-theme="bento"] .side-link.active { background: #C6F432; color: #111; box-shadow: none; }
html[data-theme="bento"] .side-sub { border-left-color: #333; }
html[data-theme="bento"] .side-sub.active { background: rgba(198, 244, 50, .14); color: #E4FF8A; border-left-color: #C6F432; }
html[data-theme="bento"] .side-sub.active i { color: #C6F432; }
html[data-theme="bento"] .side-group.in-group { background: #1F1F1F; color: #fff; }
html[data-theme="bento"] .side-foot { border-top-color: #262626; }
html[data-theme="bento"] .topbar { background: rgba(244, 241, 234, .86); border-bottom: 0; }
html[data-theme="bento"] .topbar-title { font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
html[data-theme="bento"] .btn-icon { background: #fff; border: 0; border-radius: 99px; }
html[data-theme="bento"] .notif-badge { border-color: #F4F1EA; }

/* surfaces */
html[data-theme="bento"] .card { border: 0; border-radius: var(--radius); background: #fff; box-shadow: none; }
html[data-theme="bento"] .card-header {
  background: #111; color: #fff; padding: 1rem 1.3rem; font-weight: 700;
}
html[data-theme="bento"] .card-header .text-muted { color: #BDBDBD !important; }
html[data-theme="bento"] .card-header .badge.text-bg-light { background: #C6F432 !important; color: #111 !important; }
html[data-theme="bento"] .apt-card > .card-header { color: #111; }
html[data-theme="bento"] .bg-light { background: #F7F4EE !important; }
html[data-theme="bento"] .list-group-item { border-color: #EFEAE0; }
html[data-theme="bento"] .modal-content { border: 0; border-radius: 1.6rem; }
html[data-theme="bento"] .dropdown-menu { border: 0; border-radius: 1rem; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .3); }

/* Coloured cards stay WHITE (owner, 11 Oct 2026: solid colour blocks "not professional"). The colour lives in
   a thin accent line along the top and in the icon chip - enough to tell the tiles apart at a glance. */
html[data-theme="bento"] .card[class*="tint-"] { background: #fff !important; box-shadow: inset 0 4px 0 var(--qz-acc, #E6E0D3) !important; }
html[data-theme="bento"] .card.tint-indigo { --qz-acc: #6E56F5; }
html[data-theme="bento"] .card.tint-green  { --qz-acc: #84B816; }
html[data-theme="bento"] .card.tint-amber  { --qz-acc: #E9A800; }
html[data-theme="bento"] .card.tint-rose   { --qz-acc: #E8603C; }
html[data-theme="bento"] .card.tint-teal   { --qz-acc: #1FB394; }
html[data-theme="bento"] .card.tint-blue   { --qz-acc: #2A9FD6; }
html[data-theme="bento"] .card.tint-purple { --qz-acc: #A58BFF; }
html[data-theme="bento"] .card.tint-slate  { --qz-acc: #B9B1A2; }
html[data-theme="bento"] .card.stat-card .stat-value { color: #111; }

html[data-theme="bento"] .stat-icon { border-radius: 14px; }
html[data-theme="bento"] .tone-indigo { background: #6E56F5 !important; color: #fff !important; }
html[data-theme="bento"] .tone-green  { background: #C6F432 !important; color: #111 !important; }
html[data-theme="bento"] .tone-amber  { background: #FFC93C !important; color: #111 !important; }
html[data-theme="bento"] .tone-rose, html[data-theme="bento"] .tone-red { background: #E8603C !important; color: #fff !important; }
html[data-theme="bento"] .tone-blue   { background: #2A9FD6 !important; color: #fff !important; }
html[data-theme="bento"] .tone-teal   { background: #1FB394 !important; color: #fff !important; }
html[data-theme="bento"] .tone-purple { background: #A58BFF !important; color: #fff !important; }
html[data-theme="bento"] .tone-slate  { background: #111 !important; color: #fff !important; }

html[data-theme="bento"] .acc { border-left-width: 6px; border-radius: 1rem; background: #fff !important; }
html[data-theme="bento"] .acc-green  { border-left-color: #84B816; }
html[data-theme="bento"] .acc-red    { border-left-color: #E8603C; }
html[data-theme="bento"] .acc-amber  { border-left-color: #E9A800; }
html[data-theme="bento"] .acc-indigo { border-left-color: #6E56F5; }
html[data-theme="bento"] .acc-slate  { border-left-color: #B9B1A2; }
html[data-theme="bento"] .acc-teal   { border-left-color: #1FB394; }
html[data-theme="bento"] .acc-blue   { border-left-color: #2A9FD6; }
html[data-theme="bento"] .acc-purple { border-left-color: #A58BFF; }
html[data-theme="bento"] .acc-green, html[data-theme="bento"] .acc-red, html[data-theme="bento"] .acc-amber,
html[data-theme="bento"] .acc-indigo, html[data-theme="bento"] .acc-slate, html[data-theme="bento"] .acc-teal,
html[data-theme="bento"] .acc-blue, html[data-theme="bento"] .acc-purple { background: #fff !important; }

/* tables */
html[data-theme="bento"] .table { --bs-table-hover-bg: #FAF7F0; --bs-table-border-color: #EFEAE0; }
html[data-theme="bento"] .table thead th, html[data-theme="bento"] .table-light > th, html[data-theme="bento"] .table tfoot td {
  background: #F7F4EE !important; color: #625D54; border-bottom-color: #E6E0D3;
}
html[data-theme="bento"] .table td { border-color: #EFEAE0; }

/* buttons: pills */
html[data-theme="bento"] .btn { border-radius: 99px; font-weight: 700; }
html[data-theme="bento"] .btn-primary { background: #6E56F5; color: #fff; box-shadow: none; }
html[data-theme="bento"] .btn-primary:hover { background: #5C44E6; color: #fff; filter: none; }
html[data-theme="bento"] .btn-success { background: #111; border-color: #111; color: #C6F432; }
html[data-theme="bento"] .btn-success:hover { background: #222; border-color: #222; color: #DBFF6B; }
html[data-theme="bento"] .btn-danger { background: #E8603C; border-color: #E8603C; }
html[data-theme="bento"] .btn-warning { background: #FFC93C; border-color: #FFC93C; color: #111; }
html[data-theme="bento"] .btn-outline-primary { color: #5B3FFF; border-color: #CFC4FF; }
html[data-theme="bento"] .btn-outline-primary:hover { background: #EFEAFF; color: #5B3FFF; border-color: #6E56F5; }
html[data-theme="bento"] .btn-outline-secondary { color: #3A362F; border-color: #DDD5C6; background: #fff; }
html[data-theme="bento"] .btn-outline-secondary:hover { background: #111; color: #fff; border-color: #111; }

/* badges */
html[data-theme="bento"] .badge { border-radius: 99px; padding: .42em .8em; }
html[data-theme="bento"] .badge.text-bg-success   { background: #E8FAB0 !important; color: #2F4700 !important; }
html[data-theme="bento"] .badge.text-bg-warning   { background: #FFF0C2 !important; color: #7A4F00 !important; }
html[data-theme="bento"] .badge.text-bg-danger    { background: #FFE0D8 !important; color: #B42A0B !important; }
html[data-theme="bento"] .badge.text-bg-info      { background: #DDF3FF !important; color: #0B5F85 !important; }
html[data-theme="bento"] .badge.text-bg-secondary { background: #EEE9DF !important; color: #3A362F !important; }
html[data-theme="bento"] .badge.text-bg-light     { background: #F4F1EA !important; color: #3A362F !important; }
html[data-theme="bento"] .badge.text-bg-primary   { background: #EFEAFF !important; color: #4A2FE0 !important; }

/* forms */
html[data-theme="bento"] .form-control, html[data-theme="bento"] .form-select { border-radius: 14px; border-color: #E2DBCC; }
html[data-theme="bento"] .form-control:focus, html[data-theme="bento"] .form-select:focus { border-color: #6E56F5; box-shadow: 0 0 0 .22rem rgba(110, 86, 245, .2); }
html[data-theme="bento"] .form-check-input:checked { background-color: #6E56F5; border-color: #6E56F5; }

/* alerts, progress */
html[data-theme="bento"] .alert { border-radius: 1.2rem; box-shadow: none; }
html[data-theme="bento"] .alert-success { background: #F0FBD0; color: #2F4700; }
html[data-theme="bento"] .alert-danger  { background: #FFE7E0; color: #8F2208; }
html[data-theme="bento"] .alert-info    { background: #E2F5FF; color: #0B4F6E; }
html[data-theme="bento"] .alert-warning { background: #FFF4D6; color: #6E4700; }
html[data-theme="bento"] .progress { background: #ECE6D8; }
html[data-theme="bento"] .progress-bar:not([class*="bg-"]) { background: #6E56F5; }
html[data-theme="bento"] .nav-pills .nav-link { border-radius: 99px; }
html[data-theme="bento"] .nav-pills .nav-link.active { background: #111; color: #fff; }
html[data-theme="bento"] ::-webkit-scrollbar-thumb { background: #D5CEBE; border-color: #F4F1EA; }
html[data-theme="bento"] ::selection { background: #C6F432; color: #111; }
html[data-theme="bento"] tr.drill-row:hover > td { background: #F4F1EA; }

/* Paper documents: tables and inline white boxes inside them keep their light colours too. */
html[data-theme="nebula"] .qz-paper .table { --bs-table-color: #111; --bs-table-border-color: #e5e7eb; --bs-table-bg: #fff; }
html[data-theme="nebula"] .qz-paper [style*="background:#fff"], html[data-theme="nebula"] .qz-paper [style*="background: #fff"] { background: #fff !important; }

/* Printing from Nebula: paper is white, so print dark ink whatever the screen theme. */
@media print {
  html[data-theme="nebula"] body, html[data-theme="nebula"] .app-body { background: #fff !important; }
  html[data-theme="nebula"] * { color: #111 !important; background: transparent !important; box-shadow: none !important;
    border-color: #d1d5db !important; text-shadow: none !important; backdrop-filter: none !important; }
}

/* ============================================================
   MOTION (owner, 11 Oct 2026: "everything should have sleek animation") — all three themes.
   Short and soft: things settle into place, never bounce. Anyone whose device asks for reduced
   motion gets none of it.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* the page settles in: each top-level block rises a few pixels, one after another */
  @keyframes qz-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .app-body .content > * { animation: qz-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
  .app-body .content > *:nth-child(2) { animation-delay: .04s; }
  .app-body .content > *:nth-child(3) { animation-delay: .08s; }
  .app-body .content > *:nth-child(4) { animation-delay: .12s; }
  .app-body .content > *:nth-child(5) { animation-delay: .16s; }
  .app-body .content > *:nth-child(6) { animation-delay: .20s; }
  .app-body .content > *:nth-child(n+7) { animation-delay: .24s; }
  /* tiles inside a row of cards follow the same rhythm */
  .app-body .content .row > [class*="col"] { animation: qz-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
  .app-body .content .row > [class*="col"]:nth-child(2) { animation-delay: .05s; }
  .app-body .content .row > [class*="col"]:nth-child(3) { animation-delay: .10s; }
  .app-body .content .row > [class*="col"]:nth-child(4) { animation-delay: .15s; }
  .app-body .content .row > [class*="col"]:nth-child(n+5) { animation-delay: .20s; }

  /* bars grow from the left */
  @keyframes qz-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .progress-bar { transform-origin: left center; animation: qz-grow .8s cubic-bezier(.2, .7, .2, 1) .15s both; }

  /* cards and tiles lift a touch under the pointer */
  .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
  .card.stat-card:hover, a > .card:hover, a.drill:hover .card { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(15, 23, 42, .35); }
  html[data-theme="nebula"] .card.stat-card:hover, html[data-theme="nebula"] a > .card:hover { box-shadow: 0 16px 40px -18px rgba(139, 92, 246, .7); }

  /* buttons, links, menu */
  .btn { transition: transform .12s ease, filter .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .btn:active { transform: scale(.97); }
  .side-link { transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
  .side-link:hover { transform: translateX(2px); }
  .side-link.active i { animation: qz-pop .35s cubic-bezier(.2, .9, .3, 1.4); }
  @keyframes qz-pop { from { transform: scale(.7); } to { transform: scale(1); } }
  .table tbody tr { transition: background-color .15s ease; }
  .form-control, .form-select { transition: border-color .15s ease, box-shadow .2s ease, background-color .15s ease; }
  .badge { transition: transform .15s ease; }

  /* menus and pop-ups open with a short fade-and-drop */
  @keyframes qz-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
  .dropdown-menu.show { animation: qz-drop .16s ease-out; }
  .modal.fade .modal-dialog { transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; transform: translateY(14px) scale(.98); }
  .modal.show .modal-dialog { transform: none; }
  .alert { animation: qz-rise .35s ease-out both; }
}

/* Daily rentals under Bento: the screens paint with --bs-body-bg, which in Bento is the paper colour, so the
   calendar went beige with grey weekends. Inside .dr the surfaces are white again, weekends a faint warm
   tint, today a light violet column, and the bars use Bento's violet and a deeper green. */
html[data-theme="bento"] .dr {
  --bs-body-bg: #fff; --dr-soft: #F4F1EA; --dr-line: #ECE6DA;
  --dr-weekend: #FBF9F4; --dr-today: rgba(110, 86, 245, .07);
  --dr-conf: #6E56F5; --dr-in: #12805C;
}
html[data-theme="bento"] .dr .cal-wrap { border: 0; border-radius: 1.4rem; }
html[data-theme="bento"] .dr .cal-group { background: #F7F4EE; }
html[data-theme="bento"] .dr .bar { border-radius: 10px; font-weight: 700; }

/* Side menu scrollbar (owner, 11 Oct 2026: "side menu's scroll looks bad in nebula"). Thin, the colour of the
   menu itself, and only visible while the pointer is over the menu. scrollbar-color wins over the
   ::-webkit-scrollbar rules in current Chrome/Edge/Firefox, so this one rule styles every browser. */
html[data-theme="nebula"] .side-nav, html[data-theme="nebula"] .sidebar-offcanvas .offcanvas-body {
  scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .2s ease;
}
html[data-theme="nebula"] .side-nav:hover, html[data-theme="nebula"] .sidebar-offcanvas .offcanvas-body:hover {
  scrollbar-color: rgba(167, 139, 250, .35) transparent;
}
html[data-theme="bento"] .side-nav, html[data-theme="bento"] .sidebar-offcanvas .offcanvas-body {
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
html[data-theme="bento"] .side-nav:hover, html[data-theme="bento"] .sidebar-offcanvas .offcanvas-body:hover {
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}