/* ================================================================
   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 {
    --sda-treefrog: #2b8500;
    --sda-ming: #007f98;
    --sda-bluejay: #2e6de7;
    --sda-scarlett: #d0021b;
    --sda-campfire: #cd4900;
    --sda-forest: #355724;
    --sda-cave: #255760;
    --sda-denim: #2f557f;
    --sda-night: #4a4a4a;
    --sda-black: #000000;
    --sda-gray-darker: #222222;
    --sda-gray-dark: #4a4a4a;
    --sda-gray: #717171;
    --sda-gray-light: #f5f5f5;
    --sda-white: #ffffff;

    --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;

    /* Full native palettes for color.json legacy/native colors.
       These complete the older partial variables above without changing names. */
    --brown-50: #faf2f2;
    --brown-100: #f4dfdf;
    --brown-200: #eac5c5;
    --brown-300: #dc9e9e;
    --brown-400: #cf7777;
    --brown-500: #a52a2a;
    --brown-600: #8f2525;
    --brown-700: #6f1c1c;
    --brown-800: #551616;
    --brown-900: #3a0f0f;
    --brown-950: #210808;
    --brown: var(--brown-500);

    --chocolate-50: #fdf4ec;
    --chocolate-100: #f9e3d0;
    --chocolate-200: #f3c7a0;
    --chocolate-300: #eba363;
    --chocolate-400: #e68d4e;
    --chocolate-500: #d2691e;
    --chocolate-600: #b85a19;
    --chocolate-700: #974b16;
    --chocolate-800: #6f3710;
    --chocolate-900: #4a250b;
    --chocolate-950: #271406;
    --chocolate: var(--chocolate-500);

    --crimson-50: #fdf0f3;
    --crimson-100: #fbd8df;
    --crimson-200: #f7b2c0;
    --crimson-300: #f1849a;
    --crimson-400: #ee4668;
    --crimson-500: #dc143c;
    --crimson-600: #bd1134;
    --crimson-700: #9e0e2b;
    --crimson-800: #720a1f;
    --crimson-900: #4b0715;
    --crimson-950: #26030a;
    --crimson: var(--crimson-500);

    --darkblue-50: #eeeeff;
    --darkblue-100: #dedeff;
    --darkblue-200: #bdbdff;
    --darkblue-300: #8f8fff;
    --darkblue-400: #3f3fff;
    --darkblue-500: #00008b;
    --darkblue-600: #00006f;
    --darkblue-700: #00005a;
    --darkblue-800: #000047;
    --darkblue-900: #000030;
    --darkblue-950: #000019;
    --darkblue: var(--darkblue-500);

    --darkred-50: #fff0f0;
    --darkred-100: #ffdede;
    --darkred-200: #ffbdbd;
    --darkred-300: #ff8f8f;
    --darkred-400: #e34848;
    --darkred-500: #8b0000;
    --darkred-600: #6f0000;
    --darkred-700: #5a0000;
    --darkred-800: #470000;
    --darkred-900: #300000;
    --darkred-950: #190000;
    --darkred: var(--darkred-500);

    --darkslategray-50: #f0f5f5;
    --darkslategray-100: #dbe6e6;
    --darkslategray-200: #b7cccc;
    --darkslategray-300: #88aaaa;
    --darkslategray-400: #5f8787;
    --darkslategray-500: #2f4f4f;
    --darkslategray-600: #284343;
    --darkslategray-700: #203737;
    --darkslategray-800: #192b2b;
    --darkslategray-900: #111d1d;
    --darkslategray-950: #090f0f;
    --darkslategray: var(--darkslategray-500);

    --firebrick-50: #fcf1f1;
    --firebrick-100: #f7dddd;
    --firebrick-200: #efbbbb;
    --firebrick-300: #e58e8e;
    --firebrick-400: #da3e3e;
    --firebrick-500: #b22222;
    --firebrick-600: #971d1d;
    --firebrick-700: #791717;
    --firebrick-800: #5c1212;
    --firebrick-900: #3d0c0c;
    --firebrick-950: #210606;
    --firebrick: var(--firebrick-500);

    --ghostwhite-50: #ffffff;
    --ghostwhite-100: #f8f8ff;
    --ghostwhite-200: #e7e7ff;
    --ghostwhite-300: #d5d5ff;
    --ghostwhite-400: #bfbfff;
    --ghostwhite-500: #a5a5f7;
    --ghostwhite-600: #8484d8;
    --ghostwhite-700: #6666b0;
    --ghostwhite-800: #4b4b84;
    --ghostwhite-900: #32325a;
    --ghostwhite-950: #1c1c33;
    --ghostwhite: var(--ghostwhite-100);
    --ghostwhite-dark: var(--ghostwhite-200);

    --gold-50: #fffbea;
    --gold-100: #fff3bd;
    --gold-200: #ffe877;
    --gold-300: #ffde33;
    --gold-400: #ffd700;
    --gold-500: #d6b500;
    --gold-600: #bb9e00;
    --gold-700: #8f7900;
    --gold-800: #665600;
    --gold-900: #443900;
    --gold-950: #241e00;
    --gold: var(--gold-400);
    --gold-dark: var(--gold-800);

    --maroon-50: #fff0f0;
    --maroon-100: #ffdede;
    --maroon-200: #ffbdbd;
    --maroon-300: #ff8f8f;
    --maroon-400: #d94747;
    --maroon-500: #800000;
    --maroon-600: #660000;
    --maroon-700: #520000;
    --maroon-800: #3c0000;
    --maroon-900: #290000;
    --maroon-950: #140000;
    --maroon: var(--maroon-500);

    --midnightblue-50: #f0f0fb;
    --midnightblue-100: #ddddf6;
    --midnightblue-200: #bbbbed;
    --midnightblue-300: #9090e0;
    --midnightblue-400: #5f5fcc;
    --midnightblue-500: #191970;
    --midnightblue-600: #15155f;
    --midnightblue-700: #11114e;
    --midnightblue-800: #101046;
    --midnightblue-900: #090927;
    --midnightblue-950: #050515;
    --midnightblue: var(--midnightblue-500);

    --navy-50: #eeeeff;
    --navy-100: #dedeff;
    --navy-200: #bdbdff;
    --navy-300: #8f8fff;
    --navy-400: #3f3fff;
    --navy-500: #000080;
    --navy-600: #000066;
    --navy-700: #000052;
    --navy-800: #00003c;
    --navy-900: #000029;
    --navy-950: #000014;
    --navy: var(--navy-500);

    --orangered-50: #fff4ee;
    --orangered-100: #ffe1d2;
    --orangered-200: #ffc3a5;
    --orangered-300: #ff9a66;
    --orangered-400: #ff6f33;
    --orangered-500: #ff4500;
    --orangered-600: #cd410b;
    --orangered-700: #9c3309;
    --orangered-800: #702507;
    --orangered-900: #4b1905;
    --orangered-950: #260d02;
    --orangered: var(--orangered-500);

    --rebeccapurple-50: #f6f0fb;
    --rebeccapurple-100: #eadcf4;
    --rebeccapurple-200: #d5b9ea;
    --rebeccapurple-300: #bc8dde;
    --rebeccapurple-400: #9d60cb;
    --rebeccapurple-500: #663399;
    --rebeccapurple-600: #562b81;
    --rebeccapurple-700: #46236a;
    --rebeccapurple-800: #351b50;
    --rebeccapurple-900: #241236;
    --rebeccapurple-950: #13091c;
    --rebeccapurple: var(--rebeccapurple-500);

    --royalblue-50: #f0f4fe;
    --royalblue-100: #dce6fb;
    --royalblue-200: #bacdf7;
    --royalblue-300: #8faff2;
    --royalblue-400: #628bea;
    --royalblue-500: #4169e1;
    --royalblue-600: #284bbd;
    --royalblue-700: #203c99;
    --royalblue-800: #182d72;
    --royalblue-900: #101f4e;
    --royalblue-950: #081029;
    --royalblue: var(--royalblue-500);

    --silver-50: #fafafa;
    --silver-100: #f2f2f2;
    --silver-200: #e6e6e6;
    --silver-300: #d5d5d5;
    --silver-400: #c0c0c0;
    --silver-500: #a8a8a8;
    --silver-600: #858585;
    --silver-700: #6e6e6e;
    --silver-800: #4f4f4f;
    --silver-900: #333333;
    --silver-950: #1b1b1b;
    --silver: var(--silver-400);

    --slategray-50: #f3f5f7;
    --slategray-100: #e4e8ec;
    --slategray-200: #c9d1d9;
    --slategray-300: #a8b4bf;
    --slategray-400: #8695a3;
    --slategray-500: #708090;
    --slategray-600: #576572;
    --slategray-700: #47525c;
    --slategray-800: #383f47;
    --slategray-900: #262b30;
    --slategray-950: #141719;
    --slategray: var(--slategray-500);

    --snow-50: #ffffff;
    --snow-100: #fffafa;
    --snow-200: #ffecec;
    --snow-300: #ffd7d7;
    --snow-400: #ffbaba;
    --snow-500: #f99a9a;
    --snow-600: #d97878;
    --snow-700: #ad5959;
    --snow-800: #813f3f;
    --snow-900: #572929;
    --snow-950: #301616;
    --snow: var(--snow-100);

    --whitesmoke-50: #ffffff;
    --whitesmoke-100: #f5f5f5;
    --whitesmoke-200: #e8e8e8;
    --whitesmoke-300: #d4d4d4;
    --whitesmoke-400: #b8b8b8;
    --whitesmoke-500: #9a9a9a;
    --whitesmoke-600: #7a7a7a;
    --whitesmoke-700: #5f5f5f;
    --whitesmoke-800: #454545;
    --whitesmoke-900: #292929;
    --whitesmoke-950: #171717;
    --whitesmoke: var(--whitesmoke-100);

    --darkgreen-50: #efffef;
    --darkgreen-100: #dcffdc;
    --darkgreen-200: #b8ffb8;
    --darkgreen-300: #85ff85;
    --darkgreen-400: #31dc31;
    --darkgreen-500: #008b00;
    --darkgreen-600: #006f00;
    --darkgreen-700: #005a00;
    --darkgreen-800: #004700;
    --darkgreen-900: #003000;
    --darkgreen-950: #001900;
    --darkgreen: var(--darkgreen-500);

    --chlorophyll-50: #efffef;
    --chlorophyll-100: #dcffdc;
    --chlorophyll-200: #b8ffb8;
    --chlorophyll-300: #85ff85;
    --chlorophyll-400: #2fd92f;
    --chlorophyll-500: #008000;
    --chlorophyll-600: #006600;
    --chlorophyll-700: #005200;
    --chlorophyll-800: #003c00;
    --chlorophyll-900: #002900;
    --chlorophyll-950: #001400;
    --chlorophyll: var(--chlorophyll-500);

    /* ===================================================================
       2) ACCENT + PRIMARY (single definition, reusable everywhere)
       - Lighter green accent (near evo-green-500: #22c55e)
       =================================================================== */
    --evo-accent-h: 190;
    --evo-accent-s: 100%;
    --evo-accent-l: 30%; /* SDA Ming (#007f98) */

    --evo-accent: var(--sda-ming);
    --ta-primary: var(--evo-accent);

    /* IMPORTANT: primary RGB must match the same accent (SDA Ming) */
    --ta-primary-rgb: 0 127 152;

    /* Soft accent surfaces derived from same accent */
    --evo-accent-soft: #e9f7f9;
    --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: #182326;
    --ta-text-muted: color-mix(in srgb, var(--sda-cave) 62%, var(--sda-gray));

    /* --------------------------------------------------------------
       LIGHT CANVAS/SURFACES — derived from accent hue
       -------------------------------------------------------------- */
    --ta-border-soft: color-mix(in srgb, var(--sda-cave) 10%, var(--sda-gray-light));

    /* FIX: define sidebar border token for light mode (was missing) */
    --ta-border-sidebar: color-mix(in srgb, var(--sda-cave) 14%, var(--sda-gray-light));

    /* Body canvas follows the Adventist base palette: clean neutral with Ming/Cave tint. */
    --ta-bg: color-mix(in srgb, var(--evo-accent-soft) 42%, #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) 72%, #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) 68%, #ffffff);

    /* Row hover follows same tint direction */
    --ta-row-hover: color-mix(in srgb, var(--evo-accent-soft) 76%, #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(37, 87, 96, 0.10);
    --ta-shadow-nav: 0 12px 30px rgba(37, 87, 96, 0.06);
    --ta-shadow: 0 4px 20px rgba(37, 87, 96, 0.10);

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

    /* Pills / status */
    --ta-pill-new-bg: color-mix(in srgb, var(--sda-treefrog) 12%, #ffffff);
    --ta-pill-new-text: var(--sda-forest);

    --ta-dot-success: var(--sda-treefrog);
    --ta-dot-danger: var(--sda-scarlett);

    --ta-alert-success-bg: color-mix(in srgb, var(--sda-treefrog) 11%, #ffffff);
    --ta-alert-success-text: var(--sda-forest);
    --ta-alert-success-border: color-mix(in srgb, var(--sda-treefrog) 25%, #ffffff);
    --ta-alert-danger-bg: color-mix(in srgb, var(--sda-scarlett) 9%, #ffffff);
    --ta-alert-danger-text: #782832;
    --ta-alert-danger-border: color-mix(in srgb, var(--sda-scarlett) 22%, #ffffff);

    /* 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"] {
    --ta-primary: var(--evo-accent);
    --ta-primary-rgb: 0 127 152;

    /* Dark soft accents */
    --evo-accent-soft: #01161e;
    --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, #01161e 72%, var(--evo-neutral-950) 28%);
    --ta-bg-body: var(--ta-bg);

    --ta-bg-sidebar: color-mix(in srgb, #01161e 82%, var(--evo-neutral-950) 18%);
    --ta-bg-header: color-mix(in srgb, #01161e 70%, var(--evo-neutral-900) 30%);

    --ta-bg-surface: color-mix(in srgb, var(--evo-neutral-900) 86%, var(--sda-cave) 14%);
    --ta-bg-surface-2: color-mix(in srgb, var(--evo-neutral-900) 78%, var(--sda-cave) 22%);

    --ta-row-hover: color-mix(in srgb, var(--evo-neutral-800) 78%, var(--sda-cave) 22%);

    /* 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);

    --ta-alert-success-bg: rgba(34, 197, 94, 0.16);
    --ta-alert-success-text: #bbf7d0;
    --ta-alert-success-border: rgba(34, 197, 94, 0.34);
    --ta-alert-danger-bg: rgba(239, 68, 68, 0.15);
    --ta-alert-danger-text: #fecaca;
    --ta-alert-danger-border: rgba(239, 68, 68, 0.34);

    /* 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 (neutral palette) */
    --ta-bg: color-mix(in srgb, #01161e 72%, var(--evo-neutral-950) 28%);
    --ta-bg-card: color-mix(in srgb, var(--evo-neutral-900) 86%, var(--sda-cave) 14%);
    --ta-bg-card-2: color-mix(in srgb, var(--evo-neutral-800) 80%, var(--sda-cave) 20%);

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

    /* Borders (derived from neutral palette) */
    --ta-border: color-mix(in srgb, var(--sda-ming) 18%, var(--evo-neutral-100) 8%);
    --ta-border-soft: color-mix(in srgb, var(--sda-ming) 14%, var(--evo-neutral-100) 6%);

    /* Table (neutral palette) */
    --ta-table-head-bg: var(--ta-bg-card);
    --ta-table-row-bg: var(--ta-bg-card);
    --ta-table-row-hover: color-mix(in srgb, var(--evo-neutral-800) 78%, var(--sda-cave) 22%);
    --ta-table-divider: color-mix(in srgb, var(--evo-neutral-100) 8%, transparent);

    /* Links/icons (neutral palette) */
    --ta-icon: var(--evo-neutral-200);
    --ta-icon-muted: color-mix(in srgb, var(--evo-neutral-200) 55%, transparent);

    --ta-alert-success-bg: rgba(34, 197, 94, 0.16);
    --ta-alert-success-text: #bbf7d0;
    --ta-alert-success-border: rgba(34, 197, 94, 0.34);
    --ta-alert-danger-bg: rgba(239, 68, 68, 0.15);
    --ta-alert-danger-text: #fecaca;
    --ta-alert-danger-border: rgba(239, 68, 68, 0.34);
}

/* Icon badge: force good contrast in BOTH themes */
.ta-icon-badge{
    background: var(--ta-primary-bg-12);
    color: var(--ta-primary);
    border: 1px solid var(--ta-primary-bg-15);
}

html[data-theme="dark"] .ta-icon-badge{
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--evo-neutral-200);
}

/* Make strokes look crisp in dark mode (optional but helps) */
html[data-theme="dark"] .ta-icon-badge svg{
    stroke: currentColor;
    stroke-width: 2.2;
}

html[data-theme="dark"] :where(button, a, input[type="submit"], input[type="button"])[class*="bg-[var(--ta-primary)]"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--evo-neutral-50) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] :where(button, a, input[type="submit"], input[type="button"])[class*="bg-[var(--ta-primary)]"]:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)) !important;
    border-color: rgba(255, 255, 255, 0.24);
}

html[data-theme="dark"] :where(button, a, input[type="submit"], input[type="button"])[style*="var(--ta-primary)"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: var(--evo-neutral-50) !important;
}

html[data-theme="dark"] :where(button, a, input[type="submit"], input[type="button"]):is(.dark\:bg-white, [class*="dark:bg-white"]) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--evo-neutral-50) !important;
}

/* 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: "Advent Sans", "Noto Sans", "Noto Sans Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--ta-bg-body);
    color: var(--ta-text-main);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* 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: auto;
    overflow-x: hidden;
    background-color: var(--ta-bg-body);
    -webkit-overflow-scrolling: touch;
}

/* Root where module injects content */
/* Root where module injects content */
#appMainContent {
    height: auto;
    min-height: 0; /* IMPORTANT for nested scrolling */
    overflow: visible !important;
    display: block;
}

.evo-module-root:not(.dashboard-root) {
    height: 100%;
    min-height: 0; /* IMPORTANT for nested scrolling */
    overflow: hidden !important; /* stop page scroll */
    display: flex;
    flex-direction: column;
}

.dashboard-root {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
}

/* ================================================================
   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;
    min-width: 0;
}

.sidebar-brand-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.65rem;
    color: inherit;
    text-decoration: none;
}

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

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

.portal-brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    max-width: 1.75rem;
    max-height: 1.75rem;
    border-radius: 0.5rem;
    object-fit: contain;
    flex: 0 0 1.75rem;
}

.portal-brand-wordmark {
    width: 7.5rem;
    max-width: 7.5rem;
    height: auto;
    max-height: 1.75rem;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Align the visible wordmark baseline with the icon bars, ignoring PNG padding. */
.portal-brand-wordmark,
.sidebar-logo-text img {
    transform: translateY(16%);
}

/* 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: 8.25rem;
    max-width: 8.25rem;
    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;
}

/* Theme-aware SVG/icon normalization for admin UI */
:where(.sidebar, .top-nav, .dropdown-card, .evo-module-root) svg {
    color: currentColor;
}

:where(.sidebar, .top-nav, .dropdown-card, .evo-module-root) svg :where(path, circle, rect, line, polyline, polygon) {
    vector-effect: non-scaling-stroke;
}

.sidebar-item > span:first-child,
.dashboard-icon-tile {
    background: color-mix(in srgb, var(--ta-primary) 10%, var(--ta-bg-card));
    border: 1px solid color-mix(in srgb, var(--ta-primary) 14%, var(--ta-border-soft));
    color: color-mix(in srgb, var(--ta-primary) 70%, var(--ta-text-main));
}

html[data-theme="dark"] .sidebar-item > span:first-child,
html[data-theme="dark"] .dashboard-icon-tile {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--evo-neutral-100) !important;
}

html[data-theme="dark"] .sidebar-item-active > span:first-child {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--evo-neutral-50) !important;
}

html[data-theme="dark"] .sidebar-submenu a {
    color: var(--ta-text-muted) !important;
}

html[data-theme="dark"] .sidebar-submenu a:hover {
    color: var(--ta-text-main) !important;
}

/* Super admin dashboard */
.dashboard-root {
    color: var(--ta-text-main);
}

.dashboard-hero,
.dashboard-panel,
.dashboard-metric-card {
    background: var(--ta-bg-card);
    border: 1px solid var(--ta-border-soft);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
}

html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .dashboard-metric-card {
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.dashboard-hero,
.dashboard-panel {
    border-radius: 8px;
    padding: 1.5rem;
}

.dashboard-kicker {
    color: var(--ta-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-title {
    color: var(--ta-text-main);
    font-size: 1.55rem;
    font-weight: 750;
    line-height: 1.2;
}

.dashboard-subtitle,
.dashboard-section-note,
.dashboard-metric-card small,
.dashboard-empty {
    color: var(--ta-text-muted);
}

.dashboard-subtitle {
    margin-top: 0.35rem;
    max-width: 58rem;
}

.dashboard-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    flex: 0 0 auto;
}

.dashboard-icon-tile svg {
    width: 1.25rem;
    height: 1.25rem;
}

.dashboard-icon-tile-primary {
    width: 3.25rem;
    height: 3.25rem;
}

.dashboard-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-card);
    padding: 0.5rem;
}

.dashboard-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.25rem;
    border-radius: 8px;
    color: var(--ta-text-muted);
    padding: 0.7rem 0.9rem;
    text-align: left;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-tab span {
    color: inherit;
    font-size: 0.92rem;
    font-weight: 750;
}

.dashboard-tab strong {
    color: inherit;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 650;
}

.dashboard-tab:hover,
.dashboard-tab:focus-visible {
    background: var(--ta-surface-soft);
    color: var(--ta-text-main);
}

.dashboard-tab:focus-visible {
    outline: 3px solid var(--ta-primary-ring);
    outline-offset: 2px;
}

.dashboard-tab.is-active {
    background: var(--ta-primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.dashboard-tab-panel[hidden] {
    display: none !important;
}

.dashboard-section {
    display: grid;
    gap: 1rem;
}

.dashboard-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-insight-card,
.dashboard-church-table {
    background: var(--ta-bg-card);
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    padding: 1rem;
}

.dashboard-insight-card-primary {
    background: linear-gradient(135deg, var(--sda-ming), color-mix(in srgb, var(--sda-cave) 72%, var(--sda-forest) 28%));
    color: #fff;
}

.dashboard-insight-card span,
.dashboard-list-title {
    display: block;
    color: var(--ta-text-muted);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dashboard-insight-card-primary span,
.dashboard-insight-card-primary small {
    color: rgba(255, 255, 255, 0.78);
}

.dashboard-insight-card strong {
    display: block;
    margin-top: 0.45rem;
    color: inherit;
    font-size: clamp(1.2rem, 2vw, 1.85rem);
    font-weight: 850;
    line-height: 1.1;
}

.dashboard-insight-card small {
    display: block;
    margin-top: 0.55rem;
    color: var(--ta-text-muted);
    line-height: 1.45;
}

.dashboard-church-table {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
}

.dashboard-church-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--ta-border-soft);
    padding: 0.7rem 0;
}

.dashboard-church-row:last-child {
    border-bottom: 0;
}

.dashboard-church-row strong {
    display: block;
    color: var(--ta-text-main);
    font-size: 0.92rem;
    font-weight: 750;
}

.dashboard-church-row span {
    display: block;
    margin-top: 0.18rem;
    color: var(--ta-text-muted);
    font-size: 0.78rem;
}

.dashboard-church-row > div:last-child {
    text-align: right;
}

.dashboard-panel-wide {
    grid-column: 1 / -1;
}

.dashboard-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.dashboard-section-title {
    color: var(--ta-text-main);
    font-size: 1.15rem;
    font-weight: 750;
    line-height: 1.25;
}

.dashboard-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.dashboard-metric-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.dashboard-metric-card {
    border-radius: 8px;
    min-height: 7.4rem;
    padding: 1rem;
    min-width: 0;
}

.dashboard-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ta-text-muted);
    font-size: 0.9rem;
    min-width: 0;
}

.dashboard-card-head > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-metric-card strong {
    display: block;
    margin-top: 0.85rem;
    color: var(--ta-text-main);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
}

.dashboard-label {
    color: var(--ta-text-muted);
    font-size: 0.86rem;
}

.dashboard-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1rem;
}

.dashboard-split-developer {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
}

.command-center-root {
    --command-ok: #22c55e;
    --command-info: var(--ta-primary);
    --command-warn: #f59e0b;
    --command-danger: #ef4444;
}

.command-hero {
    overflow: hidden;
}

.command-identity-grid,
.command-card-grid,
.command-layout-two,
.command-db-grid {
    display: grid;
    gap: 0.75rem;
}

.command-identity-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    min-width: min(100%, 42rem);
}

.command-identity-grid div,
.command-db-grid article {
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-card) 88%, var(--ta-text-main) 4%);
    padding: 0.75rem;
}

.command-identity-grid span,
.command-db-grid span {
    display: block;
    color: var(--ta-text-muted);
    font-size: 0.75rem;
}

.command-identity-grid strong,
.command-db-grid strong {
    display: block;
    color: var(--ta-text-main);
    font-size: 0.9rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.command-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.command-card-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.command-card-grid .dashboard-metric-card {
    min-height: 6.75rem;
}

.command-card-grid .dashboard-metric-card strong {
    font-size: 1.55rem;
}

.command-layout-two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.command-check-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
}

.command-check-row {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) auto minmax(10rem, 1.3fr);
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--ta-border-soft);
    border-left: 4px solid var(--command-info);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}

.command-check-row span,
.command-table td,
.command-table th {
    color: var(--ta-text-main);
}

.command-check-row strong,
.command-pill,
.command-chip,
.command-warning-row em {
    border-radius: 999px;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 750;
    padding: 0.25rem 0.55rem;
    text-transform: lowercase;
}

.command-check-row small,
.command-table small,
.command-db-grid small,
.command-warning-row small {
    color: var(--ta-text-muted);
    display: block;
}

.command-status-healthy {
    border-left-color: var(--command-ok) !important;
}

.command-status-warning {
    border-left-color: var(--command-warn) !important;
}

.command-status-missing,
.command-status-broken {
    border-left-color: var(--command-danger) !important;
}

.command-status-info {
    border-left-color: var(--command-info) !important;
}

.command-warning-row {
    align-items: flex-start;
}

.command-warning-row span {
    display: grid;
    gap: 0.2rem;
    white-space: normal;
}

.command-severity-critical em,
.command-pill-broken,
.command-chip-danger {
    background: color-mix(in srgb, var(--command-danger) 18%, transparent);
    color: var(--command-danger);
}

.command-severity-warning em,
.command-pill-partial,
.command-chip-warning {
    background: color-mix(in srgb, var(--command-warn) 18%, transparent);
    color: var(--command-warn);
}

.command-severity-info em,
.command-pill-healthy,
.command-chip-ok {
    background: color-mix(in srgb, var(--command-ok) 18%, transparent);
    color: var(--command-ok);
}

.command-table-wrap {
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    margin-top: 1rem;
    overflow: auto;
}

.command-table-tall {
    max-height: 34rem;
}

.command-table {
    border-collapse: collapse;
    min-width: 52rem;
    width: 100%;
}

.command-table th {
    background: color-mix(in srgb, var(--ta-bg-card) 80%, var(--ta-primary) 10%);
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    letter-spacing: 0;
    padding: 0.85rem;
    text-align: left;
    text-transform: uppercase;
}

.command-table td {
    border-top: 1px solid var(--ta-border-soft);
    padding: 0.75rem 0.85rem;
    vertical-align: top;
}

.command-db-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-top: 1rem;
}

.command-chip-cloud {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.command-chip-cloud strong {
    color: var(--ta-text-main);
    flex: 1 0 100%;
    font-size: 0.85rem;
}

.command-trend-list {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    margin-top: 1rem;
}

.command-trend-list div {
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    padding: 0.65rem;
}

.command-trend-list span {
    color: var(--ta-text-muted);
    display: block;
    font-size: 0.75rem;
}

.command-trend-list strong {
    color: var(--ta-text-main);
    display: block;
    font-size: 1.15rem;
}

@media (max-width: 1100px) {
    .command-layout-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .command-check-row {
        grid-template-columns: 1fr;
    }
}

.dashboard-money-row,
.dashboard-dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.dashboard-money-row article,
.dashboard-dev-grid article {
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    padding: 0.9rem;
    background: color-mix(in srgb, var(--ta-bg-card) 86%, var(--ta-text-main) 3%);
}

.dashboard-money-row span,
.dashboard-dev-grid span {
    display: block;
    color: var(--ta-text-muted);
    font-size: 0.82rem;
}

.dashboard-money-row strong,
.dashboard-dev-grid strong {
    display: block;
    margin-top: 0.45rem;
    color: var(--ta-text-main);
    font-size: 1.4rem;
    font-weight: 800;
}

.dashboard-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
}

.dashboard-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--ta-border-soft);
    padding: 0.55rem 0;
    min-width: 0;
}

.dashboard-list-row span {
    color: var(--ta-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-row strong {
    color: var(--ta-text-main);
    flex: 0 0 auto;
    font-size: 0.88rem;
}

.dashboard-link {
    color: var(--ta-primary);
    font-size: 0.85rem;
    font-weight: 650;
}

@media (max-width: 1023px) {
    .dashboard-split,
    .dashboard-split-developer {
        grid-template-columns: 1fr;
    }

    .dashboard-insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199px) {
    .dashboard-metric-grid-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-metric-grid-wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-root {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .dashboard-tabs {
        grid-template-columns: 1fr;
    }

    .dashboard-tab {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-dashboard-tabs {
        width: 100%;
    }

    .public-dashboard-tabs .dashboard-tab {
        align-items: center;
        flex: 1 0 auto;
        flex-direction: row;
    }

    .dashboard-hero,
    .dashboard-panel {
        padding: 1rem;
    }

    .dashboard-title {
        font-size: 1.25rem;
    }

    .dashboard-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-church-row {
        grid-template-columns: 1fr;
    }

    .dashboard-church-row > div:last-child {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .dashboard-metric-grid-wide {
        grid-template-columns: 1fr;
    }
}

/* Public church dashboard */
.public-dashboard-root {
    color: var(--ta-text-main);
}

.public-dashboard-tabs {
    display: grid;
    grid-template-columns: repeat(var(--public-dashboard-tab-count, 1), minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-surface);
    padding: 0.3rem;
}

.public-dashboard-tabs .dashboard-tab {
    align-items: center;
    flex-direction: row;
    justify-content: center;
    min-height: 2.45rem;
    min-width: 0;
    width: 100%;
    padding: 0.55rem 0.8rem;
    text-align: center;
    white-space: normal;
}

.public-dashboard-tabs .dashboard-tab strong {
    display: none;
}

.public-dashboard-tabs .dashboard-tab.is-active {
    background: var(--ta-primary-bg-12);
    color: var(--ta-primary);
    box-shadow: none;
}

.public-dashboard-hero,
.public-dashboard-panel,
.public-dashboard-kpi {
    background: var(--ta-bg-surface);
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
}

.public-dashboard-hero {
    overflow: hidden;
    position: relative;
}

.public-dashboard-hero::before,
.public-dashboard-account-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--ta-primary) 16%, transparent), transparent 48%),
        linear-gradient(90deg, color-mix(in srgb, var(--ta-text-main) 5%, transparent), transparent 60%);
    pointer-events: none;
}

.public-dashboard-account-card {
    overflow: hidden;
    position: relative;
}

.public-dashboard-account-card > * {
    position: relative;
}

.public-dashboard-account-layout {
    display: grid;
    grid-template-columns: minmax(30rem, 1fr) minmax(0, 1.55fr);
    gap: 1rem;
    align-items: stretch;
}

.public-dashboard-account-identity {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--ta-border) 82%, var(--ta-primary) 18%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-surface) 78%, var(--ta-primary) 9%);
    padding: 1.15rem;
}

.public-dashboard-account-head {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.public-dashboard-account-avatar {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ta-border) 68%, var(--ta-primary) 32%);
    background: color-mix(in srgb, var(--ta-primary) 14%, var(--ta-bg-main) 86%);
    color: color-mix(in srgb, var(--ta-primary) 70%, var(--ta-text-main) 30%);
    font-size: 1.35rem;
    font-weight: 850;
    text-transform: uppercase;
}

.public-dashboard-account-name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.public-dashboard-account-name-line h2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.public-dashboard-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 1.65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ta-border) 72%, var(--ta-primary) 28%);
    background: color-mix(in srgb, var(--ta-bg-main) 82%, var(--ta-primary) 10%);
    color: var(--ta-text-muted);
    padding: 0.18rem 0.55rem 0.18rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
}

.public-dashboard-verified-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-text-muted) 18%, transparent);
    color: var(--ta-bg-surface);
    font-size: 0.75rem;
    font-weight: 950;
}

.public-dashboard-verified-mark::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.9;
}

.public-dashboard-verified-badge.is-verified .public-dashboard-verified-mark::before {
    content: "\2713";
    width: auto;
    height: auto;
    background: transparent;
}

.public-dashboard-verified-badge.is-verified {
    border-color: color-mix(in srgb, var(--ta-primary) 58%, var(--ta-border) 42%);
    background: color-mix(in srgb, var(--ta-primary) 15%, var(--ta-bg-surface) 85%);
    color: color-mix(in srgb, var(--ta-primary) 82%, var(--ta-text-main) 18%);
}

.public-dashboard-verified-badge.is-verified .public-dashboard-verified-mark {
    background: var(--ta-primary);
    color: #fff;
}

.public-dashboard-verified-badge.is-unverified {
    border-color: color-mix(in srgb, #d97706 48%, var(--ta-border) 52%);
    background: color-mix(in srgb, #f59e0b 12%, var(--ta-bg-surface) 88%);
    color: color-mix(in srgb, #92400e 70%, var(--ta-text-main) 30%);
}

.public-dashboard-verified-badge.is-unverified .public-dashboard-verified-mark {
    background: color-mix(in srgb, #f59e0b 16%, var(--ta-bg-surface) 84%);
    color: #d97706;
}

.public-dashboard-verified-badge.is-neutral {
    background: color-mix(in srgb, var(--ta-bg-main) 88%, var(--ta-text-muted) 5%);
    color: var(--ta-text-muted);
}

.public-dashboard-verified-badge.is-danger {
    border-color: color-mix(in srgb, #dc2626 44%, var(--ta-border) 56%);
    background: color-mix(in srgb, #dc2626 10%, var(--ta-bg-surface) 90%);
    color: color-mix(in srgb, #b91c1c 76%, var(--ta-text-main) 24%);
}

.public-dashboard-verified-badge.is-danger .public-dashboard-verified-mark {
    background: color-mix(in srgb, #dc2626 18%, var(--ta-bg-surface) 82%);
    color: #dc2626;
}

.public-dashboard-verified-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.public-dashboard-account-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-left: 0;
    max-width: none;
}

.public-dashboard-account-meta > div {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--ta-border) 82%, var(--ta-primary) 18%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-main) 88%, var(--ta-primary) 5%);
    padding: 0.58rem 0.68rem;
}

.public-dashboard-account-meta span {
    display: block;
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.public-dashboard-account-meta strong {
    display: block;
    margin-top: 0.18rem;
    color: var(--ta-text-main);
    font-size: clamp(0.86rem, 1vw, 1rem);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.public-dashboard-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.public-dashboard-hero-inner {
    position: relative;
    padding: 1.5rem;
}

.public-dashboard-scope {
    align-self: stretch;
    display: grid;
    align-content: center;
    min-width: min(100%, 17rem);
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-surface) 82%, var(--ta-primary) 8%);
    padding: 1rem;
}

.public-dashboard-scope span,
.public-dashboard-period {
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
}

.public-dashboard-scope strong {
    margin-top: 0.25rem;
    color: var(--ta-text-main);
    font-size: 1rem;
}

.public-dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    justify-items: stretch;
}

.public-dashboard-kpi,
.public-dashboard-panel {
    padding: 1.25rem;
}

.public-dashboard-kpi {
    width: 100%;
    max-width: none;
}

.public-dashboard-kpi-total {
    background: linear-gradient(135deg, var(--sda-ming), color-mix(in srgb, var(--sda-cave) 70%, var(--sda-forest) 30%));
    color: #fff;
}

.public-dashboard-kpi-total p,
.public-dashboard-kpi-total span {
    color: rgba(255, 255, 255, 0.78) !important;
}

.public-dashboard-kpi-total .font-semibold {
    color: #fff !important;
}

.public-dashboard-split-card {
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-main) 88%, var(--ta-primary) 5%);
    padding: 1rem;
    min-width: 0;
}

.public-dashboard-split-card-total {
    background: linear-gradient(135deg, var(--sda-ming), color-mix(in srgb, var(--sda-cave) 70%, var(--sda-forest) 30%));
    border-color: color-mix(in srgb, var(--sda-ming) 68%, #ffffff 16%);
    color: #fff;
}

.public-dashboard-split-card-total p,
.public-dashboard-split-card-total span {
    color: rgba(255, 255, 255, 0.78) !important;
}

.public-dashboard-split-card-total .font-semibold,
.public-dashboard-split-card-total .text-3xl {
    color: #fff !important;
}

.public-dashboard-user-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(5rem, 1fr);
    gap: 0.75rem;
    align-content: stretch;
    width: 100%;
}

@media (min-width: 640px) {
    .public-dashboard-user-profile {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .public-dashboard-user-profile {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.public-dashboard-user-profile-card,
.public-dashboard-recent-row {
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-main) 90%, var(--ta-primary) 4%);
    padding: 0.85rem;
    min-width: 0;
    min-height: 5rem;
}

.public-dashboard-user-profile-card-wide {
    grid-column: span 2;
}

.public-dashboard-user-profile span,
.public-dashboard-recent-row span,
.public-dashboard-recent-row small {
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.public-dashboard-user-profile span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.public-dashboard-user-profile strong,
.public-dashboard-recent-row strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--ta-text-main);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.public-dashboard-user-profile strong span {
    display: inline;
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.public-dashboard-year-chart-wrap {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--ta-border) 78%, var(--ta-primary) 22%);
    border-radius: 8px;
    background:
            radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--ta-primary) 13%, transparent) 0, transparent 32%),
            color-mix(in srgb, var(--ta-bg-main) 92%, var(--ta-primary) 4%);
    padding: 1rem;
    overflow: hidden;
}

.public-dashboard-year-chart {
    position: relative;
    min-height: 21rem;
}

.public-dashboard-year-chart-svg {
    display: block;
    width: 100%;
    height: clamp(18rem, 36vw, 26rem);
    overflow: visible;
}

.public-dashboard-chart-grid {
    stroke: color-mix(in srgb, var(--ta-border) 72%, transparent);
    stroke-width: 1;
}

.public-dashboard-chart-month {
    fill: var(--ta-text-muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.public-dashboard-chart-column {
    fill: color-mix(in srgb, var(--ta-primary) 18%, transparent);
}

.public-dashboard-chart-area {
    fill: url(#dashboardYearAreaGradient);
}

.public-dashboard-chart-line {
    fill: none;
    stroke: color-mix(in srgb, var(--ta-primary) 86%, #ffffff 14%);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--ta-primary) 18%, transparent));
}

.public-dashboard-chart-dot {
    fill: var(--ta-bg-main);
    stroke: color-mix(in srgb, var(--ta-primary) 86%, #ffffff 14%);
    stroke-width: 4;
    transition: r 0.16s ease, fill 0.16s ease;
}

.public-dashboard-chart-point:hover .public-dashboard-chart-dot,
.public-dashboard-chart-point:focus .public-dashboard-chart-dot {
    r: 8;
    fill: color-mix(in srgb, var(--ta-primary) 24%, var(--ta-bg-main));
}

.public-dashboard-chart-tooltip {
    position: absolute;
    z-index: 4;
    min-width: 8.5rem;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 42%, var(--ta-border) 58%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-surface) 94%, var(--ta-primary) 6%);
    box-shadow: var(--ta-shadow-soft);
    padding: 0.55rem 0.7rem;
    pointer-events: none;
}

.public-dashboard-chart-tooltip strong,
.public-dashboard-chart-tooltip span {
    display: block;
}

.public-dashboard-chart-tooltip strong {
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.public-dashboard-chart-tooltip span {
    margin-top: 0.2rem;
    color: var(--ta-text-main);
    font-size: 0.95rem;
    font-weight: 900;
}

.public-dashboard-recent-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.6fr) minmax(7rem, auto);
    gap: 0.25rem 0.75rem;
    align-items: center;
}

.public-dashboard-recent-row strong {
    margin-top: 0;
    text-align: right;
}

.public-dashboard-recent-row small {
    grid-column: 1 / -1;
}

.public-dashboard-chart-card {
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-main) 90%, var(--ta-primary) 4%);
    padding: 1rem;
    min-width: 0;
}

.public-dashboard-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.public-dashboard-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.public-dashboard-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
}

.public-dashboard-dot-current {
    background: var(--ta-primary);
}

.public-dashboard-dot-last {
    background: color-mix(in srgb, var(--ta-text-muted) 72%, transparent);
}

.public-dashboard-bar-row {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(10rem, 1.4fr) minmax(8rem, auto);
    align-items: center;
    gap: 0.9rem;
}

.public-dashboard-bar-label,
.public-dashboard-bar-value,
.public-dashboard-compare-row span,
.public-dashboard-stack-row span {
    font-size: 0.86rem;
}

.public-dashboard-bar-label,
.public-dashboard-compare-row span,
.public-dashboard-stack-row span {
    color: var(--ta-text-main);
    font-weight: 760;
}

.public-dashboard-bar-value,
.public-dashboard-compare-row strong,
.public-dashboard-stack-row strong {
    color: var(--ta-text-main);
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.public-dashboard-bar-track {
    position: relative;
    height: 2rem;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-card) 84%, var(--ta-primary) 6%);
    border: 1px solid color-mix(in srgb, var(--ta-border) 76%, var(--ta-primary) 24%);
}

.public-dashboard-bar-current,
.public-dashboard-bar-last {
    position: absolute;
    left: 0;
    height: 0.65rem;
    min-width: 0.25rem;
    border-radius: 999px;
}

.public-dashboard-bar-current {
    top: 0.35rem;
    background: linear-gradient(90deg, var(--ta-primary), color-mix(in srgb, var(--ta-primary) 70%, #ffffff 30%));
}

.public-dashboard-bar-last {
    bottom: 0.35rem;
    background: color-mix(in srgb, var(--ta-text-muted) 58%, transparent);
}

.public-dashboard-compare-row,
.public-dashboard-stack-row {
    display: grid;
    gap: 0.55rem;
}

.public-dashboard-compare-row {
    padding: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--ta-border) 76%, var(--ta-primary) 24%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-card) 88%, var(--ta-primary) 5%);
}

.public-dashboard-compare-row-total {
    background: color-mix(in srgb, var(--ta-primary) 13%, var(--ta-bg-card) 87%);
}

.public-dashboard-compare-track {
    position: relative;
    height: 2.2rem;
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-main) 86%, var(--ta-primary) 7%);
}

.public-dashboard-compare-current,
.public-dashboard-compare-last {
    position: absolute;
    left: 0;
    height: 0.78rem;
    min-width: 0.25rem;
    border-radius: 999px;
}

.public-dashboard-compare-current {
    top: 0.35rem;
    background: linear-gradient(90deg, var(--ta-primary), color-mix(in srgb, var(--ta-primary) 65%, #ffffff 35%));
}

.public-dashboard-compare-last {
    bottom: 0.35rem;
    background: color-mix(in srgb, var(--ta-text-muted) 60%, transparent);
}

.public-dashboard-compare-row small,
.public-dashboard-stack-row small {
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.public-dashboard-stack {
    display: flex;
    height: 1.1rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-bg-card) 80%, var(--ta-primary) 5%);
    border: 1px solid color-mix(in srgb, var(--ta-border) 74%, var(--ta-primary) 26%);
}

.public-dashboard-stack-58 {
    background: var(--ta-primary);
}

.public-dashboard-stack-42 {
    background: color-mix(in srgb, var(--ta-primary) 30%, var(--ta-text-main) 35%);
}

.public-dashboard-stack-58,
.public-dashboard-stack-42 {
    min-width: 0;
}

.public-dashboard-quarter-current {
    background: color-mix(in srgb, var(--ta-primary) 12%, transparent);
    color: color-mix(in srgb, var(--ta-primary) 72%, var(--ta-text-main));
    font-weight: 850;
}

html[data-theme="dark"] .public-dashboard-quarter-current {
    background: rgba(126, 216, 232, 0.10);
    color: #eaffff;
}

html[data-theme="dark"] .public-dashboard-chart-card,
html[data-theme="dark"] .public-dashboard-compare-row,
html[data-theme="dark"] .public-dashboard-user-profile-card,
html[data-theme="dark"] .public-dashboard-recent-row,
html[data-theme="dark"] .public-dashboard-year-chart-wrap,
html[data-theme="dark"] .public-dashboard-chart-tooltip {
    background: rgba(3, 30, 35, 0.78);
    border-color: rgba(126, 216, 232, 0.18);
}

html[data-theme="dark"] .public-dashboard-compare-row-total {
    background: rgba(126, 216, 232, 0.10);
}

html[data-theme="dark"] .public-dashboard-bar-track,
html[data-theme="dark"] .public-dashboard-compare-track,
html[data-theme="dark"] .public-dashboard-stack {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(126, 216, 232, 0.14);
}

html[data-theme="dark"] .public-dashboard-bar-last,
html[data-theme="dark"] .public-dashboard-compare-last {
    background: rgba(229, 247, 250, 0.38);
}

.public-dashboard-table-shell {
    width: 100%;
}

.public-dashboard-allocation-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate !important;
    border-spacing: 0;
    isolation: isolate;
    --public-dashboard-allocation-sticky-bg: color-mix(in srgb, var(--ta-primary) 5%, var(--ta-bg-surface) 95%);
    --public-dashboard-allocation-sticky-head-bg: color-mix(in srgb, var(--ta-primary) 8%, var(--ta-bg-surface) 92%);
    --public-dashboard-allocation-sticky-strong-bg: color-mix(in srgb, var(--ta-primary) 12%, var(--ta-bg-surface) 88%);
    --public-dashboard-allocation-sticky-edge: color-mix(in srgb, var(--ta-primary) 25%, var(--ta-border-soft));
}

.public-dashboard-allocation-table .public-dashboard-allocation-sticky-cell {
    position: sticky;
    left: 0;
    z-index: 5;
    width: 14.5rem;
    min-width: 14.5rem;
    max-width: 14.5rem;
    background: var(--public-dashboard-allocation-sticky-bg) !important;
    background-clip: border-box;
    box-shadow:
        1px 0 0 var(--public-dashboard-allocation-sticky-edge),
        14px 0 18px -18px rgba(0, 0, 0, 0.7) !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
}

.public-dashboard-allocation-table th:not(.public-dashboard-allocation-sticky-cell),
.public-dashboard-allocation-table td:not(.public-dashboard-allocation-sticky-cell) {
    min-width: 11.5rem;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.public-dashboard-allocation-table thead th:not(.public-dashboard-allocation-sticky-cell) {
    overflow-wrap: normal;
    white-space: nowrap;
}

.public-dashboard-allocation-table thead .public-dashboard-allocation-sticky-cell {
    z-index: 8;
    background: var(--public-dashboard-allocation-sticky-head-bg) !important;
    vertical-align: middle;
    text-align: left;
}

.public-dashboard-allocation-row-sub td:first-child {
    padding-left: 2rem !important;
    color: var(--ta-text-muted);
}

.public-dashboard-allocation-row-field td:first-child,
.public-dashboard-allocation-row-special td:first-child {
    color: var(--ta-text-main);
}

.public-dashboard-allocation-row-total td,
.public-dashboard-allocation-row-grand td {
    background: var(--public-dashboard-allocation-sticky-strong-bg) !important;
    font-weight: 850;
}

.public-dashboard-allocation-row-total .public-dashboard-allocation-sticky-cell,
.public-dashboard-allocation-row-grand .public-dashboard-allocation-sticky-cell {
    background: var(--public-dashboard-allocation-sticky-strong-bg) !important;
}

.public-dashboard-allocation-row-grand td {
    border-top: 3px solid color-mix(in srgb, var(--ta-primary) 10%, var(--ta-text-main) 90%) !important;
}

.public-dashboard-sabbath-table {
    border-collapse: collapse;
    width: 100%;
}

.public-dashboard-summary-head th {
    background: color-mix(in srgb, var(--ta-primary) 8%, var(--ta-bg-card) 92%) !important;
    border-bottom: 3px solid color-mix(in srgb, var(--ta-primary) 10%, var(--ta-text-main) 90%) !important;
    color: var(--ta-text-main) !important;
    font-weight: 850 !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
}

.public-dashboard-sabbath-table tbody td {
    border-bottom: 1px solid color-mix(in srgb, var(--ta-primary) 5%, var(--ta-border-soft) 95%) !important;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.public-dashboard-sabbath-table tbody tr:hover td {
    background: rgb(var(--ta-primary-rgb) / 0.10) !important;
}

.public-dashboard-allocation-table tbody tr:hover .public-dashboard-allocation-sticky-cell {
    background: var(--public-dashboard-allocation-sticky-strong-bg) !important;
}

.public-dashboard-sabbath-table tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 var(--ta-primary);
}

.public-dashboard-sabbath-table th:last-child,
.public-dashboard-sabbath-table tbody td:last-child {
    background: color-mix(in srgb, var(--ta-primary) 5%, var(--ta-bg-card) 95%) !important;
    border-left: 2px solid color-mix(in srgb, var(--ta-primary) 28%, var(--ta-border)) !important;
    font-weight: 800;
}

.public-dashboard-allocation-table thead tr:last-child th:nth-last-child(-n+3),
.public-dashboard-allocation-table tbody td:nth-last-child(-n+3) {
    background: color-mix(in srgb, var(--ta-primary) 5%, var(--ta-bg-card) 95%) !important;
    font-weight: 800;
    min-width: 12.5rem;
}

.public-dashboard-allocation-table thead tr:last-child th:nth-last-child(3),
.public-dashboard-allocation-table tbody td:nth-last-child(3) {
    border-left: 2px solid color-mix(in srgb, var(--ta-primary) 28%, var(--ta-border)) !important;
}

.public-dashboard-summary-total td {
    background: color-mix(in srgb, var(--ta-primary) 14%, var(--ta-bg-card) 86%) !important;
    border-top: 4px solid color-mix(in srgb, var(--ta-primary) 10%, var(--ta-text-main) 90%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ta-primary) 28%, var(--ta-border)) !important;
    color: var(--ta-text-main) !important;
    font-weight: 850 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}

.public-dashboard-summary-total td:last-child {
    background: color-mix(in srgb, var(--ta-primary) 20%, var(--ta-bg-card) 80%) !important;
    border-left: 2px solid color-mix(in srgb, var(--ta-primary) 42%, var(--ta-border)) !important;
}

.public-dashboard-sabbath-table tbody tr:hover td:last-child {
    background: rgb(var(--ta-primary-rgb) / 0.14) !important;
}

.public-dashboard-allocation-table tbody tr:hover td:nth-last-child(-n+3) {
    background: rgb(var(--ta-primary-rgb) / 0.14) !important;
}

html[data-theme="dark"] .public-dashboard-summary-head th {
    background: rgba(126, 216, 232, 0.12) !important;
    border-bottom-color: rgba(244, 251, 253, 0.60) !important;
    color: rgba(244, 251, 253, 0.96) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .public-dashboard-allocation-table .public-dashboard-allocation-sticky-cell {
    background: #102b31 !important;
}

html[data-theme="dark"] .public-dashboard-allocation-table thead .public-dashboard-allocation-sticky-cell {
    background: #12343c !important;
}

html[data-theme="dark"] .public-dashboard-sabbath-table tbody td {
    border-bottom-color: rgba(126, 216, 232, 0.14) !important;
}

html[data-theme="dark"] .public-dashboard-sabbath-table tbody tr:hover td {
    background: rgba(126, 216, 232, 0.16) !important;
}

html[data-theme="dark"] .public-dashboard-allocation-table tbody tr:hover .public-dashboard-allocation-sticky-cell {
    background: #1d454d !important;
}

html[data-theme="dark"] .public-dashboard-sabbath-table th:last-child,
html[data-theme="dark"] .public-dashboard-sabbath-table tbody td:last-child {
    background: rgba(126, 216, 232, 0.075) !important;
    border-left-color: rgba(126, 216, 232, 0.30) !important;
}

html[data-theme="dark"] .public-dashboard-allocation-table thead tr:last-child th:nth-last-child(-n+3),
html[data-theme="dark"] .public-dashboard-allocation-table tbody td:nth-last-child(-n+3) {
    background: rgba(126, 216, 232, 0.075) !important;
}

html[data-theme="dark"] .public-dashboard-allocation-table thead tr:last-child th:nth-last-child(3),
html[data-theme="dark"] .public-dashboard-allocation-table tbody td:nth-last-child(3) {
    border-left-color: rgba(126, 216, 232, 0.30) !important;
}

html[data-theme="dark"] .public-dashboard-summary-total td {
    background: rgba(126, 216, 232, 0.14) !important;
    border-top-color: rgba(244, 251, 253, 0.72) !important;
    border-bottom-color: rgba(126, 216, 232, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] .public-dashboard-allocation-row-total .public-dashboard-allocation-sticky-cell,
html[data-theme="dark"] .public-dashboard-allocation-row-grand .public-dashboard-allocation-sticky-cell {
    background: #1d454d !important;
}

html[data-theme="dark"] .public-dashboard-summary-total td:last-child {
    background: rgba(126, 216, 232, 0.20) !important;
    border-left-color: rgba(126, 216, 232, 0.46) !important;
}

html[data-theme="dark"] .public-dashboard-sabbath-table tbody tr:hover td:last-child {
    background: rgba(126, 216, 232, 0.20) !important;
}

html[data-theme="dark"] .public-dashboard-allocation-table tbody tr:hover td:nth-last-child(-n+3) {
    background: rgba(126, 216, 232, 0.20) !important;
}

.receipt-format-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid var(--ta-border);
    border-radius: 1rem;
    background: var(--ta-bg-card);
}

.receipt-format-options {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.25rem;
    border: 1px solid var(--ta-border);
    border-radius: 0.85rem;
    background: var(--ta-bg-main);
}

.receipt-format-option,
.receipt-format-download {
    border: 1px solid transparent;
    border-radius: 0.7rem;
    padding: 0.65rem 1rem;
    color: var(--ta-text-main);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.receipt-format-option {
    background: transparent;
}

.receipt-format-option.is-active,
.receipt-format-download {
    border-color: rgba(8, 145, 178, 0.45);
    background: var(--ta-primary, #007f98);
    color: #fff;
}

/* Public member registration: progressive, low-literacy onboarding. */
.auth-register-page {
    overflow-x: clip;
}

.auth-register-page .auth-shell {
    width: 100%;
    padding-inline: 0.65rem;
}

.auth-register-page .auth-slot > .w-full {
    width: min(48rem, 100%);
    min-width: 0;
    max-width: 100%;
}

.registration-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 1rem !important;
}

.auth-register-page .auth-shell,
.auth-register-page .auth-slot,
.auth-register-page .evo-auth-navbar,
#registrationForm,
.registration-section,
.registration-section .grid,
.registration-section .form-group {
    min-width: 0;
    max-width: 100%;
}

.registration-section .form-group {
    margin-bottom: 0;
}

.registration-progress {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    align-items: start;
    gap: 0.5rem;
    max-width: 36rem;
    margin: 0 auto 1.5rem;
}

.registration-progress span {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    color: var(--ta-text-muted);
}

.registration-progress span b {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--ta-border-soft);
    border-radius: 999px;
    background: var(--ta-bg-surface);
    font-size: 0.8rem;
}

.registration-progress span.is-active b {
    border-color: var(--ta-primary);
    background: var(--ta-primary);
    color: #fff;
}

.registration-progress span small {
    font-size: 0.62rem;
    font-weight: 700;
}

.registration-progress i {
    height: 1px;
    margin-top: 1rem;
    background: var(--ta-border-soft);
}

.registration-section {
    padding: 1rem 0.85rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--ta-bg-surface) 96%, var(--ta-primary) 4%);
}

.registration-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.registration-section-heading > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--ta-primary) 14%, var(--ta-bg-surface));
    color: var(--ta-primary);
    font-weight: 800;
}

.registration-section-heading h2 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 1rem;
    font-weight: 750;
}

.registration-section-heading p {
    margin: 0.15rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.registration-section .form-control {
    min-height: 3rem;
}

.registration-section input[type="file"].form-control {
    min-height: 3.35rem;
    padding: 0.65rem;
}

.registration-inline-status {
    min-height: 1.25rem;
    margin-top: 0.7rem;
    color: var(--ta-text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.registration-inline-status[data-tone="success"] { color: #15803d; }
.registration-inline-status[data-tone="warning"] { color: #b45309; }
.registration-inline-status[data-tone="danger"] { color: #b91c1c; }

.registration-channel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.registration-channel-option {
    position: relative;
    cursor: pointer;
}

.registration-channel-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.registration-channel-option > span {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 0.75rem;
    background: var(--ta-bg-surface);
    color: var(--ta-text-main);
}

.registration-channel-option svg {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    color: var(--ta-primary);
}

.registration-channel-option small {
    display: block;
    margin-left: auto;
    color: var(--ta-text-muted);
    font-size: 0.68rem;
}

.registration-channel-option > input:checked + span {
    border-color: var(--ta-primary);
    background: color-mix(in srgb, var(--ta-primary) 9%, var(--ta-bg-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ta-primary) 14%, transparent);
}

.registration-channel-option > input:focus-visible + span {
    outline: 2px solid var(--ta-primary);
    outline-offset: 2px;
}

.registration-channel-option.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.registration-code-input {
    letter-spacing: 0.28em;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}

.registration-verification-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0.75rem;
}

.registration-verification-row .registration-secondary-button {
    min-height: 3rem;
}

.registration-secondary-button,
.registration-submit-button,
.registration-primary-link,
.registration-secondary-link {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    font-weight: 750;
    transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.registration-secondary-button,
.registration-secondary-link {
    border: 1px solid color-mix(in srgb, var(--ta-primary) 42%, var(--ta-border-soft));
    background: var(--ta-bg-surface);
    color: var(--ta-primary);
}

.registration-secondary-button {
    width: 100%;
}

.registration-submit-button,
.registration-primary-link {
    border: 1px solid var(--ta-primary);
    background: var(--ta-primary);
    color: #fff;
}

.registration-submit-button {
    width: 100%;
    min-height: 3.25rem;
    font-size: 1rem;
}

.registration-secondary-button:hover,
.registration-submit-button:hover,
.registration-primary-link:hover,
.registration-secondary-link:hover {
    transform: translateY(-1px);
}

.registration-secondary-button:disabled,
.registration-submit-button:disabled {
    cursor: wait;
    opacity: 0.62;
    transform: none;
}

.registration-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 0.45rem;
    color: var(--ta-text-muted);
}

html body.auth-page.public-auth-page.auth-register-page [data-evo-toggle-password].registration-password-toggle {
    right: 0.125rem;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0.75rem !important;
}

.registration-password-toggle:focus-visible {
    outline: 2px solid var(--ta-primary);
    outline-offset: 1px;
}
.registration-password-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.registration-password-toggle [data-evo-eye-off] { display: none; }
.registration-password-toggle[aria-pressed="true"] [data-evo-eye] { display: none; }
.registration-password-toggle[aria-pressed="true"] [data-evo-eye-off] { display: block; }

.registration-password-checklist {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin-top: 0.65rem;
    color: var(--ta-text-muted);
    font-size: 0.72rem;
}

.registration-password-checklist li::before {
    content: "○";
    margin-right: 0.35rem;
}

.registration-password-checklist li.is-valid {
    color: #15803d;
}

.registration-password-checklist li.is-valid::before {
    content: "✓";
}

.registration-optional {
    border-top: 1px solid var(--ta-border-soft);
    padding-top: 1rem;
}

.registration-optional summary {
    cursor: pointer;
    color: var(--ta-primary);
    font-size: 0.875rem;
    font-weight: 750;
}

.registration-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--ta-text-main);
    font-size: 0.875rem;
}

.registration-terms a { color: var(--ta-primary); }

.registration-form-error {
    border: 1px solid color-mix(in srgb, #dc2626 45%, var(--ta-border-soft));
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    background: color-mix(in srgb, #dc2626 8%, var(--ta-bg-surface));
    color: #b91c1c;
    font-size: 0.82rem;
    font-weight: 650;
}

.registration-success {
    text-align: center;
}

.registration-success-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, #16a34a 14%, var(--ta-bg-surface));
    color: #15803d;
}

.registration-success-icon svg { width: 2rem; height: 2rem; }

.registration-reference {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    border: 1px dashed color-mix(in srgb, var(--ta-primary) 55%, var(--ta-border-soft));
    border-radius: 0.9rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-surface));
}

.registration-reference span { color: var(--ta-text-muted); font-size: 0.72rem; }
.registration-reference strong { overflow-wrap: anywhere; color: var(--ta-text-main); font-size: 1rem; }

.registration-next-steps {
    display: grid;
    gap: 0.65rem;
    text-align: left;
}

.registration-next-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.registration-next-steps li > span {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 1.65rem;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-primary) 12%, var(--ta-bg-surface));
    color: var(--ta-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.registration-next-steps p { margin: 0.2rem 0 0; color: var(--ta-text-main); font-size: 0.82rem; }

@media (min-width: 640px) {
    .auth-register-page .auth-shell { padding-inline: 1rem; }
    .registration-card { padding-inline: 1.25rem !important; }
    .registration-section { padding: 1.15rem; }
    .registration-channel-grid,
    .registration-password-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .registration-progress small { font-size: 0.68rem; }
    .registration-secondary-button { width: auto; }
    .registration-verification-row { grid-template-columns: minmax(0, 1fr) auto; }
    .registration-verification-row .registration-secondary-button { min-width: 9.75rem; }
}

@media (min-width: 768px) {
    .registration-card { padding-inline: 2rem !important; }
}

.receipt-format-download {
    min-width: 140px;
}

.receipt-format-panel {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.public-dashboard-split-summary-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--ta-border);
    border-radius: 0.95rem;
    background: rgba(2, 23, 31, 0.22);
}

.public-dashboard-split-summary-table th,
.public-dashboard-split-summary-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ta-border);
    text-align: right;
    white-space: nowrap;
}

.public-dashboard-split-summary-table th:first-child,
.public-dashboard-split-summary-table td:first-child {
    text-align: left;
    color: var(--ta-text-muted);
    font-weight: 800;
}

.public-dashboard-split-summary-table th {
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-dashboard-split-summary-table td {
    color: var(--ta-text-main);
    font-size: 0.95rem;
    font-weight: 850;
}

.public-dashboard-split-summary-table td:nth-child(2) {
    color: var(--ta-accent);
    font-size: 1.08rem;
    font-weight: 950;
}

.public-dashboard-split-summary-table tbody tr:last-child td {
    border-bottom: 0;
}

.public-dashboard-month-switch {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

.public-dashboard-month-tab {
    border: 1px solid var(--ta-border);
    border-radius: 999px;
    background: var(--ta-bg-main);
    color: var(--ta-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 850;
    line-height: 1;
    padding: 0.7rem 1rem;
    text-align: center;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.public-dashboard-month-tab.is-active {
    border-color: rgba(79, 207, 229, 0.55);
    background: rgba(8, 145, 178, 0.22);
    color: var(--ta-text-main);
}

.public-dashboard-month-placeholder {
    align-items: center;
    background: color-mix(in srgb, var(--ta-bg-main) 82%, var(--ta-bg-surface) 18%);
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    color: var(--ta-text-muted);
    display: flex;
    font-size: 0.95rem;
    font-weight: 850;
    justify-content: center;
    min-height: 9rem;
    padding: 2rem;
    text-align: center;
}

.public-dashboard-month-placeholder.is-error {
    border-color: color-mix(in srgb, var(--sda-scarlett) 38%, var(--ta-border));
    color: color-mix(in srgb, var(--sda-scarlett) 78%, var(--ta-text-main));
}

@media (max-width: 860px) {
    .public-dashboard-allocation-table .public-dashboard-allocation-sticky-cell {
        width: 12.5rem;
        min-width: 12.5rem;
        max-width: 12.5rem;
    }

    .public-dashboard-allocation-table th:not(.public-dashboard-allocation-sticky-cell),
    .public-dashboard-allocation-table td:not(.public-dashboard-allocation-sticky-cell) {
        min-width: 10.75rem;
    }
}

/* Offering Excel add/replace selector and preview. */
#evoModalBody [data-offering-import-mode],
#evoModalBody [data-offering-replacement-target-panel],
#evoModalBody [data-offering-replacement-preview] {
    min-width: 0;
    max-width: 100%;
}

#evoModalBody [data-offering-import-mode-card] {
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

#evoModalBody [data-offering-import-mode-card] input[type="radio"] {
    accent-color: var(--ta-primary);
}

#evoModalBody [data-offering-import-mode-card][data-active="true"] {
    border-color: var(--ta-primary) !important;
    background: var(--ta-primary-soft) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ta-primary) 18%, transparent);
}

#evoModalBody [data-offering-import-mode-card]:focus-within {
    outline: 2px solid color-mix(in srgb, var(--ta-primary) 72%, white);
    outline-offset: 2px;
}

#evoModalBody [data-offering-workbook-replace-target] {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

#evoModalBody [data-offering-workbook-replace-target][aria-pressed="true"] {
    border-color: var(--ta-primary);
    background: var(--ta-primary-soft);
    color: var(--ta-primary);
}

#evoModalBody [data-offering-replacement-target-panel],
#evoModalBody [data-offering-replacement-preview] {
    overflow-wrap: anywhere;
}

@media (max-width: 639px) {
    #evoModalBody [data-offering-workbook-replace-target],
    #evoModalBody [data-offering-replacement-cancel] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #evoModalBody [data-offering-import-mode-card] {
        transition: none;
    }
}

@media (max-width: 900px) {
    .public-dashboard-month-switch {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

}

@media (max-width: 1180px) {
    .public-dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-dashboard-account-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {
    .public-dashboard-month-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .public-dashboard-tabs .dashboard-tab {
        padding-inline: 0.5rem;
    }

    .receipt-format-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .receipt-format-options,
    .receipt-format-download {
        width: 100%;
    }

    .receipt-format-option {
        flex: 1 1 0;
    }

    .public-dashboard-hero-inner,
    .public-dashboard-panel,
    .public-dashboard-kpi {
        padding: 1rem;
    }

    .public-dashboard-kpi-grid {
        grid-template-columns: 1fr;
    }

    .public-dashboard-recent-row {
        grid-template-columns: 1fr;
    }

    .public-dashboard-account-identity {
        gap: 0.85rem;
    }

    .public-dashboard-account-head {
        align-items: flex-start;
    }

    .public-dashboard-account-meta {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    .public-dashboard-user-profile-card-wide {
        grid-column: auto;
    }

    .public-dashboard-year-chart-wrap {
        padding: 0.75rem;
    }

    .public-dashboard-year-chart {
        min-height: 17rem;
    }

    .public-dashboard-year-chart-svg {
        height: 18rem;
    }

    .public-dashboard-recent-row strong {
        text-align: left;
    }
}

/* Enabled, disabled, and busy control states are owned by the shared
   cross-theme control stylesheet loaded by evo_theme_boot.js. */

/* 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);
}

.public-nav-scroll {
    scrollbar-width: none;
}

.public-nav-scroll::-webkit-scrollbar {
    display: none;
}

.public-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
}

.public-nav-link:hover,
.public-nav-link:focus-visible,
.public-nav-link.font-semibold {
    background-color: rgba(20, 132, 154, 0.1);
}

html[data-theme="dark"] .public-nav-link:hover,
html[data-theme="dark"] .public-nav-link:focus-visible,
html[data-theme="dark"] .public-nav-link.font-semibold {
    background-color: rgba(255, 255, 255, 0.08);
}

.public-nav-link:focus-visible {
    outline: none;
    color: var(--ta-primary) !important;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}

@media (forced-colors: active) {
    .public-nav-link:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

/* =========================================================
   Shared public record search
   ========================================================= */
.evo-global-search-trigger {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex !important;
    flex: 0 0 auto;
    justify-content: flex-start;
    width: clamp(10.75rem, 12vw, 12.75rem) !important;
    min-width: 10.75rem;
    height: 3rem;
    min-height: 3rem;
    padding: 0 0.75rem;
    gap: 0.6rem;
    border-radius: 0.875rem;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
}

.evo-global-search-trigger__icon {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
}

.evo-global-search-trigger__label {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-global-search-trigger__shortcut {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.12rem 0.34rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--ta-bg-surface) 82%, transparent);
    color: var(--ta-text-muted);
    font: inherit;
    font-size: 0.66rem;
    line-height: 1.2;
}

.evo-global-search-dialog {
    width: min(44rem, calc(100vw - 2rem));
    max-width: none;
    max-height: min(46rem, calc(100dvh - 2rem));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 1.1rem;
    background: transparent;
    color: var(--ta-text-main);
    overflow: visible;
}

.evo-global-search-dialog::backdrop {
    background: rgb(3 10 13 / 0.56);
    backdrop-filter: blur(5px);
}

.evo-global-search-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    max-height: min(46rem, calc(100dvh - 2rem));
    overflow: hidden;
    border: 1px solid var(--ta-border-soft);
    border-radius: 1.1rem;
    background: var(--ta-bg-surface);
    box-shadow: 0 28px 72px rgb(3 10 13 / 0.28);
}

.evo-global-search-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem 1rem;
    border-bottom: 1px solid var(--ta-border-soft);
    background: var(--ta-bg-header);
}

.evo-global-search-header h2 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 1.1rem;
    font-weight: 720;
    line-height: 1.25;
}

.evo-global-search-header p {
    margin: 0.28rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.evo-global-search-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.35rem;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 0.7rem;
    background: var(--ta-bg-surface);
    color: var(--ta-text-muted);
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.evo-global-search-close svg {
    width: 1.05rem;
    height: 1.05rem;
}

.evo-global-search-close:hover {
    border-color: color-mix(in srgb, var(--ta-primary) 36%, var(--ta-border-soft));
    background: var(--ta-row-hover);
    color: var(--ta-text-main);
}

.evo-global-search-trigger:focus-visible,
.evo-global-search-close:focus-visible,
.evo-global-search-query:focus-within,
.evo-global-search-scope-field select:focus-visible,
.evo-global-search-result:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ta-primary) 74%, white);
    outline-offset: 2px;
}

.evo-global-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10.5rem, 0.38fr);
    align-items: end;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
}

.evo-global-search-query {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.82rem;
    gap: 0.65rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 0.78rem;
    background: var(--ta-bg);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.evo-global-search-query:focus-within {
    border-color: color-mix(in srgb, var(--ta-primary) 62%, var(--ta-border-soft));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ta-primary) 13%, transparent);
}

.evo-global-search-query > svg {
    flex: 0 0 1.05rem;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--ta-text-muted);
}

.evo-global-search-query > input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--ta-text-main);
    font: inherit;
    font-size: 0.94rem;
}

.evo-global-search-query > input[type="search"]::placeholder {
    color: var(--ta-text-muted);
    opacity: 0.9;
}

.evo-global-search-scope-field {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.evo-global-search-scope-field > span {
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1;
    text-transform: uppercase;
}

.evo-global-search-scope-field select {
    width: 100%;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0.35rem 2rem 0.35rem 0.7rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 0.68rem;
    background: var(--ta-bg);
    color: var(--ta-text-main);
    font: inherit;
    font-size: 0.84rem;
}

.evo-global-search-scope-field .evo-select__btn {
    height: 2.75rem;
    min-height: 2.75rem;
}

.evo-global-search-scope-field .evo-select__btn:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.evo-global-search-status {
    min-height: 2.1rem;
    margin: 0;
    padding: 0.25rem 1.25rem 0.7rem;
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.evo-global-search-status[data-state="error"] {
    color: var(--ta-alert-danger-text);
}

.evo-global-search-status[data-state="success"] {
    color: color-mix(in srgb, var(--ta-primary) 82%, var(--ta-text-main));
}

.evo-global-search-results {
    min-height: 9rem;
    max-height: min(30rem, calc(100dvh - 15.5rem));
    margin: 0;
    padding: 0 0.8rem 0.9rem;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ta-primary) 32%, var(--ta-border-soft)) transparent;
}

.evo-global-search-results:empty::after {
    content: '';
    display: block;
    min-height: 7rem;
}

.evo-global-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 4.2rem;
    padding: 0.72rem 0.85rem;
    gap: 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.78rem;
    background: transparent;
    color: var(--ta-text-main);
    text-align: left;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.evo-global-search-result:hover {
    border-color: color-mix(in srgb, var(--ta-primary) 23%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-surface));
    transform: translateY(-1px);
}

.evo-global-search-result__copy {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
}

.evo-global-search-result__title,
.evo-global-search-result__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-global-search-result__title {
    font-size: 0.9rem;
    font-weight: 680;
}

.evo-global-search-result__subtitle {
    color: var(--ta-text-muted);
    font-size: 0.76rem;
}

.evo-global-search-result__action {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--ta-primary) 65%, var(--ta-text-main));
    font-size: 0.76rem;
    font-weight: 700;
}

html.evo-global-search-open {
    overflow: hidden;
}

@media (max-width: 1279.98px) and (min-width: 1024px) {
    .evo-global-search-trigger {
        width: auto !important;
        min-width: 0;
    }

    .evo-global-search-trigger__shortcut {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .evo-global-search-trigger__label,
    .evo-global-search-trigger__shortcut {
        display: none;
    }

    .evo-global-search-trigger {
        flex: 0 0 2.75rem;
        width: 2.75rem !important;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        justify-content: center;
        border-radius: 0.875rem;
    }

    .public-top-nav__controls #userMenuBtn {
        padding: 0.25rem !important;
    }

    .public-top-nav__controls #userMenuBtn .user-menu-name,
    .public-top-nav__controls #userMenuBtn > svg {
        display: none !important;
    }
}

@media (max-width: 760px), (max-height: 540px) and (pointer: coarse) {
    .evo-global-search-dialog {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .evo-global-search-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overscroll-behavior: contain;
    }

    .evo-global-search-header,
    .evo-global-search-form {
        padding-left: calc(0.9rem + env(safe-area-inset-left));
        padding-right: calc(0.9rem + env(safe-area-inset-right));
    }

    .evo-global-search-header {
        align-items: center;
        padding-top: calc(0.9rem + env(safe-area-inset-top));
        padding-bottom: 0.8rem;
    }

    .evo-global-search-close {
        flex-basis: 2.75rem;
        width: 2.75rem;
        height: 2.75rem;
    }

    .evo-global-search-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.65rem;
        padding-top: 0.8rem;
        padding-bottom: 0.55rem;
    }

    .evo-global-search-query,
    .evo-global-search-scope-field select,
    .evo-global-search-scope-field .evo-select__btn {
        height: 2.9rem;
        min-height: 2.9rem;
    }

    .evo-global-search-status {
        padding-left: calc(0.9rem + env(safe-area-inset-left));
        padding-right: calc(0.9rem + env(safe-area-inset-right));
        padding-bottom: 0.55rem;
    }

    .evo-global-search-results {
        min-height: 0;
        height: 100%;
        max-height: none;
        padding-left: calc(0.45rem + env(safe-area-inset-left));
        padding-right: calc(0.45rem + env(safe-area-inset-right));
        padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
    }

    .evo-global-search-result__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        overflow: hidden;
        font-size: 0;
    }

    .evo-global-search-result__action::after {
        content: '\203A';
        font-size: 1.3rem;
        line-height: 1;
    }
}

@media (max-width: 760px) and (max-height: 540px),
       (max-height: 540px) and (pointer: coarse) {
    .evo-global-search-header {
        padding-top: calc(0.6rem + env(safe-area-inset-top));
        padding-bottom: 0.6rem;
    }

    .evo-global-search-header p {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .evo-global-search-form {
        padding-top: 0.6rem;
        padding-bottom: 0.4rem;
    }

    .evo-global-search-status {
        min-height: 1.7rem;
        padding-bottom: 0.35rem;
    }
}

@media (min-width: 600px) and (max-width: 760px) and (max-height: 540px),
       (min-width: 600px) and (max-height: 540px) and (pointer: coarse) {
    .evo-global-search-form {
        grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 0.42fr);
        align-items: end;
    }
}

@media (max-width: 390px) {
    .public-top-nav__controls {
        gap: 0.28rem !important;
    }
}

@media (max-width: 359.98px) {
    .public-management-official-brand {
        display: none;
    }
}

.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 */
    .evo-admin-error-page .ta-card {
        padding-top: 3rem !important;
        padding-bottom: 2.5rem !important;
    }

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

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

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

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

    /* Stack trace collapse button */
    .evo-admin-error-page #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.34);
    backdrop-filter: blur(8px) saturate(145%);
    -webkit-backdrop-filter: blur(8px) saturate(145%);

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

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

/* Overlay transition */
#evoModalOverlay {
    background: rgba(3, 4, 5, 0.24) !important;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    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);
}

html[data-theme="dark"] #evoModal {
    background: rgba(0, 0, 0, 0.46) !important;
    backdrop-filter: blur(9px) saturate(135%);
    -webkit-backdrop-filter: blur(9px) saturate(135%);
}

html[data-theme="dark"] #evoModalOverlay {
    background: rgba(3, 4, 5, 0.34) !important;
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
}


/* ===========================
   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 PAGES - GENERATED SDA BACKGROUNDS
   ========================================================= */
body.auth-page {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background: #eef7f7;
    color: var(--ta-text-main);
}

body.auth-login-page {
    min-height: 100dvh;
    overflow-y: hidden;
}

body.auth-page::before,
body.auth-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.auth-page::before {
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(1.04) contrast(1.02);
}

body.public-auth-page::before {
    background-image: url("/assets/versions/sda-ui-20260925.1/images/auth/public-auth-bg.jpg");
}

body.admin-auth-page::before {
    background-image: url("/assets/versions/sda-ui-20260925.1/images/auth/admin-auth-bg.jpg");
}

body.auth-page::after {
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(238, 247, 247, 0.78), rgba(238, 247, 247, 0.32) 48%, rgba(238, 247, 247, 0.86)),
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.42), transparent 32%);
}

.auth-shell {
    isolation: isolate;
    position: relative;
    z-index: 1;
}

body.auth-login-page .auth-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.auth-login-page .auth-slot {
    min-height: 0;
    flex: 1 1 auto;
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
}

body.auth-login-page .auth-sda-icon {
    width: 3.3rem;
    height: 3.3rem;
}

body.auth-login-page .form-group label {
    margin-bottom: 0.45rem;
}

body.auth-login-page .form-control {
    min-height: 3.25rem;
}

.auth-page .ta-card {
    border-color: rgba(121, 157, 166, 0.34);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 28px 80px rgba(23, 70, 82, 0.18);
    backdrop-filter: blur(18px);
}

body.public-auth-page.auth-login-page .auth-shell {
    min-height: 100dvh;
}

body.public-auth-page.auth-login-page .auth-shell > header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 3;
    pointer-events: none;
}

body.public-auth-page.auth-login-page .auth-shell > header :where(select, button, a) {
    pointer-events: auto;
}

body.public-auth-page.auth-login-page .auth-slot {
    min-height: 100dvh;
    padding-block: clamp(0.75rem, 2vw, 1.5rem);
}

body.public-auth-page .public-auth-card {
    --public-auth-accent: var(--ta-primary, #007f98);
    --public-auth-strip:
        linear-gradient(
            90deg,
            var(--public-auth-accent) 0 62%,
            color-mix(in srgb, var(--public-auth-accent) 58%, #ffffff 42%) 62% 82%,
            var(--public-auth-accent) 82% 100%
        );
    --public-auth-card-surface:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ta-bg-surface, #ffffff) 96%, var(--evo-neutral-50, #fafafa) 4%),
            color-mix(in srgb, var(--ta-bg-surface, #ffffff) 88%, var(--evo-neutral-100, #f5f5f5) 12%)
        );
    --public-auth-card-border: color-mix(in srgb, var(--public-auth-accent) 28%, var(--ta-border-soft, #d8e1e4) 72%);
    --public-auth-card-shadow: 0 28px 78px rgba(8, 24, 34, 0.20);
    --public-auth-orb-bg: color-mix(in srgb, var(--public-auth-accent) 8%, var(--ta-bg-surface, #ffffff) 92%);
    --public-auth-orb-border: color-mix(in srgb, var(--public-auth-accent) 22%, var(--ta-border-soft, #d8e1e4) 78%);
    --public-auth-logo-bg: var(--ta-bg-surface, #ffffff);
    --public-auth-logo-border: color-mix(in srgb, var(--public-auth-accent) 24%, var(--ta-border-soft, #d8e1e4) 76%);
    --public-auth-input-bg: color-mix(in srgb, var(--ta-bg-surface, #ffffff) 86%, var(--evo-neutral-100, #f5f5f5) 14%);
    --public-auth-input-border: var(--ta-border-soft, #d8e1e4);
    position: relative;
    overflow: hidden;
    border-color: var(--public-auth-card-border);
    border-radius: 1.4rem;
    background:
        var(--public-auth-strip) top / 100% 0.4rem no-repeat,
        var(--public-auth-card-surface);
    box-shadow: var(--public-auth-card-shadow);
}

body.public-auth-page .public-auth-card::before {
    content: "";
    position: absolute;
    top: -4.4rem;
    right: -3.4rem;
    width: 9rem;
    height: 9rem;
    border-radius: 999px;
    border: 1px solid var(--public-auth-orb-border);
    background: var(--public-auth-orb-bg);
    pointer-events: none;
}

body.public-auth-page .public-auth-card > * {
    position: relative;
    z-index: 1;
}

body.public-auth-page.auth-login-page .auth-login-card .text-center > div:first-child {
    margin-top: 0.4rem;
}

body.public-auth-page .public-auth-card .public-auth-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border: 1px solid var(--public-auth-logo-border);
    border-radius: 999px;
    background: var(--public-auth-logo-bg);
    box-shadow: 0 16px 36px rgba(8, 24, 34, 0.12);
}

body.public-auth-page .public-auth-card h2 {
    color: var(--ta-text-main, #182326);
    font-size: 1.38rem;
    font-weight: 760;
}

body.public-auth-page .public-auth-card .form-group label {
    color: var(--ta-text-muted, #4f646b);
    font-weight: 750;
}

body.public-auth-page .public-auth-card .form-control {
    border-color: var(--public-auth-input-border) !important;
    background: var(--public-auth-input-bg) !important;
    color: var(--ta-text-main, #182326) !important;
    -webkit-text-fill-color: var(--ta-text-main, #182326) !important;
}

body.public-auth-page .public-auth-card .form-control:focus {
    border-color: var(--public-auth-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--public-auth-accent) 22%, transparent) !important;
}

body.public-auth-page .public-auth-card button[type="submit"] {
    border-color: color-mix(in srgb, var(--public-auth-accent) 78%, #ffffff 22%) !important;
    background: var(--public-auth-accent) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--public-auth-accent) 24%, transparent) !important;
}

body.public-auth-page .public-auth-card button[type="submit"]:hover,
body.public-auth-page .public-auth-card button[type="submit"]:focus-visible {
    border-color: var(--public-auth-accent) !important;
    background: color-mix(in srgb, var(--public-auth-accent) 84%, #000000 16%) !important;
}

body.public-auth-page .public-auth-card form a[href="/"] {
    color: var(--ta-text-muted, #4f646b) !important;
}

body.public-auth-page .public-auth-card form a[href="/"]:hover,
body.public-auth-page .public-auth-card form a[href="/"]:focus-visible {
    color: var(--public-auth-accent) !important;
}

body.public-auth-page .public-auth-card .public-auth-notice {
    border-color: color-mix(in srgb, var(--public-auth-accent) 24%, var(--public-auth-input-border) 76%);
    background: color-mix(in srgb, var(--public-auth-accent) 6%, var(--public-auth-input-bg) 94%);
}

@media (max-width: 768px) {
    body.auth-page::before {
        background-position: center top;
    }

    body.auth-page::after {
        background:
            linear-gradient(180deg, rgba(238, 247, 247, 0.84), rgba(238, 247, 247, 0.38) 46%, rgba(238, 247, 247, 0.92)),
            radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.46), transparent 42%);
    }

    .auth-page .ta-card {
        background: rgba(255, 255, 255, 0.93);
        box-shadow: 0 18px 56px rgba(23, 70, 82, 0.16);
    }
}

html[data-theme="dark"] body.public-auth-page .public-auth-card {
    --public-auth-card-surface:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ta-bg-surface, #0d0f10) 94%, #ffffff 6%),
            color-mix(in srgb, var(--ta-bg, #030405) 88%, var(--ta-bg-surface, #0d0f10) 12%)
        );
    --public-auth-card-border: color-mix(in srgb, var(--public-auth-accent) 34%, var(--ta-border-soft, rgba(255, 255, 255, 0.12)) 66%);
    --public-auth-card-shadow: 0 30px 82px rgba(0, 0, 0, 0.52);
    --public-auth-orb-bg: color-mix(in srgb, var(--public-auth-accent) 10%, var(--ta-bg-surface, #0d0f10) 90%);
    --public-auth-orb-border: color-mix(in srgb, var(--public-auth-accent) 26%, var(--ta-border-soft, rgba(255, 255, 255, 0.12)) 74%);
    --public-auth-logo-bg: var(--ta-bg-surface-2, #121416);
    --public-auth-logo-border: color-mix(in srgb, var(--public-auth-accent) 30%, var(--ta-border-soft, rgba(255, 255, 255, 0.12)) 70%);
    --public-auth-input-bg: var(--ta-bg-surface-2, #121416);
    --public-auth-input-border: var(--ta-border-soft, rgba(255, 255, 255, 0.12));
    border-color: var(--public-auth-card-border) !important;
    background:
        var(--public-auth-strip) top / 100% 0.4rem no-repeat,
        var(--public-auth-card-surface) !important;
    box-shadow: var(--public-auth-card-shadow) !important;
}

html[data-theme="dark"] body.public-auth-page .public-auth-card::before {
    border-color: var(--public-auth-orb-border);
    background: var(--public-auth-orb-bg);
}

html[data-theme="dark"] body.public-auth-page .public-auth-card .public-auth-mark {
    border-color: var(--public-auth-logo-border);
    background: var(--public-auth-logo-bg);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] body.public-auth-page .public-auth-card h2 {
    color: var(--ta-text-main, #f4f7f8);
}

html[data-theme="dark"] body.public-auth-page .public-auth-card .form-group label {
    color: var(--ta-text-muted, #aeb7bb);
}

html[data-theme="dark"] body.public-auth-page .public-auth-card .form-control {
    border-color: var(--public-auth-input-border) !important;
    background: var(--public-auth-input-bg) !important;
    color: var(--ta-text-main, #f4f7f8) !important;
    -webkit-text-fill-color: var(--ta-text-main, #f4f7f8) !important;
}

html[data-theme="dark"] body.public-auth-page .public-auth-card button[type="submit"] {
    border-color: color-mix(in srgb, var(--public-auth-accent) 78%, #ffffff 22%) !important;
    background: var(--public-auth-accent) !important;
}

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

.evo-auth-mark-img {
    display: block;
    width: 3.3rem;
    height: 3.3rem;
    object-fit: contain;
}

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

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

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

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

/* =========================================================
   TERMS AND CONDITIONS PAGES
   ========================================================= */
.terms-page {
    display: grid;
    gap: 1rem;
    color: var(--ta-text-main);
}

.terms-hero,
.terms-summary-grid article,
.terms-admin-band,
.terms-aside,
.terms-document,
.terms-footer {
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 70px rgba(37, 87, 96, 0.12);
    backdrop-filter: blur(18px);
}

.terms-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.1rem, 2.5vw, 2rem);
}

.terms-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--ta-primary) 14%, transparent), transparent 48%),
        linear-gradient(90deg, color-mix(in srgb, var(--sda-cave) 7%, transparent), transparent 64%);
    pointer-events: none;
}

.terms-page-admin .terms-hero::before {
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--sda-bluejay) 13%, transparent), transparent 48%),
        linear-gradient(90deg, color-mix(in srgb, var(--sda-cave) 10%, transparent), transparent 64%);
}

.terms-hero-brand,
.terms-hero-meta,
.terms-hero > * {
    position: relative;
}

.terms-hero-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.terms-logo-link {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 5rem;
    height: 5rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 8%, #ffffff);
}

.terms-eyebrow,
.terms-summary-grid article span,
.terms-admin-band span,
.terms-aside-label {
    display: block;
    color: var(--ta-text-muted);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.terms-hero h1 {
    margin-top: 0.35rem;
    color: var(--ta-text-main);
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
}

.terms-hero p {
    max-width: 44rem;
    margin-top: 0.75rem;
    color: var(--ta-text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.terms-hero-meta {
    align-self: center;
    display: grid;
    min-width: min(100%, 13rem);
    gap: 0.2rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 7%, #ffffff);
    padding: 1rem;
}

.terms-hero-meta span {
    color: var(--ta-text-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.terms-hero-meta strong {
    color: var(--ta-text-main);
    font-size: 1.05rem;
}

.terms-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.terms-summary-grid article {
    min-height: 10rem;
    padding: 1.15rem;
}

.terms-summary-grid article strong {
    display: block;
    margin-top: 1rem;
    color: var(--ta-text-main);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.25;
}

.terms-summary-grid article p,
.terms-admin-band p {
    margin-top: 0.65rem;
    color: var(--ta-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.terms-page-admin .terms-summary-grid article:first-child {
    background: linear-gradient(135deg, color-mix(in srgb, var(--sda-bluejay) 80%, var(--ta-primary) 20%), var(--sda-cave));
    color: #ffffff;
}

.terms-summary-grid article:first-child span,
.terms-summary-grid article:first-child strong,
.terms-summary-grid article:first-child p {
    color: inherit;
}

.terms-summary-grid article:first-child p,
.terms-summary-grid article:first-child span {
    opacity: 0.82;
}

.terms-admin-band {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 1rem;
    align-items: center;
    padding: 1.15rem;
    border-color: color-mix(in srgb, var(--sda-bluejay) 22%, var(--ta-border-soft));
}

.terms-admin-band strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--ta-text-main);
    font-size: 1.15rem;
    font-weight: 850;
}

.terms-layout {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.terms-aside {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
}

.terms-aside a {
    display: block;
    border-radius: 8px;
    color: var(--ta-text-muted);
    padding: 0.7rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.terms-aside a:hover,
.terms-aside a:focus-visible {
    background: color-mix(in srgb, var(--ta-primary) 9%, transparent);
    color: var(--ta-text-main);
    transform: translateX(2px);
}

.terms-document {
    overflow: hidden;
}

.terms-section {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    border-bottom: 1px solid var(--ta-border-soft);
    padding: clamp(1rem, 2vw, 1.35rem);
}

.terms-section:last-child {
    border-bottom: 0;
}

.terms-section > span {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 10%, transparent);
    color: var(--ta-primary);
    font-weight: 900;
    font-size: 0.8rem;
}

.terms-page-admin .terms-section > span {
    background: color-mix(in srgb, var(--sda-bluejay) 10%, transparent);
    color: color-mix(in srgb, var(--sda-bluejay) 78%, var(--ta-primary));
}

.terms-section h2 {
    color: var(--ta-text-main);
    font-size: 1.05rem;
    font-weight: 850;
}

.terms-section p,
.terms-section li {
    color: var(--ta-text-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

.terms-section p {
    margin-top: 0.45rem;
}

.terms-section ul {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.65rem;
}

.terms-section li {
    position: relative;
    padding-left: 1.1rem;
}

.terms-section li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: var(--ta-primary);
}

.terms-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.terms-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 24%, var(--ta-border-soft));
    border-radius: 8px;
    color: var(--ta-primary);
    padding: 0 1rem;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.terms-back-link:hover,
.terms-back-link:focus-visible {
    background: color-mix(in srgb, var(--ta-primary) 10%, transparent);
}

.terms-powered {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ta-text-muted);
    font-size: 0.76rem;
}

html[data-theme="dark"] .terms-hero,
html[data-theme="dark"] .terms-summary-grid article,
html[data-theme="dark"] .terms-admin-band,
html[data-theme="dark"] .terms-aside,
html[data-theme="dark"] .terms-document,
html[data-theme="dark"] .terms-footer {
    border-color: rgba(167, 216, 225, 0.16);
    background: rgba(8, 31, 38, 0.84);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .terms-logo-link,
html[data-theme="dark"] .terms-hero-meta {
    border-color: rgba(167, 216, 225, 0.18);
    background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .terms-page-admin .terms-summary-grid article:first-child {
    background: linear-gradient(135deg, #007f98, #173f49);
}

html[data-theme="dark"] .terms-aside a:hover,
html[data-theme="dark"] .terms-aside a:focus-visible,
html[data-theme="dark"] .terms-back-link:hover,
html[data-theme="dark"] .terms-back-link:focus-visible {
    background: rgba(126, 216, 232, 0.1);
}

html[data-theme="dark"] .terms-section > span {
    background: rgba(126, 216, 232, 0.12);
    color: var(--evo-teal-200);
}

/* Public legal pages share the public-auth identity without inheriting admin surfaces. */
.terms-page-public {
    --public-auth-accent: var(--ta-primary, #007f98);
    --public-auth-strip:
        linear-gradient(
            90deg,
            var(--public-auth-accent) 0 62%,
            color-mix(in srgb, var(--public-auth-accent) 58%, #ffffff 42%) 62% 82%,
            var(--public-auth-accent) 82% 100%
        );
    --public-terms-surface: color-mix(in srgb, var(--ta-bg-surface, #ffffff) 96%, var(--evo-neutral-50, #fafafa) 4%);
    --public-terms-raised: color-mix(in srgb, var(--ta-bg-surface, #ffffff) 88%, var(--evo-neutral-100, #f5f5f5) 12%);
    --public-terms-border: var(--ta-border-soft, #d8e1e4);
    --public-terms-shadow: 0 24px 70px rgba(8, 24, 34, 0.14);
}

.terms-page-public .terms-hero,
.terms-page-public .terms-summary-grid article,
.terms-page-public .terms-aside,
.terms-page-public .terms-document,
.terms-page-public .terms-footer {
    border-color: var(--public-terms-border);
    background: var(--public-terms-surface);
    box-shadow: var(--public-terms-shadow);
}

.terms-page-public .terms-hero {
    border-color: color-mix(in srgb, var(--public-auth-accent) 26%, var(--public-terms-border) 74%);
}

.terms-page-public .terms-hero::before {
    background:
        var(--public-auth-strip) top / 100% 0.4rem no-repeat,
        linear-gradient(120deg, color-mix(in srgb, var(--public-auth-accent) 8%, transparent), transparent 44%);
}

.terms-page-public .terms-logo-link {
    border-color: color-mix(in srgb, var(--public-auth-accent) 24%, var(--public-terms-border) 76%);
    border-radius: 999px;
    background: var(--public-terms-raised);
    box-shadow: 0 16px 36px rgba(8, 24, 34, 0.12);
}

.terms-page-public .terms-eyebrow {
    color: var(--public-auth-accent);
}

.terms-page-public .terms-hero-meta {
    border-color: var(--public-terms-border);
    background: var(--public-terms-raised);
}

.terms-page-public .terms-summary-grid article:first-child {
    border-color: color-mix(in srgb, var(--public-auth-accent) 78%, #ffffff 22%);
    background: var(--public-auth-accent);
    color: #ffffff;
}

.terms-page-public .terms-aside a:hover,
.terms-page-public .terms-aside a:focus-visible,
.terms-page-public .terms-back-link:hover,
.terms-page-public .terms-back-link:focus-visible {
    background: color-mix(in srgb, var(--public-auth-accent) 10%, transparent);
}

.terms-page-public .terms-section > span {
    background: color-mix(in srgb, var(--public-auth-accent) 11%, transparent);
    color: var(--public-auth-accent);
}

.terms-page-public .terms-back-link {
    border-color: color-mix(in srgb, var(--public-auth-accent) 28%, var(--public-terms-border) 72%);
    color: var(--public-auth-accent);
}

html[data-theme="dark"] .terms-page-public {
    --public-terms-surface: var(--ta-bg-surface, #0d0f10);
    --public-terms-raised: var(--ta-bg-surface-2, #121416);
    --public-terms-border: var(--ta-border-soft, rgba(255, 255, 255, 0.12));
    --public-terms-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .terms-page-public .terms-hero,
html[data-theme="dark"] .terms-page-public .terms-summary-grid article,
html[data-theme="dark"] .terms-page-public .terms-aside,
html[data-theme="dark"] .terms-page-public .terms-document,
html[data-theme="dark"] .terms-page-public .terms-footer {
    border-color: var(--public-terms-border);
    background: var(--public-terms-surface);
    box-shadow: var(--public-terms-shadow);
}

html[data-theme="dark"] .terms-page-public .terms-hero {
    border-color: color-mix(in srgb, var(--public-auth-accent) 26%, var(--public-terms-border) 74%);
}

html[data-theme="dark"] .terms-page-public .terms-logo-link,
html[data-theme="dark"] .terms-page-public .terms-hero-meta {
    border-color: var(--public-terms-border);
    background: var(--public-terms-raised);
}

html[data-theme="dark"] .terms-page-public .terms-summary-grid article:first-child {
    border-color: color-mix(in srgb, var(--public-auth-accent) 78%, #ffffff 22%);
    background: var(--public-auth-accent);
}

html[data-theme="dark"] .terms-page-public .terms-logo-link {
    border-color: color-mix(in srgb, var(--public-auth-accent) 24%, var(--public-terms-border) 76%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .terms-page-public .terms-aside a:hover,
html[data-theme="dark"] .terms-page-public .terms-aside a:focus-visible,
html[data-theme="dark"] .terms-page-public .terms-back-link:hover,
html[data-theme="dark"] .terms-page-public .terms-back-link:focus-visible {
    background: color-mix(in srgb, var(--public-auth-accent) 10%, transparent);
}

html[data-theme="dark"] .terms-page-public .terms-section > span {
    background: color-mix(in srgb, var(--public-auth-accent) 11%, transparent);
    color: var(--public-auth-accent);
}

@media (max-width: 920px) {
    .terms-hero,
    .terms-admin-band,
    .terms-layout {
        grid-template-columns: 1fr;
    }

    .terms-hero {
        display: grid;
    }

    .terms-summary-grid {
        grid-template-columns: 1fr;
    }

    .terms-aside {
        position: static;
    }
}

@media (max-width: 640px) {
    .terms-hero-brand,
    .terms-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .terms-logo-link {
        width: 4.25rem;
        height: 4.25rem;
    }

    .terms-section {
        grid-template-columns: 1fr;
    }
}

.auth-sda-icon {
    display: block;
    width: 4.25rem;
    height: 4.25rem;
    object-fit: contain;
}

.auth-sda-icon-dark {
    display: none;
}

html[data-theme="dark"] .auth-sda-icon-light {
    display: none;
}

html[data-theme="dark"] .auth-sda-icon-dark {
    display: block;
}


/* =========================================================
   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 browser-saved values visually identical to normal form fields. */
:where(form, .evo-module-root, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):-webkit-autofill,
:where(form, .evo-module-root, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):-webkit-autofill:hover,
:where(form, .evo-module-root, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):-webkit-autofill:focus,
:where(form, .evo-module-root, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):-webkit-autofill:active,
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--ta-surface-soft) inset;
    box-shadow: 0 0 0 1000px var(--ta-surface-soft) inset;
    -webkit-text-fill-color: var(--ta-text-main);
    color: var(--ta-text-main);
    caret-color: var(--ta-text-main);
    transition: background-color 999999s ease-in-out 0s;
}

html[data-theme="dark"] :where(form, .evo-module-root, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):-webkit-autofill,
html[data-theme="dark"] :where(form, .evo-module-root, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):-webkit-autofill:hover,
html[data-theme="dark"] :where(form, .evo-module-root, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):-webkit-autofill:focus,
html[data-theme="dark"] :where(form, .evo-module-root, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):-webkit-autofill:active,
html[data-theme="dark"] .form-control:-webkit-autofill,
html[data-theme="dark"] .form-control:-webkit-autofill:hover,
html[data-theme="dark"] .form-control:-webkit-autofill:focus,
html[data-theme="dark"] .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--ta-bg-surface) inset;
    box-shadow: 0 0 0 1000px var(--ta-bg-surface) inset;
    -webkit-text-fill-color: var(--ta-text-main);
    color: var(--ta-text-main);
    caret-color: var(--ta-text-main);
}

/* =========================================================
   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;
}

/* ================================================================
   Sidebar polish: true collapsed rail, dark-mode contrast, no x-scroll
   ================================================================ */
html,
body,
.app-shell,
.main-content,
.main-scroll,
#appMainContent {
    max-width: 100%;
}

.app-shell,
.main-content,
.main-scroll,
.sidebar,
.sidebar-scroll {
    overflow-x: hidden !important;
}

.sidebar {
    flex: 0 0 18rem;
    max-width: 18rem;
}

.sidebar[data-collapsed="true"] {
    flex-basis: 5.5rem;
    width: 5.5rem;
    max-width: 5.5rem;
}

.sidebar-scroll {
    padding-left: 1rem;
    padding-right: 1rem;
    scrollbar-gutter: stable;
}

.sidebar[data-collapsed="true"] .sidebar-scroll {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.sidebar-item {
    min-height: 3rem;
    position: relative;
    overflow: hidden;
    color: var(--ta-text-muted) !important;
    border: 1px solid transparent;
    white-space: nowrap;
    scroll-margin-block: 1rem;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.sidebar-item > * {
    position: relative;
    z-index: 1;
}

.sidebar-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    border-radius: 999px;
    background: var(--ta-primary);
    opacity: 0;
    transform: scaleY(0.45);
    transition: opacity 180ms ease, transform 180ms ease;
}

.sidebar-item:hover {
    background: var(--ta-bg-hover);
    color: var(--ta-text-main) !important;
    transform: translateX(2px);
}

.sidebar-item-active {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ta-primary) 15%, transparent), transparent 62%),
        var(--ta-primary-soft) !important;
    color: var(--ta-text-main) !important;
    border-color: color-mix(in srgb, var(--ta-primary) 35%, var(--ta-border-soft));
    box-shadow: 0 16px 32px rgba(24, 108, 129, 0.12);
}

.sidebar-item.sidebar-item-active::before {
    opacity: 1;
    transform: scaleY(1);
}

.sidebar-item-active .sidebar-item-label {
    font-weight: 800;
}

.sidebar-item-active .sidebar-icon-wrap {
    color: #ffffff;
    background: var(--ta-primary);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(24, 108, 129, 0.2);
}

.sidebar-submenu [data-module-link] {
    border-radius: 0.75rem;
    padding-inline: 0.85rem;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.sidebar-submenu [data-module-link]:hover {
    background: var(--ta-bg-hover);
    color: var(--ta-text-main) !important;
    transform: translateX(2px);
}

.sidebar-submenu [data-module-link].sidebar-item-active {
    background: color-mix(in srgb, var(--ta-primary) 11%, transparent) !important;
    color: var(--ta-primary) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ta-primary) 18%, transparent);
}

html[data-theme="dark"] .sidebar-item {
    color: var(--evo-neutral-300) !important;
}

html[data-theme="dark"] .sidebar-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--evo-neutral-50) !important;
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sidebar-item-active {
    background:
        linear-gradient(90deg, rgba(126, 216, 232, 0.18), transparent 64%),
        rgba(255, 255, 255, 0.08) !important;
    color: var(--evo-neutral-50) !important;
    border-color: rgba(126, 216, 232, 0.32);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .sidebar-item-active .sidebar-icon-wrap {
    color: var(--evo-neutral-950);
    background: var(--evo-teal-300);
    box-shadow: 0 10px 24px rgba(126, 216, 232, 0.18);
}

html[data-theme="dark"] .sidebar-submenu [data-module-link].sidebar-item-active {
    background: rgba(126, 216, 232, 0.12) !important;
    color: var(--evo-teal-200) !important;
    box-shadow: inset 0 0 0 1px rgba(126, 216, 232, 0.18);
}

/* SDA sidebar submenus must stay as Evopine-style single-column lists. */
.sidebar-submenu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch;
    justify-items: stretch;
    gap: 0.35rem !important;
    margin: 0.35rem 0 0.25rem 1.25rem !important;
    padding: 0.35rem 0 0.35rem 1.35rem !important;
}

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

.sidebar-submenu > * {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.sidebar-submenu .sidebar-submenu-item,
.sidebar-submenu [data-module-link] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem !important;
    width: 100% !important;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem !important;
    border: 1px solid transparent;
    border-radius: 0.85rem;
    text-align: left;
    white-space: normal;
}

.sidebar-submenu .sidebar-submenu-item::before,
.sidebar-submenu [data-module-link]::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    min-width: 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-text-muted) 42%, transparent);
    transition: background-color 180ms ease, transform 180ms ease;
}

.sidebar-submenu .sidebar-submenu-item .sidebar-submenu-dot,
.sidebar-submenu [data-module-link] .sidebar-submenu-dot {
    display: none !important;
}

.sidebar-submenu .sidebar-submenu-label,
.sidebar-submenu [data-module-link] > span:not(.sidebar-submenu-dot) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-submenu .sidebar-submenu-item:hover::before,
.sidebar-submenu .sidebar-submenu-item.sidebar-item-active::before,
.sidebar-submenu [data-module-link]:hover::before,
.sidebar-submenu [data-module-link].sidebar-item-active::before {
    background: var(--ta-primary);
    transform: scale(1.15);
}

html[data-theme="dark"] .sidebar-submenu::before {
    background: rgba(126, 216, 232, 0.18);
}

html[data-theme="dark"] .sidebar-submenu .sidebar-submenu-item,
html[data-theme="dark"] .sidebar-submenu [data-module-link] {
    color: var(--evo-neutral-300) !important;
}

html[data-theme="dark"] .sidebar-submenu .sidebar-submenu-item:hover,
html[data-theme="dark"] .sidebar-submenu [data-module-link]:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--evo-neutral-50) !important;
}

html[data-theme="dark"] .sidebar-submenu .sidebar-submenu-item.sidebar-item-active,
html[data-theme="dark"] .sidebar-submenu [data-module-link].sidebar-item-active {
    background: rgba(var(--ta-primary-rgb), 0.14) !important;
    color: var(--evo-neutral-50) !important;
    border-color: rgba(var(--ta-primary-rgb), 0.34);
    box-shadow: none !important;
}

.sidebar-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: 0.85rem;
    color: currentColor;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid var(--ta-border-soft);
}

.sidebar-icon-wrap .evo-svg,
.sidebar-icon-wrap .evo-svg > svg,
.sidebar-icon-wrap .evo-svg > svg.evo-icon {
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    display: block;
}

html[data-theme="dark"] .sidebar-icon-wrap {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.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 {
    display: none !important;
}

.sidebar[data-collapsed="true"] .sidebar-logo {
    justify-content: center;
}

.sidebar[data-collapsed="true"] .sidebar-brand-link {
    justify-content: center;
    gap: 0;
}

.sidebar[data-collapsed="true"] .sidebar-item {
    width: 3rem !important;
    height: 3rem;
    padding: 0 !important;
    justify-content: center;
    gap: 0 !important;
    margin-left: auto;
    margin-right: auto;
}

.sidebar[data-collapsed="true"] .sidebar-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    flex-basis: 2.5rem;
}

.sidebar[data-collapsed="true"] .sidebar-submenu {
    display: none !important;
}

.sidebar[data-collapsed="true"] #sidebarMenuContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

/* =========================================================
   GENERIC FILE INPUT STYLING (All input[type="file"])
   - Native fallback until EvoFileInput upgrades visible controls
========================================================= */

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);
}

.evo-file-input {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    overflow: hidden;
    border: 1px solid var(--ta-border-soft);
    border-radius: 12px;
    background: var(--ta-bg);
    color: var(--ta-text-main);
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.evo-file-input:hover:not(.is-disabled) {
    border-color: color-mix(in srgb, var(--ta-primary) 42%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-bg) 94%, var(--ta-primary) 6%);
}

.evo-file-input:focus-within {
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 4px var(--ta-primary-ring);
}

.evo-file-input input[type="file"].evo-file-input__native {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
}

.evo-file-input__button,
.evo-file-input__name {
    min-width: 0;
    pointer-events: none;
}

.evo-file-input__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-surface);
    color: var(--ta-text-main);
    padding: 0.45rem 0.8rem;
    font-size: 0.875rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

.evo-file-input__name {
    overflow: hidden;
    color: var(--ta-text-muted);
    font-size: 0.875rem;
    font-weight: 550;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-file-input.has-files .evo-file-input__name {
    color: var(--ta-text-main);
}

.evo-file-input.is-disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.evo-file-input.is-disabled input[type="file"].evo-file-input__native {
    cursor: not-allowed;
}

/* =========================================================
   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;
    align-self: center;
    margin-inline-start: auto;
    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;
    text-align: left;

    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 {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    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 */
}

/* =========================================================
   PUBLIC PORTAL RESPONSIVE + DARK MODE HARDENING
   ========================================================= */

body:has(.top-nav) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body:has(.top-nav) #appMainContent,
body:has(.top-nav) .evo-module-root {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
}

body:has(.top-nav) main {
    min-width: 0;
}

html[data-theme="dark"] :where(nav, [aria-label*="breadcrumb" i], main) a {
    color: var(--evo-neutral-200);
}

html[data-theme="dark"] :where(nav, [aria-label*="breadcrumb" i], main) a:hover {
    color: #ffffff;
}

html[data-theme="dark"] nav svg,
html[data-theme="dark"] .top-nav svg,
html[data-theme="dark"] main svg {
    color: currentColor;
    stroke: currentColor;
}

html[data-theme="dark"] main svg[fill="none"],
html[data-theme="dark"] .top-nav svg[fill="none"] {
    fill: none;
}

html[data-theme="dark"] svg[fill="none"],
html[data-theme="dark"] svg:not([fill]) {
    color: currentColor;
    stroke: currentColor;
}

html[data-theme="dark"] svg[fill="none"] :where(path, circle, rect, line, polyline, polygon),
html[data-theme="dark"] svg:not([fill]) :where(path, circle, rect, line, polyline, polygon) {
    stroke: currentColor;
}

html[data-theme="dark"] main :where(.text-\[var\(--ta-primary\)\], .text-\[color\:var\(--ta-primary\)\]) {
    color: var(--evo-neutral-100) !important;
}

html[data-theme="dark"] main :where(button, a, input[type="submit"], input[type="button"]) {
    text-shadow: none;
}

html[data-theme="dark"] main :where(button, a, input[type="submit"], input[type="button"]):not([class*="bg-[var(--ta-primary)]"]):not([style*="var(--ta-primary)"]) {
    color: var(--evo-neutral-100);
}

html[data-theme="dark"] .ta-active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--evo-neutral-50) !important;
}

#dashboardRoot {
    width: 100%;
    max-width: 100%;
}

#dashboardRoot section {
    min-width: 0;
}

#dashboardRoot section [class*="bg-[color:var(--ta-primary-bg-12)]"] {
    color: var(--ta-text-main);
}

html[data-theme="dark"] #dashboardRoot section [class*="bg-[color:var(--ta-primary-bg-12)]"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--evo-neutral-100) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.evo-icon-img {
    display: inline-block;
    object-fit: contain;
    opacity: 0.92;
}

html[data-theme="dark"] .evo-icon-img {
    filter: invert(1) brightness(1.25);
    opacity: 0.94;
}

.evo-icon-mask {
    display: inline-block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--evo-icon-url) center / contain no-repeat;
    mask: var(--evo-icon-url) center / contain no-repeat;
}

#dashboardRoot .evo-icon-mask {
    color: var(--ta-primary);
}

#dashboardRoot section [class*="bg-[color:var(--ta-primary-bg-12)]"] .evo-icon-mask {
    color: currentColor;
}

html[data-theme="dark"] #dashboardRoot .evo-icon-mask {
    color: var(--evo-neutral-100) !important;
}

@media (max-width: 1023px) {
    #dashboardRoot {
        padding: 1rem !important;
        gap: 1rem !important;
    }

    #dashboardRoot > .grid,
    #dashboardRoot .grid {
        gap: 1rem !important;
    }
}

@media (max-width: 640px) {
    body:has(.top-nav) main {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
        padding-top: 1rem !important;
    }

    #dashboardRoot {
        padding: 0 !important;
        gap: 0.875rem !important;
    }

    #dashboardRoot section {
        border-radius: 16px !important;
        padding: 1rem !important;
    }

    #dashboardRoot section .flex.items-start.justify-between {
        align-items: flex-start;
        gap: 0.75rem;
    }

    #dashboardRoot section .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        border-radius: 14px !important;
        flex: 0 0 auto;
    }

    #dashboardRoot table {
        min-width: 620px;
    }
}

.reports-root {
    width: 100%;
    max-width: 100%;
}

.reports-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sda-ming) 13%, transparent), transparent 38%),
        var(--ta-bg-surface);
    padding: clamp(1rem, 2.4vw, 1.6rem);
    box-shadow: var(--ta-shadow-soft);
}

.reports-hero-admin {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sda-cave) 16%, transparent), transparent 40%),
        var(--ta-bg-surface);
}

.reports-kicker {
    margin: 0 0 0.35rem;
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.reports-title {
    margin: 0;
    color: var(--ta-text-main);
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    font-weight: 850;
    line-height: 1.06;
}

.reports-subtitle {
    margin: 0.65rem 0 0;
    max-width: 44rem;
    color: var(--ta-text-muted);
    font-size: 0.96rem;
}

.reports-scope-card,
.reports-secondary-action {
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    background: var(--ta-bg-main);
    padding: 0.85rem 1rem;
}

.reports-scope-card span,
.reports-scope-card strong {
    display: block;
}

.reports-scope-card span {
    color: var(--ta-text-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.reports-scope-card strong {
    margin-top: 0.25rem;
    color: var(--ta-text-main);
    font-size: 1rem;
}

.reports-secondary-action {
    color: var(--ta-primary);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.reports-card {
    display: grid;
    gap: 1rem;
    align-content: start;
    min-width: 0;
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    background: var(--ta-bg-surface);
    padding: clamp(1rem, 2vw, 1.35rem);
    box-shadow: var(--ta-shadow-soft);
}

.reports-card-primary {
    border-color: color-mix(in srgb, var(--ta-primary) 38%, var(--ta-border));
}

.reports-card h2 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 1.25rem;
    font-weight: 820;
}

.reports-card p {
    margin: 0.4rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.92rem;
}

.reports-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    color: var(--ta-primary);
    background: var(--ta-primary-bg-10);
}

.reports-card-icon .evo-icon-mask {
    width: 1.3rem;
    height: 1.3rem;
}

.reports-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    align-items: start;
    gap: 0.75rem;
}

.reports-form-grid > label {
    width: 100%;
}

.reports-form-grid .ta-input {
    width: 100%;
    min-width: 0;
}

.reports-form-grid[data-range-mode-wrap] {
    max-width: 30rem;
}

.reports-period-controls {
    display: grid;
    grid-template-columns: minmax(10.5rem, 0.72fr) minmax(0, 1.78fr);
    align-items: end;
    gap: 0.75rem;
    min-width: 0;
}

.reports-period-controls > .reports-form-grid[data-range-mode-wrap] {
    grid-column: 1;
    max-width: none;
}

.reports-period-controls > [data-range-section] {
    grid-column: 2;
    min-width: 0;
}

.reports-period-controls > [data-range-mode-wrap][hidden] ~ [data-range-section] {
    grid-column: 1 / -1;
}

.reports-period-controls > .reports-form-grid[data-range-section="date_range"],
.reports-period-controls > .reports-form-grid[data-range-section="quarter"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reports-form-grid [data-member-value-wrap] {
    grid-column: 1 / -1;
}

.reports-form-grid [data-remark-filter-wrap],
.reports-form-grid [data-member-remark-filter-wrap] {
    min-width: min(100%, 18rem);
}

.reports-filter-box label.relative {
    position: relative;
}

.reports-form-grid-admin {
    grid-template-columns: minmax(12rem, 1.6fr) minmax(7rem, 0.7fr) minmax(7rem, 0.7fr);
}

.reports-card label {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.reports-card label > span {
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.reports-format-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-main));
    padding: 0.35rem;
}

.reports-format-toggle label {
    position: relative;
    display: block;
    min-width: 0;
}

.reports-format-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reports-format-toggle span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    border-radius: 8px;
    color: var(--ta-text-muted);
    font-size: 0.86rem;
    font-weight: 850;
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.reports-format-toggle input:checked + span {
    background: var(--ta-primary);
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ta-primary) 20%, transparent);
}

.reports-format-toggle input:focus-visible + span {
    outline: 3px solid var(--ta-primary-ring);
    outline-offset: 2px;
}

.reports-mode-toggle {
    max-width: 28rem;
}

.reports-monthly-week-control {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.reports-monthly-week-control > span {
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.reports-monthly-week-toggle {
    width: 100%;
}

.reports-hero-compact {
    padding: clamp(0.9rem, 1.7vw, 1.2rem);
}

.reports-hero-compact .reports-title {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.reports-workspace {
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    background: var(--ta-bg-surface);
    box-shadow: var(--ta-shadow-soft);
    overflow: hidden;
}

.reports-workspace-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--ta-border-soft);
}

.reports-workspace-head h2 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 1.15rem;
    font-weight: 850;
}

.reports-workspace-meta {
    display: grid;
    gap: 0.12rem;
    min-width: 10rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-main);
}

.reports-workspace-meta span {
    color: var(--ta-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.reports-workspace-meta strong {
    color: var(--ta-text-main);
    font-size: 0.92rem;
}

.reports-tabs {
    display: flex;
    gap: 0.45rem;
    padding: 0.7rem 1.1rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--ta-border-soft);
}

.reports-tab {
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-bg-main) 86%, transparent);
    color: var(--ta-text-muted);
    font-size: 0.84rem;
    font-weight: 820;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.reports-tab:hover,
.reports-tab.is-active {
    border-color: color-mix(in srgb, var(--ta-primary) 55%, var(--ta-border));
    background: var(--ta-primary-bg-10);
    color: var(--ta-text-main);
}

.reports-tab:focus-visible {
    outline: 3px solid var(--ta-primary-ring);
    outline-offset: 2px;
}

.reports-panels {
    padding: 1rem 1.1rem 1.1rem;
}

.reports-panel {
    display: grid;
    grid-template-columns: minmax(14rem, 0.78fr) minmax(0, 1.22fr);
    gap: 1rem;
    align-items: start;
}

.reports-panel[hidden] {
    display: none !important;
}

.reports-builder {
    display: grid;
    grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.1rem 1.1rem;
}

.reports-builder-summary,
.reports-filter-box {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-main) 62%, transparent);
}

.reports-builder-summary h3 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 1.15rem;
    font-weight: 850;
}

.reports-builder-summary p:not(.reports-kicker) {
    margin: 0.35rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.9rem;
}

.reports-builder-fields {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.reports-builder label {
    display: grid;
    gap: 0.36rem;
    min-width: 0;
}

.reports-builder label > span {
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 780;
}

.reports-range-help {
    margin: 0;
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.reports-filter-box {
    display: grid;
    gap: 0.65rem;
}

.reports-filter-box--compact {
    justify-self: start;
    width: min(100%, 20rem);
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
}

.reports-filter-box--compact.is-filtering-by-type {
    width: min(100%, 56rem);
}

.reports-filter-box--mode {
    width: min(100%, 28rem);
}

.reports-filter-box--member,
.reports-filter-box--monthly-range {
    width: min(100%, 60rem);
}

.reports-filter-box--compact .reports-kicker {
    margin: 0;
}

.reports-offering-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.6rem;
}

.reports-offering-filter-grid [data-remark-filter-wrap] {
    min-width: 0;
}

.reports-member-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
}

.reports-member-filter-grid [data-member-value-wrap] {
    grid-column: span 2;
    min-width: 0;
}

.reports-member-filter-grid [data-member-offering-type-wrap] {
    grid-column: span 2;
    min-width: 0;
}

.reports-member-filter-grid [data-member-remark-filter-wrap] {
    grid-column: span 3;
    min-width: 0;
}

.reports-builder .reports-actions {
    grid-column: auto;
}

.reports-panel-copy {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-main) 62%, transparent);
}

.reports-panel-copy h3 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 1.15rem;
    font-weight: 850;
}

.reports-panel-copy p:not(.reports-kicker) {
    margin: 0.35rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.9rem;
}

.reports-panel-fields {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.reports-panel label {
    display: grid;
    gap: 0.36rem;
    min-width: 0;
}

.reports-panel label > span {
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 780;
}

.reports-actions {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(10rem, 0.7fr) minmax(18rem, 1.35fr);
    gap: 0.65rem;
}

.reports-download-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.reports-download-actions[hidden] {
    display: none !important;
}

.reports-preview-modal[hidden] {
    display: none !important;
}

.reports-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: grid;
    place-items: center;
    padding: clamp(0.5rem, 2vw, 1.25rem);
}

.reports-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 5, 0.52);
    opacity: 0;
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    transition: opacity 160ms ease;
}

.reports-preview-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(96rem, 100%);
    height: min(92vh, 60rem);
    height: min(92dvh, 60rem);
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    min-height: 20rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 18%, var(--ta-border-soft));
    border-radius: 10px;
    background: var(--ta-bg-surface);
    box-shadow: 0 28px 80px rgba(2, 43, 58, 0.34);
    opacity: 0;
    transform: translateY(0.75rem) scale(0.985);
    transition: opacity 160ms ease, transform 160ms ease;
}

.reports-preview-modal.is-open .reports-preview-backdrop,
.reports-preview-modal.is-open .reports-preview-dialog {
    opacity: 1;
}

.reports-preview-modal.is-open .reports-preview-dialog {
    transform: translateY(0) scale(1);
}

body.reports-preview-modal-open .main-scroll {
    overflow: hidden;
    overscroll-behavior: none;
}

.reports-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ta-border-soft);
    background: color-mix(in srgb, var(--ta-bg-header) 88%, var(--ta-bg-surface));
}

.reports-preview-head h3 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 1rem;
    font-weight: 850;
}

.reports-preview-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
}

.reports-preview-head-actions > span {
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    font-weight: 780;
    text-align: right;
}

.reports-preview-close-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-surface);
    color: var(--ta-text-muted);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.reports-preview-close-icon:hover,
.reports-preview-close-icon:focus-visible {
    border-color: color-mix(in srgb, var(--ta-danger) 36%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-danger) 8%, var(--ta-bg-surface));
    color: var(--ta-danger);
    outline: none;
    transform: translateY(-1px);
}

.reports-preview-close-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.reports-preview-frame {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--ta-bg-surface);
    overscroll-behavior: contain;
}

.reports-preview-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
}

.reports-preview-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ta-border-soft);
    background: color-mix(in srgb, var(--ta-bg-header) 88%, var(--ta-bg-surface));
}

.reports-preview-download-actions {
    flex: 1 1 36rem;
    max-width: 36rem;
}

.reports-print-frame {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.reports-preview-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1rem;
    color: var(--ta-text-muted);
    font-weight: 780;
    text-align: center;
}

.reports-preview-message-error {
    color: var(--ta-danger);
}

.sda-match-panel,
.reports-match-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    margin-top: 0.45rem;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--ta-border-soft);
    border-radius: 0.75rem;
    background: var(--ta-bg-surface);
    box-shadow: 0 18px 40px color-mix(in srgb, #000 32%, transparent);
}

.sda-match-panel.reports-match-panel-above,
.reports-match-panel.reports-match-panel-above {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.45rem;
}

.sda-match-panel button,
.reports-match-panel button {
    display: block;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--ta-text-main);
    text-align: left;
    transition: background-color 0.16s ease;
}

.sda-match-panel button + button,
.reports-match-panel button + button {
    border-top: 1px solid var(--ta-border-soft);
}

.sda-match-panel button:hover,
.reports-match-panel button:hover {
    background: var(--ta-row-hover);
}

.sda-match-panel span,
.reports-match-panel span {
    display: block;
}

.sda-match-panel span:first-child,
.reports-match-panel span:first-child {
    color: var(--ta-text-main);
    font-size: 0.875rem;
    font-weight: 700;
}

.sda-match-panel span + span,
.reports-match-panel span + span {
    margin-top: 0.15rem;
    color: var(--ta-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .reports-hero,
    .reports-grid {
        grid-template-columns: 1fr;
    }

    .reports-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-workspace-head,
    .reports-panel,
    .reports-builder {
        grid-template-columns: 1fr;
    }

    .reports-workspace-head {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-actions {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .reports-filter-box--compact,
    .reports-filter-box--compact.is-filtering-by-type {
        width: 100%;
    }

    .reports-member-filter-grid [data-member-value-wrap],
    .reports-member-filter-grid [data-member-offering-type-wrap],
    .reports-member-filter-grid [data-member-remark-filter-wrap] {
        grid-column: 1;
    }

    .reports-period-controls {
        grid-template-columns: 1fr;
    }

    .reports-period-controls > .reports-form-grid[data-range-mode-wrap],
    .reports-period-controls > [data-range-section] {
        grid-column: 1;
    }

    .reports-form-grid,
    .reports-form-grid-admin {
        grid-template-columns: 1fr;
    }

    .reports-card,
    .reports-hero {
        padding: 1rem;
    }

    .reports-panels,
    .reports-tabs,
    .reports-workspace-head,
    .reports-builder {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .reports-preview-modal {
        padding: 0.35rem;
    }

    .reports-preview-dialog {
        width: 100%;
        height: calc(100vh - 0.7rem);
        height: calc(100dvh - 0.7rem);
        max-height: calc(100vh - 0.7rem);
        max-height: calc(100dvh - 0.7rem);
        min-height: 16rem;
        border-radius: 8px;
    }

    .reports-preview-head {
        gap: 0.65rem;
        padding: 0.7rem 0.75rem;
    }

    .reports-preview-head-actions {
        gap: 0.45rem;
    }

    .reports-preview-head-actions > span {
        max-width: 9rem;
    }

    .reports-preview-footer {
        align-items: stretch;
        flex-direction: column;
        padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
    }

    .reports-actions {
        grid-template-columns: 1fr;
    }

    .reports-download-actions {
        grid-template-columns: 1fr;
    }

    .reports-preview-download-actions {
        flex-basis: auto;
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reports-preview-footer > [data-report-preview-close] {
        width: 100%;
    }
}

/* ============================================================================
   PUBLIC MANAGEMENT WORKSPACE
   A public-facing, permission-shaped workspace. Intentionally scoped away from
   the administrator shell so both interfaces can evolve independently.
   ============================================================================ */
.public-management-app {
    --public-management-header-h: 4rem;
}

.public-management-page,
.public-management-workspace,
.public-management-main,
.public-management-main__inner,
.public-management-shell {
    min-width: 0;
}

.public-management-top-nav__row {
    height: var(--public-management-header-h);
}

.public-management-top-nav__brand {
    flex: 1 1 auto;
}

.public-management-official-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

.public-management-official-brand__full {
    position: relative;
    display: block;
    width: 8.5rem;
    height: 2.125rem;
}

.public-management-official-brand__logo {
    width: 8.5rem;
    height: 2.125rem;
    object-fit: contain;
    object-position: left center;
}

.public-management-official-brand__compact {
    display: none;
}

.public-management-drawer-toggle,
.public-management-collapse-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
}

.public-management-collapse-toggle {
    display: inline-flex;
}

.public-management-drawer-toggle .evo-svg,
.public-management-collapse-toggle .evo-svg {
    width: 1.25rem;
    height: 1.25rem;
}

.public-management-collapse-toggle__icon {
    transition: transform 180ms ease;
}

.public-management-shell {
    display: grid;
    grid-template-columns: minmax(16.5rem, 18rem) minmax(0, 1fr);
    align-items: stretch;
    transition: grid-template-columns 180ms ease;
}

.public-management-shell[data-sidebar-collapsed="true"] {
    grid-template-columns: 5.5rem minmax(0, 1fr);
}

.public-management-sidebar {
    position: sticky;
    top: var(--public-management-header-h);
    z-index: 30;
    height: calc(100vh - var(--public-management-header-h));
    height: calc(100dvh - var(--public-management-header-h));
    overflow: hidden;
    border-right: 1px solid var(--ta-border-soft);
    background: var(--ta-bg-sidebar);
}

.public-management-sidebar__inner {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    scrollbar-width: thin;
}

.public-management-back-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 28%, var(--ta-border-soft));
    border-radius: 1rem;
    background: var(--ta-bg-surface);
    color: var(--ta-text-main);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--ta-primary) 9%, transparent);
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.public-management-back-link:hover {
    border-color: color-mix(in srgb, var(--ta-primary) 58%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-surface));
    transform: translateY(-1px);
}

.public-management-back-link__icon {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: var(--ta-primary-bg-12);
    color: var(--ta-primary);
}

.public-management-back-link__icon .evo-svg {
    width: 1.05rem;
    height: 1.05rem;
}

.public-management-back-link__label {
    font-size: 0.96rem;
    font-weight: 800;
}

.public-management-menu {
    display: grid;
    gap: 1.1rem;
    margin-top: 0.85rem;
    padding-bottom: 1.5rem;
}

.public-management-menu__section {
    display: grid;
    gap: 0.45rem;
}

.public-management-menu__section-label {
    padding: 0 0.65rem;
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.public-management-menu__items,
.public-management-menu__submenu {
    display: grid;
    gap: 0.25rem;
}

.public-management-menu__item {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    background: transparent;
    color: var(--ta-text-main);
    font: inherit;
    font-size: 0.87rem;
    font-weight: 650;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.public-management-menu__item[data-management-menu-depth="1"] {
    padding-left: 0.7rem;
}

.public-management-menu__item[data-management-menu-depth="2"] {
    padding-left: 1rem;
}

.public-management-menu__item:hover,
.public-management-menu__branch.has-active-descendant > .public-management-menu__accordion {
    background: color-mix(in srgb, var(--ta-primary) 8%, transparent);
    color: var(--ta-primary);
}

.public-management-menu__item.is-active {
    border-color: color-mix(in srgb, var(--ta-primary) 28%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-primary) 13%, var(--ta-bg-surface));
    color: var(--ta-primary);
    font-weight: 800;
}

.public-management-menu__icon {
    flex-shrink: 0;
}

.public-management-menu__item.is-active .sidebar-icon-wrap {
    background: var(--ta-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(24, 108, 129, 0.2);
}

.public-management-menu__label {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.public-management-menu__chevron {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 0.95rem;
    color: var(--ta-text-muted);
    transition: transform 160ms ease;
}

.public-management-menu__branch.is-open > .public-management-menu__accordion .public-management-menu__chevron {
    transform: rotate(180deg);
}

.public-management-menu__submenu {
    margin: 0.2rem 0 0.35rem 1.65rem;
    padding-left: 0.35rem;
    border-left: 1px solid color-mix(in srgb, var(--ta-primary) 24%, var(--ta-border-soft));
}

.public-management-menu__submenu[hidden] {
    display: none !important;
}

@media (min-width: 1024px) {
    .public-management-shell[data-sidebar-collapsed="true"] .public-management-sidebar__inner {
        overflow-x: hidden;
    }

    .public-management-shell[data-sidebar-collapsed="true"] .public-management-back-link {
        width: 3rem;
        min-height: 3rem;
        justify-content: center;
        gap: 0;
        margin-inline: auto;
        padding: 0;
    }

    .public-management-shell[data-sidebar-collapsed="true"] .public-management-back-link__label,
    .public-management-shell[data-sidebar-collapsed="true"] .public-management-menu__section-label,
    .public-management-shell[data-sidebar-collapsed="true"] .public-management-menu__label,
    .public-management-shell[data-sidebar-collapsed="true"] .public-management-menu__chevron,
    .public-management-shell[data-sidebar-collapsed="true"] .public-management-menu__status {
        display: none !important;
    }

    .public-management-shell[data-sidebar-collapsed="true"] .public-management-menu__section,
    .public-management-shell[data-sidebar-collapsed="true"] .public-management-menu__items {
        justify-items: center;
        gap: 0.35rem;
    }

    .public-management-shell[data-sidebar-collapsed="true"] .public-management-menu__item {
        width: 3rem;
        height: 3rem;
        min-height: 3rem;
        justify-content: center;
        gap: 0;
        margin-inline: auto;
        padding: 0 !important;
    }

    .public-management-shell[data-sidebar-collapsed="true"] .public-management-menu__submenu {
        display: none !important;
    }
}

.public-management-menu__status {
    padding: 1rem;
    border: 1px dashed var(--ta-border-soft);
    border-radius: 0.9rem;
    color: var(--ta-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.public-management-menu__status a {
    display: inline-flex;
    margin-top: 0.7rem;
    color: var(--ta-primary);
    font-weight: 750;
    text-decoration: none;
}

.public-management-workspace {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--public-management-header-h));
    min-height: calc(100dvh - var(--public-management-header-h));
}

.public-management-main {
    flex: 1 1 auto;
    padding: 1rem clamp(1rem, 2.4vw, 2.25rem) 2.5rem;
}

.public-management-main__inner {
    width: min(100%, 96rem);
    margin: 0 auto;
}

.public-management-breadcrumbs {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
    overflow: hidden;
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.public-management-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.public-management-breadcrumbs a:hover,
.public-management-breadcrumbs__current {
    color: var(--ta-primary);
}

.public-management-breadcrumbs__current {
    overflow: hidden;
    font-weight: 750;
    text-overflow: ellipsis;
}

.public-management-breadcrumbs__separator {
    color: color-mix(in srgb, var(--ta-text-muted) 55%, transparent);
}

.public-management-overlay {
    display: none;
}

.public-management-overlay[hidden] {
    display: none !important;
}

.public-management-app :where(a, button):focus-visible {
    outline: 2px solid var(--ta-primary);
    outline-offset: 3px;
}

@media (max-width: 1023.98px) {
    .public-management-top-nav__row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        min-height: var(--public-management-header-h);
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .public-management-top-nav__brand {
        grid-column: 1;
        grid-row: 1;
    }

    .public-management-top-nav .public-top-nav__controls {
        grid-column: 2;
        grid-row: 1;
    }

    .public-management-app .public-management-top-nav #notificationPanel,
    .public-management-app .public-management-top-nav #userMenuPanel {
        top: calc(var(--public-management-header-h) + 0.5rem) !important;
    }

    .public-management-drawer-toggle {
        display: inline-flex;
    }

    .public-management-collapse-toggle {
        display: none;
    }

    .public-management-shell {
        display: block;
    }

    .public-management-sidebar {
        position: fixed;
        top: var(--public-management-header-h);
        bottom: 0;
        left: 0;
        z-index: 85;
        width: min(20rem, calc(100vw - 2.5rem));
        height: auto;
        border-right: 1px solid var(--ta-border-soft);
        box-shadow: 24px 0 54px rgb(0 0 0 / 0.22);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 200ms ease, visibility 200ms step-end;
    }

    .public-management-sidebar[data-open="true"] {
        transform: translateX(0);
        visibility: visible;
        transition: transform 200ms ease, visibility 0ms step-start;
    }

    .public-management-sidebar__inner {
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }

    .public-management-overlay:not([hidden]) {
        position: fixed;
        inset: var(--public-management-header-h) 0 0;
        z-index: 80;
        display: block;
        width: 100%;
        height: auto;
        border: 0;
        background: rgb(3 12 15 / 0.58);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        cursor: default;
    }

    html.public-management-drawer-open,
    html.public-management-drawer-open body {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .public-management-main {
        padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) 2rem max(0.75rem, env(safe-area-inset-left));
    }

}

@media (max-width: 639.98px) {
    .public-management-top-nav__inner {
        padding-left: max(0.4rem, env(safe-area-inset-left));
        padding-right: max(0.4rem, env(safe-area-inset-right));
    }

    .public-management-top-nav__row {
        gap: 0.3rem !important;
    }

    .public-management-official-brand__full {
        display: none;
    }

    .public-management-official-brand__compact {
        position: relative;
        display: block;
        width: 2rem;
        height: 2rem;
    }

    .public-management-official-brand__mark {
        width: 2rem;
        height: 2rem;
        object-fit: contain;
    }

    .public-management-top-nav .public-top-nav__controls {
        gap: 0.25rem !important;
    }

    .public-management-breadcrumbs {
        min-height: 1.75rem;
        margin-bottom: 0.5rem;
    }
}


@media (prefers-reduced-motion: reduce) {
    .public-management-shell,
    .public-management-sidebar,
    .public-management-collapse-toggle__icon,
    .public-management-back-link,
    .public-management-menu__item,
    .public-management-menu__chevron {
        scroll-behavior: auto;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   MOBILE-FIRST APPLICATION SHELL
   - Keeps the desktop shell unchanged at 1024px and above.
   - Uses explicit shell classes for browsers that do not support :has().
   ============================================================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.app-shell {
    height: 100vh;
    height: 100dvh;
}

.main-scroll {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
}

body.public-app {
    min-width: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.public-app.reports-preview-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

@supports (overflow: clip) {
    body.public-app {
        overflow-x: clip !important;
    }
}

body.public-app #appMainContent,
body.public-app .evo-module-root {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
}

body.public-app main,
body.public-app #appMainContent,
body.public-app .evo-module-root,
.app-shell,
.main-content,
.main-scroll {
    min-width: 0;
    max-width: 100%;
}

.public-top-nav,
.admin-top-nav {
    overflow: visible !important;
}

.public-top-nav__home-link {
    display: none;
}

.public-nav-scroll {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.evo-language-switcher {
    min-width: 0;
    align-items: center;
}

.evo-language-switcher--full {
    width: min(9.5rem, 32vw);
}

.evo-language-switcher--compact {
    width: 3.25rem;
    flex: 0 0 3.25rem;
}

.evo-language-switcher > .evo-select {
    width: 100%;
    min-width: 0;
}

.evo-language-switcher--compact .evo-select__btn {
    min-width: 3.25rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.6rem;
    gap: 0.4rem;
}

.evo-language-switcher--compact .evo-select__chev {
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 5px;
}

.ta-table-scroll {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023.98px) {
    .public-top-nav__inner {
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
    }

    .public-top-nav__row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        width: 100%;
        height: auto !important;
        min-height: 4rem;
        gap: 0.35rem 0.5rem !important;
        padding-top: 0.5rem;
        padding-bottom: 0.4rem;
    }

    .public-top-nav__brand-slot {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .public-top-nav__home-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        flex: 0 0 2.75rem;
        border: 1px solid var(--ta-border-soft);
        border-radius: 0.875rem;
        background: var(--ta-bg-surface);
        color: var(--ta-text-main);
    }

    .public-top-nav__home-link:focus-visible {
        outline: 2px solid var(--ta-primary);
        outline-offset: 2px;
    }

    .public-top-nav__home-mark {
        width: 1.75rem;
        height: 1.75rem;
        object-fit: contain;
    }

    .public-top-nav__controls {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        gap: 0.375rem !important;
    }

    .public-top-nav__menu-wrap {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        padding: 0.15rem 0 0 !important;
    }

    .public-top-nav__menu {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 0.25rem;
        padding: 0 0.1rem 0.25rem;
    }

    .public-top-nav__menu .public-nav-link {
        min-height: 2.75rem;
        padding: 0.6rem 0.85rem;
        scroll-snap-align: start;
    }

    .public-top-nav__menu [data-public-nav-section-separator] {
        height: 1.75rem;
    }

    .admin-top-nav__row {
        min-height: 4rem;
        height: auto !important;
    }

    #sidebarMobileToggle {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
    }

    .sidebar {
        z-index: 80 !important;
        max-width: min(18rem, calc(100vw - 3rem));
    }

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

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

    html[data-evo-shell="admin"].sidebar-open,
    html[data-evo-shell="admin"].sidebar-open body {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    html[data-evo-shell="admin"].sidebar-open #mobileToggleWrap {
        transform: translateX(calc(min(18rem, calc(100vw - 3rem)) - 0.75rem)) !important;
    }

    .public-top-nav #userMenuPanel,
    .public-top-nav #notificationPanel {
        position: fixed !important;
        top: 7.25rem !important;
        right: max(0.5rem, env(safe-area-inset-right)) !important;
        left: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

@media (max-width: 639.98px) {
    .evo-language-switcher--full {
        display: none !important;
    }

    .evo-language-switcher--compact {
        display: inline-flex !important;
    }

    .public-top-nav__controls,
    .admin-top-nav__controls {
        gap: 0.25rem !important;
    }

    .public-top-nav__controls .navbar-icon-btn,
    .admin-top-nav__controls .navbar-icon-btn,
    .public-top-nav__controls .evo-theme-toggle,
    .admin-top-nav__controls .evo-theme-toggle,
    #sidebarMobileToggle {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    #userMenuBtn {
        padding: 0.25rem !important;
    }

    #userMenuPanel,
    #notificationPanel {
        max-width: calc(100vw - 1rem) !important;
    }

    .evo-auth-navbar {
        padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .evo-auth-navbar__row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
    }

    .evo-auth-navbar__row > :first-child {
        min-width: 0;
    }

    .evo-auth-navbar__controls {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .evo-auth-navbar .portal-brand-wordmark {
        width: min(6.5rem, 32vw);
        max-width: 6.5rem;
    }

    body.public-app main {
        padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
        padding-top: 0.875rem !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }

    body.public-app .evo-module-root:not(.dashboard-root) {
        padding: 0.5rem 0 1rem !important;
    }

    html[data-evo-shell="admin"] .main-scroll {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    html[data-evo-shell="admin"] .evo-module-root:not(.dashboard-root) {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    body.public-app .evo-module-filter-panel {
        padding: 0.75rem;
    }

    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
        font-size: 1rem;
        min-height: 2.75rem;
    }

    .ta-page-pill,
    .ta-page-number,
    .ta-page-nav,
    .ta-row-actions .evo-action-icon {
        min-width: 2.75rem !important;
        width: 2.75rem;
        min-height: 2.75rem !important;
        height: 2.75rem;
    }

    .ta-pagination-bar {
        padding: 0.75rem !important;
    }
}

@media (min-width: 640px) {
    .evo-language-switcher--full {
        display: inline-flex !important;
    }

    .evo-language-switcher--compact {
        display: none !important;
    }
}

@media (max-width: 640px), (max-height: 700px) {
    body.auth-login-page {
        overflow-y: auto !important;
    }

    body.auth-login-page .auth-shell {
        min-height: 100vh;
        min-height: 100dvh;
    }
}

@media (pointer: coarse) {
    .navbar-icon-btn,
    .evo-theme-toggle,
    .evo-global-search-close,
    .public-nav-link,
    .sidebar-item,
    .ta-page-pill,
    .ta-page-number,
    .ta-page-nav,
    .ta-row-actions .evo-action-icon {
        min-height: 2.75rem;
    }
}

@media (max-width: 480px) {
    .evo-date-panel {
        left: max(0.5rem, env(safe-area-inset-left)) !important;
        right: max(0.5rem, env(safe-area-inset-right)) !important;
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

@media (max-width: 420px) {
    .reports-preview-download-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .public-nav-link,
    .navbar-icon-btn,
    .evo-theme-toggle,
    .evo-global-search-close,
    .evo-global-search-query,
    .evo-global-search-result {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .evo-global-search-result:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reports-preview-backdrop,
    .reports-preview-dialog {
        transition: none;
    }
}

.ta-btn,
button.ta-btn,
a.ta-btn,
input.ta-btn[type="submit"],
input.ta-btn[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    min-width: 0;
    padding: 0.72rem 1rem;
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    background: var(--ta-bg-surface);
    color: var(--ta-text-main);
    font-size: 0.92rem;
    font-weight: 820;
    line-height: 1.12;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 -1px 0 rgba(15, 23, 42, 0.05);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.ta-btn:hover,
button.ta-btn:hover,
a.ta-btn:hover,
input.ta-btn[type="submit"]:hover,
input.ta-btn[type="button"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    text-decoration: none;
}

.ta-btn:active,
button.ta-btn:active,
a.ta-btn:active,
input.ta-btn[type="submit"]:active,
input.ta-btn[type="button"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.ta-btn:focus-visible,
button.ta-btn:focus-visible,
a.ta-btn:focus-visible,
input.ta-btn[type="submit"]:focus-visible,
input.ta-btn[type="button"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ta-primary) 24%, transparent);
    outline-offset: 2px;
}

.ta-btn:disabled,
button.ta-btn:disabled,
input.ta-btn[type="submit"]:disabled,
input.ta-btn[type="button"]:disabled,
.ta-btn[disabled],
.ta-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

:where(button, input[type="submit"], input[type="button"]).evo-button-busy,
:where(button, input[type="submit"], input[type="button"])[aria-busy="true"] {
    cursor: wait !important;
    pointer-events: none !important;
    opacity: 0.72;
}

:where(button, input[type="submit"], input[type="button"]).evo-button-busy::before {
    content: "";
    width: 0.95em;
    height: 0.95em;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    display: inline-block;
    animation: evo-button-spin 0.7s linear infinite;
}

@keyframes evo-button-spin {
    to {
        transform: rotate(360deg);
    }
}

.ta-btn-primary,
button.ta-btn-primary,
a.ta-btn-primary,
input.ta-btn-primary[type="submit"],
input.ta-btn-primary[type="button"] {
    border-color: var(--ta-primary);
    background: var(--ta-primary);
    color: #fff !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--ta-primary) 22%, transparent);
}

.ta-btn-primary:hover,
button.ta-btn-primary:hover,
a.ta-btn-primary:hover,
input.ta-btn-primary[type="submit"]:hover,
input.ta-btn-primary[type="button"]:hover {
    border-color: color-mix(in srgb, var(--ta-primary) 88%, #fff 12%);
    background: color-mix(in srgb, var(--ta-primary) 88%, #fff 12%);
}

.ta-btn-secondary,
button.ta-btn-secondary,
a.ta-btn-secondary,
input.ta-btn-secondary[type="submit"],
input.ta-btn-secondary[type="button"] {
    border-color: var(--ta-border);
    background: var(--ta-bg-main);
    color: var(--ta-text-main) !important;
}

.ta-btn-secondary:hover,
button.ta-btn-secondary:hover,
a.ta-btn-secondary:hover,
input.ta-btn-secondary[type="submit"]:hover,
input.ta-btn-secondary[type="button"]:hover {
    border-color: color-mix(in srgb, var(--ta-primary) 22%, var(--ta-border));
    background: color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-main));
}

.ta-btn .evo-icon-mask,
.ta-btn svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

html[data-theme="dark"] .ta-btn,
html[data-theme="dark"] button.ta-btn,
html[data-theme="dark"] a.ta-btn,
html[data-theme="dark"] input.ta-btn[type="submit"],
html[data-theme="dark"] input.ta-btn[type="button"] {
    border-color: color-mix(in srgb, var(--evo-neutral-100) 16%, transparent);
    background: color-mix(in srgb, var(--evo-neutral-100) 8%, transparent);
    color: var(--evo-neutral-100) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .ta-btn-primary,
html[data-theme="dark"] button.ta-btn-primary,
html[data-theme="dark"] a.ta-btn-primary,
html[data-theme="dark"] input.ta-btn-primary[type="submit"],
html[data-theme="dark"] input.ta-btn-primary[type="button"] {
    border-color: var(--evo-neutral-100);
    background: var(--evo-neutral-100);
    color: var(--evo-neutral-950) !important;
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .ta-btn-primary:hover,
html[data-theme="dark"] button.ta-btn-primary:hover,
html[data-theme="dark"] a.ta-btn-primary:hover,
html[data-theme="dark"] input.ta-btn-primary[type="submit"]:hover,
html[data-theme="dark"] input.ta-btn-primary[type="button"]:hover {
    border-color: #fff;
    background: #fff;
}

/* =========================================================
   SHARED DATA TABLES - DASHBOARD-GRADE SDA TREATMENT
   ========================================================= */
.ta-table-wrapper {
    border-radius: 8px !important;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 10%, var(--ta-border-soft)) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ta-bg-surface) 94%, #fff 6%) 0%, var(--ta-bg-surface) 100%),
        var(--ta-bg-surface) !important;
    box-shadow: 0 18px 45px rgba(2, 43, 58, 0.07) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

.ta-table-scroll {
    flex: 0 1 auto !important;
    max-height: min(66vh, 680px) !important;
    max-height: min(66dvh, 680px) !important;
    padding-bottom: 0 !important;
    background: transparent;
}

.ta-table {
    --ta-table-header-bg:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ta-primary) 8%, var(--ta-bg-surface)) 0%,
            color-mix(in srgb, var(--ta-primary) 4%, var(--ta-bg-surface)) 100%);
    width: 100%;
    min-width: max(760px, 100%);
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
}

.ta-table thead th {
    height: 42px;
    padding: 0.78rem 1.05rem !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ta-primary) 10%, var(--ta-border-soft));
    background: var(--ta-table-header-bg) !important;
    color: color-mix(in srgb, var(--ta-primary) 74%, var(--ta-text-main)) !important;
    font-family: inherit !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    line-height: 1.1;
    vertical-align: middle;
}

.ta-table tbody tr {
    background: var(--ta-bg-surface);
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ta-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--ta-primary) 1.8%, var(--ta-bg-surface));
}

.ta-table tbody tr:hover {
    background: color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-surface)) !important;
    box-shadow: inset 4px 0 0 var(--ta-primary);
}

.ta-table tbody td {
    height: 54px;
    padding: 0.78rem 1.05rem !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ta-primary) 7%, var(--ta-border-soft)) !important;
    color: var(--ta-text-main);
    font-size: 0.91rem;
    line-height: 1.35;
    vertical-align: middle;
}

.ta-table tbody tr:last-child td {
    border-bottom-color: transparent !important;
}

.ta-table th:first-child {
    width: 3.25rem;
}

.ta-table td[data-col="_row_number"] {
    width: 3.25rem;
    color: color-mix(in srgb, var(--ta-primary) 62%, var(--ta-text-muted)) !important;
    font-weight: 700;
}

.ta-table td[data-col="code"],
.ta-table td[data-col="reference"] {
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    letter-spacing: 0;
}

.ta-table td[data-col="code"],
.ta-table td[data-col="reference"] {
    color: color-mix(in srgb, var(--ta-primary) 58%, var(--ta-text-main));
    font-size: 0.84rem;
}

.ta-ref-code {
    display: inline-flex;
    max-width: min(38ch, 46vw);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.ta-member-cell {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.72rem;
}

.ta-member-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 16%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-primary) 9%, var(--ta-bg-main));
    color: var(--ta-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.ta-member-name {
    display: block;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 750;
}

.ta-member-note {
    display: block;
    margin-top: 0.08rem;
    color: var(--ta-text-muted);
    font-size: 0.74rem;
}

.ta-member-cell--unknown .ta-member-avatar {
    border-color: color-mix(in srgb, #c97a18 24%, var(--ta-border-soft));
    background: color-mix(in srgb, #f8c471 20%, var(--ta-bg-main));
    color: #9a4b08;
}

.ta-member-cell--unknown .ta-member-name {
    color: #9a4b08;
}

.ta-sticky-actions-cell {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 1%;
    min-width: 0;
    border-left: 1px solid color-mix(in srgb, var(--ta-primary) 8%, var(--ta-border-soft)) !important;
    background: color-mix(in srgb, var(--ta-bg-surface) 92%, #fff 8%) !important;
    box-shadow: -12px 0 20px rgba(2, 43, 58, 0.035);
}

.ta-table th[data-col="_actions"] {
    position: sticky;
    right: 0;
    z-index: 12;
    width: 1%;
    min-width: 0;
    text-align: center !important;
    background: var(--ta-table-header-bg) !important;
    box-shadow: none;
}

.ta-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    width: max-content;
    max-width: max-content;
}

.ta-row-actions .evo-action-icon {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 10%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-primary) 2.5%, var(--ta-bg-surface));
    opacity: 1;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.ta-row-actions .evo-action-icon:hover,
.ta-row-actions .evo-action-icon:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, currentColor 38%, var(--ta-border-soft));
    background: color-mix(in srgb, currentColor 9%, var(--ta-bg-surface));
    box-shadow: 0 10px 22px rgba(2, 43, 58, 0.11);
    outline: none;
}

.ta-pagination-bar {
    margin-top: 0 !important;
    padding: 0.86rem 1.05rem !important;
    border-top: 1px solid color-mix(in srgb, var(--ta-primary) 7%, var(--ta-border-soft)) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ta-bg-surface) 96%, #fff 4%) 0%,
            color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface)) 100%) !important;
    color: var(--ta-text-muted);
}

.ta-page-info {
    color: color-mix(in srgb, var(--ta-text-main) 78%, var(--ta-text-muted));
    font-size: 0.84rem;
}

.ta-page-pill,
.ta-page-number {
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.78rem !important;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--ta-primary) 10%, var(--ta-border-soft)) !important;
    background: color-mix(in srgb, var(--ta-bg-surface) 94%, #fff 6%) !important;
    color: color-mix(in srgb, var(--ta-text-main) 76%, var(--ta-text-muted)) !important;
    font-weight: 700;
}

.ta-page-nav {
    width: 2.35rem;
    min-width: 2.35rem;
    padding: 0 !important;
}

.ta-page-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: currentColor;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ta-page-pill:hover,
.ta-page-number:hover {
    border-color: color-mix(in srgb, var(--ta-primary) 28%, var(--ta-border-soft)) !important;
    background: color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-surface)) !important;
}

.ta-active {
    border-color: var(--ta-primary) !important;
    background: var(--ta-primary) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ta-primary) 24%, transparent);
}

@media (max-width: 640px) {
    .ta-table-wrapper {
        margin-inline: -0.25rem;
    }

    .ta-table {
        min-width: 700px;
    }

    .ta-table thead th,
    .ta-table tbody td {
        padding-inline: 0.82rem !important;
    }

    .ta-table-scroll {
        max-height: 62vh !important;
        max-height: 62dvh !important;
    }

    .ta-table th[data-col="_actions"],
    .ta-table td[data-col="_actions"] {
        padding-inline: 0.55rem !important;
    }

    .ta-row-actions {
        gap: 0.28rem;
    }

    .ta-row-actions .evo-action-icon {
        width: 1.86rem;
        height: 1.86rem;
    }

    .ta-row-actions .evo-action-icon svg {
        width: 0.96rem;
        height: 0.96rem;
    }

    .ta-pagination-bar {
        align-items: stretch;
    }

    .ta-pagination-buttons {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.1rem;
    }
}

@media (max-width: 420px), (max-height: 430px) and (orientation: landscape) {
    .ta-table th[data-col="_actions"],
    .ta-table td[data-col="_actions"] {
        padding-inline: 0.42rem !important;
    }

    .ta-row-actions {
        gap: 0.22rem;
    }

    .ta-row-actions .evo-action-icon {
        width: 1.7rem;
        height: 1.7rem;
        border-radius: 7px;
    }

    .ta-row-actions .evo-action-icon svg {
        width: 0.86rem;
        height: 0.86rem;
    }
}

html[data-theme="dark"] .ta-table-wrapper {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: color-mix(in srgb, var(--evo-neutral-900) 94%, #fff 6%) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .ta-table thead th {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--evo-neutral-100) !important;
}

html[data-theme="dark"] .ta-table tbody tr,
html[data-theme="dark"] .ta-sticky-actions-cell {
    background: color-mix(in srgb, var(--evo-neutral-900) 94%, #fff 6%) !important;
}

html[data-theme="dark"] .ta-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.035) !important;
}

html[data-theme="dark"] .ta-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.075) !important;
}

html[data-theme="dark"] .ta-pagination-bar {
    background: rgba(255, 255, 255, 0.045) !important;
}

/* =========================================================
   SHARED MODALS - DASHBOARD-GRADE SDA TREATMENT
   ========================================================= */
#evoModal {
    background: rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    padding: clamp(0.75rem, 2vw, 1.25rem);
}

#evoModalOverlay {
    background: rgba(3, 4, 5, 0.24) !important;
}

#evoModalBox {
    width: min(1040px, calc(100vw - 1.5rem)) !important;
    max-height: min(900px, calc(100vh - 1.5rem)) !important;
    max-height: min(900px, calc(100dvh - 1.5rem)) !important;
    border-radius: 8px !important;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 14%, var(--ta-border-soft)) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ta-bg-surface) 96%, #fff 4%) 0%, var(--ta-bg-surface) 100%),
        var(--ta-bg-surface) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        0 2px 0 rgba(255, 255, 255, 0.74) inset !important;
    overflow: hidden;
}

#evoModalBox::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--sda-ming), color-mix(in srgb, var(--sda-cave) 70%, var(--sda-forest) 30%));
    pointer-events: none;
}

#evoModalHeader {
    min-height: 4.25rem;
    padding: 1rem clamp(1rem, 2.4vw, 1.55rem) 0.95rem !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ta-primary) 8%, var(--ta-border-soft)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-surface)), transparent 48%),
        color-mix(in srgb, var(--ta-bg-surface) 96%, var(--ta-bg-main) 4%) !important;
}

#evoModalTitle {
    color: var(--ta-text-main) !important;
    font-size: clamp(1rem, 1.8vw, 1.18rem) !important;
    font-weight: 850 !important;
    letter-spacing: 0;
    line-height: 1.2;
}

#evoModalTitle::before {
    content: "";
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    margin-right: 0.65rem;
    border-radius: 999px;
    background: var(--ta-primary);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--ta-primary) 12%, transparent);
    vertical-align: 0.08em;
}

#evoModalCloseX {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 10%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-bg-surface) 92%, var(--ta-primary) 3%);
    color: var(--ta-text-muted) !important;
    line-height: 1;
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

#evoModalCloseX:hover,
#evoModalCloseX:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--sda-scarlett) 28%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--sda-scarlett) 8%, var(--ta-bg-surface));
    color: var(--sda-scarlett) !important;
    box-shadow: 0 10px 22px rgba(2, 43, 58, 0.10);
    outline: none;
}

#evoModalBody {
    padding: clamp(1rem, 2.4vw, 1.45rem) !important;
    max-height: calc(100vh - 12rem) !important;
    max-height: calc(100dvh - 12rem) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ta-primary) 2.5%, transparent), transparent 10rem),
        var(--ta-bg-surface) !important;
}

#evoModalBody :where(.rounded-2xl, .evo-profile-card > div, form#dynamicForm) {
    border-radius: 8px !important;
}

#evoModalBody .evo-profile-card {
    gap: 1rem;
    padding: 0 !important;
}

#evoModalBody .evo-profile-card :where(.border, [class*="ring-1"]) {
    border-color: color-mix(in srgb, var(--ta-primary) 9%, var(--ta-border-soft)) !important;
}

#evoModalBody .evo-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}

#evoModalBody .evo-profile-grid > .evo-profile-card {
    border: 1px solid color-mix(in srgb, var(--ta-primary) 9%, var(--ta-border-soft));
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface));
    padding: 1.15rem !important;
    box-shadow: 0 12px 28px color-mix(in srgb, #000 7%, transparent);
}

#evoModalBody .evo-profile-grid h3 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.95rem;
    font-weight: 850;
}

#evoModalBody .evo-profile-grid dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.95rem 1rem;
    margin: 0;
}

#evoModalBody .evo-profile-grid dl > div {
    min-width: 0;
}

#evoModalBody .evo-profile-grid dt {
    margin: 0 0 0.3rem;
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    font-weight: 780;
    line-height: 1.25;
}

#evoModalBody .evo-profile-grid dd {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.95rem;
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#evoModalFooter {
    position: relative;
    padding: 0.9rem clamp(1rem, 2.4vw, 1.55rem) !important;
    border-top: 1px solid color-mix(in srgb, var(--ta-primary) 8%, var(--ta-border-soft)) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ta-bg-surface) 92%, #fff 8%), color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface))) !important;
    gap: 0.65rem !important;
}

#evoModalActionBtn,
#evoModalCancelBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    min-width: 7.2rem;
    padding: 0.68rem 1rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 850 !important;
    line-height: 1.1;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

#evoModalActionBtn.hidden,
#evoModalCancelBtn.hidden {
    display: none !important;
}

#evoModalActionBtn {
    border: 1px solid var(--ta-primary) !important;
    background: var(--ta-primary) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--ta-primary) 24%, transparent);
}

#evoModalActionBtn:hover,
#evoModalActionBtn:focus-visible {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--ta-primary) 88%, #fff 12%) !important;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--ta-primary) 28%, transparent);
    outline: none;
}

#evoModalCancelBtn {
    border: 1px solid color-mix(in srgb, var(--ta-primary) 9%, var(--ta-border-soft)) !important;
    background: color-mix(in srgb, var(--ta-bg-surface) 92%, var(--ta-bg-main) 8%) !important;
    color: var(--ta-text-muted) !important;
}

#evoModalCancelBtn:hover,
#evoModalCancelBtn:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ta-primary) 22%, var(--ta-border-soft)) !important;
    background: color-mix(in srgb, var(--ta-primary) 6%, var(--ta-bg-surface)) !important;
    color: var(--ta-text-main) !important;
    outline: none;
}

#evoModalActionBtn:disabled,
#evoModalCancelBtn:disabled {
    opacity: 0.48;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

#evoModalBody .form-group {
    margin-bottom: 1rem !important;
}

#evoModalBody :where(.form-group, label) > :where(label, span:first-child),
#evoModalBody .form-group label {
    color: color-mix(in srgb, var(--ta-text-muted) 82%, var(--ta-primary)) !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.03em;
}

#evoModalBody :where(.form-control, .ta-input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
    border-radius: 8px !important;
    border-color: color-mix(in srgb, var(--ta-primary) 10%, var(--ta-border-soft)) !important;
    background-color: color-mix(in srgb, var(--ta-bg-main) 72%, #fff 28%) !important;
    color: var(--ta-text-main) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

#evoModalBody :where(.form-control, .ta-input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):focus {
    border-color: color-mix(in srgb, var(--ta-primary) 48%, var(--ta-border-soft)) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ta-primary) 14%, transparent),
        0 1px 0 rgba(255, 255, 255, 0.76) inset !important;
}

#evoModalBody textarea {
    min-height: 5.5rem;
}

.evo-profile-chrome {
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
}

.evo-profile-tabs {
    border-radius: 8px !important;
    border-color: color-mix(in srgb, var(--ta-primary) 10%, var(--ta-border-soft)) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ta-primary) 4%, var(--ta-bg-surface)), color-mix(in srgb, var(--ta-bg-main) 82%, #fff 18%)) !important;
    padding: 0.35rem !important;
    gap: 0.35rem !important;
}

.evo-tab-pill {
    min-height: 2.35rem;
    border-radius: 8px !important;
    padding: 0.58rem 0.88rem !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    letter-spacing: 0;
}

.evo-tab-pill.is-active {
    background: var(--ta-primary) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ta-primary) 20%, transparent) !important;
}

.evo-profile-actions-row {
    justify-content: center !important;
}

.evo-profile-actions {
    justify-content: center !important;
    gap: 0.5rem !important;
}

.evo-profile-btn {
    min-height: 2.45rem;
    border-radius: 8px !important;
    border-color: color-mix(in srgb, var(--ta-primary) 12%, var(--ta-border-soft)) !important;
    background: color-mix(in srgb, var(--ta-primary) 4%, var(--ta-bg-surface)) !important;
    color: var(--ta-text-main) !important;
    font-size: 0.84rem !important;
    font-weight: 820 !important;
}

.evo-profile-btn:hover,
.evo-profile-btn:focus-visible {
    border-color: color-mix(in srgb, var(--ta-primary) 32%, var(--ta-border-soft)) !important;
    background: color-mix(in srgb, var(--ta-primary) 9%, var(--ta-bg-surface)) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--ta-primary) 12%, transparent) !important;
    outline: none;
}

@media (max-width: 640px) {
    #evoModal {
        align-items: flex-end;
        padding: 0;
    }

    #evoModalBox {
        width: 100vw !important;
        max-height: 94vh !important;
        max-height: 94dvh !important;
        border-radius: 8px 8px 0 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
    }

    #evoModalHeader {
        min-height: 3.8rem;
        padding-inline: 1rem !important;
    }

    #evoModalBody {
        max-height: calc(94vh - 8.8rem) !important;
        max-height: calc(94dvh - 8.8rem) !important;
        padding: 1rem !important;
    }

    #evoModalFooter {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom)) !important;
    }

    #evoModalActionBtn,
    #evoModalCancelBtn {
        width: 100%;
    }
}

html[data-theme="dark"] #evoModal {
    background: rgba(0, 0, 0, 0.46) !important;
    backdrop-filter: blur(14px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(118%) !important;
}

html[data-theme="dark"] #evoModalOverlay {
    background: rgba(3, 4, 5, 0.34) !important;
    backdrop-filter: blur(18px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
}

html[data-theme="dark"] #evoModalBox {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: color-mix(in srgb, var(--evo-neutral-900) 91%, var(--sda-cave) 9%) !important;
    box-shadow: 0 26px 74px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] #evoModalHeader,
html[data-theme="dark"] #evoModalFooter {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

html[data-theme="dark"] #evoModalBody {
    background: color-mix(in srgb, var(--evo-neutral-900) 91%, var(--sda-cave) 9%) !important;
}

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

html[data-theme="dark"] #evoModalBody :where(.form-control, .ta-input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--evo-neutral-100) !important;
    box-shadow: none;
}

/* =========================================================
   DARK MODE FINAL PASS - TRUE DARK SURFACES
   ========================================================= */
