/* ================================================================
   EVO ADMIN PANEL THEME TOKENS — FIXED + SINGLE SOURCE OF TRUTH
   - Fixes: missing --ta-border-sidebar (light), better dark accent tint,
           lighter green accent (closer to evo-green-500),
           derived surfaces prefer *-50/*-100 where possible.
   ================================================================ */

:root {
    --evo-slate-50: #f8fafc;
    --evo-slate-100: #f1f5f9;
    --evo-slate-200: #e2e8f0;
    --evo-slate-300: #cbd5e1;
    --evo-slate-400: #94a3b8;
    --evo-slate-500: #64748b;
    --evo-slate-600: #475569;
    --evo-slate-700: #334155;
    --evo-slate-800: #1e293b;
    --evo-slate-900: #0f172a;
    --evo-slate-950: #020617;

    --evo-gray-50: #f9fafb;
    --evo-gray-100: #f3f4f6;
    --evo-gray-200: #e5e7eb;
    --evo-gray-300: #d1d5db;
    --evo-gray-400: #9ca3af;
    --evo-gray-500: #6b7280;
    --evo-gray-600: #4b5563;
    --evo-gray-700: #374151;
    --evo-gray-800: #1f2937;
    --evo-gray-900: #111827;
    --evo-gray-950: #030712;

    --evo-zinc-50: #fafafa;
    --evo-zinc-100: #f4f4f5;
    --evo-zinc-200: #e4e4e7;
    --evo-zinc-300: #d4d4d8;
    --evo-zinc-400: #a1a1aa;
    --evo-zinc-500: #71717a;
    --evo-zinc-600: #52525b;
    --evo-zinc-700: #3f3f46;
    --evo-zinc-800: #27272a;
    --evo-zinc-900: #18181b;
    --evo-zinc-950: #09090b;

    --evo-neutral-50: #fafafa;
    --evo-neutral-100: #f5f5f5;
    --evo-neutral-200: #e5e5e5;
    --evo-neutral-300: #d4d4d4;
    --evo-neutral-400: #a3a3a3;
    --evo-neutral-500: #737373;
    --evo-neutral-600: #525252;
    --evo-neutral-700: #404040;
    --evo-neutral-800: #262626;
    --evo-neutral-900: #171717;
    --evo-neutral-950: #0a0a0a;

    --evo-stone-50: #fafaf9;
    --evo-stone-100: #f5f5f4;
    --evo-stone-200: #e7e5e4;
    --evo-stone-300: #d6d3d1;
    --evo-stone-400: #a8a29e;
    --evo-stone-500: #78716c;
    --evo-stone-600: #57534e;
    --evo-stone-700: #44403c;
    --evo-stone-800: #292524;
    --evo-stone-900: #1c1917;
    --evo-stone-950: #0c0a09;

    --evo-red-50: #fef2f2;
    --evo-red-100: #fee2e2;
    --evo-red-200: #fecaca;
    --evo-red-300: #fca5a5;
    --evo-red-400: #f87171;
    --evo-red-500: #ef4444;
    --evo-red-600: #dc2626;
    --evo-red-700: #b91c1c;
    --evo-red-800: #991b1b;
    --evo-red-900: #7f1d1d;
    --evo-red-950: #450a0a;

    --evo-orange-50: #fff7ed;
    --evo-orange-100: #ffedd5;
    --evo-orange-200: #fed7aa;
    --evo-orange-300: #fdba74;
    --evo-orange-400: #fb923c;
    --evo-orange-500: #f97316;
    --evo-orange-600: #ea580c;
    --evo-orange-700: #c2410c;
    --evo-orange-800: #9a3412;
    --evo-orange-900: #7c2d12;
    --evo-orange-950: #431407;

    --evo-amber-50: #fffbeb;
    --evo-amber-100: #fef3c7;
    --evo-amber-200: #fde68a;
    --evo-amber-300: #fcd34d;
    --evo-amber-400: #fbbf24;
    --evo-amber-500: #f59e0b;
    --evo-amber-600: #d97706;
    --evo-amber-700: #b45309;
    --evo-amber-800: #92400e;
    --evo-amber-900: #78350f;
    --evo-amber-950: #451a03;

    --evo-yellow-50: #fefce8;
    --evo-yellow-100: #fef9c3;
    --evo-yellow-200: #fef08a;
    --evo-yellow-300: #fde047;
    --evo-yellow-400: #facc15;
    --evo-yellow-500: #eab308;
    --evo-yellow-600: #ca8a04;
    --evo-yellow-700: #a16207;
    --evo-yellow-800: #854d0e;
    --evo-yellow-900: #713f12;
    --evo-yellow-950: #422006;

    --evo-lime-50: #f7fee7;
    --evo-lime-100: #ecfccb;
    --evo-lime-200: #d9f99d;
    --evo-lime-300: #bef264;
    --evo-lime-400: #a3e635;
    --evo-lime-500: #84cc16;
    --evo-lime-600: #65a30d;
    --evo-lime-700: #4d7c0f;
    --evo-lime-800: #3f6212;
    --evo-lime-900: #365314;
    --evo-lime-950: #1a2e05;

    --evo-green-50: #f0fdf4;
    --evo-green-100: #dcfce7;
    --evo-green-200: #bbf7d0;
    --evo-green-300: #86efac;
    --evo-green-400: #4ade80;
    --evo-green-500: #22c55e;
    --evo-green-600: #16a34a;
    --evo-green-700: #15803d;
    --evo-green-800: #166534;
    --evo-green-900: #14532d;
    --evo-green-950: #052e16;

    --evo-emerald-50: #ecfdf5;
    --evo-emerald-100: #d1fae5;
    --evo-emerald-200: #a7f3d0;
    --evo-emerald-300: #6ee7b7;
    --evo-emerald-400: #34d399;
    --evo-emerald-500: #10b981;
    --evo-emerald-600: #059669;
    --evo-emerald-700: #047857;
    --evo-emerald-800: #065f46;
    --evo-emerald-900: #064e3b;
    --evo-emerald-950: #022c22;

    --evo-teal-50: #f0fdfa;
    --evo-teal-100: #ccfbf1;
    --evo-teal-200: #99f6e4;
    --evo-teal-300: #5eead4;
    --evo-teal-400: #2dd4bf;
    --evo-teal-500: #14b8a6;
    --evo-teal-600: #0d9488;
    --evo-teal-700: #0f766e;
    --evo-teal-800: #115e59;
    --evo-teal-900: #134e4a;
    --evo-teal-950: #042f2e;

    --evo-cyan-50: #ecfeff;
    --evo-cyan-100: #cffafe;
    --evo-cyan-200: #a5f3fc;
    --evo-cyan-300: #67e8f9;
    --evo-cyan-400: #22d3ee;
    --evo-cyan-500: #06b6d4;
    --evo-cyan-600: #0891b2;
    --evo-cyan-700: #0e7490;
    --evo-cyan-800: #155e75;
    --evo-cyan-900: #164e63;
    --evo-cyan-950: #083344;

    --evo-sky-50: #f0f9ff;
    --evo-sky-100: #e0f2fe;
    --evo-sky-200: #bae6fd;
    --evo-sky-300: #7dd3fc;
    --evo-sky-400: #38bdf8;
    --evo-sky-500: #0ea5e9;
    --evo-sky-600: #0284c7;
    --evo-sky-700: #0369a1;
    --evo-sky-800: #075985;
    --evo-sky-900: #0c4a6e;
    --evo-sky-950: #082f49;

    --evo-blue-50: #eff6ff;
    --evo-blue-100: #dbeafe;
    --evo-blue-200: #bfdbfe;
    --evo-blue-300: #93c5fd;
    --evo-blue-400: #60a5fa;
    --evo-blue-500: #3b82f6;
    --evo-blue-600: #2563eb;
    --evo-blue-700: #1d4ed8;
    --evo-blue-800: #1e40af;
    --evo-blue-900: #1e3a8a;
    --evo-blue-950: #172554;

    --evo-indigo-50: #eef2ff;
    --evo-indigo-100: #e0e7ff;
    --evo-indigo-200: #c7d2fe;
    --evo-indigo-300: #a5b4fc;
    --evo-indigo-400: #818cf8;
    --evo-indigo-500: #6366f1;
    --evo-indigo-600: #4f46e5;
    --evo-indigo-700: #4338ca;
    --evo-indigo-800: #3730a3;
    --evo-indigo-900: #312e81;
    --evo-indigo-950: #1e1b4b;

    --evo-violet-50: #f5f3ff;
    --evo-violet-100: #ede9fe;
    --evo-violet-200: #ddd6fe;
    --evo-violet-300: #c4b5fd;
    --evo-violet-400: #a78bfa;
    --evo-violet-500: #8b5cf6;
    --evo-violet-600: #7c3aed;
    --evo-violet-700: #6d28d9;
    --evo-violet-800: #5b21b6;
    --evo-violet-900: #4c1d95;
    --evo-violet-950: #2e1065;

    --evo-purple-50: #faf5ff;
    --evo-purple-100: #f3e8ff;
    --evo-purple-200: #e9d5ff;
    --evo-purple-300: #d8b4fe;
    --evo-purple-400: #c084fc;
    --evo-purple-500: #a855f7;
    --evo-purple-600: #9333ea;
    --evo-purple-700: #7e22ce;
    --evo-purple-800: #6b21a8;
    --evo-purple-900: #581c87;
    --evo-purple-950: #3b0764;

    --evo-fuchsia-50: #fdf4ff;
    --evo-fuchsia-100: #fae8ff;
    --evo-fuchsia-200: #f5d0fe;
    --evo-fuchsia-300: #f0abfc;
    --evo-fuchsia-400: #e879f9;
    --evo-fuchsia-500: #d946ef;
    --evo-fuchsia-600: #c026d3;
    --evo-fuchsia-700: #a21caf;
    --evo-fuchsia-800: #86198f;
    --evo-fuchsia-900: #701a75;
    --evo-fuchsia-950: #4a044e;

    --evo-pink-50: #fdf2f8;
    --evo-pink-100: #fce7f3;
    --evo-pink-200: #fbcfe8;
    --evo-pink-300: #f9a8d4;
    --evo-pink-400: #f472b6;
    --evo-pink-500: #ec4899;
    --evo-pink-600: #db2777;
    --evo-pink-700: #be185d;
    --evo-pink-800: #9d174d;
    --evo-pink-900: #831843;
    --evo-pink-950: #500724;

    --evo-rose-50: #fff1f2;
    --evo-rose-100: #ffe4e6;
    --evo-rose-200: #fecdd3;
    --evo-rose-300: #fda4af;
    --evo-rose-400: #fb7185;
    --evo-rose-500: #f43f5e;
    --evo-rose-600: #e11d48;
    --evo-rose-700: #be123c;
    --evo-rose-800: #9f1239;
    --evo-rose-900: #881337;
    --evo-rose-950: #4c0519;

    --evo-deeppurple-50: #ede7f6;
    --evo-deeppurple-100: #d1c4e9;
    --evo-deeppurple-200: #b39ddb;
    --evo-deeppurple-300: #9575cd;
    --evo-deeppurple-400: #7e57c2;
    --evo-deeppurple-500: #673ab7;
    --evo-deeppurple-600: #5e35b1;
    --evo-deeppurple-700: #512da8;
    --evo-deeppurple-800: #4527a0;
    --evo-deeppurple-900: #311b92;

    --evo-lightblue-50: #e1f5fe;
    --evo-lightblue-100: #b3e5fc;
    --evo-lightblue-200: #81d4fa;
    --evo-lightblue-300: #4fc3f7;
    --evo-lightblue-400: #29b6f6;
    --evo-lightblue-500: #03a9f4;
    --evo-lightblue-600: #039be5;
    --evo-lightblue-700: #0288d1;
    --evo-lightblue-800: #0277bd;
    --evo-lightblue-900: #01579b;

    --evo-lightgreen-50: #f1f8e9;
    --evo-lightgreen-100: #dcedc8;
    --evo-lightgreen-200: #c5e1a5;
    --evo-lightgreen-300: #aed581;
    --evo-lightgreen-400: #9ccc65;
    --evo-lightgreen-500: #8bc34a;
    --evo-lightgreen-600: #7cb342;
    --evo-lightgreen-700: #689f38;
    --evo-lightgreen-800: #558b2f;
    --evo-lightgreen-900: #33691e;

    --evo-deeporange-50: #fbe9e7;
    --evo-deeporange-100: #ffccbc;
    --evo-deeporange-200: #ffab91;
    --evo-deeporange-300: #ff8a65;
    --evo-deeporange-400: #ff7043;
    --evo-deeporange-500: #ff5722;
    --evo-deeporange-600: #f4511e;
    --evo-deeporange-700: #e64a19;
    --evo-deeporange-800: #d84315;
    --evo-deeporange-900: #bf360c;

    --evo-bluegray-50: #eceff1;
    --evo-bluegray-100: #cfd8dc;
    --evo-bluegray-200: #b0bec5;
    --evo-bluegray-300: #90a4ae;
    --evo-bluegray-400: #78909c;
    --evo-bluegray-500: #607d8b;
    --evo-bluegray-600: #546e7a;
    --evo-bluegray-700: #455a64;
    --evo-bluegray-800: #37474f;
    --evo-bluegray-900: #263238;

    /* keep these legacy colors (don’t remove) */
    --blue: #0149b4;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #fde047;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;

    --white: #fff;
    --white-rgb: 255, 255, 255;
    --black: #000;
    --black-rgb: 0, 0, 0;

    --gray: #9ca3af;
    --gray-dark: #343a40;
    --gray-100: #f8fafc;
    --gray-200: #e9ecef;
    --gray-300: #d1d5db;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #9ca3af;
    --gray-700: #495057;
    --gray-800: var(--gray-dark);
    --gray-900: #292929;

    --brown: #a52a2a;
    --brown-400: #cf4444;
    --brown-600: #6f1c1c;

    --chocolate: #d2691e;
    --chocolate-400: #e68d4e;
    --chocolate-600: #974b16;

    --crimson: #dc143c;
    --crimson-400: #ee4668;
    --crimson-600: #9e0e2b;

    --darkblue: #00008b;
    --darkblue-400: #0000cf;
    --darkblue-600: #000047;

    --darkred: #8b0000;
    --darkred-400: #cf0000;
    --darkred-600: #470000;

    --darkslategray: #2f4f4f;
    --darkslategray-400: #487a7a;
    --darkslategray-600: #162424;

    --firebrick: #b22222;
    --firebrick-400: #da3e3e;
    --firebrick-600: #791717;

    --ghostwhite: #f8f8ff;
    --ghostwhite-dark: #e7e7ff;

    --gold: #ffd700;
    --gold-400: #ffe244;
    --gold-600: #bb9e00;
    --gold-dark: #665600;

    --maroon: #800000;
    --maroon-400: #c40000;
    --maroon-600: #3c0000;

    --midnightblue: #191970;
    --midnightblue-400: #2525a8;
    --midnightblue-600: #101046;

    --navy: #000080;
    --navy-300: #00004c;
    --navy-400: #00003b;
    --navy-600: #000019;

    --orangered: #ff4500;
    --orangered-400: #dc6034;
    --orangered-500: #d6460e;
    --orangered-600: #cd410b;

    --rebeccapurple: #663399;
    --rebeccapurple-400: #9a52a2;
    --rebeccapurple-600: #7d368c;

    --royalblue: #4169e1;
    --royalblue-400: #546ed0;
    --royalblue-600: #284bbd;

    --silver: #c0c0c0;
    --silver-100: #f2f2f2;
    --silver-400: #e2e2e2;
    --silver-600: #6e6e6e;
    --silver-700: #5a5a5a;
    --silver-900: #1b1b1b;

    --slategray: #708090;
    --slategray-400: #7b8794;
    --slategray-500: #637383;
    --slategray-600: #576572;
    --slategray-700: #47525c;
    --slategray-800: #383f47;
    --slategray-900: #262b30;

    --snow: #fffafa;

    --whitesmoke: #f5f5f5;
    --whitesmoke-100: #f6f6f6;
    --whitesmoke-400: #c2c2c2;
    --whitesmoke-600: #7a7a7a;

    --darkgreen: #008b00;
    --darkgreen-400: #00cf00;
    --darkgreen-600: #004700;

    --chlorophyll: #008000;
    --chlorophyll-400: #003b00;
    --chlorophyll-600: #001900;

    /* ===================================================================
       2) ACCENT + PRIMARY (single definition, reusable everywhere)
       - Lighter green accent (near evo-green-500: #22c55e)
       =================================================================== */
    --evo-accent-h: 142;
    --evo-accent-s: 71%;
    --evo-accent-l: 45%;

    --evo-accent: hsl(var(--evo-accent-h) var(--evo-accent-s) var(--evo-accent-l));
    --ta-primary: var(--evo-accent);

    /* IMPORTANT: primary RGB must match the same accent (GREEN) */
    --ta-primary-rgb: 34 197 94; /* evo-green-500 */

    /* Soft accent surfaces derived from same accent */
    --evo-accent-soft: hsl(var(--evo-accent-h) var(--evo-accent-s) 92%);
    --evo-accent-soft-strong: rgb(var(--ta-primary-rgb) / 0.16);

    --ta-primary-soft: var(--evo-accent-soft);
    --ta-primary-soft-deep: var(--evo-accent-soft-strong);

    /* ===================================================================
       3) BASE THEME TOKENS (LIGHT) — PALETTE-BASED
       =================================================================== */
    --ta-text-main: var(--evo-zinc-900);
    --ta-text-muted: var(--evo-zinc-500);

    /* --------------------------------------------------------------
       LIGHT CANVAS/SURFACES — derived from accent hue
       -------------------------------------------------------------- */
    --ta-border-soft: color-mix(in srgb, var(--evo-accent) 6%, var(--evo-zinc-300));

    /* FIX: define sidebar border token for light mode (was missing) */
    --ta-border-sidebar: color-mix(in srgb, var(--evo-accent) 4%, var(--evo-zinc-300));

    /* Body canvas gets the subtle "Evo Tools" green feel */
    --ta-bg: color-mix(in srgb, var(--evo-accent-soft) 22%, #ffffff);
    --ta-bg-body: var(--ta-bg);

    /* Sidebar/header slightly cleaner than body (still tinted) */
    --ta-bg-sidebar: color-mix(in srgb, var(--evo-accent-soft) 14%, #ffffff);
    --ta-bg-header: var(--ta-bg-sidebar);

    /* Cards stay white (clean) */
    --ta-bg-surface: #ffffff;

    /* Section blocks / soft cards (mint panels) */
    --ta-bg-surface-2: color-mix(in srgb, var(--evo-accent-soft) 38%, #ffffff);

    /* Row hover follows same tint direction */
    --ta-row-hover: color-mix(in srgb, var(--evo-accent-soft) 32%, #ffffff);

    /* Form surfaces */
    --ta-surface-main: var(--ta-bg-surface);
    --ta-surface-soft: var(--ta-bg-surface-2);

    --empty-card-bg: var(--evo-neutral-50);
    --empty-card-border: var(--evo-neutral-200);
    --empty-card-text: var(--evo-zinc-700);

    /* ===================================================================
       4) LAYOUT TOKENS
       =================================================================== */
    --header-h: 4.5rem;
    --breadcrumbs-h: 1rem;

    --ta-radius: 10px;

    /* Missing refs (used later) */
    --ta-text-primary: var(--ta-text-main);
    --ta-text-strong: var(--ta-text-main);

    /* Overlay */
    --ta-surface-overlay: rgba(0, 0, 0, 0.45);

    /* Shadows */
    --ta-shadow-soft: 0 22px 45px rgba(15, 23, 42, 0.06);
    --ta-shadow-nav: 0 12px 30px rgba(15, 23, 42, 0.03);
    --ta-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Hover bg token (pagination) */
    --ta-bg-hover: color-mix(in srgb, var(--evo-zinc-400) 18%, transparent);

    /* Pills / status */
    --ta-pill-new-bg: var(--evo-green-100);
    --ta-pill-new-text: var(--evo-green-600);

    --ta-dot-success: var(--evo-green-500);
    --ta-dot-danger: var(--evo-red-500);

    /* Dark-mode “*dark” alias tokens (defined here so refs always exist) */
    --ta-surface-soft-dark: rgba(255, 255, 255, 0.06);
    --ta-border-soft-dark: rgba(255, 255, 255, 0.12);
    --ta-text-main-dark: var(--evo-neutral-100);

    /* Optional token for disabled option color (so you can theme it cleanly) */
    --ta-option-disabled: rgba(0, 0, 0, 0.45);

    /* Card tokens (light) */
    --ta-card-bg: var(--ta-bg-surface);
    --ta-card-border: var(--ta-border-soft);
    --ta-card-shadow: var(--ta-shadow);

    --ta-primary-ring: color-mix(in srgb, var(--ta-primary) 22%, transparent);
    --ta-primary-bg-12: color-mix(in srgb, var(--ta-primary) 12%, transparent);
    --ta-primary-bg-15: color-mix(in srgb, var(--ta-primary) 15%, transparent);
    --ta-primary-bg-18: color-mix(in srgb, var(--ta-primary) 18%, transparent);

    color-scheme: light dark;
}

/* ===================================================================
   DARK MODE OVERRIDES
   - Adds subtle accent tint to canvas/surfaces (not pure neutral)
   =================================================================== */
html[data-theme="dark"] {
    /* Primary stays same (lighter green) */
    --ta-primary: var(--evo-accent);
    --ta-primary-rgb: 34 197 94;

    /* Dark soft accents */
    --evo-accent-soft: hsl(var(--evo-accent-h) var(--evo-accent-s) 18%);
    --evo-accent-soft-strong: rgb(var(--ta-primary-rgb) / 0.20);

    --ta-primary-soft: var(--evo-accent-soft);
    --ta-primary-soft-deep: var(--evo-accent-soft-strong);

    /* Accent-tinted dark canvas/surfaces (subtle) */
    --ta-bg: color-mix(in srgb, var(--evo-neutral-950) 96%, var(--evo-accent-soft) 4%);
    --ta-bg-body: var(--ta-bg);

    --ta-bg-sidebar: color-mix(in srgb, var(--evo-neutral-950) 95%, var(--evo-accent-soft) 5%);
    --ta-bg-header: color-mix(in srgb, var(--evo-neutral-900) 95%, var(--evo-accent-soft) 5%);

    --ta-bg-surface: color-mix(in srgb, var(--evo-neutral-900) 96%, var(--evo-accent-soft) 4%);
    --ta-bg-surface-2: color-mix(in srgb, var(--evo-neutral-900) 92%, var(--evo-accent-soft) 8%);

    --ta-row-hover: color-mix(in srgb, var(--evo-neutral-800) 93%, var(--evo-accent-soft) 7%);

    /* Text */
    --ta-text-main: var(--evo-neutral-100);
    --ta-text-muted: var(--evo-neutral-400);

    --ta-text-primary: var(--ta-text-main);
    --ta-text-strong: var(--ta-text-main);

    /* Surfaces for forms/modals in dark */
    --ta-surface-main: var(--ta-bg-surface);
    --ta-surface-soft: rgba(255, 255, 255, 0.06);
    --ta-surface-overlay: rgba(0, 0, 0, 0.55);

    /* Borders (with slight accent tint) */
    --ta-border-soft: color-mix(in srgb, rgba(255, 255, 255, 0.12) 82%, rgb(var(--ta-primary-rgb) / 0.22) 18%);
    --ta-border-sidebar: color-mix(in srgb, rgba(255, 255, 255, 0.12) 82%, rgb(var(--ta-primary-rgb) / 0.22) 18%);

    /* Hover */
    --ta-bg-hover: rgba(255, 255, 255, 0.06);

    /* Shadows */
    --ta-shadow-soft: 0 22px 45px rgba(0, 0, 0, 0.75);
    --ta-shadow-nav: 0 12px 30px rgba(0, 0, 0, 0.85);
    --ta-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);

    /* Empty state */
    --empty-card-bg: var(--ta-bg-surface);
    --empty-card-border: color-mix(in srgb, var(--evo-neutral-800) 92%, var(--evo-accent-soft) 8%);
    --empty-card-text: var(--evo-neutral-300);

    /* Keep alias tokens aligned */
    --ta-surface-soft-dark: rgba(255, 255, 255, 0.06);
    --ta-border-soft-dark: rgba(255, 255, 255, 0.12);
    --ta-text-main-dark: var(--evo-neutral-100);

    /* Optional token for disabled option color in dark */
    --ta-option-disabled: rgba(255, 255, 255, 0.60);

    /* Stronger border in dark mode */
    --ta-card-bg: var(--ta-bg-surface);
    --ta-card-border: rgb(255 255 255 / 0.18);
    --ta-card-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);

    --ta-primary-ring: color-mix(in srgb, var(--ta-primary) 22%, transparent);
    --ta-primary-bg-12: color-mix(in srgb, var(--ta-primary) 12%, transparent);
    --ta-primary-bg-15: color-mix(in srgb, var(--ta-primary) 15%, transparent);
    --ta-primary-bg-18: color-mix(in srgb, var(--ta-primary) 18%, transparent);
}

/* =========================
   DARK MODE — TABLE FIX
   ========================= */

/* If your app uses: <html data-theme="dark"> ... */
html[data-theme="dark"] {
    /* Core surfaces */
    --ta-bg: #0b0f0d;
    --ta-bg-card: #0f1411;
    --ta-bg-card-2: #121815;

    /* Text */
    --ta-text: #e8efe9;
    --ta-text-muted: #a9b7ad;

    /* Borders */
    --ta-border: rgba(255, 255, 255, 0.10);
    --ta-border-soft: rgba(255, 255, 255, 0.08);

    /* Table */
    --ta-table-head-bg: #0f1411;
    --ta-table-row-bg: #0f1411;
    --ta-table-row-hover: #141c17;
    --ta-table-divider: rgba(255, 255, 255, 0.08);

    /* Links/icons */
    --ta-icon: #cfe0d4;
    --ta-icon-muted: rgba(207, 224, 212, 0.55);
}

/* Table wrapper surface */
html[data-theme="dark"] .ta-table-wrapper {
    background: var(--ta-bg-card);
    border: 1px solid var(--ta-border-soft);
}

/* Header row */
html[data-theme="dark"] .ta-table thead th {
    background: var(--ta-table-head-bg);
    color: var(--ta-text-muted);
    border-bottom: 1px solid var(--ta-table-divider);
}

/* Body cells */
html[data-theme="dark"] .ta-table tbody td {
    background: var(--ta-table-row-bg);
    color: var(--ta-text);
    border-bottom: 1px solid var(--ta-table-divider);
}

/* Row hover */
html[data-theme="dark"] .ta-table tbody tr:hover td {
    background: var(--ta-table-row-hover);
}

/* Make emails/usernames readable (your screenshot shows they’re too faint) */
html[data-theme="dark"] .ta-table a,
html[data-theme="dark"] .ta-table .ta-link {
    color: var(--ta-text);
}

/* Action icons (if they’re SVG/font icons) */
html[data-theme="dark"] .ta-actions,
html[data-theme="dark"] .ta-actions svg,
html[data-theme="dark"] .ta-actions i {
    color: var(--ta-icon);
    fill: currentColor;
}

/* =========================================================
   TABLE SCROLLBAR — make it match the main UI
   Targets: the inner table scroller only
========================================================= */

/* Firefox */
.ta-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.55) transparent; /* thumb, track */
}

/* Chrome / Edge / Safari */
.ta-table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.ta-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ta-table-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.55);
    border-radius: 999px;
    border: 3px solid transparent; /* makes it look “padded” */
    background-clip: content-box;
}

.ta-table-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.75);
}

.ta-table-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

/* =========================
   Fix: card outlines blending with body background
   ========================= */

/* Apply to your cards (add selectors you actually use) */
.card,
.ta-card,
.tool-card,
[data-card] {
    background: var(--ta-card-bg);
    border: 1px solid var(--ta-card-border);
    box-shadow: var(--ta-card-shadow);
}

/* ================================================================
   2. GLOBAL LAYOUT BASICS
   ================================================================ */
html,
body {
    height: 100%;
    background: var(--ta-bg) !important;
    color: var(--ta-text-main) !important;
}

body {
    font-family: theme('fontFamily.sans'), serif;
    background-color: var(--ta-bg-body);
    color: var(--ta-text-main);
    -webkit-font-smoothing: antialiased;
    overflow: hidden; /* lock page scroll; inner cards handle scroll */
}

/* Global wrapper */
.app-shell {
    height: 100dvh;
    overflow: hidden;
    background-color: var(--ta-bg-body);
}

/* Main content area (between sidebar and navbar) */
.main-content {
    min-width: 0;
}

/* Main scroll region under navbar */
.main-scroll {
    height: calc(100dvh - var(--header-h));
    overflow-y: hidden; /* Prevent page scrolling */
    overflow-x: hidden;
    background-color: var(--ta-bg-body);
}

/* Root where module injects content */
/* Root where module injects content */
#appMainContent {
    height: 100%;
    min-height: 0; /* IMPORTANT for nested scrolling */
    overflow: hidden !important; /* stop page scroll */
    display: flex;
    flex-direction: column;
}

[id$="ModuleRoot"], .evo-module-root {
    height: 100%;
    min-height: 0; /* IMPORTANT for nested scrolling */
    overflow: hidden !important; /* stop page scroll */
    display: flex;
    flex-direction: column;
}

/* ================================================================
   3. SIDEBAR — Desktop + Mobile + Collapsed
   ================================================================ */
.sidebar {
    background-color: var(--ta-bg-sidebar);
    border-right: 1px solid var(--ta-border-sidebar);
    width: 18rem;
    transition: width 0.25s ease, transform 0.25s ease;
    position: relative;
    z-index: 40;
}

/* Collapsed mode (desktop) */
.sidebar[data-collapsed="true"] {
    width: 4.5rem;
}

/* Logo row */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Logo container */
.sidebar-logo-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}

/* Logo IMG */
.evo-logo-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* LOGO THEME SWITCHING */
.evo-logo-icon-light,
.evo-logo-text-light {
    display: block;
}

.evo-logo-icon-dark,
.evo-logo-text-dark {
    display: none;
}

html[data-theme="dark"] .evo-logo-icon-light,
html[data-theme="dark"] .evo-logo-text-light {
    display: none;
}

html[data-theme="dark"] .evo-logo-icon-dark,
html[data-theme="dark"] .evo-logo-text-dark {
    display: block;
}

/* Scaling protection */
.sidebar-logo-icon img {
    max-height: 42px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-logo-text img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Fade labels when collapsed */
.sidebar-logo-text,
.sidebar-section-label,
.sidebar-item-label,
.sidebar-bottom-card {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sidebar[data-collapsed="true"] .sidebar-logo-text,
.sidebar[data-collapsed="true"] .sidebar-section-label,
.sidebar[data-collapsed="true"] .sidebar-item-label,
.sidebar[data-collapsed="true"] .sidebar-bottom-card {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
}

/* Center logo icon when collapsed */
.sidebar[data-collapsed="true"] .sidebar-logo {
    justify-content: center;
}

/* Mobile Sidebar (off-canvas) */
@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        transform: translateX(-100%);
    }

    .sidebar[data-open="true"] {
        transform: translateX(0);
    }
}

/* Desktop sidebar always visible */
@media (min-width: 1024px) {
    .sidebar {
        transform: translateX(0) !important;
    }
}

/* Sidebar scrolling */
.sidebar-scroll {
    overflow-y: auto;
    padding-right: 0.15rem;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.5);
    border-radius: 999px;
}

/* Sidebar items */
.sidebar-item {
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.sidebar-item:hover {
    background: rgba(148, 163, 184, 0.18);
}

.sidebar-item-active {
    background: var(--ta-primary-soft);
    color: var(--ta-primary);
}

/* Mobile overlay for off-canvas sidebar */
.mobile-overlay {
    /*background: rgb(var(--ta-primary-rgb) / 0.1);*/
}

@media (min-width: 1024px) {
    .mobile-overlay {
        display: none;
    }
}

.sidebar-submenu {
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

.sidebar-submenu.hidden {
    display: none;
}

.sidebar-item[data-sidebar-toggle] {
    cursor: pointer;
}

/* -----------------------------------------
   Sidebar Submenu Animation
------------------------------------------ */

.sidebar-submenu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 180ms ease,
    transform 180ms ease;
}

.sidebar-submenu[data-open="true"] {
    max-height: 400px; /* safe large value */
    opacity: 1;
    transform: translateY(0);
}

/* Rotate arrow when open */
.sidebar-item[data-open="true"] [data-accordion-arrow] {
    transform: rotate(180deg);
}

/* ================================================================
   4. ICONS & ACTIONS
   ================================================================ */
.evo-icon-btn {
    color: var(--ta-text-main);
    transition: color 0.18s ease;
}

.evo-icon-btn:hover {
    color: var(--ta-primary);
}

.evo-action-icon {
    color: var(--ta-text-muted);
    opacity: 0.85;
    transition: opacity 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-theme="dark"] .evo-action-icon {
    color: var(--ta-text-main);
    opacity: 0.8;
}

.evo-action-icon:hover {
    opacity: 1;
    color: var(--evo-accent);
}

/* Profile icon should NEVER turn blue on hover */
.evo-profile-icon {
    color: var(--ta-text-muted);
}

.evo-profile-icon:hover {
    /*color: var(--ta-text-muted) !important; !* force no-blue *!*/
    opacity: 1; /* optional: remove fade effect */
    color: var(--ta-text-main); /* subtle highlight */
}

/* Context colours */
.evo-action-warn {
    color: #b45309;
}

html[data-theme="dark"] .evo-action-warn {
    color: #fbbf24;
}

.evo-action-success {
    color: #059669;
}

html[data-theme="dark"] .evo-action-success {
    color: #34d399;
}

.evo-action-danger {
    color: #dc2626;
}

html[data-theme="dark"] .evo-action-danger {
    color: #f87171;
}

/* INFO action icon */
.evo-action-info {
    color: #0ea5e9; /* sky-500 */
}

html[data-theme="dark"] .evo-action-info {
    color: #38bdf8; /* sky-400 (brighter for dark bg) */
}

/* Hover effect */
.evo-action-info:hover {
    opacity: 1;
    color: #0284c7; /* sky-600 */
}

/* Dark mode hover */
html[data-theme="dark"] .evo-action-info:hover {
    color: #7dd3fc; /* sky-300 */
}

.evo-action-icon svg,
.evo-icon-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 1.6;
    display: block;
}

/* Disabled state */
.evo-action-icon.disabled,
.evo-icon-btn.disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
}

html[data-theme="dark"] .evo-action-icon.disabled,
html[data-theme="dark"] .evo-icon-btn.disabled {
    opacity: 0.25 !important;
}

/* Ensure hidden attribute works for SVG icons inside buttons */
.evo-action-icon svg[hidden],
.evo-icon-btn svg[hidden] {
    display: none !important;
}

/* ================================================================
   5. TOP NAVBAR
   ================================================================ */
.top-nav {
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    box-shadow: var(--ta-shadow-nav);
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.7)
    );
}

html[data-theme="dark"] .top-nav {
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.96),
            rgba(0, 0, 0, 0.92)
    );
}

/* Make all navbar action buttons theme-aware */
.navbar-icon-btn {
    background-color: var(--ta-bg-surface);
    border: 1px solid var(--ta-border-soft);
    color: var(--ta-text-muted);
}

.navbar-icon-btn:hover {
    background-color: rgba(148, 163, 184, 0.12);
}

/* Dark mode icons fix */
html[data-theme="dark"] .navbar-icon-btn {
    background-color: var(--ta-bg-header);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ta-text-main);
}

html[data-theme="dark"] .navbar-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.top-nav-search {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

html[data-theme="dark"] .top-nav-search {
    background-color: rgba(10, 10, 10, 0.96);
    box-shadow: inset 0 0 0 1px rgba(75, 85, 99, 0.9);
}

.navbar-icon-btn svg {
    stroke: currentColor;
    color: inherit;
}

/* ========================================
   NOTIFICATION DROPDOWN — MOBILE FIX
   ======================================== */
/* Desktop button – theme aware */
#notificationPanel .notification-scroll + div button {
    background: var(--ta-bg-surface) !important;
    color: var(--ta-text-main) !important;
    border-color: var(--ta-border-soft) !important;
}

/* Hover state */
#notificationPanel .notification-scroll + div button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Dark mode override */
html[data-theme="dark"] #notificationPanel .notification-scroll + div button {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--ta-text-main) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] #notificationPanel .notification-scroll + div button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 640px) {
    #notificationPanel {
        position: fixed !important;
        top: calc(var(--header-h) + 0.5rem) !important;
        right: 0.75rem !important;
        left: 0.75rem !important;

        width: auto !important;
        max-width: none !important;

        border-radius: 1rem;
        z-index: 99999; /* above everything */
        transform: none !important;
    }

    #notificationPanel .notification-scroll {
        max-height: 60vh !important; /* allow scrolling */
        overflow-y: auto !important;
    }
}

/* ================================================================
   6. GENERIC CARDS / UTILITIES
   ================================================================ */
.ta-card {
    background-color: var(--ta-bg-surface);
    border-radius: 1.5rem;
    box-shadow: var(--ta-shadow-soft);
    border: 1px solid var(--ta-border-soft);
}

.notification-panel {
    background-color: var(--ta-bg-surface);
    border-radius: 1.25rem;
    border: 1px solid var(--ta-border-soft);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.dropdown-card {
    border-radius: 1rem;
    background-color: var(--ta-bg-surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    border: 1px solid var(--ta-border-soft);
}

/* Force dropdowns on top */
.notification-panel,
.dropdown-card {
    z-index: 80 !important;
}

.notification-scroll {
    max-height: 18rem;
    overflow-y: auto;
}

.notification-scroll::-webkit-scrollbar {
    width: 6px;
}

.notification-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.6);
    border-radius: 999px;
}

/* Tags / avatar */
.pill-new {
    background: var(--ta-pill-new-bg);
    color: var(--ta-pill-new-text);
}

.status-dot-success {
    background-color: var(--ta-dot-success);
}

.status-dot-danger {
    background-color: var(--ta-dot-danger);
}

.avatar {
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

.kbd-tag {
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.5);
}

/* Inputs */
.ta-input {
    background-color: var(--ta-bg-surface);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    color: var(--ta-text-main);
}

.ta-input:focus {
    border-color: var(--evo-accent);
    box-shadow: 0 0 0 2px var(--evo-accent-soft);
    outline: none;
}

html[data-theme="dark"] .ta-input {
    background-color: #0d0d0d;
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .ta-input:focus {
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 2px rgb(var(--ta-primary-rgb) / 0.40);
}

/* Module title & card header */
.ta-module-title {
    margin-bottom: 1.25rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ta-text-main);
}

.ta-card-header {
    padding: 1rem 1.25rem;
    background-color: var(--ta-bg-header);
    border-bottom: 1px solid var(--ta-border-soft);
    border-radius: 0.75rem 0.75rem 0 0;
}

/* Checkboxes */
.ta-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(148, 163, 184, 0.9);
}

.ta-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--ta-primary-rgb), 0.35);
}

/* Empty state */
.ta-empty-card {
    background-color: var(--ta-bg-surface);
    border-radius: 1.25rem;
    border: 1px dashed rgba(148, 163, 184, 0.6);
    padding: 2.5rem 2rem;
}

/* ================================================================
   7. GLOBAL SCROLLBAR THEME
   ================================================================ */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.65);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ================================================================
   8. EVO MINIMAL MODE (optional)
   ================================================================ */
.evo-minimal .ta-card,
.evo-minimal .ta-table-wrapper {
    border-radius: 0.75rem;
    box-shadow: none;
    border: 1px solid var(--ta-border-soft);
}

.evo-minimal .top-nav {
    box-shadow: none;
}

.evo-minimal .sidebar {
    box-shadow: none;
}

/* ================================================================
   9. TABLE ROW DENSITY
   ================================================================ */
.ta-row {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.evo-row-compact .ta-row {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.evo-row-spacious .ta-row {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

/* ================================================================
   10. CORE TABLE LAYOUT (Option B)
   ================================================================ */

/* Wrapper that contains table + pagination.
   This is what gets fixed height so pagination never overflows. */
/* ============================================================
   TABLE WRAPPER — FINAL RESPONSIVE / NO PAGE SCROLL VERSION
   ============================================================ */

/* Base: Mobile-first, stable, never collapses */
.ta-table-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;

    background: var(--ta-bg-surface);
    /*border-radius: 0.75rem;*/
    border: 1px solid var(--ta-border-soft);

    /* Full height minus navbar + breadcrumbs */
    height: calc(100dvh - var(--header-h) - var(--breadcrumbs-h));
    /*min-height: 360px;*/


    flex: 1 1 auto; /* take remaining space under the module header */
    min-height: 0; /* IMPORTANT so .ta-table-scroll can scroll */
    max-height: 100%;
    overflow: hidden;

    border-radius: 18px;
    border: 1px solid var(--ta-border-soft);
    background: var(--ta-bg-surface);
    box-shadow: var(--ta-card-shadow);
}

/* Medium-height screens */
@media (max-height: 800px) {
    .ta-table-wrapper {
        height: calc(100dvh - var(--header-h) - .5rem);
    }
}

/* VERY small devices (≤ 580px height) */
@media (max-height: 580px) {
    .ta-table-wrapper {
        height: calc(100dvh - var(--header-h));
    }
}

/* Desktop & large tablets: relax height but keep max constraint */
@media (min-width: 768px) {
    .ta-table-wrapper {
        height: auto;
        max-height: calc(100dvh - var(--header-h) - var(--breadcrumbs-h));
        min-height: 420px;
    }
}

.ta-table-wrapper > .ta-pagination-bar {
    flex-shrink: 0;
}

/* Table scroll area – only this scrolls */
.ta-table-scroll {
    /*flex: 1 1 auto;*/
    /*overflow-y: auto;*/
    /*overflow-x: auto;*/
    scrollbar-width: thin;
    padding-bottom: max(2.25rem, env(safe-area-inset-bottom));
    border-left: none !important;
    border: 0 !important; /* border must NOT be here */
    border-radius: 0 !important;
    /*overflow: auto;*/
    background: transparent;


    flex: 1;
    min-height: 0;
    overflow: auto;
}

.ta-table th,
.ta-table td {
    border-left: none !important;
}

.ta-table th:first-child,
.ta-table td:first-child {
    border-left: none !important;
}

/* Wrapper should own the border + radius, and clip inner scroll */
.ta-table-wrapper,
[data-module-name] {
    border: 1px solid var(--ta-border-soft);
    border-radius: 16px; /* match your design */
    overflow: hidden; /* IMPORTANT: clips corners */
    background: var(--white);
}

/* The table itself */
.ta-table {
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 100%;
}

/* Head */
.ta-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: left;
    background: var(--ta-bg-header);
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ta-text-muted);
}

/* Allow column-specific overrides */
.ta-text-left {
    text-align: left !important;
}

.ta-text-center {
    text-align: center !important;
}

.ta-text-right {
    text-align: right !important;
}

/* Rows / cells */
.ta-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    white-space: nowrap;
}

html[data-theme="dark"] .ta-table tbody td {
    border-bottom-color: rgba(75, 85, 99, 0.6);
}

/* Hover */
.ta-table tbody tr:hover {
    background-color: var(--ta-row-hover);
}

/* Optional actions cell – NOT sticky anymore */
.ta-sticky-actions-cell {
    background-color: var(--ta-bg-surface);
    border-left: 1px solid var(--ta-border-soft);
}

/* ================================================================
   11. PAGINATION – ALWAYS VISIBLE
   ================================================================ */

/* LEFT TEXT */
.ta-pagination-info {
    white-space: nowrap;
}

/* -----------------------------------------------
   PAGINATION BUTTONS (Prev / Next / Numbers)
   ----------------------------------------------- */
/* PAGINATION WRAPPER */
.ta-pagination-bar {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem 1rem;

    display: flex;
    flex-direction: column; /* Mobile first */
    gap: 0.75rem;

    font-size: 0.85rem;
    color: var(--ta-text-muted);

    border-top: 1px solid var(--ta-border-soft);
    background: var(--ta-bg-surface);
    border-radius: 0 0 0.75rem 0.75rem;

    flex-wrap: wrap; /* prevent overflow */


    flex-shrink: 0;
    padding-bottom: 12px; /* your “leave some padding at the bottom” */
}

/* Desktop/tablet: left–right layout */
@media (min-width: 640px) {
    .ta-pagination-bar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* LEFT: Showing x–y of z */
.ta-page-info {
    white-space: nowrap;
}

/* RIGHT: buttons */
.ta-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Page pills */
.ta-page-pill,
.ta-page-number {
    border-radius: 999px;
    border: 1px solid var(--ta-border-soft);
    background: white;
    color: var(--ta-text-primary);
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    transition: all .2s ease;
    cursor: pointer;
}

html[data-theme='dark'] .ta-page-pill,
html[data-theme='dark'] .ta-page-number {
    background: var(--ta-bg-surface);
    color: var(--ta-text-primary);
}

/* Hover */
.ta-page-pill:hover,
.ta-page-number:hover {
    background: var(--ta-bg-hover);
}

/* Active */
.ta-active {
    background: var(--ta-primary);
    border-color: var(--ta-primary);
    color: white !important;
}

/* Disabled */
.ta-page-pill:disabled {
    opacity: 0.4;
    pointer-events: none;
}


/* ================================================================
   12. BULK ACTION BAR – FLOATING, NO LAYOUT SHIFT
   ================================================================ */
/* IMPORTANT: parent wrapper in HTML must have `class="relative"` */
.ta-bulk-bar {
    position: absolute;
    top: -2.4rem;
    left: 0;
    right: 0;
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    padding: 0.35rem 0.75rem;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--ta-border-soft);
    box-shadow: 0 12px 30px rgb(var(--ta-primary-rgb) / 0.15);
}

html[data-theme="dark"] .ta-bulk-bar {
    background: rgba(10, 10, 10, 0.9);
    border-color: rgba(82, 82, 91, 0.9);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

/* Default mobile button position */
#mobileToggleWrap {
    transition: transform .25s ease;
}

/* Move ONLY the hamburger/X when sidebar opens */
html.sidebar-open #mobileToggleWrap {
    transform: translateX(16rem); /* same as your sidebar width */
}

/* Disable on desktop */
@media (min-width: 1024px) {
    html.sidebar-open #mobileToggleWrap {
        transform: none !important;
    }
}

/* Move the mobile toggle button to the right when sidebar opens */
.mobile-toggle-shift {
    transform: translateX(5rem);
}

#sidebarMobileToggle {
    transition: transform 0.25s ease;
}

#sidebarMenuContainer {
    z-index: 9999 !important;
}

#mobileOverlay {
    z-index: 9998 !important;
}


/* ================================================================
   13. ADMIN ERROR PAGE LAYOUT
   ================================================================ */
.error-meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--ta-text-muted);
}

.error-meta-value {
    font-size: 0.9rem;
    color: var(--ta-text-main);
}

.error-trace-block {
    background-color: #0f0f0f;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    white-space: pre-wrap;
    line-height: 1.35rem;
    transition: opacity 0.25s ease;
}

html[data-theme="light"] .error-trace-block {
    background-color: #f9fafb;
    color: #374151;
    border-color: rgba(148, 163, 184, 0.25);
}

/* ---------------------------
   ERROR PAGE - MOBILE FIX
   --------------------------- */
@media (max-width: 640px) {

    /* Reduce the massive top padding */
    .ta-card {
        padding-top: 3rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Bring content up and tighten spacing */
    .ta-card > .space-y-10 {
        margin-top: 0 !important;
        gap: 2rem !important;
    }

    /* Error heading */
    .ta-card h2 {
        margin-top: 0 !important;
        font-size: 1.25rem !important;
    }

    /* The parent wrapper that centers everything */
    .app-shell #appMainContent {
        padding-top: 0 !important;
    }

    /* Technical Details card spacing */
    .error-info-box {
        margin-top: 1rem !important;
        padding: 1rem !important;
    }

    /* Stack trace collapse button */
    #toggleTrace {
        margin-top: 0.5rem !important;
    }
}


/* ---------------------------
   ADD BUTTON
   --------------------------- */
.evo-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.55rem 1rem;
    border-radius: 999px;

    background: var(--ta-primary-soft);
    color: var(--evo-accent);
    border: 1px solid var(--ta-border-soft);

    font-size: 0.9rem;
    font-weight: 500;

    transition: all 0.2s ease;
}

.evo-add-btn:hover {
    background: var(--evo-accent);
    color: white;
    border-color: var(--evo-accent);
}

html[data-theme="dark"] .evo-add-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .evo-add-btn:hover {
    background: var(--evo-accent);
    color: white;
}


/* ============================================================
   FORM & MODAL UI — LIGHT MODE + DARK MODE
   Works for all modules dynamically (no extra JS needed)
   ============================================================ */

/* Shared styling */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ta-text-muted);
}

/* ===========================
   INPUTS / SELECTS / TEXTAREA
   =========================== */
.form-control {
    width: 100%;
    padding: 10px 12px;
    font-size: .9rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-surface-soft);
    color: var(--ta-text-main);

    outline: none;
    transition: 0.15s ease;
}

.form-control::placeholder {
    color: var(--ta-text-muted);
}

.form-control:focus {
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 2px rgba(var(--ta-primary-rgb), .18);
}

/* Textarea */
textarea.form-control {
    resize: vertical;
}

/* Select dropdown */
select.form-control {
    appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg width='12' height='8' xmlns='http://www.w3.org/2000/svg'><path fill='%23aaaaaa' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Multiselect */
select[multiple].form-control {
    height: auto;
    min-height: 90px;
    background-image: none;
}

/* Radio / Checkbox */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    transform: scale(1.12);
    margin-right: 6px;
}

/* Help text */
.form-text {
    font-size: .75rem;
    margin-top: 4px;
    color: var(--ta-text-muted);
}

/* ============================================================================
   EVO — MODAL & FORM FIX PACK
   (Non-destructive: does NOT alter any existing CSS)
============================================================================ */

/* ===========================
   1. OVERLAY FIX
=========================== */
#evoModal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    transition: opacity .25s ease;
}

#evoModal.show {
    display: flex;
    opacity: 1;
}

/* Overlay transition */
#evoModalOverlay {
    transition: opacity .18s ease;
    opacity: 0;
    inset: 0;
    z-index: 0;
}

#evoModal.show #evoModalOverlay {
    opacity: 1;
}

/* ===========================
   2. MODAL BOX FIX
=========================== */
#evoModalBox {
    width: 96%;
    max-width: 1100px;

    background: rgba(var(--white-rgb), 0.20);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

    display: flex;
    flex-direction: column;

    transition: opacity .18s ease, transform .18s ease;
    opacity: 0;
    transform: scale(.95);

    position: relative;
    z-index: 1;
}

#evoModal.show #evoModalBox {
    opacity: 1;
    transform: scale(1);
}

/* Make profile card flat when inside a modal */
#evoModalBox .evo-profile-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    #evoModalBox {
        margin: 1rem;
        max-width: 100%;
    }
}

/* ===========================
   LIGHT MODE MODAL BACKGROUND
=========================== */
html:not([data-theme="dark"]) #evoModalBox {
    background: rgba(255, 255, 255, 1); /* <-- perfect glass */
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

/* ======================================================
   3. DARK MODE MODAL BOX — premium black glass
   ====================================================== */
html[data-theme="dark"] #evoModalBox {
    background: rgba(15, 15, 15, 0.35); /* <-- actual glass effect */
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
}


/* ===========================
   3. HEADER FIX
=========================== */
#evoModalHeader {
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--ta-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#evoModalTitle {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ta-text-main);
}

#evoModalCloseX {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--ta-text-muted);
    transition: color .2s ease;
}

#evoModalCloseX:hover {
    color: var(--ta-dot-danger);
}

/* ===========================
   4. BODY FIX (SCROLL + PADDING)
=========================== */
#evoModalBody {
    padding: 1.6rem;
    max-height: 68vh;
    overflow-y: auto;
    background: transparent;
}

#evoModalBody::-webkit-scrollbar {
    width: 6px;
}

#evoModalBody::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 6px;
}

html[data-theme="dark"] #evoModalBody::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
}

/* ===========================
   5. FOOTER FIX
=========================== */
#evoModalFooter {
    padding: 1rem 1.6rem;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;

    border-top: 1px solid var(--ta-border-soft);
    background: transparent;
}

#evoModalActionBtn,
#evoModalCancelBtn {
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    font-size: .9rem;
}

/* ===========================
   6. FORM ELEMENT FIXES (ONLY INSIDE MODAL)
=========================== */
#evoModalBody .form-group {
    margin-bottom: 1.25rem !important;
}

#evoModalBody .form-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ta-text-muted);
}

/* Inputs ONLY inside modal */
#evoModalBody .form-control {
    width: 100%;
    padding: 10px 12px;
    font-size: .9rem;
    border-radius: 8px;
    border: 1px solid var(--ta-border-soft);
    background: var(--ta-surface-soft);
    color: var(--ta-text-main);
    transition: .18s ease;
}

#evoModalBody .form-control:focus {
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 2px rgba(var(--ta-primary-rgb), .25);
    outline: none;
}

/* DARK MODE FIX */
html[data-theme="dark"] #evoModalBody .form-control {
    background: var(--ta-surface-soft-dark);
    border-color: var(--ta-border-soft-dark);
    color: var(--ta-text-main-dark);
}

html[data-theme="dark"] #evoModalBody .form-control::placeholder {
    color: #888;
}

/* Textarea */
#evoModalBody textarea.form-control {
    resize: vertical;
}

/* Select dropdown */
#evoModalBody select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg width='12' height='8' xmlns='http://www.w3.org/2000/svg'><path fill='%23aaaaaa' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Multiselect */
#evoModalBody select[multiple].form-control {
    background-image: none;
    min-height: 95px;
}

/* Radio / Checkbox fix */
#evoModalBody input[type="checkbox"],
#evoModalBody input[type="radio"] {
    transform: scale(1.15);
    margin-right: 6px;
}

/* PROFILE CARD CONTAINER */
.evo-profile-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    padding: 1.5rem;
    background: transparent;
}

/* HEADER */
.ep-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* AVATAR CIRCLE */
.ep-avatar {
    width: 56px;
    height: 56px;

    border-radius: 999px;
    background: var(--ta-primary);

    color: white;
    font-weight: 700;
    font-size: 1.35rem;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* NAME + EMAIL BLOCK */
.ep-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ep-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ta-text-main);
}

.ep-email {
    font-size: .9rem;
    color: var(--ta-text-muted);
}

/* STATUS PILL */
.ep-status {
    margin-top: 4px;
    display: inline-block;
    font-size: .75rem;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.ep-status-green {
    background: #dcfce7;
    color: #166534;
}

.ep-status-red {
    background: #fee2e2;
    color: #b91c1c;
}

.ep-status-orange {
    background: #ffedd5;
    color: #c2410c;
}

.ep-status-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

/* DARK MODE PROFILE PILL FIX */
html[data-theme="dark"] .ep-status-green {
    background: rgba(34, 197, 94, .15);
    color: #4ade80;
}

html[data-theme="dark"] .ep-status-red {
    background: rgba(239, 68, 68, .15);
    color: #f87171;
}

html[data-theme="dark"] .ep-status-orange {
    background: rgba(251, 146, 60, .15);
    color: #fb923c;
}

html[data-theme="dark"] .ep-status-blue {
    background: rgba(59, 130, 246, .20);
    color: #93c5fd;
}

/* INFO GRID */
.ep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
}

/* LABEL + VALUE */
.ep-grid label {
    font-size: .75rem;
    color: var(--ta-text-muted);
}

.ep-grid span {
    display: block;
    margin-top: 2px;
    font-size: .9rem;
    color: var(--ta-text-main);
}

/* DARK MODE FIXES */
html[data-theme="dark"] .evo-profile-card {
    color: var(--ta-text-main-dark);
}

.evo-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    background-color: var(--evo-gray-100, rgba(148, 163, 184, 0.18));
    color: var(--evo-gray-700, #475569);
    white-space: nowrap;
}

.evo-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000000; /* higher than #evoModal */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.evo-toast {
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    color: white;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.evo-toast-success {
    background: var(--evo-green-600);
}

.evo-toast-error {
    background: var(--evo-red-600);
}

.evo-toast-warning {
    background: var(--evo-yellow-600);
}

.evo-toast.show {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   PROFILE CHROME — PRO UI
   Put this at the VERY END of your CSS (override duplicates)
========================================================= */

/* Layout: tabs on top, buttons below, centered */
.evo-profile-chrome {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* -----------------------------
   TABS ROW (Segmented Control)
------------------------------ */
.evo-profile-tabs-row {
    display: flex;
    justify-content: flex-start !important;
}

.evo-profile-tabs {
    display: inline-flex;
    align-items: center;

    /* One unified "track" so it doesn't look like buttons */
    background: color-mix(in srgb, var(--ta-bg-header) 92%, transparent);
    border: 1px solid var(--ta-border-soft);
    border-radius: 14px;
    padding: 4px;

    /* Responsive safety */
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px; /* subtle spacing inside the track */


    /* keep the segmented control styling, just align it left */
    margin-right: auto; /* pushes it to the left */
    margin-left: 0 !important;
}

.evo-profile-tabs::-webkit-scrollbar {
    display: none;
}

/* Individual tab (NOT pill buttons anymore) */
.evo-tab-pill {
    appearance: none;
    border: 0 !important;
    background: transparent !important;

    padding: 10px 14px;
    border-radius: 11px; /* smaller than the container radius */
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: .01em;

    color: var(--ta-text-muted);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
    white-space: nowrap;
}

/* Hover: subtle lift, not button-like */
.evo-tab-pill:hover {
    transform: translateY(-1px);
    color: var(--ta-text-main);
    background: color-mix(in srgb, var(--ta-text-main) 4%, transparent);
}

/* Active: looks like a selected segment */
.evo-tab-pill.is-active {
    background: var(--ta-bg-surface) !important;
    color: var(--ta-primary) !important;

    box-shadow: 0 10px 22px rgb(var(--ta-primary-rgb) / 0.10),
    inset 0 0 0 1px rgb(var(--ta-primary-rgb) / 0.22);
    transform: none;
}

/* Keyboard focus (accessibility) */
.evo-tab-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--ta-primary-rgb) / 0.22),
    inset 0 0 0 1px rgb(var(--ta-primary-rgb) / 0.32);
}

/* -----------------------------
   ACTIONS ROW (Real CTAs)
------------------------------ */
.evo-profile-actions-row {
    display: flex;
    justify-content: center !important;
}

.evo-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 10px;
}

/* Make actions look like CTAs, NOT tabs */
.evo-profile-btn {
    border: 1px solid rgba(var(--ta-primary-rgb), 0.18) !important;
    background: color-mix(in srgb, var(--ta-primary) 9%, var(--ta-bg-surface)) !important;
    color: var(--ta-text-main);

    padding: 10px 14px;
    border-radius: 12px; /* squared-ish compared to tab track */
    font-size: 0.86rem;
    font-weight: 650;

    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.evo-profile-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--ta-primary-rgb), 0.32) !important;
    box-shadow: 0 12px 26px rgba(var(--ta-primary-rgb), 0.10);
    background: color-mix(in srgb, var(--ta-primary) 14%, var(--ta-bg-surface)) !important;
}

.evo-profile-btn:active {
    transform: translateY(0px);
    box-shadow: none;
}

.evo-profile-btn.is-disabled,
.evo-profile-btn:disabled {
    opacity: .45;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* -----------------------------
   Mobile: tabs become full-width segments
------------------------------ */
@media (max-width: 520px) {
    .evo-profile-tabs-row {
        justify-content: stretch;
    }

    .evo-profile-tabs {
        width: auto !important; /* don't force 100% */
        max-width: 100%;
    }

    .evo-tab-pill {
        flex: 1 1 auto;
        text-align: center;
        padding: 10px 10px;
    }

    .evo-profile-actions {
        width: 100%;
    }

    .evo-profile-btn {
        width: 100%;
        max-width: 420px; /* prevents ugly ultra-wide on tablets */
    }
}

/* Dark-mode polish (keeps segmented track premium) */
html[data-theme="dark"] .evo-profile-tabs {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .evo-tab-pill.is-active {
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .evo-profile-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* =========================================================
   EVO Modal — Opt-in Confirmation Card (ONLY when you add .is-confirm)
   ========================================================= */
#evoModalBody #dynamicForm .form-group.is-confirm {
    display: flex;
    align-items: flex-start;
    gap: .85rem;

    padding: 1rem 1.05rem;
    border-radius: 14px;

    background: var(--ta-bg-header);
    border: 1px solid var(--ta-border-soft);
    box-shadow: 0 10px 24px rgba(var(--ta-primary-rgb), 0.06);
}

html[data-theme="dark"] #evoModalBody #dynamicForm .form-group.is-confirm {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

#evoModalBody #dynamicForm .form-group.is-confirm .ta-checkbox {
    margin-top: .18rem;
    width: 1.1rem;
    height: 1.1rem;

    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.65);
    background: var(--ta-bg-surface);

    cursor: pointer;
    flex: 0 0 auto;
}

html[data-theme="dark"] #evoModalBody #dynamicForm .form-group.is-confirm .ta-checkbox {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.20);
}

#evoModalBody #dynamicForm .form-group.is-confirm .ta-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--ta-primary-rgb), .22);
}

#evoModalBody #dynamicForm .form-group.is-confirm label {
    margin: 0 !important;
    font-size: .92rem;
    line-height: 1.4rem;
    color: var(--ta-text-main);
    font-weight: 550;
}

/* Only add the "cannot be undone" hint when you ALSO opt in */
#evoModalBody #dynamicForm .form-group.is-confirm.has-hint label::after {
    /*content:"This action cannot be undone.";*/
    content: attr(data-i18n-after-text);
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--ta-text-muted);
    font-weight: 500;
}

@media (max-width: 520px) {
    #evoModalBody #dynamicForm .form-group.is-confirm {
        padding: .9rem .9rem;
        border-radius: 12px;
    }
}

/* =========================================================
   AUTH LOGO THEME SWITCH
   ========================================================= */
.evo-auth-logo {
    height: 26px;
    width: auto;
    object-fit: contain;
}

.evo-auth-logo-light {
    display: none;
}

.evo-auth-logo-dark {
    display: block;
}

html[data-theme="dark"] .evo-auth-logo-light {
    display: block;
}

html[data-theme="dark"] .evo-auth-logo-dark {
    display: none;
}


/* =========================================================
   AUTH FORM INPUT THEME SWITCH
   ========================================================= */
/* Auth + global form controls: fix dark theme input surfaces */
html[data-theme="dark"] .form-control {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ta-text-main);
}

html[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* Keep autofill readable in dark mode (Chrome) */
html[data-theme="dark"] input.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--ta-text-main);
    transition: background-color 999999s ease-in-out 0s;
}

/* =========================================================
   EVO ICON STYLING (controls ALL SVG colors via CSS)
   ========================================================= */

/* Standard size */
.evo-icon {
    width: 1rem;
    height: 1rem;
}

/* Make icon follow parent text color */
.sidebar-item,
.sidebar-submenu a {
    color: var(--ta-text-muted);
}

.sidebar-item svg,
.sidebar-submenu a svg {
    color: currentColor;
}

/* Active state */
.sidebar-item-active {
    color: var(--ta-primary);
}

/* Optional: per-item accent (apply to your icon wrapper span) */
.icon-accent-primary {
    color: var(--ta-primary);
    background: rgba(var(--ta-primary-rgb), 0.08);
}

.icon-accent-blue {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

/* Optional: if you want “neutral” by default, then only color on hover/active */
.sidebar-item {
    color: var(--ta-text-muted);
}

.sidebar-item:hover {
    color: var(--ta-text-main);
}

.sidebar-item-active {
    color: var(--ta-primary);
}

.evo-icon {
    width: 1rem;
    height: 1rem;
    display: block;
}

.icon-accent-blue {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.icon-accent-primary {
    color: var(--ta-primary);
    background: rgba(var(--ta-primary-rgb), 0.08);
}

/* Wrapper that replaces the old Tailwind w-8 h-8 flex rounded-xl */
.sidebar-icon-wrap {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

/* makes injected SVG actually show inside your 8x8 wrapper */
.evo-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.evo-svg > svg.evo-icon {
    width: 1rem;
    height: 1rem;
    display: block;
}

.evo-color {
    -webkit-appearance: none;
    appearance: none;
    padding: 4px;
    background: var(--ta-bg);
    cursor: pointer;
    overflow: hidden;
}

.evo-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.evo-color::-webkit-color-swatch {
    border: none;
    border-radius: 12px;
}

.evo-color::-moz-color-swatch {
    border: none;
    border-radius: 12px;
}

/* =========================================================
   GENERIC FILE INPUT STYLING (All input[type="file"])
   - Styles native "Choose File" button + field in both themes
========================================================= */

input[type="file"] {
    width: 100%;
    color: var(--ta-text-main);
    background: var(--ta-bg);
    border: 1px solid var(--ta-border-soft);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.25rem;
}

input[type="file"]:focus {
    outline: none;
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 4px var(--ta-primary-ring);
}

/* Modern browsers */
input[type="file"]::file-selector-button {
    appearance: none;
    -webkit-appearance: none;

    margin-right: 12px;
    padding: 8px 14px;

    border: 1px solid var(--ta-border-soft);
    border-radius: 9999px;

    background: var(--ta-bg-surface);
    color: var(--ta-text-main);

    font-weight: 650;
    cursor: pointer;

    transition: background-color .15s ease, opacity .15s ease, transform .05s ease;
}

input[type="file"]:hover::file-selector-button {
    background: var(--ta-row-hover);
}

input[type="file"]:active::file-selector-button {
    transform: translateY(1px);
}

/* Safari/older Chromium fallback */
input[type="file"]::-webkit-file-upload-button {
    appearance: none;
    -webkit-appearance: none;

    margin-right: 12px;
    padding: 8px 14px;

    border: 1px solid var(--ta-border-soft);
    border-radius: 9999px;

    background: var(--ta-bg-surface);
    color: var(--ta-text-main);

    font-weight: 650;
    cursor: pointer;

    transition: background-color .15s ease, opacity .15s ease, transform .05s ease;
}

input[type="file"]:hover::-webkit-file-upload-button {
    background: var(--ta-row-hover);
}

input[type="file"]:active::-webkit-file-upload-button {
    transform: translateY(1px);
}

/* =========================================================
   GENERIC SELECT STYLING (native <select>)
   - Styles the closed control well
   - Attempts to style dropdown list where supported
========================================================= */
/* =========================================================
   GENERIC SELECT STYLING (native <select>)
   - Scoped to forms/modules/modals ONLY
   - Does NOT affect the navbar language select
========================================================= */

:where(form, .evo-module-root, #evoModalBody) select {
    width: 100%;
    color: var(--ta-text-main);
    background: var(--ta-bg);
    border: 1px solid var(--ta-border-soft);
    border-radius: 12px;
    padding: 10px 40px 10px 12px; /* room for arrow */
    font-size: 0.9rem;
    line-height: 1.25rem;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: linear-gradient(45deg, transparent 50%, var(--ta-text-muted) 50%),
    linear-gradient(135deg, var(--ta-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

:where(form, .evo-module-root, #evoModalBody) select:focus {
    outline: none;
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 4px var(--ta-primary-ring);
}

/* Best-effort styling for option list (browser-dependent) */
:where(form, .evo-module-root, #evoModalBody) select option,
:where(form, .evo-module-root, #evoModalBody) select optgroup {
    background: var(--ta-bg-surface);
    color: var(--ta-text-main);
}

:where(form, .evo-module-root, #evoModalBody) select option:disabled {
    color: var(--ta-text-muted);
}

/* Let the browser pick correct native menu theming */
html[data-theme="dark"] :where(form, .evo-module-root, #evoModalBody) select {
    color-scheme: dark;
}

html[data-theme="light"] :where(form, .evo-module-root, #evoModalBody) select {
    color-scheme: light;
}

/* Navbar language select: leave it alone (native look/size) */
#languageSelect {
    width: auto;
    padding: 0; /* let your existing classes control it */
    border-radius: inherit; /* let the container styling win */
    background-image: none;
    appearance: auto;
    -webkit-appearance: menulist;
}


/* =========================================================
   EVO CUSTOM SELECT (system-wide)
   - Keeps original <select> for form submit
   - Renders a fully stylable dropdown UI
========================================================= */

.evo-select-native {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.evo-select {
    position: relative;
    width: 100%;
}

.evo-select__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: var(--ta-text-main);
    background: var(--ta-bg);
    border: 1px solid var(--ta-border-soft);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.25rem;

    cursor: pointer;
}

.evo-select__btn:focus-visible {
    outline: none;
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 4px var(--ta-primary-ring);
}

.evo-select__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-select__value.is-placeholder {
    color: var(--ta-text-muted);
}

.evo-select__chev {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--ta-text-muted);
    flex: 0 0 auto;
    transition: transform .12s ease;
}

.evo-select.is-open .evo-select__chev {
    transform: rotate(180deg);
}

.evo-select__menu {
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    margin-top: 8px;

    background: var(--ta-bg-surface);
    border: 1px solid var(--ta-border-soft);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);

    max-height: 320px;
    overflow: auto;

    padding: 6px;
    display: none;
}

.evo-select.is-open .evo-select__menu {
    display: block;
}

.evo-select__opt {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    padding: 10px 10px;
    border-radius: 12px;

    color: var(--ta-text-main);
    background: transparent;

    cursor: pointer;
    user-select: none;
}

.evo-select__opt:hover {
    background: var(--ta-row-hover);
}

.evo-select__opt.is-selected {
    background: rgba(16, 185, 129, .12); /* soft accent */
    border: 1px solid rgba(16, 185, 129, .25);
}

.evo-select__opt.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.evo-select__optmark {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: 2px solid var(--ta-border-soft);
    flex: 0 0 auto;
}

.evo-select__opt.is-selected .evo-select__optmark {
    border-color: var(--ta-primary);
    background: var(--ta-primary);
}

.evo-select__group {
    padding: 10px 10px 6px;
    font-size: 12px;
    color: var(--ta-text-muted);
}

/* --- EvoSelect search (optional) --- */
.evo-select__searchwrap {
    padding: 6px;
}

.evo-select__search {
    width: 100%;
    border-radius: 12px;
    padding: 10px 12px;

    color: var(--ta-text-main);
    background: var(--ta-bg);
    border: 1px solid var(--ta-border-soft);

    font-size: 0.9rem;
    line-height: 1.25rem;
}

.evo-select__search::placeholder {
    color: var(--ta-text-muted);
}

.evo-select__search:focus-visible {
    outline: none;
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 4px var(--ta-primary-ring);
}

.evo-select__empty {
    padding: 10px 10px;
    border-radius: 12px;
    color: var(--ta-text-muted);
    font-size: 0.9rem;
}

/* allow long tz labels to wrap instead of breaking layout */
.evo-select__optlabel {
    white-space: normal;
    line-height: 1.2rem;
}

/* mobile: make dropdown feel like a full-width sheet */
@media (max-width: 640px) {
    .evo-select__menu {
        max-width: calc(100vw - 16px);
        max-height: 60vh;
        border-radius: 16px;
    }

    .evo-select__opt {
        padding: 12px 12px; /* bigger tap target */
    }
}

/* COOL, CONSISTENT CHECKBOXES (global)
   Uses your design tokens:
   --ta-primary, --ta-primary-ring, --ta-bg, --ta-bg-surface, --ta-border-soft, --ta-text-main, --ta-text-muted
*/

/* Base */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;

    width: 1.05rem;
    height: 1.05rem;
    margin: 0;

    border-radius: 0.42rem;
    border: 1px solid var(--ta-border-soft);
    background: var(--ta-bg);

    display: inline-grid;
    place-content: center;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03),
    0 0 0 0 rgba(0, 0, 0, 0);

    cursor: pointer;
    transition: transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 160ms ease,
    filter 140ms ease;
}

/* Hover */
input[type="checkbox"]:hover {
    border-color: color-mix(in srgb, var(--ta-primary) 35%, var(--ta-border-soft));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06),
    0 0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(-0.5px);
}

/* Focus */
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ta-primary-ring),
    0 2px 10px rgba(0, 0, 0, 0.08);
    border-color: color-mix(in srgb, var(--ta-primary) 55%, var(--ta-border-soft));
}

/* Press */
input[type="checkbox"]:active {
    transform: translateY(0) scale(0.98);
    filter: saturate(1.05);
}

/* Checkmark (animated) */
input[type="checkbox"]::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;

    /* crisp check using mask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9.0 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9.0 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;

    background: #fff;
    transform: scale(0.35);
    opacity: 0;
    transition: transform 150ms ease, opacity 150ms ease;
}

/* Checked state */
input[type="checkbox"]:checked {
    border-color: color-mix(in srgb, var(--ta-primary) 70%, var(--ta-border-soft));
    background: var(--ta-primary);

    box-shadow: 0 6px 18px color-mix(in srgb, var(--ta-primary) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ta-primary) 35%, transparent);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
    opacity: 1;
}

/* Indeterminate (nice dash) */
input[type="checkbox"]:indeterminate {
    border-color: color-mix(in srgb, var(--ta-primary) 60%, var(--ta-border-soft));
    background: var(--ta-primary);
}

input[type="checkbox"]:indeterminate::before {
    -webkit-mask: none;
    mask: none;

    width: 0.62rem;
    height: 0.15rem;
    border-radius: 999px;
    background: #fff;

    transform: scale(1);
    opacity: 1;
}

/* Disabled */
input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    filter: none;

    box-shadow: none;
}

/* Better alignment inside labels */
label input[type="checkbox"] {
    position: relative;
    top: 0.08rem;
}

/* Optional: slightly larger on touch devices (keeps UX nicer) */
@media (pointer: coarse) {
    input[type="checkbox"] {
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 0.5rem;
    }

    input[type="checkbox"]::before {
        width: 0.7rem;
        height: 0.7rem;
    }
}

/* Force emoji font FIRST for the visible EvoSelect UI */
#langSwitcher,
.evo-select,
.evo-select__btn,
.evo-select__value,
.evo-select__optlabel {
    font-family: "Segoe UI Emoji",
    "Apple Color Emoji",
    "Noto Color Emoji",
    Inter,
    system-ui,
    sans-serif !important;

    font-variant-emoji: emoji;
}

.evo-flag {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
}

.evo-select__value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.evo-select__opt {
    gap: 10px; /* you already have gap, keep if present */
}


/* =========================================================
   TABLE HEIGHT + PAGINATION (works in BOTH backend + frontend)
   ========================================================= */

/* Wrapper contains scroll area + pagination */
.ta-table-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;

    /* DO NOT hard-force height using header/breadcrumb vars */
    height: auto !important;

    /* One rule that behaves well everywhere */
    max-height: clamp(420px, 70dvh, 820px);
}

/* Only the table area scrolls */
.ta-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-height: none !important; /* remove the 520px trap */
}

/* Pagination always visible, never inside the scroll area */
.ta-pagination-bar {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 20;
}

/********************************************************************************/
/********************************************************************************/
/************************************ DASHBOARD *********************************/
/********************************************************************************/
/********************************************************************************/


/* Card contrast: distinct from background */
.dash-card {
    background: var(--ta-bg-card);
    border: 1px solid color-mix(in srgb, var(--ta-text-main) 10%, transparent);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .06);
}

.dash-card:hover {
    box-shadow: 0 14px 34px rgba(2, 6, 23, .10);
}

.dash-muted {
    color: var(--ta-text-muted);
}


.dash-main {
    color: var(--ta-text-main);
}

.tabnums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.dash-net-pos {
    color: var(--evo-green-600);
}

.dash-net-neg {
    color: var(--evo-red-600);
}

/* Big number safety (default everywhere) */
.kpi-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
    vertical-align: bottom;
}

/* Only for the big balance number: no ellipsis, responsive shrink */
.kpi-balance {
    text-overflow: clip !important; /* stop "..." */
    overflow: visible !important; /* stop clipping */
    max-width: none !important; /* allow full width */
    white-space: nowrap; /* do not wrap */
    line-height: 1.05;
    vertical-align: bottom;
    display: block;
    width: 100%;
}

/* Only shrink on phones */
@media (max-width: 640px) {
    .kpi-balance {
        font-size: clamp(1.6rem, 7vw, 2.25rem);
    }
}

/* Fix the small-screen left shift / indent */
.kpi-balance{
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
}

/* Force the balance line to be a clean block line (no baseline weirdness) */
.kpi-balance{
    text-align: left;
}

/* The wrapper holding the balance must not center/justify on small screens */
@media (max-width: 640px){
    [data-dash="overall_balance"]{
        justify-self: start;
        align-self: start;
    }
}

@media (max-width: 640px){
    /* target the immediate wrapper you showed */
    .kpi-balance{ left: 0; }
    .kpi-balance{ transform: none; } /* in case any transform is being applied elsewhere */
}