/* =====================================================================
   Hairs Hub Studio CRM — visual theme, Vision Pro elevation pass
   ---------------------------------------------------------------------
   Same brand (amber/gold "Hairs Hub Studio" identity, already approved
   and matched pixel-for-pixel to a real mockup) — this pass elevates
   the MATERIAL quality of that same design toward the Apple Vision Pro
   / VisionOS / Linear / Stripe reference points requested: genuine
   multi-layer depth instead of one flat shadow, a thin light-catching
   edge highlight on every glass surface, a proper type scale with
   tighter tracking on large numbers, smoother spring-like transitions,
   and a hover-lift language used consistently everywhere.
   Every existing CSS class name below is UNCHANGED from before — this
   only elevates the values inside each rule, so no view's HTML needed
   to change and nothing about routing/data/business logic is touched.
   Everything below the "OTHER PAGES" divider reskins Bootstrap's own
   components so every other page in the app shares this same elevated
   material language, not just the dashboard.
   ===================================================================== */

:root {
    /* Copper & Sand luxury palette — approved mockup colors */
    --amber-1: #D88B45;   /* light copper */
    --amber-2: #C87432;   /* mid copper */
    --amber-3: #B56328;   /* deep copper, for text/accents */
    --cream-bg: #f8f4ee;
    --card-bg: rgba(255, 255, 255, 0.35);
    --card-bg-solid: rgba(255, 255, 255, 0.6);
    --card-border: rgba(255, 255, 255, 0.55);
    --ink: #1f1f1f;
    --ink-soft: #6b665d;
    --ink-faint: #9b9488;
    --green: #10b981;
    --red: #ef4444;
    --amber-warn: #f59e0b;

    /* Vision-Pro style 4-layer glass card tokens */
    --glass-blur: blur(24px) saturate(160%);
    --glass-reflection: linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0) 55%);
    --glass-glow-opacity: 0.45;

    /* Elevation: layered, soft, spatial — replaces the old single flat shadow.
       Three tiers so bigger/closer surfaces (modals, hovered cards) read as
       genuinely nearer, the way VisionOS glass panels separate from their
       background rather than just sitting on a flat drop-shadow. */
    --shadow-sm: 0 1px 2px rgba(58, 47, 36, 0.05), 0 2px 8px rgba(58, 47, 36, 0.05);
    --shadow: 0 1px 2px rgba(58, 47, 36, 0.04), 0 10px 28px rgba(120, 90, 50, 0.10), 0 28px 56px rgba(120, 90, 50, 0.06);
    --shadow-lg: 0 2px 4px rgba(58, 47, 36, 0.05), 0 16px 40px rgba(120, 90, 50, 0.14), 0 40px 80px rgba(120, 90, 50, 0.10);

    /* The thin light-catching line along a glass panel's top edge —
       the single biggest contributor to a "real glass" read vs. a flat
       tinted rectangle. Applied via ::before on every major surface. */
    --edge-highlight: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0) 60%);

    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Explicit, literal black borders on every textbox, per request —
       kept as its own token so it's obvious this is deliberate, not an
       accident of a shared --card-border value. */
    --input-border: #14100b;
    --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0); /* only needed on dark themes; see midnight below */

    /* Tint tokens — every place a glow/hover/badge/ripple used to hardcode
       a literal rgba(230,199,122,...) or rgba(212,175,55,...) now reads
       one of these instead, so the three theme modes below can recolor
       every one of those accents in a single block rather than requiring
       a hunt through the whole file. Values here match the copper mockup
       tones (#FFD89A / #D88B45 / #FFC86A / #B56328). */
    --glow-1: rgba(255,216,154,0.35);
    --glow-2: rgba(216,139,69,0.22);
    --glow-3: rgba(255,200,106,0.28);
    --glow-4: rgba(181,99,40,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(255,216,154,0.55), rgba(216,139,69,0.35));
    --icon-glow: radial-gradient(circle, rgba(216,139,69,0.5), rgba(216,139,69,0) 70%);
    --row-hover: rgba(216,139,69,0.10);
    --row-hover-soft: rgba(216,139,69,0.08);
    --ripple-tint: rgba(216,139,69,0.35);
}

/* Mobile-UA-on-desktop-site banner (see app/views/layouts/main.php) —
   self-service way back to /mobile-v2/ for anyone who tapped "Desktop
   Site" once and has been silently stuck there since (that link sets a
   1-year cookie with no other way to undo it). */