html[data-theme="dark"] {
    color-scheme: dark;
    --ta-bg: #030405;
    --ta-bg-body: #030405;
    --ta-bg-main: #030405;
    --ta-bg-sidebar: #080a0b;
    --ta-bg-header: #080a0b;
    --ta-bg-surface: #0d0f10;
    --ta-bg-surface-2: #121416;
    --ta-surface-main: #0d0f10;
    --ta-surface-soft: rgba(255, 255, 255, 0.045);
    --ta-card-bg: #0d0f10;
    --ta-card-border: rgba(255, 255, 255, 0.12);
    --ta-card-shadow: 0 22px 55px rgba(0, 0, 0, 0.44);
    --ta-text-main: #f4f7f8;
    --ta-text: #f4f7f8;
    --ta-text-muted: #aeb7bb;
    --ta-border-soft: rgba(255, 255, 255, 0.12);
    --ta-border-sidebar: rgba(255, 255, 255, 0.12);
    --ta-row-hover: rgba(255, 255, 255, 0.055);
    --ta-table-head-bg: #111416;
    --ta-table-row-bg: #090b0c;
    --ta-table-row-hover: #141719;
    --ta-table-divider: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .main-scroll {
    background: var(--ta-bg) !important;
    color: var(--ta-text-main) !important;
}

html[data-theme="dark"] #appMainContent,
html[data-theme="dark"] .evo-module-root {
    background: transparent !important;
    color: var(--ta-text-main) !important;
}

html[data-theme="dark"] body.auth-page {
    background: #030405 !important;
}

html[data-theme="dark"] body.auth-page::before {
    filter: brightness(0.42) saturate(0.92) contrast(1.08);
}

html[data-theme="dark"] body.auth-page::after {
    background:
        linear-gradient(90deg, rgba(3, 4, 5, 0.96), rgba(3, 4, 5, 0.66) 48%, rgba(3, 4, 5, 0.94)),
        linear-gradient(180deg, rgba(3, 4, 5, 0.20), rgba(3, 4, 5, 0.88)) !important;
}

html[data-theme="dark"] .auth-page .ta-card {
    border-color: rgba(126, 216, 232, 0.20) !important;
    background:
        linear-gradient(180deg, rgba(13, 15, 16, 0.97), rgba(6, 7, 8, 0.97)) !important;
    color: #f2fbfd !important;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) saturate(130%);
}

html[data-theme="dark"] .auth-page .ta-card :where(h1, h2, h3, label, p, span, div) {
    color: inherit;
}

html[data-theme="dark"] .auth-page .ta-card :where(p, span, label, a.text-\[var\(--ta-text-muted\)\]) {
    color: var(--ta-text-muted) !important;
}

html[data-theme="dark"] .auth-page .ta-card a,
html[data-theme="dark"] .auth-page .ta-card .text-\[var\(--ta-primary\)\] {
    color: var(--ta-primary) !important;
}

html[data-theme="dark"] .auth-page .form-control,
html[data-theme="dark"] :where(.evo-module-root, form, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background-color: rgba(255, 255, 255, 0.055) !important;
    color: #f2fbfd !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html[data-theme="dark"] .auth-page .form-control::placeholder,
html[data-theme="dark"] :where(.evo-module-root, form, #evoModalBody) :where(input, textarea)::placeholder {
    color: rgba(242, 251, 253, 0.50) !important;
}

html[data-theme="dark"] .auth-page .form-control:focus,
html[data-theme="dark"] :where(.evo-module-root, form, #evoModalBody) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select):focus {
    border-color: rgba(126, 216, 232, 0.72) !important;
    box-shadow:
        0 0 0 3px rgba(0, 127, 152, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .auth-page button[type="submit"],
html[data-theme="dark"] .auth-page .ta-btn-primary,
html[data-theme="dark"] #evoModalActionBtn {
    border: 1px solid rgba(126, 216, 232, 0.30) !important;
    background: linear-gradient(180deg, rgba(20, 63, 72, 0.95), rgba(8, 35, 42, 0.95)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] .auth-page button[type="submit"]:hover,
html[data-theme="dark"] .auth-page .ta-btn-primary:hover,
html[data-theme="dark"] #evoModalActionBtn:hover {
    border-color: rgba(126, 216, 232, 0.42) !important;
    background: linear-gradient(180deg, rgba(24, 78, 90, 0.98), rgba(10, 44, 52, 0.98)) !important;
}

html[data-theme="dark"] .ta-card,
html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .dashboard-metric-card,
html[data-theme="dark"] .ta-table-wrapper,
html[data-theme="dark"] .dropdown-card,
html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .sidebar {
    border-color: var(--ta-card-border) !important;
    background-color: var(--ta-card-bg) !important;
    color: var(--ta-text-main) !important;
}

html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .sidebar {
    background: var(--ta-bg-sidebar) !important;
}

html[data-theme="dark"] .ta-table thead th,
html[data-theme="dark"] .ta-table th[data-col="_actions"] {
    background: var(--ta-table-head-bg) !important;
    color: #eef2f4 !important;
}

html[data-theme="dark"] .ta-table tbody tr,
html[data-theme="dark"] .ta-sticky-actions-cell {
    background: var(--ta-table-row-bg) !important;
}

html[data-theme="dark"] .ta-table tbody tr:nth-child(even) {
    background: #0b0d0e !important;
}

html[data-theme="dark"] .ta-table tbody tr:hover,
html[data-theme="dark"] .ta-table tbody tr:hover .ta-sticky-actions-cell {
    background: var(--ta-table-row-hover) !important;
}

html[data-theme="dark"] .navbar-icon-btn,
html[data-theme="dark"] .evo-action-icon,
html[data-theme="dark"] .ta-page-pill,
html[data-theme="dark"] .ta-page-number,
html[data-theme="dark"] .ta-page-nav,
html[data-theme="dark"] .evo-add-btn,
html[data-theme="dark"] .ta-btn {
    border-color: rgba(167, 216, 225, 0.18) !important;
    background: rgba(255, 255, 255, 0.065) !important;
    color: #e5f7fa !important;
}

html[data-theme="dark"] .navbar-icon-btn:hover,
html[data-theme="dark"] .evo-action-icon:hover,
html[data-theme="dark"] .ta-page-pill:hover,
html[data-theme="dark"] .ta-page-number:hover,
html[data-theme="dark"] .ta-page-nav:hover,
html[data-theme="dark"] .evo-add-btn:hover,
html[data-theme="dark"] .ta-btn:hover {
    border-color: rgba(126, 216, 232, 0.36) !important;
    background: rgba(126, 216, 232, 0.12) !important;
}

@media (max-width: 768px) {
    html[data-theme="dark"] body.auth-page::after {
        background:
            linear-gradient(180deg, rgba(3, 4, 5, 0.92), rgba(3, 4, 5, 0.60) 44%, rgba(3, 4, 5, 0.96)) !important;
    }
}

html[data-theme="dark"] body.auth-page :where(input.form-control, textarea.form-control, select.form-control) {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: #101214 !important;
    color: #f2fbfd !important;
    caret-color: #7ed8e8 !important;
    -webkit-text-fill-color: #f2fbfd !important;
}

html[data-theme="dark"] body.auth-page :where(input.form-control, textarea.form-control)::placeholder {
    color: rgba(242, 251, 253, 0.58) !important;
    -webkit-text-fill-color: rgba(242, 251, 253, 0.58) !important;
}

html[data-theme="dark"] body.auth-page :where(input.form-control, textarea.form-control, select.form-control):focus {
    border-color: rgba(126, 216, 232, 0.86) !important;
    background: #141719 !important;
    box-shadow:
        0 0 0 3px rgba(0, 127, 152, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body.auth-page :where(input.form-control, textarea.form-control, select.form-control):-webkit-autofill,
html[data-theme="dark"] body.auth-page :where(input.form-control, textarea.form-control, select.form-control):-webkit-autofill:hover,
html[data-theme="dark"] body.auth-page :where(input.form-control, textarea.form-control, select.form-control):-webkit-autofill:focus,
html[data-theme="dark"] body.auth-page :where(input.form-control, textarea.form-control, select.form-control):-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #101214 inset !important;
    box-shadow: 0 0 0 1000px #101214 inset !important;
    -webkit-text-fill-color: #f2fbfd !important;
    color: #f2fbfd !important;
    caret-color: #7ed8e8 !important;
}

html[data-theme="dark"] body.auth-page [data-evo-toggle-password] {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0.25rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    color: rgba(242, 251, 253, 0.74) !important;
}

html[data-theme="dark"] body.auth-page [data-evo-toggle-password]:hover,
html[data-theme="dark"] body.auth-page [data-evo-toggle-password]:focus,
html[data-theme="dark"] body.auth-page [data-evo-toggle-password]:focus-visible,
html[data-theme="dark"] body.auth-page [data-evo-toggle-password]:active {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #f2fbfd !important;
}

.delete-modal-icon svg {
    display: block;
    color: currentColor;
    stroke: currentColor;
}

.delete-modal-icon {
    border: 1px solid rgba(220, 38, 38, 0.22);
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

html[data-theme="dark"] .delete-modal-icon {
    border: 1px solid rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.56) !important;
    color: #fecaca !important;
}

.evo-danger-note {
    border: 1px solid rgba(185, 28, 28, 0.42);
    background: #fff1f2 !important;
    color: #7f1d1d !important;
    border-radius: 1rem;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    font-weight: 750;
    text-shadow: none !important;
}

.evo-danger-note,
.evo-danger-note * {
    color: #7f1d1d !important;
}

html[data-theme="dark"] .evo-danger-note {
    border-color: rgba(248, 113, 113, 0.58);
    background: rgba(127, 29, 29, 0.72) !important;
    color: #fee2e2 !important;
}

html[data-theme="dark"] .evo-danger-note,
html[data-theme="dark"] .evo-danger-note * {
    color: #fee2e2 !important;
}

.public-flash-region {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.public-flash {
    border: 1px solid var(--ta-border-soft);
    border-left-width: 4px;
    border-radius: 10px;
    background: var(--ta-bg-surface);
    color: var(--ta-text-main);
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.55;
    overflow-wrap: anywhere;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.public-flash-success {
    border-color: color-mix(in srgb, #059669 48%, var(--ta-border-soft));
    background: color-mix(in srgb, #10b981 8%, var(--ta-bg-surface));
    color: color-mix(in srgb, #047857 74%, var(--ta-text-main));
}

.public-flash-warning {
    border-color: color-mix(in srgb, #d97706 52%, var(--ta-border-soft));
    background: color-mix(in srgb, #f59e0b 10%, var(--ta-bg-surface));
    color: color-mix(in srgb, #92400e 76%, var(--ta-text-main));
}

.public-flash-danger {
    border-color: color-mix(in srgb, #dc2626 52%, var(--ta-border-soft));
    background: color-mix(in srgb, #ef4444 9%, var(--ta-bg-surface));
    color: color-mix(in srgb, #991b1b 76%, var(--ta-text-main));
}

.public-flash-info {
    border-color: color-mix(in srgb, #0284c7 48%, var(--ta-border-soft));
    background: color-mix(in srgb, #0ea5e9 8%, var(--ta-bg-surface));
    color: color-mix(in srgb, #075985 72%, var(--ta-text-main));
}

html[data-theme="dark"] .public-flash {
    color: rgba(241, 245, 249, 0.96);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .public-flash-success {
    border-color: rgba(52, 211, 153, 0.42);
    background: rgba(6, 78, 59, 0.82);
}

html[data-theme="dark"] .public-flash-warning {
    border-color: rgba(251, 191, 36, 0.44);
    background: rgba(120, 53, 15, 0.82);
}

html[data-theme="dark"] .public-flash-danger {
    border-color: rgba(248, 113, 113, 0.44);
    background: rgba(127, 29, 29, 0.82);
}

html[data-theme="dark"] .public-flash-info {
    border-color: rgba(56, 189, 248, 0.44);
    background: rgba(12, 74, 110, 0.82);
}

html[data-theme="dark"] .auth-flash {
    color: rgba(241, 245, 249, 0.94) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .auth-flash-success {
    background: rgba(6, 78, 59, 0.82) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

html[data-theme="dark"] .auth-flash-warning {
    background: rgba(120, 53, 15, 0.82) !important;
    border-color: rgba(251, 191, 36, 0.42) !important;
}

html[data-theme="dark"] .auth-flash-danger,
html[data-theme="dark"] .auth-flash-error {
    background: rgba(127, 29, 29, 0.82) !important;
    border-color: rgba(248, 113, 113, 0.42) !important;
}

html[data-theme="dark"] .auth-flash-info {
    background: rgba(12, 74, 110, 0.82) !important;
    border-color: rgba(56, 189, 248, 0.42) !important;
}

/* Final dark-mode button contract: keep labels readable after Tailwind/util overrides. */
html[data-theme="dark"] :where(
    button,
    a[role="button"],
    a.ta-btn,
    input[type="submit"],
    input[type="button"],
    .ta-btn,
    .evo-add-btn,
    .reports-secondary-action,
    #evoModalActionBtn,
    #evoModalCancelBtn
) {
    color: #eaffff !important;
    -webkit-text-fill-color: #eaffff !important;
}

html[data-theme="dark"] :where(
    button,
    a[role="button"],
    a.ta-btn,
    input[type="submit"],
    input[type="button"],
    .ta-btn,
    .evo-add-btn,
    .reports-secondary-action,
    #evoModalActionBtn,
    #evoModalCancelBtn
) :where(span, strong, em, small, b, i, .evo-button-label, [data-i18n]) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] .ta-btn.ta-btn-primary,
html[data-theme="dark"] :where(
    .ta-btn-primary,
    button.ta-btn-primary,
    a.ta-btn-primary,
    input.ta-btn-primary[type="submit"],
    input.ta-btn-primary[type="button"],
    .reports-card button[type="submit"],
    #evoModalActionBtn
) {
    border-color: rgba(126, 216, 232, 0.42) !important;
    background: linear-gradient(180deg, #0d8fa5 0%, #007f98 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .ta-btn.ta-btn-primary:hover,
html[data-theme="dark"] :where(
    .ta-btn-primary,
    button.ta-btn-primary,
    a.ta-btn-primary,
    input.ta-btn-primary[type="submit"],
    input.ta-btn-primary[type="button"],
    .reports-card button[type="submit"],
    #evoModalActionBtn
):hover {
    border-color: rgba(126, 216, 232, 0.62) !important;
    background: linear-gradient(180deg, #13a4ba 0%, #078ca5 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .ta-btn:disabled,
html[data-theme="dark"] .ta-btn[disabled],
html[data-theme="dark"] .ta-btn[aria-disabled="true"],
html[data-theme="dark"] :where(
    button:disabled,
    input[type="submit"]:disabled,
    input[type="button"]:disabled,
    .ta-btn:disabled,
    .ta-btn[disabled],
    .ta-btn[aria-disabled="true"],
    #evoModalActionBtn:disabled,
    #evoModalCancelBtn:disabled
) {
    border-color: rgba(167, 216, 225, 0.16) !important;
    background: rgba(255, 255, 255, 0.052) !important;
    color: rgba(234, 255, 255, 0.70) !important;
    -webkit-text-fill-color: rgba(234, 255, 255, 0.70) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Profile modal tabs: default Profile tab + module-provided tabs. */
.evo-profile-chrome {
    display: grid !important;
    gap: 0.8rem !important;
    margin: 0 0 1.1rem !important;
}

.evo-profile-tabs-row {
    display: flex !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.evo-profile-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 0.35rem !important;
    border: 1px solid var(--ta-border-soft, rgba(15, 81, 94, 0.16)) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 18px 42px rgba(8, 48, 56, 0.08) !important;
}

.evo-tab-pill {
    min-height: 2.5rem !important;
    padding: 0.58rem 1.05rem !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--ta-text-main, #092a31) !important;
    font-size: 0.95rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.evo-tab-pill:hover {
    background: rgba(12, 137, 157, 0.12) !important;
    color: var(--ta-primary, #078ca5) !important;
}

.evo-tab-pill.is-active,
.evo-tab-pill[aria-selected="true"] {
    background: linear-gradient(135deg, var(--ta-primary, #078ca5), #176b62) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(7, 140, 165, 0.24) !important;
}

.evo-tab-pill:focus-visible {
    outline: 3px solid rgba(7, 140, 165, 0.28) !important;
    outline-offset: 2px !important;
}

html[data-theme="dark"] .evo-profile-tabs {
    border-color: rgba(126, 216, 232, 0.24) !important;
    background: rgba(2, 25, 30, 0.74) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .evo-tab-pill {
    color: rgba(234, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(234, 255, 255, 0.88) !important;
}

html[data-theme="dark"] .evo-tab-pill:hover {
    background: rgba(126, 216, 232, 0.11) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .evo-tab-pill.is-active,
html[data-theme="dark"] .evo-tab-pill[aria-selected="true"] {
    background: linear-gradient(135deg, #078ca5, #176b62) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 640px) {
    .evo-profile-tabs {
        width: 100% !important;
    }

    .evo-tab-pill {
        flex: 1 1 calc(50% - 0.35rem) !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

#evoModalBody [data-evo-profile-chrome] {
    position: relative !important;
    z-index: 1 !important;
}

#evoModalBody .evo-profile-tab-panel {
    display: block !important;
    min-width: 0 !important;
}

/* Profile modal tabs should visually match dashboard segmented tabs. */
#evoModalBody .evo-profile-tabs-row {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 0 1rem !important;
    overflow: visible !important;
}

#evoModalBody .evo-profile-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 0.35rem !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 0.3rem !important;
    border: 1px solid var(--ta-border-soft) !important;
    border-radius: 8px !important;
    background: var(--ta-bg-surface) !important;
    box-shadow: none !important;
}

#evoModalBody .evo-profile-tabs .evo-tab-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.45rem !important;
    min-width: 7.5rem !important;
    width: auto !important;
    padding: 0.55rem 0.9rem !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ta-text-main) !important;
    -webkit-text-fill-color: var(--ta-text-main) !important;
    font-size: 0.95rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

#evoModalBody .evo-profile-tabs .evo-tab-pill:hover,
#evoModalBody .evo-profile-tabs .evo-tab-pill:focus-visible {
    background: var(--ta-surface-soft) !important;
    color: var(--ta-primary) !important;
    -webkit-text-fill-color: var(--ta-primary) !important;
}

#evoModalBody .evo-profile-tabs .evo-tab-pill.is-active,
#evoModalBody .evo-profile-tabs .evo-tab-pill[aria-selected="true"] {
    background: var(--ta-primary-bg-12) !important;
    color: var(--ta-primary) !important;
    -webkit-text-fill-color: var(--ta-primary) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #evoModalBody .evo-profile-tabs {
    border-color: rgba(126, 216, 232, 0.22) !important;
    background: rgba(3, 32, 38, 0.82) !important;
}

html[data-theme="dark"] #evoModalBody .evo-profile-tabs .evo-tab-pill {
    color: rgba(234, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(234, 255, 255, 0.9) !important;
}

html[data-theme="dark"] #evoModalBody .evo-profile-tabs .evo-tab-pill.is-active,
html[data-theme="dark"] #evoModalBody .evo-profile-tabs .evo-tab-pill[aria-selected="true"] {
    background: rgba(7, 140, 165, 0.28) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 640px) {
    #evoModalBody .evo-profile-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    #evoModalBody .evo-profile-tabs .evo-tab-pill {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* Evo date picker: shared calendar control for all date inputs. */
.evo-date-field {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.evo-date-field > input {
    width: 100%;
    padding-right: 3.05rem !important;
}

.evo-date-field > input::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
}

.evo-date-trigger {
    position: absolute;
    top: 50%;
    right: 0.78rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ta-text-muted, #375767);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.evo-date-trigger:hover,
.evo-date-trigger:focus-visible {
    background: var(--ta-surface-soft, #eef2f3);
    color: var(--ta-primary, #0a8298);
    outline: none;
}

.evo-date-trigger:active {
    transform: translateY(-50%) scale(0.96);
}

.evo-date-trigger svg,
.evo-date-nav svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.evo-date-panel {
    --evo-temporal-accent: var(--ta-primary, #0a8298);
    --evo-temporal-panel-bg: var(--ta-bg-surface, #ffffff);
    --evo-temporal-panel-border: var(--ta-border-soft, #cfe0e6);
    --evo-temporal-panel-text: var(--ta-text-main, #061826);
    --evo-temporal-muted-text: var(--ta-text-muted, #496675);
    --evo-temporal-hover-bg: var(--ta-surface-soft, #eef2f3);
    --evo-temporal-hover-border: var(--ta-border-soft, #cfe0e6);
    --evo-temporal-selected-bg: var(--evo-temporal-accent);
    --evo-temporal-selected-text: #ffffff;
    --evo-temporal-ring: color-mix(in srgb, var(--evo-temporal-accent) 62%, transparent);
    --evo-temporal-shadow: 0 20px 55px rgba(8, 24, 34, 0.20);
    position: fixed;
    z-index: 2147483000;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem;
    border: 1px solid var(--evo-temporal-panel-border);
    border-radius: 8px;
    background: var(--evo-temporal-panel-bg);
    color: var(--evo-temporal-panel-text);
    box-shadow: var(--evo-temporal-shadow);
}

.evo-date-panel[hidden] {
    display: none !important;
}

.evo-date-panel-head {
    display: grid;
    grid-template-columns: 2.25rem 1fr 2.25rem;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.evo-date-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    text-align: center;
    color: var(--evo-temporal-panel-text);
    font-weight: 850;
    line-height: 1.2;
    cursor: pointer;
}

.evo-date-title:hover,
.evo-date-title:focus-visible {
    border-color: var(--evo-temporal-hover-border);
    background: var(--evo-temporal-hover-bg);
    outline: none;
}

.evo-date-title.is-static {
    cursor: default;
}

.evo-date-title.is-static:hover,
.evo-date-title.is-static:focus-visible {
    border-color: transparent;
    background: transparent;
}

.evo-date-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--evo-temporal-muted-text);
    cursor: pointer;
}

.evo-date-nav:hover,
.evo-date-nav:focus-visible {
    border-color: var(--evo-temporal-hover-border);
    background: var(--evo-temporal-hover-bg);
    color: var(--evo-temporal-accent);
    outline: none;
}

.evo-date-weekdays,
.evo-date-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.evo-date-weekdays {
    margin-bottom: 0.28rem;
}

.evo-date-weekdays span {
    color: var(--evo-temporal-muted-text);
    font-size: 0.76rem;
    font-weight: 850;
    text-align: center;
}

.evo-date-years {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.2rem 0 0.15rem;
}

.evo-date-year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--evo-temporal-panel-text);
    font-weight: 800;
    cursor: pointer;
}

.evo-date-year:hover,
.evo-date-year:focus-visible {
    border-color: var(--evo-temporal-hover-border);
    background: var(--evo-temporal-hover-bg);
    outline: none;
}

.evo-date-year.is-today {
    border-color: var(--evo-temporal-ring);
}

.evo-date-year.is-selected,
.evo-date-year.is-viewed {
    background: var(--evo-temporal-selected-bg);
    color: var(--evo-temporal-selected-text);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--evo-temporal-accent) 22%, transparent);
}

.evo-date-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 2.15rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--evo-temporal-panel-text);
    font-weight: 750;
    cursor: pointer;
}

.evo-date-day:hover,
.evo-date-day:focus-visible {
    border-color: var(--evo-temporal-hover-border);
    background: var(--evo-temporal-hover-bg);
    outline: none;
}

.evo-date-day.is-muted {
    color: var(--evo-temporal-muted-text);
    opacity: 0.62;
}

.evo-date-day.is-today {
    border-color: var(--evo-temporal-ring);
}

.evo-date-day.is-selected {
    background: var(--evo-temporal-selected-bg);
    color: var(--evo-temporal-selected-text);
    opacity: 1;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--evo-temporal-accent) 22%, transparent);
}

.evo-date-day:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.evo-date-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.72rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--evo-temporal-panel-border);
}

.evo-date-text-btn {
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--evo-temporal-accent);
    font-weight: 850;
    cursor: pointer;
    padding: 0.48rem 0.62rem;
}

.evo-date-text-btn:hover,
.evo-date-text-btn:focus-visible {
    background: var(--evo-temporal-hover-bg);
    outline: none;
}

html[data-theme="dark"] .evo-date-panel {
    --evo-temporal-panel-bg: var(--ta-bg-surface, #0d0f10);
    --evo-temporal-panel-border: var(--ta-border-soft, rgba(255, 255, 255, 0.12));
    --evo-temporal-panel-text: var(--ta-text-main, #f4f7f8);
    --evo-temporal-muted-text: var(--ta-text-muted, #aeb7bb);
    --evo-temporal-hover-bg: var(--ta-surface-soft, rgba(255, 255, 255, 0.045));
    --evo-temporal-hover-border: var(--ta-border-soft, rgba(255, 255, 255, 0.12));
    --evo-temporal-shadow: 0 24px 65px rgba(0, 0, 0, 0.48);
}

.sda-member-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    width: 100%;
}

.sda-member-filter-field {
    display: block;
    min-width: 0;
}

.sda-member-filter-search {
    flex: 1 1 38rem;
}

.sda-member-filter-position {
    flex: 0 1 19rem;
    max-width: 22rem;
}

.sda-member-filter-reset {
    flex: 0 0 auto;
    min-width: 7.75rem;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .sda-member-filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .sda-member-filter-position,
    .sda-member-filter-reset {
        max-width: none;
        width: 100%;
    }
}

/* Auth password visibility buttons stay icon-only in dark mode. */
html[data-theme="dark"] body.auth-page [data-evo-toggle-password],
html[data-theme="dark"] body.auth-page [data-evo-toggle-password]:hover,
html[data-theme="dark"] body.auth-page [data-evo-toggle-password]:focus,
html[data-theme="dark"] body.auth-page [data-evo-toggle-password]:focus-visible,
html[data-theme="dark"] body.auth-page [data-evo-toggle-password]:active,
html[data-theme="dark"] [data-evo-toggle-password].evo-action-icon,
html[data-theme="dark"] [data-evo-toggle-password].evo-action-icon:hover,
html[data-theme="dark"] [data-evo-toggle-password].evo-action-icon:focus,
html[data-theme="dark"] [data-evo-toggle-password].evo-action-icon:focus-visible,
html[data-theme="dark"] [data-evo-toggle-password].evo-action-icon:active {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0.25rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Keep the icon visual compact while preserving a usable phone/coarse-pointer hit area. */
@media (max-width: 640px), (pointer: coarse) {
    body.auth-page [data-evo-toggle-password],
    html[data-theme="dark"] body.auth-page [data-evo-toggle-password] {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        padding: 0.625rem !important;
    }
}

/* =========================================================
   PUBLIC PROFILE — EVO ACCOUNT + SDA MEMBERSHIP
   ========================================================= */
.profile-page {
    display: grid;
    gap: 1.25rem;
    width: 100%;
    padding: clamp(0.25rem, 1vw, 0.75rem);
    color: var(--ta-text-main);
}

.profile-hero,
.profile-status-summary,
.profile-context-card,
.profile-editor,
.profile-panel,
.profile-kpi {
    border: 1px solid var(--ta-border-soft);
    background: var(--ta-bg-surface);
    box-shadow: 0 18px 48px rgba(18, 53, 61, 0.08);
}

.profile-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 13.5rem;
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    background:
        radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--sda-bluejay) 16%, transparent) 0, transparent 30%),
        radial-gradient(circle at 72% 94%, color-mix(in srgb, var(--sda-treefrog) 11%, transparent) 0, transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--ta-bg-surface) 92%, var(--sda-bluejay) 8%), var(--ta-bg-surface));
}

.profile-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--ta-text-main) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ta-text-main) 3%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent, #000 52%, #000);
    opacity: 0.55;
    pointer-events: none;
}

.profile-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sda-bluejay), var(--sda-ming) 52%, var(--sda-treefrog));
}

.profile-hero__identity {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.45rem);
    min-width: 0;
}

.profile-hero__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(4.65rem, 8vw, 6rem);
    height: clamp(4.65rem, 8vw, 6rem);
    border: 1px solid color-mix(in srgb, var(--sda-bluejay) 28%, var(--ta-border-soft));
    border-radius: 24px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sda-bluejay) 17%, var(--ta-bg-surface)), color-mix(in srgb, var(--sda-ming) 13%, var(--ta-bg-surface)));
    color: color-mix(in srgb, var(--sda-bluejay) 72%, var(--ta-text-main));
    box-shadow: inset 0 1px color-mix(in srgb, #ffffff 52%, transparent), 0 16px 32px rgba(28, 83, 96, 0.13);
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.profile-hero__copy {
    min-width: 0;
}

.profile-eyebrow {
    margin: 0;
    color: var(--ta-primary);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
}

.profile-hero h1 {
    max-width: 46rem;
    margin: 0.38rem 0 0;
    color: var(--ta-text-main);
    font-size: clamp(1.8rem, 4vw, 3.15rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.profile-hero__scope {
    max-width: 52rem;
    margin: 0.7rem 0 0;
    color: var(--ta-text-muted);
    font-size: clamp(0.88rem, 1.4vw, 1rem);
    line-height: 1.55;
}

.profile-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.profile-status-chip,
.profile-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 1.9rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 72%, transparent);
    color: var(--ta-text-muted);
    padding: 0.3rem 0.68rem;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
}

.profile-status-chip svg {
    width: 1rem;
    height: 1rem;
}

.profile-status-chip.is-success,
.profile-inline-status.is-success {
    border-color: color-mix(in srgb, var(--sda-treefrog) 35%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--sda-treefrog) 10%, var(--ta-bg-surface));
    color: color-mix(in srgb, var(--sda-treefrog) 72%, var(--ta-text-main));
}

.profile-status-chip.is-warning,
.profile-inline-status.is-warning {
    border-color: color-mix(in srgb, #d97706 34%, var(--ta-border-soft));
    background: color-mix(in srgb, #f59e0b 10%, var(--ta-bg-surface));
    color: color-mix(in srgb, #b45309 72%, var(--ta-text-main));
}

.profile-inline-status {
    min-height: 1.65rem;
    padding: 0.2rem 0.52rem;
}

.profile-inline-status.is-neutral {
    border-color: color-mix(in srgb, var(--sda-bluejay) 22%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--sda-bluejay) 6%, var(--ta-bg-surface));
    color: var(--ta-text-muted);
}

.profile-inline-status.is-danger {
    border-color: color-mix(in srgb, #dc2626 34%, var(--ta-border-soft));
    background: color-mix(in srgb, #dc2626 9%, var(--ta-bg-surface));
    color: color-mix(in srgb, #b91c1c 74%, var(--ta-text-main));
}

.profile-status-summary {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sda-bluejay) 4%, var(--ta-bg-surface)), var(--ta-bg-surface) 55%);
}

.profile-status-summary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--sda-bluejay), var(--sda-ming), var(--sda-treefrog));
}

.profile-status-summary__head {
    max-width: 58rem;
}

.profile-status-summary__head h2 {
    margin: 0.28rem 0 0;
    color: var(--ta-text-main);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 880;
    letter-spacing: -0.02em;
}

.profile-status-summary__head > p:last-child {
    margin: 0.4rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.profile-status-summary__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.profile-status-summary__item {
    --profile-status-accent: var(--sda-bluejay);
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--profile-status-accent) 18%, var(--ta-border-soft));
    border-left: 3px solid color-mix(in srgb, var(--profile-status-accent) 68%, var(--ta-border-soft));
    border-radius: 12px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 58%, transparent);
    padding: 0.8rem 0.88rem;
}

.profile-status-summary__item[data-state="linked"],
.profile-status-summary__item[data-state="verified"],
.profile-status-summary__item[data-state="active"],
.profile-status-summary__item[data-state="baptized"],
.profile-status-summary__item[data-state="reinstated"] {
    --profile-status-accent: var(--sda-treefrog);
}

.profile-status-summary__item[data-state="not-linked"],
.profile-status-summary__item[data-state="reproved"],
.profile-status-summary__item[data-state="unconfirmed"] {
    --profile-status-accent: #d97706;
}

.profile-status-summary__item[data-state="disfellowshipped"] {
    --profile-status-accent: #dc2626;
}

.profile-status-summary__item dt {
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 880;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.profile-status-summary__item dd {
    margin: 0.38rem 0 0;
}

.profile-status-summary__item small {
    display: block;
    margin-top: 0.45rem;
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.profile-status-summary__note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
    border: 1px solid color-mix(in srgb, var(--sda-bluejay) 22%, var(--ta-border-soft));
    border-radius: 11px;
    background: color-mix(in srgb, var(--sda-bluejay) 6%, var(--ta-bg-surface));
    color: color-mix(in srgb, var(--sda-bluejay) 45%, var(--ta-text-main));
    padding: 0.7rem 0.78rem;
    font-size: 0.8rem;
    font-weight: 720;
    line-height: 1.5;
}

.profile-status-summary__note svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.12rem;
}

.profile-context-card {
    --profile-section-accent: var(--ta-primary);
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 18px;
    padding: clamp(1.1rem, 2vw, 1.45rem);
}

.profile-context-card--merged {
    padding: 0;
}

.profile-context-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--profile-section-accent);
}

.profile-context-card--merged::before {
    z-index: 1;
    background: linear-gradient(90deg, var(--sda-bluejay), var(--sda-treefrog));
}

.profile-context-section {
    --profile-section-accent: var(--ta-primary);
    min-width: 0;
    padding: clamp(1.1rem, 2vw, 1.45rem);
}

.profile-context-section + .profile-context-section {
    border-top: 1px solid var(--ta-border-soft);
}

.profile-context-section.is-evo {
    --profile-section-accent: var(--sda-bluejay);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sda-bluejay) 6%, var(--ta-bg-surface)), var(--ta-bg-surface) 58%);
}

.profile-context-section.is-sda {
    --profile-section-accent: var(--sda-treefrog);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sda-treefrog) 5%, var(--ta-bg-surface)), var(--ta-bg-surface) 58%);
}

.profile-section-head {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.profile-section-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid color-mix(in srgb, var(--profile-section-accent, var(--ta-primary)) 24%, var(--ta-border-soft));
    border-radius: 13px;
    background: color-mix(in srgb, var(--profile-section-accent, var(--ta-primary)) 10%, var(--ta-bg-surface));
    color: var(--profile-section-accent, var(--ta-primary));
}

.profile-section-mark svg {
    width: 1.45rem;
    height: 1.45rem;
}

.profile-section-mark.is-edit {
    --profile-section-accent: var(--ta-primary);
}

.profile-section-head h2,
.profile-giving__head h2,
.profile-panel__head h3 {
    margin: 0.2rem 0 0;
    color: var(--ta-text-main);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.profile-section-head h2,
.profile-giving__head h2 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.profile-panel__head h3 {
    font-size: 1.08rem;
}

.profile-section-head p:not(.profile-eyebrow),
.profile-giving__head p:not(.profile-eyebrow) {
    max-width: 48rem;
    margin: 0.35rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.profile-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1.15rem 0 0;
}

.profile-data-grid.is-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-data-grid.is-membership {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.profile-data-grid.is-membership > div {
    flex: 1 1 16rem;
}

.profile-data-grid > div {
    min-width: 0;
    min-height: 4.75rem;
    border: 1px solid color-mix(in srgb, var(--ta-border-soft) 86%, var(--profile-section-accent) 14%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 58%, transparent);
    padding: 0.72rem 0.8rem;
}

.profile-data-grid dt,
.profile-protected-grid span {
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.profile-data-grid dd {
    margin: 0.28rem 0 0;
    color: var(--ta-text-main);
    font-size: 0.92rem;
    font-weight: 820;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.profile-responsibility-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-responsibility-list > li {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--sda-treefrog) 34%, var(--ta-border-soft));
    border-radius: 999px;
    background: color-mix(in srgb, var(--sda-treefrog) 9%, var(--ta-bg-surface));
    color: var(--ta-text-main);
    padding: 0.28rem 0.62rem;
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.profile-responsibility-empty {
    color: var(--ta-text-muted);
}

.profile-context-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.profile-context-note svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.12rem;
    color: var(--sda-bluejay);
}

.profile-editor {
    overflow: hidden;
    border-radius: 18px;
}

.profile-editor > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5.4rem;
    padding: 1rem 1.2rem;
    cursor: pointer;
    list-style: none;
    transition: background-color 160ms ease;
}

.profile-editor > summary::-webkit-details-marker {
    display: none;
}

.profile-editor > summary:hover,
.profile-editor > summary:focus-visible {
    background: color-mix(in srgb, var(--ta-primary) 6%, transparent);
    outline: none;
}

.profile-editor > summary:focus-visible {
    box-shadow: inset 0 0 0 3px var(--ta-primary-ring);
}

.profile-editor__summary-copy {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.profile-editor__summary-copy strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--ta-text-main);
    font-size: 1rem;
    font-weight: 880;
}

.profile-editor__action {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex: 0 0 auto;
    min-height: 2.35rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 70%, transparent);
    color: var(--ta-text-main);
    padding: 0.48rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 850;
}

.profile-editor__action svg {
    width: 1rem;
    height: 1rem;
    transition: transform 180ms ease;
}

.profile-editor[open] .profile-editor__action svg {
    transform: rotate(180deg);
}

.profile-editor__body {
    border-top: 1px solid var(--ta-border-soft);
    padding: clamp(1rem, 2.5vw, 1.4rem);
}

.profile-editor__intro {
    margin: 0;
    color: var(--ta-text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.profile-protected-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.profile-protected-grid > div {
    min-width: 0;
    border: 1px dashed color-mix(in srgb, var(--ta-border-soft) 74%, var(--ta-primary) 26%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 58%, transparent);
    padding: 0.8rem;
}

.profile-protected-grid strong,
.profile-protected-grid small {
    display: block;
    overflow-wrap: anywhere;
}

.profile-protected-grid strong {
    margin-top: 0.28rem;
    color: var(--ta-text-main);
    font-size: 0.9rem;
}

.profile-protected-grid small {
    margin-top: 0.3rem;
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.profile-editor form {
    margin-top: 1rem;
}

.profile-backup-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.profile-backup-summary > div {
    min-width: 0;
    border: 1px solid var(--ta-border-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 44%, transparent);
    padding: 0.85rem;
}

.profile-backup-summary > .is-wide {
    grid-column: 1 / -1;
}

.profile-backup-summary dt {
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
}

.profile-backup-summary dd {
    margin: 0.28rem 0 0;
    color: var(--ta-text-main);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.profile-import-box {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.05rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 42%, transparent);
    padding: 1rem;
}

.profile-import-box h3 {
    margin: 0.25rem 0 0;
    color: var(--ta-text-main);
    font-size: 1rem;
    font-weight: 900;
}

.profile-import-box p:not(.profile-eyebrow) {
    margin: 0.35rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.profile-import-file,
.profile-import-confirm {
    display: grid;
    gap: 0.4rem;
    color: var(--ta-text-main);
    font-size: 0.82rem;
    font-weight: 800;
}

.profile-import-file input[type="file"] {
    width: 100%;
    border: 1px solid var(--ta-border-soft);
    border-radius: 10px;
    background: var(--ta-bg-surface);
    color: var(--ta-text-muted);
    padding: 0.68rem 0.8rem;
    font-size: 0.85rem;
}

.profile-import-file .evo-file-input {
    border-radius: 10px;
    background: var(--ta-bg-surface);
    padding: 0.68rem 0.8rem;
    font-size: 0.85rem;
}

.profile-import-confirm {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    color: var(--ta-text-muted);
    font-weight: 750;
    line-height: 1.45;
}

.profile-import-confirm input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.12rem;
    accent-color: var(--ta-primary);
}

.account-settings-tools {
    margin-top: 1rem;
}

.account-settings-tools .profile-import-box {
    height: 100%;
}

.account-settings-tools .profile-submit {
    justify-self: end;
    margin-top: auto;
}

.account-settings-backups {
    margin-top: 1rem;
}

.account-settings-backups td strong {
    display: block;
    overflow-wrap: anywhere;
}

.account-settings-backups td small {
    display: block;
    margin-top: 0.18rem;
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.profile-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.profile-edit-grid fieldset {
    min-width: 0;
    border: 1px solid var(--ta-border-soft);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 45%, transparent);
    padding: 1rem;
}

.profile-edit-grid legend {
    padding: 0 0.35rem;
    color: var(--ta-text-main);
    font-size: 0.95rem;
    font-weight: 880;
}

.profile-edit-grid fieldset > p {
    margin: 0 0 0.85rem;
    color: var(--ta-text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.profile-edit-grid label {
    display: grid;
    gap: 0.36rem;
    margin-top: 0.7rem;
}

.profile-edit-grid label > span {
    color: var(--ta-text-main);
    font-size: 0.78rem;
    font-weight: 800;
}

.profile-edit-grid input {
    width: 100%;
    min-height: 2.85rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 10px;
    background: var(--ta-bg-surface);
    color: var(--ta-text-main);
    padding: 0.68rem 0.8rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.profile-edit-grid input:hover {
    border-color: color-mix(in srgb, var(--ta-primary) 34%, var(--ta-border-soft));
}

.profile-edit-grid input:focus {
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 3px var(--ta-primary-ring);
}

.profile-editor__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

.profile-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10.5rem;
    min-height: 2.85rem;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 72%, #ffffff 12%);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ta-primary), color-mix(in srgb, var(--sda-cave) 78%, var(--sda-forest) 22%));
    color: #ffffff;
    padding: 0.68rem 1rem;
    font-size: 0.84rem;
    font-weight: 850;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ta-primary) 24%, transparent);
    cursor: pointer;
}

.profile-submit:hover,
.profile-submit:focus-visible {
    filter: brightness(1.05);
    outline: 3px solid var(--ta-primary-ring);
    outline-offset: 2px;
}

.profile-submit:disabled {
    cursor: wait;
    filter: saturate(0.65);
    opacity: 0.78;
}

.profile-giving {
    display: grid;
    gap: 1rem;
    margin-top: 0.35rem;
}

.profile-giving__head,
.profile-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-giving__head {
    padding: 0.2rem 0.15rem 0;
}

.profile-giving__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    gap: 0.55rem;
}

.profile-privacy-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.58rem 0.85rem;
    gap: 0.48rem;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 26%, var(--ta-border-soft));
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-surface));
    color: var(--ta-primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.profile-privacy-toggle:hover,
.profile-privacy-toggle[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--ta-primary) 52%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-primary) 13%, var(--ta-bg-surface));
}

.profile-privacy-toggle:focus-visible {
    outline: 3px solid var(--ta-primary-ring);
    outline-offset: 2px;
}

.profile-privacy-toggle__icon {
    width: 1.05rem;
    height: 1.05rem;
    color: currentColor !important;
}

.profile-private-amount {
    display: inline-flex;
    align-items: baseline;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}

.profile-private-amount__mask {
    max-width: 100%;
    letter-spacing: 0.055em;
    white-space: nowrap;
}

.profile-private-amount [hidden],
.profile-privacy-toggle [hidden],
.profile-year-row__track [hidden] {
    display: none !important;
}

@media (min-width: 521px) {
    .profile-giving__actions {
        display: flex;
        justify-content: flex-end;
        width: auto;
    }

    .profile-privacy-toggle {
        width: auto;
        min-height: 2.5rem;
        padding: 0.5rem 0.78rem;
    }
}

.profile-period {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 1.9rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 70%, transparent);
    color: var(--ta-text-muted);
    padding: 0.28rem 0.68rem;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.profile-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.profile-kpi {
    position: relative;
    min-width: 0;
    min-height: 11rem;
    overflow: hidden;
    border-radius: 16px;
    padding: 1rem;
}

.profile-kpi::after {
    content: "";
    position: absolute;
    inset: auto -1.5rem -2.2rem auto;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-primary) 7%, transparent);
}

.profile-kpi__icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 10px;
    background: var(--ta-primary-bg-12);
    color: var(--ta-primary);
}

.profile-kpi__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.profile-kpi p {
    position: relative;
    z-index: 1;
    margin: 0.75rem 0 0;
    color: var(--ta-text-muted);
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1.4;
}

.profile-kpi strong,
.profile-kpi small {
    position: relative;
    z-index: 1;
    display: block;
}

.profile-kpi strong {
    margin-top: 0.32rem;
    color: var(--ta-text-main);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.profile-kpi small {
    margin-top: 0.6rem;
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    line-height: 1.45;
}

.profile-kpi.is-featured {
    border-color: color-mix(in srgb, var(--sda-ming) 70%, #ffffff 10%);
    background: linear-gradient(145deg, var(--sda-ming), color-mix(in srgb, var(--sda-cave) 76%, var(--sda-forest) 24%));
}

.profile-kpi.is-featured::after {
    background: rgba(255, 255, 255, 0.09);
}

.profile-kpi.is-featured .profile-kpi__icon {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}

.profile-kpi.is-featured p,
.profile-kpi.is-featured strong,
.profile-kpi.is-featured small {
    color: #ffffff;
}

.profile-kpi.is-featured p,
.profile-kpi.is-featured small {
    opacity: 0.8;
}

.profile-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
    gap: 1rem;
    align-items: stretch;
}

.profile-panel {
    min-width: 0;
    border-radius: 16px;
    padding: 1rem;
}

.profile-table-wrap {
    width: 100%;
    margin-top: 0.9rem;
    overflow-x: auto;
    border: 1px solid var(--ta-border-soft);
    border-radius: 12px;
}

.profile-table {
    min-width: 34rem;
    border-collapse: separate;
    border-spacing: 0;
}

.profile-table th,
.profile-table td {
    padding: 0.72rem 0.8rem;
    text-align: left;
    vertical-align: middle;
}

.profile-table [data-profile-column="date"],
.profile-table [data-profile-column="amount"] {
    white-space: nowrap;
}

.profile-table [data-profile-column="amount"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.profile-year-chart {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.profile-year-chart.is-empty {
    place-items: center;
    min-height: 9rem;
    border: 1px dashed var(--ta-border-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 42%, transparent);
    text-align: center;
}

.profile-year-row {
    display: grid;
    grid-template-columns: 2.4rem minmax(7rem, 1fr) minmax(5.5rem, auto);
    align-items: center;
    gap: 0.65rem;
    min-height: 2.3rem;
}

.profile-year-row__label {
    color: var(--ta-text-main);
    font-size: 0.78rem;
    font-weight: 850;
}

.profile-year-row__track {
    display: block;
    height: 0.62rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-primary) 8%, var(--ta-bg-surface-2));
}

.profile-year-row__track span {
    display: block;
    width: max(0.18rem, var(--profile-bar-width, 0%));
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sda-bluejay) 72%, var(--ta-primary)), var(--ta-primary));
}

.profile-year-row strong {
    color: var(--ta-text-main);
    font-size: 0.74rem;
    font-weight: 750;
    text-align: right;
    white-space: nowrap;
}

.profile-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ta-text-muted);
    font-size: 0.82rem;
}

.profile-accountability__note {
    margin: 0.8rem 0 0;
    border-left: 3px solid color-mix(in srgb, var(--sda-bluejay) 62%, var(--ta-border-soft));
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--sda-bluejay) 6%, var(--ta-bg-surface-2));
    color: var(--ta-text-muted);
    padding: 0.7rem 0.8rem;
    font-size: 0.78rem;
    line-height: 1.5;
}

.profile-accountability-table {
    min-width: 88rem;
}

.profile-accountability-trace {
    min-width: 74rem;
}

.profile-accountability-table [data-accountability-column="amount"] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.profile-accountability__outstanding {
    color: var(--ta-text-main);
    font-weight: 900;
}

.profile-accountability-party,
.profile-accountability-request,
.profile-accountability-movements {
    display: grid;
    gap: 0.22rem;
}

.profile-accountability-party + .profile-accountability-party,
.profile-accountability-request + .profile-accountability-request {
    margin-top: 0.55rem;
}

.profile-accountability-party small,
.profile-accountability-request small,
.profile-accountability-type,
.profile-accountability-muted {
    color: var(--ta-text-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

.profile-accountability-party strong,
.profile-accountability-request strong,
.profile-accountability-trace [data-accountability-column="reference"] > strong {
    color: var(--ta-text-main);
    font-size: 0.78rem;
    line-height: 1.35;
}

.profile-accountability-type {
    display: block;
    margin-top: 0.24rem;
}

.profile-accountability-movement {
    display: grid;
    gap: 0.12rem;
    border-left: 3px solid var(--ta-border-soft);
    border-radius: 0 9px 9px 0;
    background: color-mix(in srgb, var(--ta-bg-surface-2) 68%, transparent);
    padding: 0.4rem 0.5rem;
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    line-height: 1.3;
}

.profile-accountability-movement strong {
    color: var(--ta-text-main);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.profile-accountability-movement.is-received,
.profile-accountability-movement.is-bank_redeposited {
    border-left-color: color-mix(in srgb, var(--sda-treefrog) 64%, var(--ta-border-soft));
}

.profile-accountability-movement.is-returned_to_treasurer,
.profile-accountability-movement.is-handed_over {
    border-left-color: color-mix(in srgb, var(--sda-bluejay) 66%, var(--ta-border-soft));
}

.profile-accountability-movement.is-pending {
    border-left-color: color-mix(in srgb, #d97706 68%, var(--ta-border-soft));
}

.profile-accountability-movement.is-disputed {
    border-left-color: color-mix(in srgb, #dc2626 68%, var(--ta-border-soft));
}

.profile-inline-status.is-verified {
    border-color: color-mix(in srgb, var(--sda-treefrog) 35%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--sda-treefrog) 10%, var(--ta-bg-surface));
    color: color-mix(in srgb, var(--sda-treefrog) 72%, var(--ta-text-main));
}

.profile-inline-status.is-pending {
    border-color: color-mix(in srgb, #d97706 34%, var(--ta-border-soft));
    background: color-mix(in srgb, #f59e0b 10%, var(--ta-bg-surface));
    color: color-mix(in srgb, #b45309 72%, var(--ta-text-main));
}

.profile-inline-status.is-refuted {
    border-color: color-mix(in srgb, #dc2626 34%, var(--ta-border-soft));
    background: color-mix(in srgb, #dc2626 9%, var(--ta-bg-surface));
    color: color-mix(in srgb, #b91c1c 74%, var(--ta-text-main));
}

.profile-inline-status.is-cancelled {
    border-color: color-mix(in srgb, var(--sda-bluejay) 22%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--sda-bluejay) 6%, var(--ta-bg-surface));
    color: var(--ta-text-muted);
}

html[data-theme="dark"] .profile-hero,
html[data-theme="dark"] .profile-status-summary,
html[data-theme="dark"] .profile-context-card,
html[data-theme="dark"] .profile-editor,
html[data-theme="dark"] .profile-panel,
html[data-theme="dark"] .profile-kpi {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .profile-hero {
    background:
        radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--sda-bluejay) 11%, transparent) 0, transparent 30%),
        radial-gradient(circle at 72% 94%, color-mix(in srgb, var(--sda-treefrog) 7%, transparent) 0, transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--ta-bg-surface) 96%, #ffffff 2%), var(--ta-bg-surface));
}

html[data-theme="dark"] .profile-edit-grid input {
    background: color-mix(in srgb, var(--ta-bg-surface) 90%, #ffffff 2%);
}

@media (max-width: 1100px) {
    .profile-analytics-grid {
        grid-template-columns: 1fr;
    }

    .profile-data-grid.is-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-data-grid.is-membership > div {
        flex-basis: 14rem;
    }

    .profile-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .profile-hero {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
    }

    .profile-data-grid,
    .profile-status-summary__grid,
    .profile-protected-grid,
    .profile-backup-summary,
    .profile-edit-grid {
        grid-template-columns: 1fr;
    }

    .profile-data-grid.is-membership {
        display: grid;
    }

    .profile-data-grid.is-membership > div {
        flex: none;
    }

    .profile-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .profile-page {
        padding: 0;
    }

    .profile-hero {
        border-radius: 16px;
        padding: 1.1rem;
    }

    .profile-hero__identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-context-card,
    .profile-status-summary,
    .profile-editor,
    .profile-panel,
    .profile-kpi {
        border-radius: 14px;
    }

    .profile-context-section {
        padding: 1rem;
    }

    .profile-editor > summary {
        align-items: flex-start;
    }

    .profile-editor__action > span {
        display: none;
    }

    .profile-editor__action {
        padding-inline: 0.65rem;
    }

    .profile-kpi-grid {
        grid-template-columns: 1fr;
    }

    .profile-kpi {
        min-height: 9.5rem;
    }

    .profile-year-row {
        grid-template-columns: 2.2rem minmax(0, 1fr);
    }

    .profile-year-row strong {
        grid-column: 2;
        text-align: left;
    }

    .profile-giving__head,
    .profile-panel__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-editor__footer,
    .account-settings-tools .profile-submit,
    .profile-submit {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-editor__action svg,
    .profile-edit-grid input {
        transition: none;
    }
}

/* Transaction recorder: compact, directional, and stable across modal widths. */
.transaction-record-form {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-surface);
}

.transaction-record-section {
    min-width: 0;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--ta-border-soft);
}

.transaction-record-section:last-child {
    border-bottom: 0;
}

.transaction-record-section--details {
    box-shadow: inset 3px 0 0 var(--ta-primary);
}

.transaction-record-section--movement {
    box-shadow: inset 3px 0 0 var(--sda-treefrog);
}

.transaction-record-section--funds {
    background: color-mix(in srgb, var(--sda-yellowhammer) 5%, var(--ta-bg-surface));
    box-shadow: inset 3px 0 0 var(--sda-yellowhammer);
}

.transaction-record-section--adjustment {
    background: color-mix(in srgb, var(--sda-yellowhammer) 6%, var(--ta-bg-surface));
    box-shadow: inset 3px 0 0 var(--sda-yellowhammer);
}

.transaction-record-section--reconciliation {
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface));
    box-shadow: inset 3px 0 0 var(--ta-primary);
}

.transaction-record-section--support {
    background: color-mix(in srgb, var(--ta-bg-muted) 56%, var(--ta-bg-surface));
}

.transaction-record-section > h3,
.transaction-record-section__heading > h3 {
    margin: 0 0 0.75rem;
    color: var(--ta-text-main);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0;
}

.transaction-record-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.transaction-record-section__heading > h3 {
    margin: 0;
}

.transaction-guided-step__heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.transaction-record-section__heading > .transaction-guided-step__heading {
    min-width: 0;
    flex: 1 1 28rem;
    margin-bottom: 0;
}

.transaction-guided-step__number {
    display: inline-grid;
    min-width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 24%, var(--ta-border-soft));
    border-radius: 999px;
    color: var(--ta-primary);
    background: color-mix(in srgb, var(--ta-primary) 8%, var(--ta-bg-surface));
    font-size: 0.74rem;
    font-weight: 880;
    font-variant-numeric: tabular-nums;
}

.transaction-guided-step__heading > div {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.transaction-guided-step__heading h3,
.transaction-guided-step__heading p {
    margin: 0;
}

.transaction-guided-step__heading h3 {
    color: var(--ta-text-main);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.35;
}

.transaction-guided-step__heading p {
    max-width: 58rem;
    color: var(--ta-text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.transaction-guided-step > .transaction-record-details-grid + .transaction-account-flow,
.transaction-guided-step > .transaction-record-note + .transaction-account-flow {
    margin-top: 0.85rem;
}

.transaction-guided-step__status-heading {
    align-items: flex-start;
}

.transaction-record-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ta-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.transaction-record-toggle input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--ta-primary);
}

.transaction-record-adjustment {
    display: grid;
    gap: 0.8rem;
}

.transaction-record-adjustment__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.transaction-record-details-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 1.5fr) minmax(10rem, 1fr) minmax(9rem, 0.8fr);
    align-items: end;
    gap: 0.8rem;
}

.transaction-record-details-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transaction-record-details-grid--debt {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.transaction-record-details-grid--one {
    grid-template-columns: minmax(0, 1fr);
}

.transaction-account-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr);
    align-items: end;
    gap: 0.65rem;
}

.transaction-account-flow__arrow {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    align-self: end;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 18%, var(--ta-border-soft));
    border-radius: 50%;
    color: var(--ta-primary);
    background: color-mix(in srgb, var(--ta-primary) 7%, var(--ta-bg-surface));
}

.transaction-account-flow__arrow .evo-icon-mask {
    width: 1rem;
    height: 1rem;
}

.transaction-record-form .transaction-account-flow .evo-select__value {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    text-overflow: clip;
}

.transaction-record-field {
    display: grid;
    min-width: 0;
    gap: 0.42rem;
}

.transaction-record-field .evo-form-label {
    color: var(--ta-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
}

.transaction-record-field .evo-input {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.transaction-locked-value {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.68rem 0.8rem;
    overflow-wrap: anywhere;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 14%, var(--ta-border-soft));
    border-radius: 8px;
    color: var(--ta-text-main);
    background: color-mix(in srgb, var(--ta-bg-muted) 72%, var(--ta-bg-surface));
    font-weight: 700;
}

.transaction-withdrawal-summary {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.95rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ta-border-soft);
}

.transaction-withdrawal-summary[hidden] {
    display: none;
}

.transaction-withdrawal-summary__header,
.transaction-withdrawal-summary__identity,
.transaction-withdrawal-summary__metrics {
    display: grid;
    gap: 0.7rem;
}

.transaction-withdrawal-summary__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.transaction-withdrawal-summary__header > div,
.transaction-withdrawal-summary__identity > div,
.transaction-withdrawal-summary__metrics > div {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.transaction-withdrawal-summary__header span,
.transaction-withdrawal-summary__identity span,
.transaction-withdrawal-summary__metrics span {
    color: var(--ta-text-muted);
    font-size: 0.69rem;
    font-weight: 780;
}

.transaction-withdrawal-summary__header strong,
.transaction-withdrawal-summary__identity strong,
.transaction-withdrawal-summary__metrics strong {
    overflow-wrap: anywhere;
    color: var(--ta-text-main);
    font-size: 0.84rem;
    font-weight: 800;
}

.transaction-withdrawal-summary__date {
    align-self: center;
    font-variant-numeric: tabular-nums;
}

.transaction-withdrawal-summary__identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transaction-withdrawal-summary__metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0.75rem 0;
    border-top: 1px solid var(--ta-border-soft);
    border-bottom: 1px solid var(--ta-border-soft);
}

.transaction-withdrawal-summary__metrics strong {
    font-variant-numeric: tabular-nums;
}

.transaction-withdrawal-summary__remaining strong {
    color: var(--ta-primary);
}

.transaction-record-note--empty {
    color: var(--ta-warning-text, #8a4b08);
    font-weight: 700;
}

.transaction-deposit-reconciliation__status {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 6px;
    color: var(--ta-text-muted);
    background: var(--ta-bg-surface);
    font-size: 0.69rem;
    font-weight: 800;
    white-space: nowrap;
}

.transaction-deposit-reconciliation__intro {
    margin-top: 0;
}

.transaction-deposit-reconciliation__notice {
    display: grid;
    width: 100%;
    min-height: 3rem;
    box-sizing: border-box;
    grid-template-columns: 1.3rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    margin: 0.75rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ta-border-soft);
    border-inline-start-width: 4px;
    border-radius: 10px;
    color: var(--ta-text-main);
    background: var(--ta-bg-surface);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.transaction-deposit-reconciliation__notice[hidden] {
    display: none;
}

.transaction-deposit-reconciliation__notice-icon {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 1.3rem;
    background-color: currentColor;
    -webkit-mask: url("/assets/versions/sda-ui-20260925.1/icons/bi-info.svg") center / contain no-repeat;
    mask: url("/assets/versions/sda-ui-20260925.1/icons/bi-info.svg") center / contain no-repeat;
}

.transaction-deposit-reconciliation__message {
    min-width: 0;
    overflow-wrap: anywhere;
}

.transaction-deposit-reconciliation[data-state="waiting"] .transaction-deposit-reconciliation__notice {
    border-color: color-mix(in srgb, #d97706 52%, var(--ta-border-soft));
    background: color-mix(in srgb, #f59e0b 10%, var(--ta-bg-surface));
    color: color-mix(in srgb, #92400e 76%, var(--ta-text-main));
}

.transaction-deposit-reconciliation[data-state="loading"] .transaction-deposit-reconciliation__status {
    color: var(--ta-primary);
    border-color: color-mix(in srgb, var(--ta-primary) 42%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-primary) 10%, var(--ta-bg-surface));
    font-size: 0.76rem;
    font-weight: 900;
}

.transaction-deposit-reconciliation[data-state="loading"] .transaction-deposit-reconciliation__status::before {
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: evo-button-spin 0.7s linear infinite;
}

.transaction-deposit-reconciliation[data-state="loading"] .transaction-deposit-reconciliation__notice {
    border-color: color-mix(in srgb, #0284c7 48%, var(--ta-border-soft));
    background: color-mix(in srgb, #0ea5e9 8%, var(--ta-bg-surface));
    color: color-mix(in srgb, #075985 72%, var(--ta-text-main));
}

.transaction-deposit-reconciliation[data-state="loading"] .transaction-deposit-reconciliation__notice-icon {
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    background: transparent;
    -webkit-mask: none;
    mask: none;
    animation: evo-button-spin 0.7s linear infinite;
}

.transaction-deposit-reconciliation[data-state="error"] .transaction-deposit-reconciliation__status {
    color: var(--ta-danger, #b42318);
    border-color: color-mix(in srgb, var(--ta-danger, #b42318) 38%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-danger, #b42318) 8%, var(--ta-bg-surface));
    font-size: 0.76rem;
    font-weight: 900;
}

.transaction-deposit-reconciliation[data-state="error"] .transaction-deposit-reconciliation__notice {
    border-color: color-mix(in srgb, #dc2626 52%, var(--ta-border-soft));
    background: color-mix(in srgb, #ef4444 9%, var(--ta-bg-surface));
    color: color-mix(in srgb, #991b1b 76%, var(--ta-text-main));
}

.transaction-deposit-reconciliation[data-state="error"] .transaction-deposit-reconciliation__notice-icon {
    -webkit-mask-image: url("/assets/versions/sda-ui-20260925.1/icons/alert-triangle.svg");
    mask-image: url("/assets/versions/sda-ui-20260925.1/icons/alert-triangle.svg");
}

.transaction-deposit-reconciliation__content {
    display: grid;
    gap: 0.8rem;
}

.transaction-deposit-reconciliation__content[hidden] {
    display: none;
}

.transaction-deposit-reconciliation__table-wrap {
    max-height: 12rem;
    overflow: auto;
    border-top: 1px solid var(--ta-border-soft);
    border-bottom: 1px solid var(--ta-border-soft);
}

.transaction-deposit-reconciliation__table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ta-text-main);
    font-size: 0.76rem;
}

.transaction-deposit-reconciliation__table :where(th, td) {
    padding: 0.58rem 0.45rem;
    border-bottom: 1px solid var(--ta-border-soft);
    text-align: left;
}

.transaction-deposit-reconciliation__table tr:last-child td {
    border-bottom: 0;
}

.transaction-deposit-reconciliation__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--ta-text-muted);
    background: var(--ta-bg-surface);
    font-size: 0.68rem;
    font-weight: 850;
}

.transaction-deposit-reconciliation__table :where(th, td):last-child {
    width: 10rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.transaction-deposit-reconciliation__empty {
    color: var(--ta-text-muted);
    text-align: center !important;
}

.transaction-withdrawal-accountability-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transaction-withdrawal-accountability-picker--with-date {
    grid-template-columns: minmax(10rem, 0.55fr) minmax(18rem, 1.25fr) minmax(16rem, 1fr);
}

.transaction-withdrawal-accountability-picker__allocation[hidden] {
    display: none !important;
}

.transaction-withdrawal-accountability-picker__allocation > .transaction-record-field {
    height: 100%;
}

.transaction-withdrawal-accountability-picker[data-allocation-choice-required="0"] {
    grid-template-columns: minmax(0, 1fr);
}

.transaction-withdrawal-accountability-picker--with-date[data-allocation-choice-required="0"] {
    grid-template-columns: minmax(10rem, 0.55fr) minmax(18rem, 2.25fr);
}

.transaction-withdrawal-accountability-picker__note {
    margin-top: 0.55rem;
}

.transaction-deposit-beneficiary-amount {
    width: 100%;
    min-width: 8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[data-deposit-beneficiary-note] {
    margin: 0;
}

.transaction-deposit-reconciliation__totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--ta-border-soft);
    border-bottom: 1px solid var(--ta-border-soft);
}

.transaction-deposit-reconciliation__totals > div {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
    padding: 0.7rem 0.55rem;
    border-right: 1px solid var(--ta-border-soft);
}

.transaction-deposit-reconciliation__totals > div:last-child {
    border-right: 0;
}

.transaction-deposit-reconciliation__totals dt {
    color: var(--ta-text-muted);
    font-size: 0.66rem;
    font-weight: 780;
}

.transaction-deposit-reconciliation__totals dd {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.86rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.transaction-deposit-reconciliation__variance {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid currentColor;
    color: var(--ta-danger, #b42318);
    background: color-mix(in srgb, currentColor 5%, var(--ta-bg-surface));
    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1.45;
}

.transaction-deposit-reconciliation__variance[data-direction="over"] {
    color: var(--ta-success, #087a46);
}

.transaction-deposit-reconciliation[data-state="ready"] .transaction-deposit-reconciliation__status {
    color: var(--ta-success, #087a46);
    border-color: color-mix(in srgb, var(--ta-success, #087a46) 34%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-success, #087a46) 8%, var(--ta-bg-surface));
}

.transaction-deposit-reconciliation[data-state="ready"] .transaction-deposit-reconciliation__notice {
    border-color: color-mix(in srgb, #059669 48%, var(--ta-border-soft));
    background: color-mix(in srgb, #10b981 8%, var(--ta-bg-surface));
    color: color-mix(in srgb, #047857 74%, var(--ta-text-main));
}

.transaction-deposit-reconciliation[data-state="ready"] .transaction-deposit-reconciliation__notice-icon {
    -webkit-mask-image: url("/assets/versions/sda-ui-20260925.1/icons/check-circle.svg");
    mask-image: url("/assets/versions/sda-ui-20260925.1/icons/check-circle.svg");
}

html[data-theme="dark"] .transaction-deposit-reconciliation__notice {
    color: rgba(241, 245, 249, 0.96);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .transaction-deposit-reconciliation[data-state="waiting"] .transaction-deposit-reconciliation__notice {
    border-color: rgba(251, 191, 36, 0.44);
    background: rgba(120, 53, 15, 0.82);
}

html[data-theme="dark"] .transaction-deposit-reconciliation[data-state="loading"] .transaction-deposit-reconciliation__notice {
    border-color: rgba(56, 189, 248, 0.44);
    background: rgba(12, 74, 110, 0.82);
}

html[data-theme="dark"] .transaction-deposit-reconciliation[data-state="error"] .transaction-deposit-reconciliation__notice {
    border-color: rgba(248, 113, 113, 0.44);
    background: rgba(127, 29, 29, 0.82);
}

html[data-theme="dark"] .transaction-deposit-reconciliation[data-state="ready"] .transaction-deposit-reconciliation__notice {
    border-color: rgba(52, 211, 153, 0.42);
    background: rgba(6, 78, 59, 0.82);
}

@media (max-width: 640px) {
    .transaction-deposit-reconciliation__notice {
        padding: 0.75rem;
        font-size: 0.84rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .transaction-deposit-reconciliation[data-state="loading"] .transaction-deposit-reconciliation__status::before,
    .transaction-deposit-reconciliation[data-state="loading"] .transaction-deposit-reconciliation__notice-icon {
        animation: none;
    }
}

.transaction-withdrawal-allocation-list {
    display: grid;
    gap: 0.75rem;
}

.transaction-withdrawal-allocation-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(10.5rem, 0.7fr) minmax(15rem, 1.25fr) minmax(13rem, 1fr) 2.75rem;
    grid-template-areas:
        "header header header remove"
        "request request request request"
        "request-summary request-summary request-summary request-summary"
        "amount fund purpose purpose"
        "availability availability availability availability"
        "route route route route";
    align-items: stretch;
    gap: 0.65rem 0.75rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 12%, var(--ta-border-soft));
    border-radius: 10px;
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ta-text-main) 6%, transparent);
}

.transaction-withdrawal-allocation-row__header {
    grid-area: header;
    display: flex;
    min-width: 0;
    min-height: 2rem;
    align-self: center;
    align-items: center;
    justify-self: start;
    gap: 0.45rem;
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.78rem;
    font-weight: 820;
}

.transaction-withdrawal-allocation-row__header > span {
    overflow-wrap: anywhere;
}

.transaction-withdrawal-allocation-row__header strong {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 999px;
    color: var(--ta-primary);
    background: color-mix(in srgb, var(--ta-primary) 10%, var(--ta-bg-surface));
    font-size: 0.75rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.transaction-withdrawal-allocation-row__fund {
    grid-area: fund;
    min-width: 0;
    align-self: end;
}

.transaction-withdrawal-allocation-row__request {
    grid-area: request;
    min-width: 0;
    align-self: end;
}

.transaction-withdrawal-allocation-row [data-withdrawal-request-summary] {
    grid-area: request-summary;
}

.transaction-withdrawal-allocation-row__amount {
    grid-area: amount;
    min-width: 0;
    align-self: end;
}

.transaction-withdrawal-allocation-row__purpose {
    grid-area: purpose;
    min-width: 0;
    align-self: end;
}

.transaction-allocation-route {
    grid-area: route;
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border-left: 3px solid var(--ta-primary);
    border-radius: 6px;
    color: var(--ta-text-muted);
    background: color-mix(in srgb, var(--ta-primary) 5%, var(--ta-bg-surface));
    font-size: 0.69rem;
}

.transaction-allocation-route[hidden] {
    display: none;
}

.transaction-allocation-route strong {
    overflow-wrap: anywhere;
    color: var(--ta-text-main);
    font-weight: 820;
}

.transaction-withdrawal-allocation-row > .transaction-withdrawal-allocation-row__remove {
    position: static;
    inset: auto;
    grid-area: remove;
    align-self: center;
    justify-self: end;
    margin: 0;
}

.transaction-withdrawal-allocation-row__remove:disabled {
    display: none;
}

.transaction-withdrawal-allocation-row__remove,
.transaction-withdrawal-allocation-row__toggle {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.transaction-withdrawal-allocation-row__remove .evo-icon-mask,
.transaction-withdrawal-allocation-row__toggle .evo-icon-mask {
    width: 0.875rem;
    height: 0.875rem;
}

.transaction-withdrawal-allocation-row__toggle {
    grid-area: toggle;
    display: none;
    align-self: end;
    justify-self: end;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    color: var(--ta-primary);
    background: var(--ta-bg-surface);
    cursor: pointer;
}

.transaction-withdrawal-allocation-row__remove:not(:disabled):hover,
.transaction-withdrawal-allocation-row__remove:not(:disabled):focus-visible,
.transaction-withdrawal-allocation-row__toggle:hover,
.transaction-withdrawal-allocation-row__toggle:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, currentColor 38%, var(--ta-border-soft));
    background: color-mix(in srgb, currentColor 9%, var(--ta-bg-surface));
    box-shadow: 0 10px 22px rgba(2, 43, 58, 0.11);
    outline: none;
}

.transaction-withdrawal-allocation-row__toggle .evo-icon-mask {
    transition: transform 160ms ease;
}

.transaction-withdrawal-allocation-row[data-withdrawal-allocation-collapsed="1"] .transaction-withdrawal-allocation-row__toggle .evo-icon-mask {
    transform: rotate(180deg);
}

.transaction-withdrawal-allocation-row__compact-summary {
    grid-area: compact-summary;
    display: none;
    min-width: 0;
    align-self: center;
    gap: 0.12rem;
}

.transaction-withdrawal-allocation-row__compact-summary > * {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.transaction-withdrawal-allocation-row__compact-summary strong {
    color: var(--ta-text-main);
    font-size: 0.74rem;
    font-weight: 800;
}

.transaction-withdrawal-allocation-row__compact-summary span {
    color: var(--ta-primary);
    font-size: 0.7rem;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
}

.transaction-withdrawal-allocation-row__request .evo-select__btn,
.transaction-withdrawal-allocation-row__fund .evo-select__btn {
    min-height: 2.85rem;
    align-items: flex-start;
}

#evoModalBody .transaction-record-form .transaction-withdrawal-allocation-row .transaction-record-field > input.evo-input:not([type="file"]):not(:disabled):not([readonly]),
#evoModalBody .transaction-record-form .transaction-withdrawal-allocation-row .evo-select__btn:not(:disabled) {
    min-height: 2.85rem;
    border-color: color-mix(in srgb, var(--ta-primary) 14%, var(--ta-border-soft)) !important;
    border-radius: 8px !important;
    background: var(--ta-bg-main) !important;
}

.transaction-withdrawal-allocation-row__fund > .transaction-record-field > .evo-form-label {
    padding-inline-start: 0;
}

.transaction-withdrawal-allocation-row__request > .transaction-record-field > .evo-form-label {
    padding-inline: 0;
}

.transaction-withdrawal-allocation-row__purpose > .evo-form-label {
    padding-inline-end: 0;
}

.transaction-withdrawal-allocation-row__amount > .evo-form-label,
.transaction-withdrawal-allocation-row__request > .transaction-record-field > .evo-form-label,
.transaction-withdrawal-allocation-row__fund > .transaction-record-field > .evo-form-label,
.transaction-withdrawal-allocation-row__purpose > .evo-form-label {
    display: flex;
    min-block-size: 2.05rem;
    align-items: flex-end;
    line-height: 1.35;
}

.transaction-withdrawal-allocation-row__request .evo-select__value,
.transaction-withdrawal-allocation-row__fund .evo-select__value {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    text-overflow: clip;
}

@media (min-width: 641px) and (max-width: 1179px) {
    .transaction-withdrawal-allocation-row {
        grid-template-columns: minmax(9rem, 0.7fr) minmax(12rem, 1.15fr) minmax(10rem, 1fr);
        grid-template-areas:
            "header header remove"
            "request request request"
            "request-summary request-summary request-summary"
            "amount fund purpose"
            "availability availability availability"
            "route route route";
    }
}

.transaction-breakdown-add.transaction-withdrawal-allocation-add {
    display: inline-flex;
    width: auto;
    min-width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    gap: 0.5rem;
    padding: 0 0.85rem;
    font-size: 0.75rem;
    font-weight: 820;
    white-space: nowrap;
}

.transaction-record-section--funds[data-withdrawal-allocation-section] .transaction-record-section__heading {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.transaction-record-section--funds[data-withdrawal-allocation-section] .transaction-record-section__heading > div {
    min-width: 0;
    flex: 1 1 30rem;
}

.transaction-record-note--choice,
.transaction-record-note--boundary {
    margin-top: 0;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid var(--ta-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--ta-primary) 4%, var(--ta-bg-surface));
}

.transaction-record-section--funds[data-withdrawal-allocation-section] .transaction-record-section__heading .transaction-record-note {
    margin-top: 0.35rem;
    line-height: 1.35;
}

.transaction-withdrawal-bank-availability {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 3.65rem;
    margin: 0.8rem 0 0;
    overflow: hidden;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-main);
}

.transaction-withdrawal-bank-availability > div {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 0.12rem;
    padding: 0.6rem 0.75rem;
    border-right: 1px solid var(--ta-border-soft);
}

.transaction-withdrawal-bank-availability > div:last-child {
    border-right: 0;
}

.transaction-withdrawal-bank-availability dt {
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 760;
    line-height: 1.3;
}

.transaction-withdrawal-bank-availability dd {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.9rem;
    font-weight: 840;
    font-variant-numeric: tabular-nums;
}

[data-withdrawal-bank-remaining-state] dd {
    color: var(--ta-primary);
}

[data-withdrawal-bank-remaining-state][data-direction="short"] dd {
    color: var(--ta-danger, #b42318);
}

.transaction-withdrawal-fund-availability {
    grid-area: availability;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 3.6rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-main);
}

.transaction-withdrawal-fund-availability[data-withdrawal-fund-availability] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transaction-withdrawal-fund-availability[hidden] {
    display: none;
}

.transaction-withdrawal-fund-availability > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    align-content: center;
    gap: 0.18rem;
    padding: 0.55rem 0.7rem;
    border-right: 1px solid var(--ta-border-soft);
}

.transaction-withdrawal-fund-availability > div:last-child {
    border-right: 0;
}

.transaction-withdrawal-fund-availability[data-withdrawal-request-summary] > div:nth-child(3n) {
    border-right: 0;
}

.transaction-withdrawal-fund-availability[data-withdrawal-request-summary] > div:nth-child(n + 4) {
    border-top: 1px solid var(--ta-border-soft);
}

.transaction-withdrawal-fund-availability dt {
    color: var(--ta-text-muted);
    font-size: 0.69rem;
    font-weight: 760;
    line-height: 1.3;
}

.transaction-withdrawal-fund-availability dd {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.84rem;
    font-weight: 840;
    font-variant-numeric: tabular-nums;
}

.transaction-withdrawal-fund-availability > div:last-child dd,
.transaction-withdrawal-fund-availability[data-withdrawal-fund-availability] dd[data-withdrawal-fund-balance="remaining-after"] {
    color: var(--ta-primary);
}

.transaction-withdrawal-fund-availability[data-withdrawal-fund-availability][data-direction="short"] {
    border-color: color-mix(in srgb, var(--ta-danger, #b42318) 52%, var(--ta-border-soft));
    background: color-mix(in srgb, var(--ta-danger, #b42318) 5%, var(--ta-bg-main));
}

.transaction-withdrawal-fund-availability[data-withdrawal-fund-availability][data-direction="short"] dd[data-withdrawal-fund-balance="remaining-after"] {
    color: var(--ta-danger, #b42318);
}

@media (min-width: 841px) {
    .transaction-withdrawal-fund-availability {
        align-self: end;
    }
}

.transaction-withdrawal-allocation-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 4rem;
    margin-top: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-main);
}

.transaction-withdrawal-review__identity,
.transaction-cash-source-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.transaction-withdrawal-review__identity > div,
.transaction-cash-source-summary > div {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface));
}

.transaction-withdrawal-review__identity dt,
.transaction-cash-source-summary dt {
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 780;
}

.transaction-withdrawal-review__identity dd,
.transaction-cash-source-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ta-text-main);
    font-size: 0.82rem;
    font-weight: 820;
}

.transaction-cash-source-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0.75rem;
}

.transaction-cash-source-summary[hidden] {
    display: none;
}

.transaction-withdrawal-review__status {
    margin: 0.65rem 0 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--ta-border-soft));
    border-radius: 8px;
    color: var(--ta-warning-text, #8a4b08);
    background: color-mix(in srgb, #f59e0b 8%, var(--ta-bg-surface));
    font-size: 0.74rem;
    font-weight: 780;
}

.transaction-withdrawal-review__status[data-state="ready"] {
    border-color: color-mix(in srgb, #16a34a 45%, var(--ta-border-soft));
    color: var(--ta-success, #087a46);
    background: color-mix(in srgb, #16a34a 7%, var(--ta-bg-surface));
}

.transaction-simple-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.transaction-simple-flow > div {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface));
}

.transaction-simple-flow > div span {
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 760;
}

.transaction-simple-flow > div strong {
    overflow-wrap: anywhere;
    color: var(--ta-text-main);
    font-size: 0.82rem;
}

.transaction-simple-flow > .transaction-account-flow__arrow {
    align-self: center;
}

.transaction-withdrawal-allocation-totals > div {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 0.25rem;
    padding: 0.7rem 0.8rem;
    border-right: 1px solid var(--ta-border-soft);
}

.transaction-withdrawal-allocation-totals > div:last-child {
    border-right: 0;
}

.transaction-withdrawal-allocation-totals span {
    color: var(--ta-text-muted);
    font-size: 0.69rem;
    font-weight: 780;
}

.transaction-withdrawal-allocation-totals strong {
    color: var(--ta-text-main);
    font-size: 0.94rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

[data-withdrawal-allocation-remaining-state][data-direction="short"] strong,
[data-withdrawal-allocation-remaining-state][data-direction="over"] strong {
    color: var(--ta-danger, #b42318);
}

[data-withdrawal-allocation-remaining-state][data-direction="balanced"] strong {
    color: var(--ta-success, #087a46);
}

.transaction-breakdown {
    display: grid;
    gap: 0.65rem;
}

.transaction-breakdown-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 0.6fr) minmax(12rem, 1.4fr) 2.75rem;
    align-items: end;
    gap: 0.65rem;
}

.transaction-breakdown-add,
.transaction-breakdown-remove {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    color: var(--ta-primary);
    background: var(--ta-bg-surface);
    cursor: pointer;
}

.transaction-breakdown-remove {
    color: var(--ta-danger, #b42318);
}

.transaction-breakdown-add:disabled,
.transaction-breakdown-remove:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.transaction-breakdown-add .evo-icon-mask,
.transaction-breakdown-remove .evo-icon-mask {
    width: 1rem;
    height: 1rem;
}

.transaction-breakdown-total {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ta-border-soft);
    color: var(--ta-text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.transaction-breakdown-total strong {
    min-width: 8rem;
    color: var(--ta-text-main);
    text-align: right;
}

#evoModalBody .transaction-record-form .transaction-record-field > :where(input.evo-input:not([type="file"]), textarea.evo-input) {
    min-height: 2.75rem;
    padding: 0.68rem 0.8rem !important;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 14%, var(--ta-border-soft)) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--ta-bg-main) 74%, #ffffff 26%) !important;
}

#evoModalBody .transaction-record-form .transaction-record-field > .evo-date-field {
    min-height: 2.75rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ta-primary) 14%, var(--ta-border-soft));
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-main) 74%, #ffffff 26%);
}

#evoModalBody .transaction-record-form .transaction-record-field > .evo-date-field .evo-date-input {
    min-height: 2.7rem;
    padding: 0.68rem 0.8rem !important;
    border: 0 !important;
    background: transparent !important;
}

.transaction-record-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
}

.transaction-record-support-grid textarea {
    min-height: 5rem;
    resize: vertical;
}

.transaction-record-support-grid input[type="file"] {
    min-height: 5rem;
    padding: 0.75rem;
}

.transaction-record-support-grid .evo-file-input {
    min-height: 5rem;
}

.transaction-record-note,
.transaction-record-error {
    margin: 0.7rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
}

.transaction-record-note {
    color: var(--ta-text-muted);
}

.transaction-record-error {
    color: var(--ta-danger, #b42318);
    font-weight: 700;
}

html[data-theme="dark"] .transaction-record-form {
    background: color-mix(in srgb, var(--ta-bg-surface) 96%, #ffffff 1%);
}

html[data-theme="dark"] .transaction-record-section--funds {
    background: color-mix(in srgb, var(--sda-yellowhammer) 7%, var(--ta-bg-surface));
}

html[data-theme="dark"] .transaction-record-section--adjustment {
    background: color-mix(in srgb, var(--sda-yellowhammer) 5%, var(--ta-bg-surface));
}

html[data-theme="dark"] .transaction-record-section--reconciliation {
    background: color-mix(in srgb, var(--ta-primary) 5%, var(--ta-bg-surface));
}

html[data-theme="dark"] .transaction-record-section--support {
    background: color-mix(in srgb, var(--ta-bg-surface) 92%, #ffffff 2%);
}

html[data-theme="dark"] #evoModalBody .transaction-record-form .transaction-record-field > :where(input.evo-input:not([type="file"]), textarea.evo-input),
html[data-theme="dark"] #evoModalBody .transaction-record-form .transaction-record-field > .evo-date-field,
html[data-theme="dark"] .transaction-locked-value {
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

#evoModalBody .evo-profile-grid > .transaction-deposit-reconciliation-profile {
    grid-column: 1 / -1;
    gap: 0.9rem;
}

.transaction-deposit-reconciliation-profile__header,
.transaction-deposit-reconciliation-profile__identity,
.transaction-deposit-reconciliation-profile__variance {
    display: grid;
    gap: 0.75rem;
}

.transaction-deposit-reconciliation-profile__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.transaction-deposit-reconciliation-profile__header p {
    margin: 0 0 0.25rem;
    color: var(--ta-primary);
    font-size: 0.68rem;
    font-weight: 850;
}

.transaction-deposit-reconciliation-profile__header h3 {
    margin: 0;
}

.transaction-deposit-reconciliation-profile__status {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 820;
    white-space: nowrap;
}

.transaction-deposit-reconciliation-profile__status.is-balanced,
.transaction-deposit-reconciliation-profile__status.is-over {
    color: var(--ta-success, #087a46);
    background: color-mix(in srgb, #16a34a 8%, var(--ta-bg-surface));
}

.transaction-deposit-reconciliation-profile__status.is-short {
    color: var(--ta-danger, #b42318);
    background: color-mix(in srgb, #dc2626 7%, var(--ta-bg-surface));
}

.transaction-deposit-reconciliation-profile__identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.75rem 0;
    border-top: 1px solid var(--ta-border-soft);
    border-bottom: 1px solid var(--ta-border-soft);
}

.transaction-deposit-reconciliation-profile__identity > div {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
}

.transaction-deposit-reconciliation-profile__identity span,
.transaction-deposit-reconciliation-profile__variance span {
    color: var(--ta-text-muted);
    font-size: 0.69rem;
    font-weight: 780;
}

.transaction-deposit-reconciliation-profile__identity strong {
    overflow-wrap: anywhere;
    color: var(--ta-text-main);
    font-size: 0.88rem;
    font-weight: 800;
}

.transaction-deposit-reconciliation-profile .transaction-deposit-reconciliation__table-wrap {
    max-height: 14rem;
}

.transaction-deposit-reconciliation-profile__variance {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid currentColor;
    background: color-mix(in srgb, currentColor 5%, var(--ta-bg-surface));
}

.transaction-deposit-reconciliation-profile__variance.is-balanced,
.transaction-deposit-reconciliation-profile__variance.is-over {
    color: var(--ta-success, #087a46);
}

.transaction-deposit-reconciliation-profile__variance.is-short {
    color: var(--ta-danger, #b42318);
}

.transaction-deposit-reconciliation-profile__variance strong {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

#evoModalBody .evo-profile-grid > :is(
    .transaction-withdrawal-allocation-profile,
    .transaction-withdrawal-accountability
) {
    grid-column: 1 / -1;
    gap: 0.9rem;
}

.transaction-withdrawal-allocation-profile .transaction-profile-table-wrap {
    overflow-x: auto;
}

.transaction-withdrawal-allocation-table {
    min-width: 58rem;
}

.transaction-withdrawal-allocation-table :where(th, td):nth-child(n + 3):nth-child(-n + 6) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.transaction-withdrawal-allocation-status {
    display: inline-flex;
    padding: 0.28rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 820;
    white-space: nowrap;
}

.transaction-withdrawal-allocation-status.is-open {
    color: var(--ta-warning-text, #8a4b08);
    background: color-mix(in srgb, #f59e0b 9%, var(--ta-bg-surface));
}

.transaction-withdrawal-allocation-status.is-complete {
    color: var(--ta-success, #087a46);
    background: color-mix(in srgb, #16a34a 8%, var(--ta-bg-surface));
}

.transaction-withdrawal-accountability__header,
.transaction-withdrawal-accountability__identity,
.transaction-withdrawal-accountability__metrics,
.transaction-withdrawal-accountability__path {
    display: grid;
    gap: 0.75rem;
}

.transaction-withdrawal-accountability__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.transaction-withdrawal-accountability__header p {
    margin: 0 0 0.25rem;
    color: var(--ta-primary);
    font-size: 0.68rem;
    font-weight: 850;
}

.transaction-withdrawal-accountability__status {
    padding: 0.32rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 820;
    white-space: nowrap;
}

.transaction-withdrawal-accountability__status.is-open {
    color: var(--ta-warning-text, #8a4b08);
    background: color-mix(in srgb, #f59e0b 9%, var(--ta-bg-surface));
}

.transaction-withdrawal-accountability__status.is-complete {
    color: var(--ta-success, #087a46);
    background: color-mix(in srgb, #16a34a 8%, var(--ta-bg-surface));
}

.transaction-withdrawal-accountability__identity {
    grid-template-columns: 1fr 0.65fr 1.25fr;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--ta-border-soft);
}

.transaction-withdrawal-accountability__metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.transaction-withdrawal-accountability__identity > div,
.transaction-withdrawal-accountability__metrics > div,
.transaction-withdrawal-accountability__path > div {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
}

.transaction-withdrawal-accountability__identity span,
.transaction-withdrawal-accountability__metrics span,
.transaction-withdrawal-accountability__path span {
    color: var(--ta-text-muted);
    font-size: 0.69rem;
    font-weight: 780;
}

.transaction-withdrawal-accountability__identity strong,
.transaction-withdrawal-accountability__metrics strong,
.transaction-withdrawal-accountability__path strong {
    overflow-wrap: anywhere;
    color: var(--ta-text-main);
    font-size: 0.88rem;
    font-weight: 800;
}

.transaction-withdrawal-accountability__metrics strong {
    font-variant-numeric: tabular-nums;
}

.transaction-withdrawal-accountability__remaining strong {
    color: var(--ta-primary);
}

.transaction-withdrawal-accountability__path {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface));
}

.transaction-withdrawal-accountability__path > span {
    color: var(--ta-primary);
    font-size: 1rem;
}

.transaction-withdrawal-accountability__note {
    margin: 0;
    color: var(--ta-text-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

#evoModalBody .evo-profile-grid > :is(
    .transaction-workflow-profile,
    .transaction-profile-detail-card
) {
    grid-column: 1 / -1;
}

.transaction-profile-card__header {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.transaction-profile-card__header p {
    margin: 0;
    color: var(--ta-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.transaction-profile-card__header h3,
.transaction-profile-detail-card > h4 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.94rem;
    font-weight: 850;
}

.transaction-profile-detail-card > h4 {
    margin-top: 1rem;
    margin-bottom: 0.55rem;
    font-size: 0.8rem;
}

.transaction-profile-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.transaction-profile-facts > div {
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface));
}

.transaction-profile-facts dt {
    margin-bottom: 0.24rem;
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 750;
}

.transaction-profile-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ta-text-main);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.transaction-external-adjustment__effects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0 0 0.7rem;
    padding: 0;
    list-style: none;
}

.transaction-external-adjustment__effects li {
    display: grid;
    gap: 0.24rem;
    padding: 0.7rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-primary) 3%, var(--ta-bg-surface));
}

.transaction-external-adjustment__effects strong {
    color: var(--ta-text-main);
    font-size: 0.78rem;
}

.transaction-external-adjustment__effects span,
.transaction-external-adjustment__total-note {
    color: var(--ta-text-muted);
    font-size: 0.73rem;
    line-height: 1.45;
}

.transaction-external-adjustment__direction {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
}

.transaction-external-adjustment__direction > div {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--sda-yellowhammer) 7%, var(--ta-bg-surface));
}

.transaction-external-adjustment__direction > div > span {
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 750;
}

.transaction-external-adjustment__direction strong {
    overflow-wrap: anywhere;
    color: var(--ta-text-main);
    font-size: 0.82rem;
}

.transaction-external-adjustment__arrow {
    color: var(--ta-primary);
    font-size: 1rem;
    font-weight: 900;
}

.transaction-external-adjustment__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transaction-external-adjustment__total-note {
    margin: 0.7rem 0 0;
}

.transaction-profile-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: var(--ta-bg-surface);
}

.transaction-profile-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    color: var(--ta-text-main);
    font-size: 0.76rem;
}

.transaction-profile-table :where(th, td) {
    padding: 0.58rem 0.65rem;
    border-bottom: 1px solid var(--ta-border-soft);
    text-align: left;
    vertical-align: top;
}

.transaction-profile-table :where(th, td):where(:nth-child(2), :nth-child(4), :nth-child(5)) {
    font-variant-numeric: tabular-nums;
}

.transaction-profile-table__amount {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.transaction-profile-table th {
    background: var(--ta-bg-header);
    color: var(--ta-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.transaction-profile-table tbody tr:last-child td,
.transaction-profile-table tfoot tr:last-child :where(th, td) {
    border-bottom: 0;
}

.transaction-profile-table tfoot th {
    color: var(--ta-text-main);
}

.transaction-profile-table__empty,
.transaction-profile-empty {
    color: var(--ta-text-muted);
    text-align: center !important;
}

.transaction-profile-empty {
    margin: 0;
    padding: 0.8rem;
    border: 1px dashed var(--ta-border-soft);
    border-radius: 8px;
    font-size: 0.78rem;
}

.transaction-profile-warning {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, #f59e0b 55%, var(--ta-border-soft));
    border-radius: 8px;
    background: color-mix(in srgb, #f59e0b 10%, var(--ta-bg-surface));
    color: var(--ta-text-main);
    font-size: 0.76rem;
}

@media (max-width: 840px) {
    .transaction-record-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transaction-record-details-grid > :first-child {
        grid-column: 1 / -1;
    }

    .transaction-record-details-grid--two > :first-child,
    .transaction-record-details-grid--one > :first-child,
    .transaction-record-details-grid--debt > :first-child {
        grid-column: auto;
    }

    .transaction-record-details-grid--debt {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transaction-record-details-grid--debt > :last-child {
        grid-column: 1 / -1;
    }

    .transaction-breakdown-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transaction-withdrawal-accountability-picker--with-date {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transaction-withdrawal-accountability-picker--with-date > :last-child {
        grid-column: 1 / -1;
    }

    .transaction-withdrawal-summary__metrics,
    .transaction-withdrawal-accountability__metrics,
    .transaction-deposit-reconciliation__totals,
    .transaction-cash-source-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transaction-deposit-reconciliation__totals > div:nth-child(2) {
        border-right: 0;
    }

    .transaction-deposit-reconciliation__totals > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--ta-border-soft);
    }

    .transaction-breakdown-row > :nth-child(3) {
        grid-column: 1 / -1;
    }

    .transaction-breakdown-remove:not(.transaction-withdrawal-allocation-row__remove) {
        grid-column: 2;
        justify-self: end;
    }
}

@media (max-width: 640px) {
    .transaction-record-section {
        padding: 0.9rem;
    }

    .transaction-record-details-grid,
    .transaction-record-adjustment__meta,
    .transaction-account-flow,
    .transaction-record-support-grid {
        grid-template-columns: 1fr;
    }

    .transaction-withdrawal-accountability-picker,
    .transaction-withdrawal-accountability-picker--with-date {
        grid-template-columns: minmax(0, 1fr);
    }

    .transaction-withdrawal-accountability-picker--with-date > :last-child {
        grid-column: auto;
    }

    .transaction-profile-facts {
        grid-template-columns: 1fr;
    }

    .transaction-external-adjustment__effects,
    .transaction-external-adjustment__direction {
        grid-template-columns: 1fr;
    }

    .transaction-external-adjustment__arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .transaction-withdrawal-summary__header,
    .transaction-withdrawal-summary__identity,
    .transaction-withdrawal-accountability__header,
    .transaction-withdrawal-accountability__identity,
    .transaction-withdrawal-accountability__path,
    .transaction-deposit-reconciliation-profile__header,
    .transaction-deposit-reconciliation-profile__identity {
        grid-template-columns: 1fr;
    }

    .transaction-withdrawal-accountability__status,
    .transaction-deposit-reconciliation-profile__status {
        justify-self: start;
    }

    .transaction-withdrawal-accountability__path > span {
        justify-self: center;
        transform: rotate(90deg);
    }

    .transaction-breakdown-row {
        grid-template-columns: minmax(0, 1fr) 2.75rem;
    }

    .transaction-withdrawal-allocation-row {
        grid-template-columns: 2rem minmax(0, 1fr) 2.75rem 2.75rem;
        grid-template-areas:
            "header header toggle remove"
            "request request request request"
            "request-summary request-summary request-summary request-summary"
            "amount amount amount amount"
            "fund fund fund fund"
            "availability availability availability availability"
            "purpose purpose purpose purpose"
            "route route route route";
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .transaction-withdrawal-allocation-row__header {
        align-self: center;
        margin-block-end: 0;
    }

    .transaction-withdrawal-allocation-row__fund > .transaction-record-field > .evo-form-label {
        padding-inline: 0;
    }

    .transaction-withdrawal-allocation-row__amount > .evo-form-label,
    .transaction-withdrawal-allocation-row__request > .transaction-record-field > .evo-form-label,
    .transaction-withdrawal-allocation-row__fund > .transaction-record-field > .evo-form-label,
    .transaction-withdrawal-allocation-row__purpose > .evo-form-label {
        min-block-size: 0;
        padding-inline-end: 0;
    }

    .transaction-withdrawal-bank-availability,
    .transaction-withdrawal-fund-availability,
    .transaction-withdrawal-allocation-totals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .transaction-withdrawal-fund-availability[data-withdrawal-fund-availability] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transaction-withdrawal-bank-availability > div,
    .transaction-withdrawal-fund-availability > div,
    .transaction-withdrawal-allocation-totals > div {
        min-width: 0;
        padding-inline: 0.55rem;
        border-right: 1px solid var(--ta-border-soft);
        border-bottom: 0;
    }

    .transaction-withdrawal-bank-availability > div:last-child,
    .transaction-withdrawal-fund-availability > div:last-child,
    .transaction-withdrawal-allocation-totals > div:last-child {
        border-right: 0;
        border-bottom: 0;
    }

    .transaction-withdrawal-bank-availability dt,
    .transaction-withdrawal-fund-availability dt,
    .transaction-withdrawal-allocation-totals span {
        font-size: 0.64rem;
        overflow-wrap: anywhere;
    }

    .transaction-withdrawal-bank-availability dd,
    .transaction-withdrawal-fund-availability dd,
    .transaction-withdrawal-allocation-totals strong {
        font-size: 0.8rem;
        overflow-wrap: anywhere;
    }

    .transaction-withdrawal-fund-availability[data-withdrawal-fund-availability] dt {
        font-size: 0.69rem;
    }

    .transaction-withdrawal-fund-availability[data-withdrawal-fund-availability] dd {
        font-size: 0.84rem;
    }

    .transaction-withdrawal-fund-availability > div {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: 0.08rem;
    }

    .transaction-withdrawal-allocation-row__toggle {
        display: grid;
        align-self: center;
    }

    .transaction-withdrawal-allocation-row__remove {
        align-self: center;
    }

    .transaction-withdrawal-allocation-row:has(.transaction-withdrawal-allocation-row__remove:disabled) .transaction-withdrawal-allocation-row__toggle {
        grid-column: 3 / 5;
        justify-self: end;
    }

    .transaction-record-section--funds[data-withdrawal-allocation-section] .transaction-record-section__heading .transaction-withdrawal-allocation-add {
        width: 100%;
        justify-content: center;
    }

    .transaction-record-section--funds[data-withdrawal-allocation-section] .transaction-record-section__heading > div {
        width: 100%;
        flex: 0 1 auto;
    }

    .transaction-withdrawal-allocation-row[data-withdrawal-allocation-collapsed="1"] {
        grid-template-columns: 2rem minmax(0, 1fr) 2.75rem 2.75rem;
        grid-template-areas: "header compact-summary toggle remove";
        min-height: 3.45rem;
        align-items: center;
        padding: 0.65rem 0.75rem;
    }

    .transaction-withdrawal-allocation-row[data-withdrawal-allocation-collapsed="1"] :where(
        .transaction-withdrawal-allocation-row__fund,
        .transaction-withdrawal-allocation-row__request,
        [data-withdrawal-request-summary],
        .transaction-withdrawal-fund-availability,
        .transaction-withdrawal-allocation-row__amount,
        .transaction-withdrawal-allocation-row__purpose,
        .transaction-allocation-route
    ) {
        display: none;
    }

    .transaction-withdrawal-allocation-row[data-withdrawal-allocation-collapsed="1"] .transaction-withdrawal-allocation-row__compact-summary {
        display: grid;
    }

    .transaction-breakdown-row > :where(:first-child, :nth-child(2), :nth-child(3)) {
        grid-column: 1 / -1;
    }

    .transaction-breakdown-remove:not(.transaction-withdrawal-allocation-row__remove) {
        grid-column: 2;
    }

    .transaction-record-details-grid > :first-child {
        grid-column: auto;
    }

    .transaction-record-section__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .transaction-deposit-reconciliation__status {
        white-space: normal;
    }

    .transaction-account-flow__arrow {
        width: 2.35rem;
        height: 2.35rem;
        justify-self: center;
        transform: rotate(90deg);
    }

    .transaction-simple-flow {
        grid-template-columns: 1fr;
    }

    .transaction-simple-flow > .transaction-account-flow__arrow {
        justify-self: center;
        transform: rotate(90deg);
    }
}

@media (max-width: 430px) {
    .transaction-withdrawal-fund-availability,
    .transaction-withdrawal-allocation-totals {
        grid-template-columns: minmax(0, 1fr);
    }

    .transaction-withdrawal-fund-availability[data-withdrawal-fund-availability] {
        grid-template-columns: minmax(0, 1fr);
    }

    .transaction-withdrawal-fund-availability > div,
    .transaction-withdrawal-allocation-totals > div {
        border-right: 0;
        border-bottom: 1px solid var(--ta-border-soft);
    }

    .transaction-withdrawal-fund-availability > div:last-child,
    .transaction-withdrawal-allocation-totals > div:last-child {
        border-bottom: 0;
    }

    .transaction-withdrawal-fund-availability[data-withdrawal-request-summary] > div:nth-child(n + 4) {
        border-top: 0;
    }
}

@media (max-width: 380px) {
    .transaction-withdrawal-allocation-row:not([data-withdrawal-allocation-collapsed="1"]) {
        grid-template-columns: 2rem minmax(0, 1fr) 2.75rem 2.75rem;
        grid-template-areas:
            "header header toggle remove"
            "request request request request"
            "request-summary request-summary request-summary request-summary"
            "amount amount amount amount"
            "fund fund fund fund"
            "availability availability availability availability"
            "purpose purpose purpose purpose"
            "route route route route";
    }

    .transaction-withdrawal-bank-availability,
    .transaction-withdrawal-fund-availability,
    .transaction-withdrawal-allocation-totals,
    .transaction-withdrawal-review__identity,
    .transaction-cash-source-summary,
    .transaction-withdrawal-summary__metrics,
    .transaction-deposit-reconciliation__totals {
        grid-template-columns: minmax(0, 1fr);
    }

    .transaction-withdrawal-bank-availability > div,
    .transaction-withdrawal-fund-availability > div,
    .transaction-withdrawal-allocation-totals > div,
    .transaction-deposit-reconciliation__totals > div {
        border-right: 0;
        border-bottom: 1px solid var(--ta-border-soft);
    }

    .transaction-guided-step__heading {
        gap: 0.55rem;
    }

    .transaction-guided-step__number {
        min-width: 1.85rem;
        height: 1.85rem;
    }
}

/* Transaction profile */
#evoModalBody .transaction-profile {
    display: grid;
    width: 100%;
    color: var(--ta-text-main);
}

#evoModalBody .evo-profile-grid > [data-transaction-profile-overview] {
    grid-column: 1 / -1;
}

#evoModalBody .transaction-profile__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: 0.25rem 0 1.15rem;
    border-bottom: 1px solid var(--ta-border-soft);
}

.transaction-profile__identity,
.transaction-profile__section-heading > div,
.transaction-profile__account {
    min-width: 0;
}

.transaction-profile__eyebrow {
    margin: 0 0 0.3rem;
    color: var(--ta-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.transaction-profile__reference {
    margin: 0;
    color: var(--ta-text-main);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 850;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.transaction-profile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.65rem;
    color: var(--ta-text-muted);
    font-size: 0.82rem;
}

.transaction-profile__meta-item {
    display: grid;
    gap: 0.18rem;
    min-width: min(10rem, 100%);
}

.transaction-profile__meta-item > span {
    color: var(--ta-text-muted);
    font-size: 0.66rem;
    font-weight: 780;
    line-height: 1.2;
}

.transaction-profile__meta-item > strong:not(.transaction-profile__badge) {
    color: var(--ta-text-main);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.transaction-profile__meta-item > .transaction-profile__badge {
    justify-self: start;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    line-height: 1.3;
}

.transaction-profile__meta-item .evo-icon-mask {
    width: 0.95rem;
    height: 0.95rem;
}

.transaction-profile__badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    max-width: 100%;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.transaction-profile__amount {
    min-width: 10rem;
    margin: 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--ta-primary);
    text-align: right;
}

.transaction-profile__amount dt,
.transaction-profile__movement-summary dt,
.transaction-profile__details-grid dt {
    color: var(--ta-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.25;
}

.transaction-profile__amount dd {
    margin: 0.2rem 0 0;
    color: var(--ta-text-main);
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 900;
    line-height: 1.1;
}

.transaction-profile__movement {
    padding: 1.15rem 0 0;
}

.transaction-profile__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.transaction-profile__section-heading h3 {
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.3;
}

.transaction-profile__section-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--ta-primary);
}

.transaction-profile__account-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    margin-top: 0;
    padding: 1rem 0;
    border-top: 1px solid var(--ta-border-soft);
    border-bottom: 1px solid var(--ta-border-soft);
}

.transaction-profile__account > span {
    display: block;
    color: var(--ta-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.transaction-profile__account > strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--ta-text-main);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.transaction-profile__account--received {
    text-align: right;
}

.transaction-profile__movement-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr);
    gap: 0.65rem;
    margin: 0;
    padding: 1rem 0;
}

.transaction-profile__movement-summary > div {
    min-width: 0;
}

.transaction-profile__movement-summary > div:last-child {
    grid-column: 3;
    text-align: right;
}

.transaction-profile__movement-summary dd,
.transaction-profile__details-grid dd {
    margin: 0.25rem 0 0;
    color: var(--ta-text-main);
    font-size: 0.86rem;
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.transaction-profile__lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--ta-border-soft);
}

.transaction-profile__details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0;
    margin: 0.85rem 0 0;
}

.transaction-profile__details-grid > div {
    min-width: 0;
    padding: 0.7rem 0.85rem 0.7rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ta-border-soft) 78%, transparent);
}

.transaction-profile__variable-row {
    display: grid;
    gap: 0.65rem;
    padding: 1rem 0;
    border-top: 1px solid var(--ta-border-soft);
}

.transaction-profile__variable-content,
.transaction-profile__attachment-content {
    min-width: 0;
    color: var(--ta-text-main);
    font-size: 0.9rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.transaction-profile__variable-content {
    white-space: pre-wrap;
}

.transaction-attachment {
    padding: 1rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-muted) 78%, transparent);
}

.transaction-attachment__preview {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    margin-top: 0.75rem;
    padding: 0.35rem 0;
    border: 0;
    background: transparent;
    color: var(--ta-primary);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.transaction-attachment__preview:hover,
.transaction-attachment__preview:focus-visible {
    color: color-mix(in srgb, var(--ta-primary) 78%, var(--ta-text-main));
}

.transaction-attachment__preview:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ta-primary) 55%, transparent);
    outline-offset: 3px;
}

.transaction-attachment__preview .evo-icon-mask {
    width: 1rem;
    height: 1rem;
}

@keyframes private-attachment-preview-spin {
    to {
        transform: rotate(360deg);
    }
}

.private-attachment__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.private-attachment-card .private-attachment__actions {
    margin-top: 0;
}

.private-attachment__preview,
.private-attachment__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    color: var(--ta-primary);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.private-attachment__preview:hover,
.private-attachment__download:hover,
.private-attachment__preview:focus-visible,
.private-attachment__download:focus-visible {
    color: color-mix(in srgb, var(--ta-primary) 78%, var(--ta-text-main));
}

.private-attachment__preview:focus-visible,
.private-attachment__download:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ta-primary) 58%, transparent);
    outline-offset: 3px;
}

.private-attachment__preview .evo-icon-mask,
.private-attachment__download .evo-icon-mask {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.private-attachment__unavailable {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--ta-dot-warning) 36%, var(--ta-border-soft));
    border-radius: 999px;
    background: color-mix(in srgb, var(--ta-dot-warning) 10%, transparent);
    color: color-mix(in srgb, var(--ta-dot-warning) 76%, var(--ta-text-main));
    font-size: 0.78rem;
    font-weight: 750;
}

.private-attachment-selection:empty {
    display: none;
}

.private-attachment-selection {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.private-attachment-selection__item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ta-bg-muted) 76%, transparent);
}

.private-attachment-selection__thumbnail,
.private-attachment-selection__type {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ta-primary) 10%, var(--ta-bg-surface));
    color: var(--ta-primary);
    font-size: 0.7rem;
    font-weight: 850;
    text-transform: uppercase;
}

.private-attachment-selection__thumbnail {
    object-fit: cover;
}

.private-attachment-selection__thumbnail > img {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.private-attachment-selection__details {
    min-width: 0;
}

.private-attachment-selection__name {
    display: block;
    overflow: hidden;
    color: var(--ta-text-main);
    font-size: 0.82rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.private-attachment-selection__meta {
    display: block;
    margin-top: 0.15rem;
    color: var(--ta-text-muted);
    font-size: 0.75rem;
}

#evoModalBox.private-attachment-preview-modal {
    width: min(1180px, calc(100vw - 2rem)) !important;
    max-height: min(920px, calc(100dvh - 1rem)) !important;
}

#evoModalBody.private-attachment-preview-modal__body {
    max-height: calc(100dvh - 10.5rem) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.private-attachment-preview {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    min-height: min(72dvh, 760px);
    background: color-mix(in srgb, var(--ta-bg-muted) 82%, var(--ta-bg-surface));
}

.private-attachment-preview [hidden] {
    display: none !important;
}

.private-attachment-preview__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ta-border-soft);
    background: var(--ta-bg-surface);
}

.private-attachment-preview__name {
    min-width: 0;
    margin: 0;
    color: var(--ta-text-main);
    font-size: 0.86rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.private-attachment-preview__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 8px;
    color: var(--ta-primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.private-attachment-preview__stage {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
}

.private-attachment-preview__stage > * {
    grid-area: 1 / 1;
}

.private-attachment-preview__viewport {
    display: grid;
    width: 100%;
    min-height: 0;
    place-items: center;
}

.private-attachment-preview__status,
.private-attachment-preview__error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 10rem;
    padding: 1.5rem;
    color: var(--ta-text-muted);
    text-align: center;
}

.private-attachment-preview__error {
    color: var(--ta-dot-danger);
}

.private-attachment-preview__spinner {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid color-mix(in srgb, var(--ta-primary) 25%, transparent);
    border-top-color: var(--ta-primary);
    border-radius: 50%;
    animation: private-attachment-preview-spin 0.8s linear infinite;
}

.private-attachment-preview__image,
.private-attachment-preview__pdf {
    width: 100%;
    height: min(66dvh, 700px);
}

.private-attachment-preview__image {
    padding: 1rem;
    object-fit: contain;
}

.private-attachment-preview__pdf {
    border: 0;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .private-attachment-preview__spinner {
        animation: none;
    }
}

@media (max-width: 640px) {
    .private-attachment__actions,
    .private-attachment-card .private-attachment__actions {
        width: 100%;
        margin-top: 0.5rem;
    }

    .private-attachment__preview,
    .private-attachment__download {
        flex: 1 1 9rem;
    }

    #evoModalBox.private-attachment-preview-modal {
        width: calc(100vw - 0.75rem) !important;
        max-height: calc(100dvh - 0.75rem) !important;
    }

    #evoModalBody.private-attachment-preview-modal__body {
        max-height: calc(100dvh - 8.5rem) !important;
    }

    .private-attachment-preview {
        min-height: calc(100dvh - 9rem);
    }

    .private-attachment-preview__toolbar {
        align-items: stretch;
        padding: 0.65rem;
    }

    .private-attachment-preview__name,
    .private-attachment-preview__download {
        width: 100%;
    }

    .private-attachment-preview__image,
    .private-attachment-preview__pdf {
        height: calc(100dvh - 14rem);
        min-height: 18rem;
    }
}

@media (max-width: 880px) {
    .transaction-profile__details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #evoModalBody .transaction-profile__summary {
        grid-template-columns: 1fr;
    }

    .transaction-profile__amount {
        min-width: 0;
        padding: 0.75rem 0 0;
        border-top: 1px solid var(--ta-border-soft);
        border-left: 0;
        text-align: left;
    }

    .transaction-profile__account-flow {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .transaction-profile__account--received {
        text-align: left;
    }

    .transaction-profile__movement-summary {
        grid-template-columns: 1fr;
    }

    .transaction-profile__movement-summary > div:last-child {
        grid-column: auto;
        text-align: left;
    }

    .transaction-profile__details-grid {
        grid-template-columns: 1fr;
    }
}
/* Evo shared toggle visibility guard: keep mobile and desktop menu buttons mutually exclusive. */
@media (max-width: 1023.98px) {
    #sidebarCollapseBtn {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    #mobileToggleWrap,
    #publicNavMobileToggle,
    #publicNavMobilePanel {
        display: none !important;
    }
}

#sidebarMobileIconHamburger.hidden,
#sidebarMobileIconClose.hidden,
#publicNavMobileIconHamburger.hidden,
#publicNavMobileIconClose.hidden {
    display: none !important;
}

/* Public CRUD module chrome: modules own their filters and actions; the shell owns presentation. */
.public-app .evo-module-filter-panel {
    width: 100%;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--ta-border-soft);
    border-radius: 1rem;
    background: var(--ta-bg-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ta-text-main) 7%, transparent);
}

.public-app .evo-module-filter-grid {
    display: grid;
    align-items: end;
    gap: 0.75rem;
    min-width: 0;
}

.public-app .evo-module-filter-grid--search-only {
    grid-template-columns: minmax(18rem, 32rem) auto minmax(0, 1fr);
}

.public-app .evo-module-filter-grid--search-date {
    grid-template-columns: minmax(18rem, 32rem) minmax(12rem, 16rem) auto minmax(0, 1fr);
}

.public-app .evo-module-filter-field {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.public-app .evo-module-filter-panel label > span:first-child {
    color: var(--ta-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
}

.public-app .evo-module-filter-reset {
    min-height: 2.75rem;
    align-self: end;
    white-space: nowrap;
}

.public-app [data-evo-module-header] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem 1rem;
    min-width: 0;
}

.public-app [data-evo-module-header] > .evo-module-title {
    min-width: 0;
    margin: 0;
    letter-spacing: 0;
}

.public-app [data-evo-module-actions] {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

.public-app [data-evo-module-actions][data-evo-action-count="0"] {
    display: none;
}

.public-app [data-evo-module-actions][data-evo-action-layout="rail"] {
    grid-column: 1 / -1;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.125rem 0 0.625rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ta-primary) 38%, var(--ta-border-soft)) transparent;
}

.public-app [data-evo-module-actions][data-evo-action-layout="rail"]::-webkit-scrollbar {
    height: 0.375rem;
}

.public-app [data-evo-module-actions][data-evo-action-layout="rail"]::-webkit-scrollbar-track {
    background: transparent;
}

.public-app [data-evo-module-actions][data-evo-action-layout="rail"]::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--ta-primary) 38%, var(--ta-border-soft));
}

.public-app [data-evo-module-actions] .evo-module-command {
    --evo-command-color: var(--ta-primary);
    flex: 0 0 auto;
    min-height: 2.625rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--evo-command-color) 24%, var(--ta-border-soft)) !important;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--evo-command-color) 7%, var(--ta-bg-surface)) !important;
    color: var(--ta-text-main) !important;
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
    scroll-snap-align: start;
}

.public-app [data-evo-action-tone="success"] {
    --evo-command-color: #15803d !important;
}

.public-app [data-evo-action-tone="warning"] {
    --evo-command-color: #b45309 !important;
}

.public-app [data-evo-action-tone="danger"] {
    --evo-command-color: #be123c !important;
}

.public-app [data-evo-action-tone="info"] {
    --evo-command-color: #0369a1 !important;
}

.public-app [data-evo-action-tone="neutral"] {
    --evo-command-color: var(--ta-text-muted) !important;
}

.public-app .evo-module-command-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    background: var(--evo-command-color);
    -webkit-mask: var(--evo-header-action-icon) center / contain no-repeat;
    mask: var(--evo-header-action-icon) center / contain no-repeat;
}

.public-app .evo-module-command-label {
    color: inherit !important;
    letter-spacing: 0;
    white-space: nowrap;
}

.public-app [data-evo-module-actions] .evo-module-command:hover {
    border-color: color-mix(in srgb, var(--evo-command-color) 45%, var(--ta-border-soft)) !important;
    background: color-mix(in srgb, var(--evo-command-color) 13%, var(--ta-bg-surface)) !important;
    color: var(--ta-text-main) !important;
    transform: translateY(-1px);
}

.public-app [data-evo-module-actions] .evo-module-command:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--evo-command-color) 72%, white);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .public-app .evo-module-filter-grid--search-only,
    .public-app .evo-module-filter-grid--search-date,
    .public-app [data-evo-module-header] {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .public-app .evo-module-filter-reset {
        width: 100%;
    }

    .public-app [data-evo-module-actions] {
        grid-column: 1;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.5rem;
        scroll-snap-type: x proximity;
    }
}