.mobile-switch-banner{
    display:flex; align-items:center; gap:10px; padding:10px 16px;
    background:linear-gradient(135deg, var(--amber-1), var(--amber-2)); color:#fff;
    font-size:13px; font-weight:600; position:sticky; top:0; z-index:2000;
}
.mobile-switch-banner i{font-size:15px;}
.mobile-switch-banner span{flex:1;}
.mobile-switch-banner a{color:#fff; font-weight:800; text-decoration:underline; white-space:nowrap;}
.mobile-switch-dismiss{background:rgba(255,255,255,0.25); color:#fff; border:none; width:22px; height:22px; border-radius:50%; font-size:14px; line-height:1; flex-shrink:0;}

/* =====================================================================
   THEME MODES — Ocean Glass / Sand & Gold (default) / Midnight Black.
   Sand & Gold is simply the :root above, restated here so all three
   modes are easy to compare side by side. Switching is just setting
   data-theme on <html>; every color below is a CSS custom property so
   nothing else in this file (or any view) needs to know a theme system
   exists. Persisted to localStorage by the small script in main.php.
   ===================================================================== */

[data-theme="sand"] {
    --amber-1: #D88B45; --amber-2: #C87432; --amber-3: #B56328;
    --cream-bg: #f8f4ee;
    --card-bg: rgba(255, 255, 255, 0.35);
    --card-bg-solid: rgba(255, 255, 255, 0.6);
    --card-border: rgba(255, 255, 255, 0.55);
    --ink: #1f1f1f; --ink-soft: #6b665d; --ink-faint: #9b9488;
    --input-border: #14100b; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(255,216,154,0.35); --glow-2: rgba(216,139,69,0.22);
    --glow-3: rgba(255,200,106,0.28); --glow-4: rgba(181,99,40,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(255,216,154,0.55), rgba(216,139,69,0.35));
    --icon-glow: radial-gradient(circle, rgba(216,139,69,0.5), rgba(216,139,69,0) 70%);
    --row-hover: rgba(216,139,69,0.10); --row-hover-soft: rgba(216,139,69,0.08);
    --ripple-tint: rgba(216,139,69,0.35);
    --body-bg-base: linear-gradient(135deg, #faf7f1 0%, #f8f4ee 50%, #f6f0e5 100%);
}

[data-theme="ocean"] {
    /* Ocean Blue / Aqua / Cyan / Crystal White — calm, resort-luxury */
    --amber-1: #7dd3e0; --amber-2: #1f8fb8; --amber-3: #0e5c78;
    --cream-bg: #eef8fb;
    --card-bg: rgba(255, 255, 255, 0.38);
    --card-bg-solid: rgba(255, 255, 255, 0.62);
    --card-border: rgba(255, 255, 255, 0.6);
    --ink: #10262c; --ink-soft: #4c7078; --ink-faint: #8fa9ae;
    --input-border: #0b2d36; --input-border-focus: #062227;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(125,211,224,0.35); --glow-2: rgba(31,143,184,0.22);
    --glow-3: rgba(125,211,224,0.28); --glow-4: rgba(31,143,184,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(125,211,224,0.55), rgba(31,143,184,0.35));
    --icon-glow: radial-gradient(circle, rgba(31,143,184,0.5), rgba(31,143,184,0) 70%);
    --row-hover: rgba(31,143,184,0.10); --row-hover-soft: rgba(31,143,184,0.08);
    --ripple-tint: rgba(31,143,184,0.35);
    --body-bg-base: linear-gradient(135deg, #f3fbfd 0%, #eef8fb 50%, #e8f4f8 100%);
}

[data-theme="rose_gold"] {
    /* Rose Gold / Blush / Champagne — warm, soft-luxury light theme */
    --amber-1: #e8a7a0; --amber-2: #c97b74; --amber-3: #a85c53;
    --cream-bg: #fdf2ef;
    --card-bg: rgba(255, 255, 255, 0.4);
    --card-bg-solid: rgba(255, 255, 255, 0.65);
    --card-border: rgba(255, 255, 255, 0.6);
    --ink: #2b1e1c; --ink-soft: #7a6360; --ink-faint: #ab9591;
    --input-border: #1a100e; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(232,167,160,0.35); --glow-2: rgba(201,123,116,0.22);
    --glow-3: rgba(232,167,160,0.28); --glow-4: rgba(168,92,83,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(232,167,160,0.55), rgba(201,123,116,0.35));
    --icon-glow: radial-gradient(circle, rgba(201,123,116,0.5), rgba(201,123,116,0) 70%);
    --row-hover: rgba(201,123,116,0.10); --row-hover-soft: rgba(201,123,116,0.08);
    --ripple-tint: rgba(201,123,116,0.35);
    --body-bg-base: linear-gradient(135deg, #fef6f4 0%, #fdf2ef 50%, #fbeae6 100%);
}

[data-theme="platinum"] {
    /* Platinum / Silver / Graphite accents — cool, minimal light theme */
    --amber-1: #9aa3ab; --amber-2: #6b7680; --amber-3: #4c555c;
    --cream-bg: #f4f5f6;
    --card-bg: rgba(255, 255, 255, 0.42);
    --card-bg-solid: rgba(255, 255, 255, 0.66);
    --card-border: rgba(255, 255, 255, 0.6);
    --ink: #202325; --ink-soft: #656d73; --ink-faint: #9aa1a6;
    --input-border: #101214; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(154,163,171,0.30); --glow-2: rgba(107,118,128,0.20);
    --glow-3: rgba(154,163,171,0.24); --glow-4: rgba(76,85,92,0.16);
    --nav-active-bg: linear-gradient(135deg, rgba(154,163,171,0.5), rgba(107,118,128,0.32));
    --icon-glow: radial-gradient(circle, rgba(107,118,128,0.45), rgba(107,118,128,0) 70%);
    --row-hover: rgba(107,118,128,0.10); --row-hover-soft: rgba(107,118,128,0.08);
    --ripple-tint: rgba(107,118,128,0.32);
    --body-bg-base: linear-gradient(135deg, #f8f9fa 0%, #f4f5f6 50%, #eef0f1 100%);
}

[data-theme="midnight"] {
    /* Black / Graphite / Gold accents — Apple Pro-app executive feel */
    --amber-1: #e8c874; --amber-2: #c79a2f; --amber-3: #f2d78a;
    --cream-bg: #17181c;
    --card-bg: rgba(32, 33, 38, 0.55);
    --card-bg-solid: rgba(28, 29, 34, 0.78);
    --card-border: rgba(255, 255, 255, 0.10);
    --ink: #f2f0ea; --ink-soft: #b8b3a6; --ink-faint: #7c7871;
    /* Textboxes stay literal black here too, per the site-wide rule —
       previously this was gold, which quietly broke the "always black
       border" requirement on the one theme most likely to need it for
       contrast. A black border is invisible against this near-black
       background, so --input-edge below adds a thin translucent rim
       (via box-shadow, not the border itself) purely so the field's
       boundary stays visible; the rendered border-color remains black. */
    --input-border: #000000; --input-border-focus: #000000;
    --input-edge: rgba(255, 255, 255, 0.22);
    --glow-1: rgba(232,200,116,0.18); --glow-2: rgba(199,154,47,0.14);
    --glow-3: rgba(232,200,116,0.14); --glow-4: rgba(199,154,47,0.10);
    --nav-active-bg: linear-gradient(135deg, rgba(232,200,116,0.30), rgba(199,154,47,0.20));
    --icon-glow: radial-gradient(circle, rgba(199,154,47,0.45), rgba(199,154,47,0) 70%);
    --row-hover: rgba(199,154,47,0.12); --row-hover-soft: rgba(199,154,47,0.08);
    --ripple-tint: rgba(199,154,47,0.30);
    --body-bg-base: linear-gradient(135deg, #101114 0%, #17181c 50%, #101114 100%);
}

/* =====================================================================
   FIVE MORE THEMES — each evokes a familiar mood/world without using
   any actual logos, character art, or trademarked names in the UI
   itself (the labels below are original, e.g. "Wizarding Study" not
   a house/franchise name) — same variable set as every theme above,
   so nothing outside this file needs to know these exist.
   ===================================================================== */

[data-theme="cars"] {
    /* Race Track — motorsport red, carbon black, brushed chrome */
    --amber-1: #FF5A3C; --amber-2: #D62828; --amber-3: #8C1C13;
    --cream-bg: #F2F1EF;
    --card-bg: rgba(255, 255, 255, 0.4);
    --card-bg-solid: rgba(255, 255, 255, 0.68);
    --card-border: rgba(255, 255, 255, 0.6);
    --ink: #1A1A1A; --ink-soft: #5C5C5C; --ink-faint: #9A9A9A;
    --input-border: #000000; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(255,90,60,0.35); --glow-2: rgba(214,40,40,0.22);
    --glow-3: rgba(255,90,60,0.28); --glow-4: rgba(140,28,19,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(255,90,60,0.55), rgba(214,40,40,0.35));
    --icon-glow: radial-gradient(circle, rgba(214,40,40,0.5), rgba(214,40,40,0) 70%);
    --row-hover: rgba(214,40,40,0.10); --row-hover-soft: rgba(214,40,40,0.08);
    --ripple-tint: rgba(214,40,40,0.35);
    --body-bg-base: linear-gradient(135deg, #f6f5f3 0%, #f2f1ef 50%, #ebebe9 100%);
}

[data-theme="potter"] {
    /* Wizarding Study — aged parchment, candlelit gold, deep burgundy wood */
    --amber-1: #C9A15A; --amber-2: #8B3A3A; --amber-3: #5C1F1F;
    --cream-bg: #F5EEDD;
    --card-bg: rgba(255, 252, 240, 0.42);
    --card-bg-solid: rgba(255, 252, 242, 0.68);
    --card-border: rgba(255, 250, 235, 0.6);
    --ink: #2B2018; --ink-soft: #6B5C47; --ink-faint: #A89A80;
    --input-border: #1a1208; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(201,161,90,0.35); --glow-2: rgba(139,58,58,0.22);
    --glow-3: rgba(201,161,90,0.28); --glow-4: rgba(92,31,31,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(201,161,90,0.55), rgba(139,58,58,0.35));
    --icon-glow: radial-gradient(circle, rgba(139,58,58,0.5), rgba(139,58,58,0) 70%);
    --row-hover: rgba(139,58,58,0.10); --row-hover-soft: rgba(139,58,58,0.08);
    --ripple-tint: rgba(139,58,58,0.35);
    --body-bg-base: linear-gradient(135deg, #f8f2e2 0%, #f5eedd 50%, #efe4c9 100%);
}

[data-theme="friends"] {
    /* Coffeehouse — 90s NYC apartment: mustard couch orange, coffee brown, warm cream */
    --amber-1: #E8A24C; --amber-2: #C97B2E; --amber-3: #8B4F1F;
    --cream-bg: #FBF3E7;
    --card-bg: rgba(255, 255, 255, 0.42);
    --card-bg-solid: rgba(255, 255, 255, 0.68);
    --card-border: rgba(255, 255, 255, 0.6);
    --ink: #3B2A1E; --ink-soft: #7A6650; --ink-faint: #B0A08A;
    --input-border: #1f150d; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(232,162,76,0.35); --glow-2: rgba(201,123,46,0.22);
    --glow-3: rgba(232,162,76,0.28); --glow-4: rgba(139,79,31,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(232,162,76,0.55), rgba(201,123,46,0.35));
    --icon-glow: radial-gradient(circle, rgba(201,123,46,0.5), rgba(201,123,46,0) 70%);
    --row-hover: rgba(201,123,46,0.10); --row-hover-soft: rgba(201,123,46,0.08);
    --ripple-tint: rgba(201,123,46,0.35);
    --body-bg-base: linear-gradient(135deg, #fdf7ee 0%, #fbf3e7 50%, #f7e9d6 100%);
}

[data-theme="marvel"] {
    /* Hero Mode — bold comic-book red and hero blue, ink-navy text */
    --amber-1: #5B8DEF; --amber-2: #D6273A; --amber-3: #8C0F1E;
    --cream-bg: #F1F3F8;
    --card-bg: rgba(255, 255, 255, 0.42);
    --card-bg-solid: rgba(255, 255, 255, 0.68);
    --card-border: rgba(255, 255, 255, 0.6);
    --ink: #161B33; --ink-soft: #4B5578; --ink-faint: #8991AD;
    --input-border: #000000; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(91,141,239,0.35); --glow-2: rgba(214,39,58,0.22);
    --glow-3: rgba(91,141,239,0.28); --glow-4: rgba(140,15,30,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(91,141,239,0.5), rgba(214,39,58,0.35));
    --icon-glow: radial-gradient(circle, rgba(214,39,58,0.5), rgba(214,39,58,0) 70%);
    --row-hover: rgba(214,39,58,0.10); --row-hover-soft: rgba(214,39,58,0.08);
    --ripple-tint: rgba(214,39,58,0.35);
    --body-bg-base: linear-gradient(135deg, #f5f7fb 0%, #f1f3f8 50%, #e8ecf5 100%);
}

[data-theme="food"] {
    /* Spice Market — appetizing paprika orange, chili red, warm butter cream */
    --amber-1: #FF8A3D; --amber-2: #E8590C; --amber-3: #A83E0A;
    --cream-bg: #FFF6EC;
    --card-bg: rgba(255, 255, 255, 0.42);
    --card-bg-solid: rgba(255, 255, 255, 0.68);
    --card-border: rgba(255, 255, 255, 0.6);
    --ink: #2B1B12; --ink-soft: #6B5240; --ink-faint: #A8917E;
    --input-border: #1c1006; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --glow-1: rgba(255,138,61,0.35); --glow-2: rgba(232,89,12,0.22);
    --glow-3: rgba(255,138,61,0.28); --glow-4: rgba(168,62,10,0.18);
    --nav-active-bg: linear-gradient(135deg, rgba(255,138,61,0.55), rgba(232,89,12,0.35));
    --icon-glow: radial-gradient(circle, rgba(232,89,12,0.5), rgba(232,89,12,0) 70%);
    --row-hover: rgba(232,89,12,0.10); --row-hover-soft: rgba(232,89,12,0.08);
    --ripple-tint: rgba(232,89,12,0.35);
    --body-bg-base: linear-gradient(135deg, #fffaf2 0%, #fff6ec 50%, #ffecd6 100%);
}

/* "Force Light Mode" toggle — independent of color theme, per spec: the
   app should never be "purely dark regardless of theme". Midnight Black
   is the only theme with a dark background, so this override only needs
   to apply there; every other theme is already light by default. */
[data-theme="midnight"][data-mode="light"] {
    --cream-bg: #f8f4ee;
    --card-bg: rgba(255, 255, 255, 0.35);
    --card-bg-solid: rgba(255, 255, 255, 0.6);
    --card-border: rgba(255, 255, 255, 0.55);
    --ink: #1f1f1f; --ink-soft: #6b665d; --ink-faint: #9b9488;
    --input-border: #14100b; --input-border-focus: #000000;
    --input-edge: rgba(0, 0, 0, 0);
    --body-bg-base: linear-gradient(135deg, #faf7f1 0%, #f8f4ee 50%, #f6f0e5 100%);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

body {
    background:
        radial-gradient(circle at 8% 8%, var(--glow-1), transparent 40%),
        radial-gradient(circle at 90% 12%, var(--glow-2), transparent 45%),
        radial-gradient(circle at 20% 85%, var(--glow-3), transparent 45%),
        radial-gradient(circle at 80% 90%, var(--glow-4), transparent 45%),
        var(--body-bg-base);
    min-height: 100vh;
    transition: background 0.5s var(--ease-out);
}

.app { display: flex; min-height: 100vh; padding: 18px; gap: 18px; align-items: flex-start; }

/* ---------- Reusable glass-surface edge highlight ---------- */
.sidebar, .card, .app-content-card, .profile-card, .help-card {
    position: relative;
    isolation: isolate;
}
.sidebar::before, .card::before, .app-content-card::before, .profile-card::before, .help-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--edge-highlight);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: 260px; flex-shrink: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: var(--shadow);
    padding: 20px 16px;
    display: flex; flex-direction: column;
    min-height: calc(100vh - 36px);
    position: sticky; top: 18px;
    transition: width 0.35s var(--ease-spring), padding 0.35s var(--ease-spring);
}
.logo { display: flex; align-items: center; gap: 10px; padding: 2px 6px 18px 6px; text-decoration: none; }
.logo .mark {
    width: 38px; height: 38px; border-radius: 13px;
    background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(180,120,30,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.logo-text { overflow: hidden; white-space: nowrap; }
.logo .name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -0.2px; }
.logo .sub { font-size: 9px; letter-spacing: 1.8px; color: var(--ink-faint); font-weight: 600; }

/* Collapse toggle — small floating circular button pinned to the
   sidebar's edge so it reads as part of the glass panel itself. */
.sidebar-toggle {
    position: absolute !important; top: 26px !important; right: -12px !important;
    width: 26px !important; height: 26px !important; min-width: 26px !important; max-width: 26px !important;
    border-radius: 50% !important; border: 1px solid var(--card-border) !important;
    background: var(--card-bg-solid); box-shadow: var(--shadow-sm);
    display: flex !important; align-items: center; justify-content: center;
    color: var(--ink-soft); font-size: 11px; line-height: 1; padding: 0 !important; margin: 0;
    cursor: pointer;
    transition: box-shadow 0.2s var(--ease-out), transform 0.3s var(--ease-spring), color 0.2s var(--ease-out);
    z-index: 5;
}
.sidebar-toggle:hover { box-shadow: var(--shadow); color: var(--amber-3); }
.sidebar.collapsed .sidebar-toggle i { transform: rotate(180deg); }
.sidebar-toggle i { display: inline-block; transition: transform 0.3s var(--ease-spring); }

.profile-card {
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.profile-text { overflow: hidden; white-space: nowrap; }
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #e7c793, #b98a4f);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 13px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.profile-card .pname { font-size: 13px; font-weight: 700; letter-spacing: -0.1px; }
.profile-card .prole { font-size: 11px; color: var(--ink-faint); }
.profile-card .status { font-size: 10px; color: var(--green); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }
.profile-card form { margin-left: auto; }
.profile-card .logout-btn {
    background: none; border: none; color: var(--ink-faint); font-size: 13px; cursor: pointer; padding: 4px;
    transition: color 0.2s var(--ease-out);
}
.profile-card .logout-btn:hover { color: var(--red); }

nav.menu { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 3px; }
.nav-section { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }
.nav-section-label {
    font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--ink-faint); padding: 0 12px 4px 12px; white-space: nowrap;
}
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 14px;
    font-size: 13.5px; color: var(--ink-soft); font-weight: 500;
    cursor: pointer; position: relative;
    text-decoration: none; white-space: nowrap;
    transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.nav-item i { width: 18px; text-align: center; font-size: 14px; color: var(--ink-faint); flex-shrink: 0; transition: color 0.18s var(--ease-out); }
.nav-text { overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: rgba(255,255,255,0.6); color: var(--ink-soft); transform: translateX(2px); }
.nav-item.active {
    background: var(--nav-active-bg);
    color: var(--ink); font-weight: 700;
    box-shadow: 0 3px 10px rgba(200,140,40,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}
.nav-item.active::before {
    content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 20px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--amber-1), var(--amber-2));
}
.nav-item.active i { color: var(--amber-3); }
.nav-item .badge {
    margin-left: auto; font-size: 10.5px; font-weight: 700;
    background: rgba(255,255,255,0.7); color: var(--ink-soft);
    padding: 1px 8px; border-radius: 20px;
}
.nav-item.active .badge { background: rgba(255,255,255,0.85); color: var(--amber-3); }

.help-card {
    margin-top: 12px;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 14px;
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.help-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.help-card .hicon {
    width: 34px; height: 34px; border-radius: 50%;
    background: #fff2df; color: var(--amber-3);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.help-text { overflow: hidden; white-space: nowrap; }
.help-card .htitle { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.help-card .hdesc { font-size: 10.5px; color: var(--ink-faint); line-height: 1.3; }
.help-card i.arrow { margin-left: auto; color: var(--ink-faint); }

/* ---------- Collapsed state: icon-only rail ---------- */
.sidebar.collapsed { width: 84px; padding: 20px 12px; }
.sidebar.collapsed .logo { justify-content: center; padding-right: 0; }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .profile-text,
.sidebar.collapsed .profile-card form,
.sidebar.collapsed .help-text,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-item .badge,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .help-card i.arrow {
    display: none;
}
.sidebar.collapsed .profile-card,
.sidebar.collapsed .help-card { justify-content: center; padding-left: 8px; padding-right: 8px; }
.sidebar.collapsed .nav-item { justify-content: center; padding-left: 10px; padding-right: 10px; }
.sidebar.collapsed .nav-item.active::before { left: -12px; }

@media (max-width: 860px) {
    .sidebar-toggle { display: none; }
    .sidebar.collapsed { width: 100%; padding: 20px 16px; }
    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .profile-text,
    .sidebar.collapsed .profile-card form,
    .sidebar.collapsed .help-text,
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .nav-item .badge,
    .sidebar.collapsed .nav-section-label,
    .sidebar.collapsed .help-card i.arrow {
        display: revert;
    }
    .sidebar.collapsed .logo,
    .sidebar.collapsed .profile-card,
    .sidebar.collapsed .help-card,
    .sidebar.collapsed .nav-item {
        justify-content: flex-start; padding-left: 12px; padding-right: 12px;
    }
}
/* ---------- Main / topbar ---------- */
.main { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.icon-square {
    width: 46px; height: 46px; border-radius: 16px;
    background: var(--card-bg); border: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow); color: var(--ink-soft); flex-shrink: 0;
    text-decoration: none;
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.icon-square:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }

.search {
    position: relative;
    flex: 1; min-width: 160px; height: 46px; border-radius: 16px;
    background: var(--card-bg); border: 1.5px solid var(--input-border);
    box-shadow: var(--shadow), 0 0 0 1px var(--input-edge);
    display: flex; align-items: center; gap: 10px; padding: 0 18px;
    color: var(--ink-faint); font-size: 13.5px;
    transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.search:focus-within { border-color: var(--input-border-focus); box-shadow: var(--shadow-lg), 0 0 0 3px rgba(201,138,52,0.15); }
.search input {
    border: none; background: transparent; outline: none; width: 100%;
    font-size: 13.5px; color: var(--ink);
}
.search i { color: var(--ink-faint); }
.datepill {
    height: 46px; border-radius: 16px; padding: 0 16px;
    background: var(--card-bg); border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    white-space: nowrap; color: var(--ink);
}
.bell-wrap { position: relative; }
.bell-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--amber-2); color: #fff; font-size: 10px; font-weight: 700;
    width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(190,130,30,0.4);
}
.hhs-badge {
    height: 46px; padding: 0 16px; border-radius: 16px;
    background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
    color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; box-shadow: 0 4px 12px rgba(190,130,30,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: var(--shadow);
    transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.welcome { padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; overflow: hidden; transition: box-shadow 0.35s var(--ease-spring); }
.welcome::after { content: ''; position: absolute; inset: 0; background: var(--glass-reflection); pointer-events: none; opacity: 0.7; }
.welcome:hover { box-shadow: var(--shadow-lg); }
.welcome > * { position: relative; z-index: 1; }
.welcome .greet { font-size: 13px; font-weight: 700; color: var(--amber-3); margin-bottom: 4px; letter-spacing: 0.2px; }
.welcome h1 { font-size: 27px; margin: 0 0 6px 0; font-weight: 700; letter-spacing: -0.6px; }
.welcome h1 span { color: var(--amber-3); }
.welcome .meta { font-size: 12.5px; color: var(--ink-faint); }
.welcome .meta b { color: var(--ink); font-weight: 700; }
.welcome .actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

.btn {
    border: none; cursor: pointer; font-weight: 700; font-size: 13px;
    padding: 12px 18px; border-radius: 14px; display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
    color: #fff !important; box-shadow: 0 6px 16px rgba(190,130,30,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(190,130,30,0.4), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-ghost {
    background: var(--card-bg-solid); color: var(--ink) !important; border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { box-shadow: var(--shadow); }

.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

/* ---------- KPI stat card: 4-layer Vision Pro glass ----------
   Layer 1 (.stat itself)   = frosted glass base (blur + translucency)
   Layer 2 (.stat-reflect)  = diagonal light reflection sheen
   Layer 3 (.stat-glow)     = soft colored glow, brightens on hover
   Layer 4 (.stat-content)  = the actual icon/number/label content   */
.stat {
    --stat-color: var(--amber-2);
    position: relative;
    overflow: hidden;
    padding: 0;
    transform: translateY(0) scale(1);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring);
    will-change: transform;
}
.stat-reflect {
    position: absolute; inset: 0;
    background: var(--glass-reflection);
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.35s var(--ease-out);
}
.stat-glow {
    position: absolute;
    width: 140px; height: 140px;
    top: -60px; right: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--stat-color) 70%, transparent) 0%, transparent 72%);
    opacity: var(--glass-glow-opacity);
    filter: blur(2px);
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-spring);
}
.stat-content { position: relative; z-index: 1; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.stat:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.stat:hover .stat-glow { opacity: 0.85; transform: scale(1.15); }
.stat:hover .stat-reflect { opacity: 1; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.stat-label { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.1px; }
.stat-top .trend { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.trend.up { color: var(--green); background: rgba(16,185,129,0.14); }
.trend.down { color: var(--red); background: rgba(239,68,68,0.14); }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 11.5px; color: var(--ink-faint); }
.stat-spark { width: 100%; height: 26px; margin-top: -4px; }

.icon-blue { background: #e7edf6; color: #5c7ba8; }
.icon-green { background: #e2f4e9; color: #10b981; }
.icon-purple { background: #ece6fa; color: #8767d1; }
.icon-orange { background: #fbe7dd; color: #e08b52; }
.icon-teal { background: #dff3ef; color: #3aa798; }
.icon-red { background: #fbe2df; color: #ef4444; }

.mid-row { display: grid; grid-template-columns: 2fr 1.25fr; gap: 16px; align-items: stretch; }
.revenue-card { padding: 22px 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring); }
.revenue-card::before { content: ''; position: absolute; inset: 0; background: var(--glass-reflection); pointer-events: none; opacity: 0.6; z-index: 0; }
.revenue-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.revenue-card > * { position: relative; z-index: 1; }
.rev-head { display: flex; align-items: flex-start; justify-content: space-between; }
.rev-head h3 { margin: 0 0 10px 0; font-size: 15px; font-weight: 700; letter-spacing: -0.1px; }
.rev-value { font-size: 28px; font-weight: 800; margin: 2px 0 2px 0; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.rev-delta { font-size: 12px; color: var(--green); font-weight: 700; margin-bottom: 14px; }
.rev-delta.down { color: var(--red); }
.chart-wrap { flex: 1; min-height: 200px; margin-top: 6px; }
.rev-foot { display: flex; align-items: center; gap: 36px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); flex-wrap: wrap; }
.rev-foot .flabel { font-size: 11px; color: var(--ink-faint); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.4px; }
.rev-foot .fvalue { font-size: 14px; font-weight: 800; }
.rev-foot .achieved { flex: 1; min-width: 160px; }
.rev-foot .achieved .pct { color: var(--amber-3); }
.progress-bar { height: 6px; border-radius: 6px; background: rgba(0,0,0,0.08); margin-top: 6px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--amber-1), var(--amber-2)); transition: width 0.6s var(--ease-spring); position: relative; }
.progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: shimmer 2.4s ease-in-out infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.ai-card { padding: 22px 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring); }
.ai-card::before { content: ''; position: absolute; inset: 0; background: var(--glass-reflection); pointer-events: none; opacity: 0.6; z-index: 0; }
.ai-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ai-card > * { position: relative; z-index: 1; }
.ai-glow {
    position: absolute; top: -40px; right: -50px; width: 180px; height: 180px; border-radius: 50%;
    background: var(--icon-glow);
    pointer-events: none;
    transition: transform 0.5s var(--ease-spring), opacity 0.35s var(--ease-out);
    z-index: 0;
}
.ai-card:hover .ai-glow { transform: scale(1.12); opacity: 0.9; }
.ai-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.ai-head h3 { font-size: 15px; margin: 0; font-weight: 700; letter-spacing: -0.1px; }
.ai-new { font-size: 10px; font-weight: 800; background: linear-gradient(135deg, var(--amber-1), var(--amber-2)); color: #fff; padding: 2px 8px; border-radius: 20px; }
.ai-sub { font-size: 12px; color: var(--ink-faint); margin-bottom: 14px; }
.ai-question {
    background: var(--card-bg-solid); border: 1px solid var(--card-border); border-radius: 14px;
    padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 12px;
}
.ai-item {
    display: flex; gap: 12px; background: var(--card-bg-solid); border: 1px solid var(--card-border);
    border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; align-items: flex-start;
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.ai-item:hover { box-shadow: var(--shadow-sm); transform: translateX(2px); }
.ai-item .aiicon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.ai-item .ait { font-size: 12.5px; font-weight: 700; }
.ai-item .aid { font-size: 11.5px; color: var(--ink-faint); }
.ai-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; flex-wrap: wrap; gap: 8px; }
.ai-updated { font-size: 11px; color: var(--ink-faint); }
.ai-ask {
    font-size: 12px; font-weight: 700; background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
    color: #fff; border: none; padding: 9px 16px; border-radius: 12px; cursor: pointer; text-decoration: none;
    box-shadow: 0 4px 12px rgba(190,130,30,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.ai-ask:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(190,130,30,0.4); }

.bottom-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.panel { padding: 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring); }
.panel::before { content: ''; position: absolute; inset: 0; background: var(--glass-reflection); opacity: 0.5; pointer-events: none; z-index: 0; }
.panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.panel > * { position: relative; z-index: 1; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-head h4 { font-size: 13.5px; margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.1px; }
.count-pill { background: var(--card-bg-solid); border: 1px solid var(--card-border); font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 20px; }
.viewall { font-size: 11px; font-weight: 700; color: var(--amber-3); cursor: pointer; text-decoration: none; transition: color 0.18s var(--ease-out); }
.viewall:hover { color: var(--amber-2); }
.list-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.05); text-decoration: none; color: inherit; transition: transform 0.18s var(--ease-out); }
.list-item:hover { transform: translateX(2px); }
.list-item:last-child { border-bottom: none; }
.li-icon { width: 30px; height: 30px; border-radius: 50%; background: #f2e6d3; color: var(--amber-3); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.li-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.li-sub { font-size: 10.5px; color: var(--ink-faint); }
.li-right { margin-left: auto; font-size: 11px; font-weight: 700; white-space: nowrap; padding-top: 2px; }
.li-right.today { color: var(--red); }
.li-right.plain { color: var(--ink-faint); font-weight: 600; }
.appt-time { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); width: 64px; flex-shrink: 0; }
.upc-date { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); width: 52px; flex-shrink: 0; }
.upc-count { font-size: 12px; color: var(--ink-faint); flex: 1; }
.inv-tag { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-left: auto; white-space: nowrap; }
.inv-tag.low { background: rgba(226,96,79,0.12); color: var(--red); }
.inv-tag.instock { background: rgba(63,166,106,0.12); color: var(--green); }
.inv-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.empty-note { font-size: 12px; color: var(--ink-faint); padding: 8px 0; }

.quick-actions { padding: 16px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qa-label { font-size: 13px; font-weight: 800; margin-right: 6px; letter-spacing: -0.1px; }
.qa-btn {
    background: var(--card-bg-solid); border: 1px solid var(--card-border); border-radius: 14px;
    padding: 10px 16px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
    display: flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    transition: box-shadow 0.25s var(--ease-spring), transform 0.25s var(--ease-spring), color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.qa-btn i { color: var(--amber-3); }
.qa-btn:hover { color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); transform: translateY(-3px) scale(1.03); }

@media (max-width: 1200px) {
    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .mid-row { grid-template-columns: 1fr; }
    .bottom-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; min-height: auto; position: static; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .bottom-row { grid-template-columns: 1fr; }
}

/* =====================================================================
   OTHER PAGES — reskinning Bootstrap components with the same elevated
   material language. These pages keep their Bootstrap grid/markup, but
   every shared component below carries the same depth/glass/typography
   treatment as the dashboard, so the whole app reads as one considered
   product rather than "dashboard mockup + generic admin panel elsewhere."
   ===================================================================== */

.app-content-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: var(--shadow);
    padding: 28px;
}
@media (max-width: 860px) { .app-content-card { border-radius: 18px; padding: 18px; } }

.app-content-card h2, .app-content-card h3, .app-content-card h4, .app-content-card h5 {
    color: var(--ink); font-weight: 700; letter-spacing: -0.3px;
}

.app-content-card .card {
    border-radius: 20px;
    background: var(--card-bg-solid);
    transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.app-content-card .card:hover { box-shadow: var(--shadow-lg); }
.app-content-card .card-body { padding: 1.25rem; }

.app-content-card .btn-primary {
    background: linear-gradient(135deg, var(--amber-1), var(--amber-2));
    border: none; color: #fff; font-weight: 700; border-radius: 13px;
    box-shadow: 0 4px 12px rgba(190,130,30,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.app-content-card .btn-primary:hover, .app-content-card .btn-primary:focus {
    background: linear-gradient(135deg, var(--amber-2), var(--amber-3)); color: #fff;
    box-shadow: 0 8px 20px rgba(190,130,30,0.38), inset 0 1px 0 rgba(255,255,255,0.3);
    transform: translateY(-1px);
}
.app-content-card .btn-outline-primary {
    color: var(--amber-3); border-color: var(--amber-2); font-weight: 600; border-radius: 13px;
    transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out), background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.app-content-card .btn-outline-primary:hover { background: var(--amber-2); border-color: var(--amber-2); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.app-content-card .btn-outline-secondary { color: var(--ink-soft); border-color: var(--ink-faint); font-weight: 600; border-radius: 13px; transition: all 0.2s var(--ease-out); }
.app-content-card .btn-outline-secondary:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: #fff; transform: translateY(-1px); }
.app-content-card .btn-outline-success { color: var(--green); border-color: var(--green); font-weight: 600; border-radius: 13px; transition: all 0.2s var(--ease-out); }
.app-content-card .btn-outline-success:hover { background: var(--green); color: #fff; transform: translateY(-1px); }
.app-content-card .btn-outline-danger { color: var(--red); border-color: var(--red); font-weight: 600; border-radius: 13px; transition: all 0.2s var(--ease-out); }
.app-content-card .btn-outline-danger:hover { background: var(--red); color: #fff; transform: translateY(-1px); }
.app-content-card .btn-sm { border-radius: 11px; }

/* Textboxes — literal black border everywhere, per explicit request.
   Focus state stays true black too (not the brand amber), with the
   amber only showing as a soft outer glow so the input still feels
   "selected" without abandoning the black-border instruction. */
.app-content-card .form-control, .app-content-card .form-select {
    border-radius: 13px; border: 1.5px solid var(--input-border);
    background: rgba(255,255,255,0.65);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--input-edge);
    transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.app-content-card .form-control:focus, .app-content-card .form-select:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px rgba(201,138,52,0.18), var(--shadow-sm), 0 0 0 1px var(--input-edge);
}
.app-content-card .form-control::placeholder { color: var(--ink-faint); }
.app-content-card .form-control:disabled, .app-content-card .form-select:disabled { border-color: rgba(20,16,11,0.35); background: rgba(0,0,0,0.03); }

/* Live-search dropdown — used by every "type to search" input across the app
   (Customers/Leads list quick-search, referral pickers, customer/lead pickers
   on Visit and Invoice forms, and the header's global search). Positioned
   directly below its input, sits above all other page content, and animates
   in with a soft spring rather than snapping into place. */
.live-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    z-index: 60;
    background: #fff;
    border: 1.5px solid var(--input-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--input-edge);
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s var(--ease-spring), transform 0.2s var(--ease-spring);
}
.live-search-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.live-search-dropdown .list-group-item {
    border: none; border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 13.5px; padding: 11px 15px;
    transition: background 0.15s var(--ease-out);
}
.live-search-dropdown .list-group-item:last-child { border-bottom: none; }
.live-search-dropdown .list-group-item:hover { background: rgba(240,195,117,0.15); }
.live-search-dropdown .list-group-item small { display: block; color: var(--ink-soft); font-size: 11.5px; margin-top: 1px; }
.live-search-dropdown .list-group-item .lsd-tag {
    display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
    padding: 1px 7px; border-radius: 20px; margin-left: 8px; vertical-align: middle;
}
.live-search-dropdown .list-group-item .lsd-tag.customer { background: rgba(63,166,106,0.15); color: var(--green); }
.live-search-dropdown .list-group-item .lsd-tag.lead { background: rgba(201,138,52,0.18); color: var(--amber-3); }
.live-search-dropdown:empty { display: none; }

/* Used by the header's global search only — positioned via JS from the
   input's real on-screen bounding box (position: fixed + inline top/left/
   width), rather than trusting position:absolute inside the topbar's flex
   row. This makes it immune to any ancestor flex/overflow/stacking quirk,
   regardless of what the actual cause of a misplacement bug turns out to
   be — it can no longer inherit a wrong containing block at all. */
.live-search-dropdown.fixed-position {
    position: fixed;
    margin-top: 8px;
}

.app-content-card .table { color: var(--ink); }
.app-content-card .table thead.table-light th {
    background: rgba(255,255,255,0.55); color: var(--ink-soft);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
    border-bottom: 1px solid var(--card-border);
}
.app-content-card .table td, .app-content-card .table th { border-color: rgba(0,0,0,0.06); vertical-align: middle; }
.app-content-card .table-hover tbody tr { transition: background 0.15s var(--ease-out); }
.app-content-card .table-hover tbody tr:hover { background: var(--row-hover); }

/* =====================================================================
   MODERN TABLE SYSTEM — floating glass toolbar, sticky header, hover-
   reveal row actions, staggered row-in animation. Opt-in via classes
   (.table-toolbar on the filter <form>, .table-card on the wrapping
   .card, .table-scroll on the .table-responsive) so it layers on top
   of the existing Bootstrap table markup without touching any PHP
   query/filter logic, form field names, or route handling.
   ===================================================================== */

/* Floating toolbar: search stays visible and prominent, filters sit
   beside it, the whole bar stays reachable while a long table scrolls. */
.table-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 12px 14px;
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: var(--shadow-sm);
    position: sticky; top: 8px; z-index: 30;
}
.table-toolbar.row { margin-left: 0; margin-right: 0; }
.table-toolbar > * { position: relative; }
.table-toolbar .search-field { flex: 1 1 240px; min-width: 200px; }
.table-toolbar .search-field i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 12.5px; pointer-events: none; }
.table-toolbar .search-field .form-control { padding-left: 34px; }
.table-toolbar .form-control, .table-toolbar .form-select {
    background: rgba(255,255,255,0.7); border-radius: 12px; border: 1.5px solid var(--input-border);
    box-shadow: 0 0 0 1px var(--input-edge);
}
.table-toolbar .btn { border-radius: 12px; }

/* Card + scroll pane holding the table itself */
.table-card { border-radius: 20px; overflow: hidden; }
.table-scroll { max-height: 68vh; overflow-y: auto; }

/* Sticky header — stays pinned to the top of the scroll pane */
.table-scroll table thead th {
    position: sticky; top: 0; z-index: 5;
    background: rgba(250,247,241,0.97);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.07);
}

/* Row-in animation on first paint, staggered for the first screenful */
.table-scroll tbody tr { animation: rowIn 0.36s var(--ease-out) backwards; }
.table-scroll tbody tr:nth-child(1) { animation-delay: 0ms; }
.table-scroll tbody tr:nth-child(2) { animation-delay: 28ms; }
.table-scroll tbody tr:nth-child(3) { animation-delay: 56ms; }
.table-scroll tbody tr:nth-child(4) { animation-delay: 84ms; }
.table-scroll tbody tr:nth-child(5) { animation-delay: 112ms; }
.table-scroll tbody tr:nth-child(6) { animation-delay: 140ms; }
.table-scroll tbody tr:nth-child(7) { animation-delay: 168ms; }
.table-scroll tbody tr:nth-child(8) { animation-delay: 196ms; }
.table-scroll tbody tr:nth-child(9) { animation-delay: 224ms; }
.table-scroll tbody tr:nth-child(10) { animation-delay: 252ms; }
.table-scroll tbody tr:nth-child(11) { animation-delay: 280ms; }
.table-scroll tbody tr:nth-child(12) { animation-delay: 308ms; }
.table-scroll tbody tr:nth-child(13) { animation-delay: 336ms; }
.table-scroll tbody tr:nth-child(14) { animation-delay: 364ms; }
.table-scroll tbody tr:nth-child(15) { animation-delay: 392ms; }
.table-scroll tbody tr:nth-child(n+16) { animation-delay: 400ms; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .table-scroll tbody tr { animation: none; }
}

/* Hover-reveal row actions — the trailing action cell (Edit/View/etc.)
   sits at reduced opacity at rest and comes fully into view on row
   hover/focus, the modern "actions on demand" list pattern. */
.table-scroll tbody tr td:last-child .btn,
.table-scroll tbody tr td:last-child .dropdown {
    opacity: 0.5;
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.table-scroll tbody tr:hover td:last-child .btn,
.table-scroll tbody tr:hover td:last-child .dropdown,
.table-scroll tbody tr td:last-child .btn:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}
.table-scroll tbody tr:hover { background: var(--row-hover-soft); }

@media (max-width: 860px) {
    .table-toolbar { position: static; }
    .table-scroll { max-height: none; }
}

.app-content-card .badge.bg-success { background: rgba(63,166,106,0.15) !important; color: var(--green) !important; font-weight: 700; }
.app-content-card .badge.bg-danger { background: rgba(226,96,79,0.15) !important; color: var(--red) !important; font-weight: 700; }
.app-content-card .badge.bg-warning { background: rgba(240,195,117,0.25) !important; color: var(--amber-3) !important; font-weight: 700; }
.app-content-card .badge.bg-secondary { background: rgba(124,114,104,0.15) !important; color: var(--ink-soft) !important; font-weight: 700; }
.app-content-card .badge.bg-primary { background: rgba(201,138,52,0.18) !important; color: var(--amber-3) !important; font-weight: 700; }
.app-content-card .badge.bg-info { background: rgba(92,123,168,0.18) !important; color: #5c7ba8 !important; font-weight: 700; }

.app-content-card .alert-info { background: rgba(92,123,168,0.1); border: none; color: var(--ink-soft); border-radius: 16px; }
.app-content-card .alert-secondary { background: rgba(124,114,104,0.1); border: none; color: var(--ink-soft); border-radius: 16px; }
.app-content-card .alert-danger { background: rgba(226,96,79,0.1); border: none; color: #b5402f; border-radius: 16px; }
.app-content-card .alert-success { background: rgba(63,166,106,0.1); border: none; color: #2c7a4b; border-radius: 16px; }

.app-content-card .nav-tabs .nav-link { color: var(--ink-faint); border: none; font-weight: 600; transition: color 0.2s var(--ease-out); }
.app-content-card .nav-tabs .nav-link.active { color: var(--amber-3); background: transparent; border-bottom: 2px solid var(--amber-2); }

.app-content-card .list-group-item { background: transparent; border-color: rgba(0,0,0,0.06); }

.app-content-card .modal-content { border-radius: 22px; border: none; box-shadow: var(--shadow-lg); }

a { color: var(--amber-3); transition: color 0.18s var(--ease-out); }
a:hover { color: var(--amber-2); }

/* =====================================================================
   MICRO-ANIMATIONS — smooth page transitions, button ripple, and a
   reusable skeleton-loader utility. All tasteful/short-duration and
   fully disabled under prefers-reduced-motion. Purely visual — no
   markup dependency beyond the .ripple/.skeleton opt-in classes the
   accompanying JS applies, so nothing here touches PHP/data/routes.
   ===================================================================== */

/* Page transitions: soft arrival on every load, soft exit before an
   internal link navigates away (see main.php's tiny click-intercept). */
.main { animation: pageIn 0.4s var(--ease-out); }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.page-transitioning .main { animation: pageOut 0.14s var(--ease-out) forwards; }
@keyframes pageOut { from { opacity: 1; } to { opacity: 0; } }

/* Button ripple — applied to .btn / .qa-btn / .ai-ask via JS, which
   adds the .ripple class and spawns a short-lived .ripple-effect span
   at the click point. */
.ripple { position: relative; overflow: hidden; }
.ripple-effect {
    position: absolute; border-radius: 50%; transform: scale(0);
    background: rgba(255,255,255,0.55);
    animation: rippleAnim 0.6s var(--ease-out);
    pointer-events: none;
}
.btn-ghost.ripple .ripple-effect,
.qa-btn.ripple .ripple-effect { background: var(--ripple-tint); }
@keyframes rippleAnim { to { transform: scale(2.6); opacity: 0; } }

/* Skeleton loader — generic shimmer placeholder used while async
   content (live-search results, etc.) is in flight. */
.skeleton {
    position: relative; overflow: hidden;
    background: rgba(0,0,0,0.07);
    border-radius: 6px;
}
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: skeletonShimmer 1.3s ease-in-out infinite;
}
@keyframes skeletonShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-row { display: block; height: 12px; border-radius: 6px; }
.skeleton-search-row { display: block; padding: 10px 15px; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .main, body.page-transitioning .main, .ripple-effect, .skeleton::after {
        animation: none !important;
    }
}

/* =====================================================================
   THEME SWITCHER — top-right swatch control for the three theme modes.
   Markup lives in main.php as #theme-switcher; this only styles it and
   defines the open/close motion for its little popover. Selecting a
   swatch sets data-theme on <html>, which is all every rule above needs
   to instantly recolor — no page reload, no per-component JS.
   ===================================================================== */

.theme-switcher { position: relative; }
.theme-switcher-trigger {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    cursor: pointer; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.theme-switcher-trigger:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.theme-switcher-trigger .swatch-dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: conic-gradient(from 210deg, var(--amber-1), var(--amber-3), var(--amber-2), var(--amber-1));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
}
.theme-popover {
    position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
    padding: 10px; display: flex; flex-direction: column; gap: 4px;
    min-width: 190px; z-index: 60;
    opacity: 0; transform: scale(0.95) translateY(-4px);
    pointer-events: none;
    transform-origin: top right;
    transition: opacity 0.22s var(--ease-spring), transform 0.22s var(--ease-spring);
}
.theme-popover.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.theme-option {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 12px; cursor: pointer;
    background: transparent; border: none; width: 100%; text-align: left;
    font-size: 13.5px; font-weight: 600; color: var(--ink);
    transition: background 0.15s var(--ease-out);
}
.theme-option:hover { background: var(--row-hover-soft); }
.theme-option.active { background: var(--nav-active-bg); }
.theme-option .swatch {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.15);
}
.theme-option .swatch.swatch-sand { background: linear-gradient(135deg, #e6c77a, #d4af37); }
.theme-option .swatch.swatch-ocean { background: linear-gradient(135deg, #7dd3e0, #1f8fb8); }
.theme-option .swatch.swatch-rose_gold { background: linear-gradient(135deg, #e8a7a0, #c97b74); }
.theme-option .swatch.swatch-platinum { background: linear-gradient(135deg, #c3c9ce, #6b7680); }
.theme-option .swatch.swatch-midnight { background: linear-gradient(135deg, #3a3a3f, #17181c); }
.theme-option .swatch.swatch-cars { background: linear-gradient(135deg, #FF5A3C, #8C1C13); }
.theme-option .swatch.swatch-potter { background: linear-gradient(135deg, #C9A15A, #5C1F1F); }
.theme-option .swatch.swatch-friends { background: linear-gradient(135deg, #E8A24C, #8B4F1F); }
.theme-option .swatch.swatch-marvel { background: linear-gradient(135deg, #5B8DEF, #8C0F1E); }
.theme-option .swatch.swatch-food { background: linear-gradient(135deg, #FF8A3D, #A83E0A); }
.theme-option .check { margin-left: auto; opacity: 0; font-size: 12px; color: var(--amber-3); }
.theme-option.active .check { opacity: 1; }
.theme-popover-divider { height: 1px; margin: 6px 4px; background: var(--card-border); }
.theme-light-mode-toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 10px; font-size: 13px; color: var(--ink-soft);
    cursor: pointer; border-radius: 8px;
}
.theme-light-mode-toggle:hover { background: var(--row-hover-soft); }
.theme-light-mode-toggle input[type="checkbox"] { accent-color: var(--amber-2); width: 16px; height: 16px; }

/* =====================================================================
   AI CHAT ASSISTANT — floating glass FAB, bottom-right, that opens the
   AI Business Assistant chat panel in place (see assets/css/ai-insights.css
   for the panel itself, and assets/js/ai-insights.js for its behavior).
   Purely additive chrome: it lives once in main.php, floats above every
   authenticated page, and never touches any existing route or data.
   The full /ai-insights dashboard is still reachable from a link inside
   the chat panel's header for anyone who wants the whole cards view.
   ===================================================================== */

.ai-shell-fab {
    position: fixed; right: 26px; bottom: 26px; z-index: 70;
    width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85), var(--card-bg-solid) 60%);
    border: 1px solid var(--card-border);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg), 0 0 0 0 var(--glow-1);
    animation: shellFloat 4.2s ease-in-out infinite, shellGlow 3.2s ease-in-out infinite;
    transition: transform 0.25s var(--ease-spring);
}
.ai-shell-fab:hover { transform: translateY(-4px) scale(1.05); }
.ai-shell-fab svg { width: 28px; height: 28px; }
.ai-shell-fab .shell-swirl { stroke: var(--amber-3); }
.ai-shell-fab .shell-fill { fill: url(#shellGradient); }

@keyframes shellFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@keyframes shellGlow {
    0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 var(--glow-1); }
    50% { box-shadow: var(--shadow-lg), 0 0 22px 6px var(--glow-2); }
}

/* Backdrop behind the open chat panel — click it (or Escape) to close. */
.ai-shell-veil {
    position: fixed; inset: 0; z-index: 65;
    background: var(--card-bg-solid);
    backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s var(--ease-out), backdrop-filter 0.35s var(--ease-out);
}
.ai-shell-veil.active {
    opacity: 1; pointer-events: auto;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
    .ai-shell-fab { animation: none; }
}

@media (max-width: 860px) {
    .ai-shell-fab { right: 16px; bottom: 84px; width: 54px; height: 54px; }
}

/* =====================================================================
   Session timeout warning modal (security upgrade)
   ===================================================================== */
.session-timeout-modal {
    position: fixed; inset: 0; z-index: 10000; display: none;
    align-items: center; justify-content: center;
    background: rgba(20, 16, 11, 0.45); backdrop-filter: blur(3px);
}
.session-timeout-modal.open { display: flex; }
.session-timeout-box {
    width: 380px; max-width: 90vw; padding: 28px 26px; text-align: center; border-radius: 20px;
    background: var(--card-bg-solid); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border); box-shadow: var(--shadow-lg);
}
.session-timeout-icon {
    width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--nav-active-bg); color: var(--amber-3);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.session-timeout-box h5 { margin: 0 0 8px; font-weight: 800; color: var(--ink); }
.session-timeout-box p { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); }
.session-timeout-box #session-timeout-countdown { font-weight: 800; color: var(--red); }
.session-timeout-actions { display: flex; gap: 10px; justify-content: center; }

/* =====================================================================
   Universal table sorting + server-side pagination
   ===================================================================== */
.sort-th {
    color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px;
    white-space: nowrap; cursor: pointer;
}
.sort-th:hover { color: var(--amber-3); }
.sort-arrow { font-size: 9px; color: var(--amber-3); }

.pagination-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 14px 4px 4px; font-size: 12.5px; color: var(--ink-soft);
}
.pagination-info { margin-right: auto; }
.pagination-perpage { display: flex; align-items: center; gap: 6px; }
.pagination-perpage .pp-opt {
    padding: 3px 9px; border-radius: 8px; border: 1px solid var(--card-border);
    color: var(--ink-soft); text-decoration: none; background: rgba(255,255,255,.4);
}
.pagination-perpage .pp-opt.active { background: var(--nav-active-bg); color: var(--amber-3); font-weight: 700; border-color: transparent; }

.pagination-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pagination-nav .page-btn {
    padding: 5px 11px; border-radius: 8px; border: 1px solid var(--card-border);
    color: var(--ink-soft); text-decoration: none; background: rgba(255,255,255,.4);
}
.pagination-nav .page-btn.active { background: var(--nav-active-bg); color: var(--amber-3); font-weight: 700; border-color: transparent; }
.pagination-nav .page-btn.disabled { opacity: .4; pointer-events: none; }
.pagination-nav .page-ellipsis { color: var(--ink-faint); padding: 0 2px; }
.pagination-jump { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.pagination-jump .jump-input {
    width: 56px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--input-border);
    text-align: center; font-size: 12.5px;
}
.pagination-jump button {
    padding: 5px 12px; border-radius: 8px; border: none; background: var(--nav-active-bg);
    color: var(--amber-3); font-weight: 700; cursor: pointer;
}

@media (max-width: 768px) {
    .pagination-bar { flex-direction: column; align-items: flex-start; }
    .pagination-info { margin-right: 0; }
}

/* Rikul icon avatar (sidebar credit card) */
.cc-avatar-img { padding: 0; overflow: hidden; }
.cc-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }