/* ================================================================
EVO ADMIN PANEL THEME TOKENS  FIXED + SINGLE SOURCE OF TRUTH
- Fixes: missing --ta-border-sidebar (light), better dark accent tint,
lighter green accent (closer to evo-green-500),
derived surfaces prefer *-50/*-100 where possible.
================================================================ */
:root {
--evo-font-sans: "Segoe UI Variable", "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
--evo-font-emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
--evo-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Monaco, monospace;
--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;
/* 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) MUZIKIHUB BRAND THEME TOKENS
- Palette adapted from the current MuzikiHub public design.
=================================================================== */
--muzikihub-orange: #f16022;
--muzikihub-orange-deep: #d9521a;
--muzikihub-black: #07080b;
--muzikihub-ink: #08090c;
--muzikihub-navy: #07172e;
--muzikihub-blue: #071d43;
--muzikihub-blue-soft: #0a1b36;
--muzikihub-blue-mid: #0b2a5b;
--muzikihub-blue-bright: #08347a;
--muzikihub-muted: #9aa3b2;
--muzikihub-paper: #f5f7fa;
--muzikihub-white: #ffffff;
--evo-accent-h: 18;
--evo-accent-s: 88%;
--evo-accent-l: 54%;
--evo-accent: var(--muzikihub-orange);
--ta-primary: var(--evo-accent);
--ta-primary-rgb: 241 96 34;
/* Soft accent surfaces derived from the MuzikiHub orange. */
--evo-accent-soft: color-mix(in srgb, var(--muzikihub-orange) 11%, var(--muzikihub-white));
--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) - MUZIKIHUB PALETTE
=================================================================== */
--ta-text-main: var(--muzikihub-navy);
--ta-text-muted: color-mix(in srgb, var(--muzikihub-navy) 58%, var(--muzikihub-muted));
--ta-border-soft: color-mix(in srgb, var(--muzikihub-navy) 14%, var(--muzikihub-paper));
--ta-border-sidebar: color-mix(in srgb, var(--muzikihub-navy) 12%, var(--muzikihub-paper));
--ta-bg: var(--muzikihub-paper);
--ta-bg-body: var(--ta-bg);
--ta-bg-sidebar: var(--muzikihub-white);
--ta-bg-header: var(--muzikihub-white);
--ta-bg-surface: var(--muzikihub-white);
--ta-bg-surface-2: color-mix(in srgb, var(--muzikihub-navy) 5%, var(--muzikihub-white));
--ta-row-hover: color-mix(in srgb, var(--muzikihub-orange) 9%, var(--muzikihub-white));
--ta-surface-main: var(--ta-bg-surface);
--ta-surface-soft: var(--ta-bg-surface-2);
--empty-card-bg: color-mix(in srgb, var(--muzikihub-navy) 4%, var(--muzikihub-white));
--empty-card-border: var(--ta-border-soft);
--empty-card-text: color-mix(in srgb, var(--muzikihub-navy) 76%, var(--muzikihub-muted));
/* ===================================================================
4) LAYOUT TOKENS
=================================================================== */
--header-h: 4.5rem;
--breadcrumbs-h: 1rem;
--ta-radius: 10px;
--ta-text-primary: var(--ta-text-main);
--ta-text-strong: var(--ta-text-main);
--ta-surface-overlay: rgba(7, 8, 11, 0.45);
--ta-shadow-soft: 0 22px 45px rgba(7, 23, 46, 0.08);
--ta-shadow-nav: 0 12px 30px rgba(7, 23, 46, 0.05);
--ta-shadow: 0 4px 20px rgba(7, 23, 46, 0.10);
--ta-bg-hover: color-mix(in srgb, var(--muzikihub-orange) 12%, transparent);
--ta-pill-new-bg: color-mix(in srgb, var(--muzikihub-orange) 12%, var(--muzikihub-white));
--ta-pill-new-text: var(--muzikihub-orange-deep);
--ta-dot-success: var(--evo-green-500);
--ta-dot-danger: var(--evo-red-500);
--ta-alert-success-bg: #ecfdf5;
--ta-alert-success-text: #065f46;
--ta-alert-success-border: #a7f3d0;
--ta-alert-danger-bg: #fef2f2;
--ta-alert-danger-text: #991b1b;
--ta-alert-danger-border: #fecaca;
--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(--muzikihub-white);
--ta-option-disabled: rgba(7, 23, 46, 0.45);
--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: 241 96 34;
--evo-accent-soft: color-mix(in srgb, var(--muzikihub-orange) 20%, var(--muzikihub-blue));
--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);
--ta-bg: var(--muzikihub-black);
--ta-bg-body: var(--ta-bg);
--ta-bg-sidebar: var(--muzikihub-ink);
--ta-bg-header: var(--muzikihub-navy);
--ta-bg-surface: var(--muzikihub-blue);
--ta-bg-surface-2: var(--muzikihub-blue-soft);
--ta-row-hover: color-mix(in srgb, var(--muzikihub-orange) 13%, var(--muzikihub-blue));
--ta-text-main: var(--muzikihub-white);
--ta-text-muted: var(--muzikihub-muted);
--ta-text-primary: var(--ta-text-main);
--ta-text-strong: var(--ta-text-main);
--ta-surface-main: var(--ta-bg-surface);
--ta-surface-soft: color-mix(in srgb, var(--muzikihub-blue-soft) 88%, var(--muzikihub-white) 12%);
--ta-surface-overlay: rgba(0, 0, 0, 0.62);
--ta-border-soft: color-mix(in srgb, var(--muzikihub-blue-mid) 72%, var(--muzikihub-white) 14%);
--ta-border-sidebar: color-mix(in srgb, var(--muzikihub-blue-mid) 74%, var(--muzikihub-white) 12%);
--ta-bg-hover: rgba(255, 255, 255, 0.06);
--ta-shadow-soft: 0 22px 45px rgba(0, 0, 0, 0.78);
--ta-shadow-nav: 0 12px 30px rgba(0, 0, 0, 0.86);
--ta-shadow: 0 4px 20px rgba(0, 0, 0, 0.56);
--empty-card-bg: var(--ta-bg-surface);
--empty-card-border: var(--ta-border-soft);
--empty-card-text: color-mix(in srgb, var(--muzikihub-white) 76%, var(--muzikihub-muted));
--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(--muzikihub-white);
--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);
--ta-option-disabled: rgba(255, 255, 255, 0.60);
--ta-card-bg: var(--ta-bg-surface);
--ta-card-border: var(--ta-border-soft);
--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
========================= */
html[data-theme="dark"] {
--ta-bg-card: var(--muzikihub-blue);
--ta-bg-card-2: var(--muzikihub-blue-soft);
--ta-text: var(--muzikihub-white);
--ta-text-muted: var(--muzikihub-muted);
--ta-border: color-mix(in srgb, var(--muzikihub-blue-mid) 75%, var(--muzikihub-white) 14%);
--ta-border-soft: color-mix(in srgb, var(--muzikihub-blue-mid) 72%, var(--muzikihub-white) 14%);
--ta-table-head-bg: var(--muzikihub-blue);
--ta-table-row-bg: var(--muzikihub-blue-soft);
--ta-table-row-hover: color-mix(in srgb, var(--muzikihub-orange) 13%, var(--muzikihub-blue));
--ta-table-divider: color-mix(in srgb, var(--muzikihub-blue-mid) 75%, var(--muzikihub-white) 14%);
--ta-icon: var(--muzikihub-white);
--ta-icon-muted: color-mix(in srgb, var(--muzikihub-white) 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: var(--evo-font-sans);
background-color: var(--ta-bg-body);
color: var(--ta-text-main);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow: hidden;
}
button,
input,
select,
textarea {
font: inherit;
}
/* 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;
}
/* Logo container */
.sidebar-logo-icon {
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
}
/* Logo IMG */
.evo-logo-icon {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.sidebar-logo-icon .evo-logo-icon {
width: 100%;
height: 100%;
}
.evo-logo-icon.h-16 {
width: 4rem;
height: 4rem;
}
/* LOGO THEME SWITCHING */
.evo-logo-icon-light,
.evo-logo-text-light {
display: block;
}
.evo-logo-icon-dark,
.evo-logo-text-dark {
display: none;
}
html[data-theme="dark"] .evo-logo-icon-light,
html[data-theme="dark"] .evo-logo-text-light {
display: none;
}
html[data-theme="dark"] .evo-logo-icon-dark,
html[data-theme="dark"] .evo-logo-text-dark {
display: block;
}
/* Scaling protection */
.sidebar-logo-icon img {
max-height: 42px;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
.sidebar-logo-text img {
max-height: 32px;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
/* Fade labels when collapsed */
.sidebar-logo-text,
.sidebar-section-label,
.sidebar-item-label,
.sidebar-bottom-card {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.sidebar[data-collapsed="true"] .sidebar-logo-text,
.sidebar[data-collapsed="true"] .sidebar-section-label,
.sidebar[data-collapsed="true"] .sidebar-item-label,
.sidebar[data-collapsed="true"] .sidebar-bottom-card {
opacity: 0;
pointer-events: none;
transform: translateX(-8px);
}
/* Center logo icon when collapsed */
.sidebar[data-collapsed="true"] .sidebar-logo {
justify-content: center;
}
/* Mobile Sidebar (off-canvas) */
@media (max-width: 1023px) {
.sidebar {
position: fixed;
transform: translateX(-100%);
}
.sidebar[data-open="true"] {
transform: translateX(0);
}
}
/* Desktop sidebar always visible */
@media (min-width: 1024px) {
.sidebar {
transform: translateX(0) !important;
}
}
/* Sidebar scrolling */
.sidebar-scroll {
overflow-y: auto;
padding-right: 0.15rem;
}
.sidebar-scroll::-webkit-scrollbar {
width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
background-color: rgba(148, 163, 184, 0.5);
border-radius: 999px;
}
/* Sidebar items */
.sidebar-item {
border-radius: 999px;
transition: background-color 0.18s ease, color 0.18s ease;
}
.sidebar-item:hover {
background: rgba(148, 163, 184, 0.18);
}
.sidebar-item-active {
background: var(--ta-primary-soft);
color: var(--ta-primary);
}
/* Mobile overlay for off-canvas sidebar */
.mobile-overlay {
/*background: rgb(var(--ta-primary-rgb) / 0.1);*/
}
@media (min-width: 1024px) {
.mobile-overlay {
display: none;
}
}
.sidebar-submenu.hidden {
display: none;
}
.sidebar-item[data-sidebar-toggle] {
cursor: pointer;
}
/* -----------------------------------------
Sidebar Submenu Animation
------------------------------------------ */
/* 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-group {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
}
.evo-action-icon {
--evo-action-tone: var(--ta-primary);
--evo-action-bg: color-mix(in srgb, var(--ta-bg-surface) 94%, #ffffff 6%);
--evo-action-border: color-mix(in srgb, var(--ta-border-soft) 86%, var(--ta-text-muted) 14%);
--evo-action-neutral: color-mix(in srgb, var(--ta-text-muted) 82%, var(--ta-text-main) 18%);
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--evo-action-border);
border-radius: 0.5rem;
background: var(--evo-action-bg);
color: var(--evo-action-neutral);
cursor: pointer;
opacity: 1;
transition:
background-color 0.16s ease,
border-color 0.16s ease,
box-shadow 0.16s ease,
color 0.16s ease,
transform 0.16s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
html[data-theme="dark"] .evo-action-icon {
--evo-action-bg: color-mix(in srgb, var(--ta-bg-surface) 88%, #ffffff 4%);
--evo-action-border: color-mix(in srgb, var(--ta-border-soft) 72%, #ffffff 14%);
--evo-action-neutral: color-mix(in srgb, var(--ta-text-main) 68%, var(--ta-text-muted) 32%);
}
.evo-action-icon:hover,
.evo-action-icon:focus-visible,
.evo-action-icon:active,
.evo-action-icon[data-active="true"] {
color: var(--evo-action-tone);
border-color: color-mix(in srgb, var(--evo-action-tone) 42%, var(--evo-action-border) 58%);
background: color-mix(in srgb, var(--evo-action-tone) 12%, var(--evo-action-bg) 88%);
box-shadow: 0 10px 24px color-mix(in srgb, var(--evo-action-tone) 16%, transparent);
}
.evo-action-icon:focus-visible {
outline: 2px solid color-mix(in srgb, var(--evo-action-tone) 68%, transparent);
outline-offset: 2px;
}
.evo-action-icon:active {
transform: translateY(1px);
}
[data-evo-toggle-password].evo-action-icon {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ta-text-muted);
box-shadow: none;
}
[data-evo-toggle-password].evo-action-icon:hover,
[data-evo-toggle-password].evo-action-icon:focus-visible,
[data-evo-toggle-password].evo-action-icon:active {
color: var(--ta-primary);
border-color: transparent;
background: transparent;
box-shadow: none;
transform: translateY(-50%);
}
[data-evo-toggle-password].evo-action-icon:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ta-primary) 45%, transparent);
outline-offset: 2px;
}
.evo-profile-icon {
--evo-action-tone: var(--ta-text-main);
}
.evo-action-warn {
--evo-action-tone: #d97706;
}
html[data-theme="dark"] .evo-action-warn {
--evo-action-tone: #fbbf24;
}
.evo-action-success {
--evo-action-tone: #16a34a;
}
html[data-theme="dark"] .evo-action-success {
--evo-action-tone: #4ade80;
}
.evo-action-danger {
--evo-action-tone: #dc2626;
}
html[data-theme="dark"] .evo-action-danger {
--evo-action-tone: #f87171;
}
.evo-action-info {
--evo-action-tone: #0ea5e9;
}
html[data-theme="dark"] .evo-action-info {
--evo-action-tone: #38bdf8;
}
.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-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.dashboard-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
border-radius: 8px;
border: 1px solid var(--ta-border-soft);
color: var(--ta-text-main);
padding: 0.55rem 0.9rem;
font-size: 0.875rem;
font-weight: 650;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.dashboard-btn:hover {
background: var(--ta-surface-soft);
}
.dashboard-btn-primary {
background: var(--ta-primary);
border-color: var(--ta-primary);
color: #fff;
}
html[data-theme="dark"] .dashboard-btn-primary {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.2);
}
.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-section {
display: grid;
gap: 1rem;
}
.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(auto-fit, minmax(12rem, 1fr));
}
.dashboard-metric-card {
border-radius: 8px;
min-height: 8rem;
padding: 1rem;
}
.dashboard-card-head {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--ta-text-muted);
font-size: 0.9rem;
min-width: 0;
}
.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);
}
.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;
}
}
@media (max-width: 640px) {
.dashboard-root {
padding-left: 1rem;
padding-right: 1rem;
}
.dashboard-hero,
.dashboard-panel {
padding: 1rem;
}
.dashboard-title {
font-size: 1.25rem;
}
.dashboard-section-header {
align-items: flex-start;
flex-direction: column;
}
.dashboard-hero-actions {
width: 100%;
}
.dashboard-btn {
flex: 1 1 8rem;
}
}
/* Framework command center */
.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;
}
}
/* Disabled state */
.evo-action-icon.disabled,
.evo-icon-btn.disabled {
opacity: 0.35 !important;
cursor: default !important;
pointer-events: none !important;
}
html[data-theme="dark"] .evo-action-icon.disabled,
html[data-theme="dark"] .evo-icon-btn.disabled {
opacity: 0.25 !important;
}
/* Ensure hidden attribute works for SVG icons inside buttons */
.evo-action-icon svg[hidden],
.evo-icon-btn svg[hidden] {
display: none !important;
}
/* ================================================================
5. TOP NAVBAR
================================================================ */
.top-nav {
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
box-shadow: var(--ta-shadow-nav);
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.7)
);
}
html[data-theme="dark"] .top-nav {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.96),
rgba(0, 0, 0, 0.92)
);
}
/* Make all navbar action buttons theme-aware */
.navbar-icon-btn {
background-color: var(--ta-bg-surface);
border: 1px solid var(--ta-border-soft);
color: var(--ta-text-muted);
}
.navbar-icon-btn:hover {
background-color: rgba(148, 163, 184, 0.12);
}
/* Dark mode icons fix */
html[data-theme="dark"] .navbar-icon-btn {
background-color: var(--ta-bg-header);
border-color: rgba(255, 255, 255, 0.12);
color: var(--ta-text-main);
}
html[data-theme="dark"] .navbar-icon-btn:hover {
background-color: rgba(255, 255, 255, 0.06);
}
.top-nav-search {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}
html[data-theme="dark"] .top-nav-search {
background-color: rgba(10, 10, 10, 0.96);
box-shadow: inset 0 0 0 1px rgba(75, 85, 99, 0.9);
}
.navbar-icon-btn svg {
stroke: currentColor;
color: inherit;
}
/* ========================================
NOTIFICATION DROPDOWN  MOBILE FIX
======================================== */
/* Desktop button – theme aware */
#notificationPanel .notification-scroll + div button {
background: var(--ta-bg-surface) !important;
color: var(--ta-text-main) !important;
border-color: var(--ta-border-soft) !important;
}
/* Hover state */
#notificationPanel .notification-scroll + div button:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
/* Dark mode override */
html[data-theme="dark"] #notificationPanel .notification-scroll + div button {
background: rgba(255, 255, 255, 0.05) !important;
color: var(--ta-text-main) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
html[data-theme="dark"] #notificationPanel .notification-scroll + div button:hover {
background: rgba(255, 255, 255, 0.12) !important;
}
@media (max-width: 640px) {
#notificationPanel {
position: fixed !important;
top: calc(var(--header-h) + 0.5rem) !important;
right: 0.75rem !important;
left: 0.75rem !important;
width: auto !important;
max-width: none !important;
border-radius: 1rem;
z-index: 99999; /* above everything */
transform: none !important;
}
#notificationPanel .notification-scroll {
max-height: 60vh !important; /* allow scrolling */
overflow-y: auto !important;
}
}
/* ================================================================
6. GENERIC CARDS / UTILITIES
================================================================ */
.ta-card {
background-color: var(--ta-bg-surface);
border-radius: 1.5rem;
box-shadow: var(--ta-shadow-soft);
border: 1px solid var(--ta-border-soft);
}
.notification-panel {
background-color: var(--ta-bg-surface);
border-radius: 1.25rem;
border: 1px solid var(--ta-border-soft);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.dropdown-card {
border-radius: 1rem;
background-color: var(--ta-bg-surface);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
border: 1px solid var(--ta-border-soft);
}
/* Force dropdowns on top */
.notification-panel,
.dropdown-card {
z-index: 80 !important;
}
.notification-scroll {
max-height: 18rem;
overflow-y: auto;
}
.notification-scroll::-webkit-scrollbar {
width: 6px;
}
.notification-scroll::-webkit-scrollbar-thumb {
background-color: rgba(148, 163, 184, 0.6);
border-radius: 999px;
}
/* Tags / avatar */
.pill-new {
background: var(--ta-pill-new-bg);
color: var(--ta-pill-new-text);
}
.status-dot-success {
background-color: var(--ta-dot-success);
}
.status-dot-danger {
background-color: var(--ta-dot-danger);
}
.avatar {
border-radius: 999px;
box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}
.kbd-tag {
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.5);
}
/* Inputs */
.ta-input {
background-color: var(--ta-bg-surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.5rem;
padding: 0.55rem 0.75rem;
font-size: 0.875rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
color: var(--ta-text-main);
}
.ta-input:focus {
border-color: var(--evo-accent);
box-shadow: 0 0 0 2px var(--evo-accent-soft);
outline: none;
}
html[data-theme="dark"] .ta-input {
background-color: #0d0d0d;
border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .ta-input:focus {
border-color: var(--ta-primary);
box-shadow: 0 0 0 2px rgb(var(--ta-primary-rgb) / 0.40);
}
/* Module title & card header */
.ta-module-title {
margin-bottom: 1.25rem;
font-size: 1.4rem;
font-weight: 600;
color: var(--ta-text-main);
}
.ta-card-header {
padding: 1rem 1.25rem;
background-color: var(--ta-bg-header);
border-bottom: 1px solid var(--ta-border-soft);
border-radius: 0.75rem 0.75rem 0 0;
}
/* Checkboxes */
.ta-checkbox {
width: 1rem;
height: 1rem;
border-radius: 0.25rem;
border: 1px solid rgba(148, 163, 184, 0.9);
}
.ta-checkbox:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(var(--ta-primary-rgb), 0.35);
}
/* Empty state */
.ta-empty-card {
background-color: var(--ta-bg-surface);
border-radius: 1.25rem;
border: 1px dashed rgba(148, 163, 184, 0.6);
padding: 2.5rem 2rem;
}
/* ================================================================
7. GLOBAL SCROLLBAR THEME
================================================================ */
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.45);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.65);
}
*::-webkit-scrollbar-track {
background: transparent;
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.28);
}
/* ================================================================
8. EVO MINIMAL MODE (optional)
================================================================ */
.evo-minimal .ta-card,
.evo-minimal .ta-table-wrapper {
border-radius: 0.75rem;
box-shadow: none;
border: 1px solid var(--ta-border-soft);
}
.evo-minimal .top-nav {
box-shadow: none;
}
.evo-minimal .sidebar {
box-shadow: none;
}
/* ================================================================
9. TABLE ROW DENSITY
================================================================ */
.ta-row {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.evo-row-compact .ta-row {
padding-top: 0.45rem;
padding-bottom: 0.45rem;
}
.evo-row-spacious .ta-row {
padding-top: 1.1rem;
padding-bottom: 1.1rem;
}
/* ================================================================
10. CORE TABLE LAYOUT (Option B)
================================================================ */
/* Wrapper that contains table + pagination.
This is what gets fixed height so pagination never overflows. */
/* ============================================================
TABLE WRAPPER  FINAL RESPONSIVE / NO PAGE SCROLL VERSION
============================================================ */
/* Base: Mobile-first, stable, never collapses */
.ta-table-wrapper {
position: relative;
display: flex;
flex-direction: column;
background: var(--ta-bg-surface);
/*border-radius: 0.75rem;*/
border: 1px solid var(--ta-border-soft);
/* Full height minus navbar + breadcrumbs */
height: calc(100dvh - var(--header-h) - var(--breadcrumbs-h));
/*min-height: 360px;*/
flex: 1 1 auto; /* take remaining space under the module header */
min-height: 0; /* IMPORTANT so .ta-table-scroll can scroll */
max-height: 100%;
overflow: hidden;
border-radius: 18px;
border: 1px solid var(--ta-border-soft);
background: var(--ta-bg-surface);
box-shadow: var(--ta-card-shadow);
}
/* Medium-height screens */
@media (max-height: 800px) {
.ta-table-wrapper {
height: calc(100dvh - var(--header-h) - .5rem);
}
}
/* VERY small devices (≤ 580px height) */
@media (max-height: 580px) {
.ta-table-wrapper {
height: calc(100dvh - var(--header-h));
}
}
/* Desktop & large tablets: relax height but keep max constraint */
@media (min-width: 768px) {
.ta-table-wrapper {
height: auto;
max-height: calc(100dvh - var(--header-h) - var(--breadcrumbs-h));
min-height: 420px;
}
}
.ta-table-wrapper > .ta-pagination-bar {
flex-shrink: 0;
}
/* Table scroll area – only this scrolls */
.ta-table-scroll {
/*flex: 1 1 auto;*/
/*overflow-y: auto;*/
/*overflow-x: auto;*/
scrollbar-width: thin;
padding-bottom: max(2.25rem, env(safe-area-inset-bottom));
border-left: none !important;
border: 0 !important; /* border must NOT be here */
border-radius: 0 !important;
/*overflow: auto;*/
background: transparent;
flex: 1;
min-height: 0;
overflow: auto;
}
.ta-table th,
.ta-table td {
border-left: none !important;
}
.ta-table th:first-child,
.ta-table td:first-child {
border-left: none !important;
}
/* Wrapper should own the border + radius, and clip inner scroll */
.ta-table-wrapper,
[data-module-name] {
border: 1px solid var(--ta-border-soft);
border-radius: 16px; /* match your design */
overflow: hidden; /* IMPORTANT: clips corners */
background: var(--white);
}
/* The table itself */
.ta-table {
border-collapse: collapse;
border-spacing: 0;
min-width: 100%;
}
/* Head */
.ta-table thead th {
position: sticky;
top: 0;
z-index: 10;
text-align: left;
background: var(--ta-bg-header);
padding: 0.75rem 1rem;
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 600;
color: var(--ta-text-muted);
}
/* Allow column-specific overrides */
.ta-text-left {
text-align: left !important;
}
.ta-text-center {
text-align: center !important;
}
.ta-text-right {
text-align: right !important;
}
/* Rows / cells */
.ta-table tbody td {
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
white-space: nowrap;
}
html[data-theme="dark"] .ta-table tbody td {
border-bottom-color: rgba(75, 85, 99, 0.6);
}
/* Hover */
.ta-table tbody tr:hover {
background-color: var(--ta-row-hover);
}
/* Optional actions cell – NOT sticky anymore */
.ta-sticky-actions-cell {
background-color: var(--ta-bg-surface);
border-left: 1px solid var(--ta-border-soft);
}
/* ================================================================
11. PAGINATION – ALWAYS VISIBLE
================================================================ */
/* LEFT TEXT */
.ta-pagination-info {
white-space: nowrap;
}
/* -----------------------------------------------
PAGINATION BUTTONS (Prev / Next / Numbers)
----------------------------------------------- */
/* PAGINATION WRAPPER */
.ta-pagination-bar {
width: 100%;
margin-top: 1rem;
padding: 0.75rem 1rem;
display: flex;
flex-direction: column; /* Mobile first */
gap: 0.75rem;
font-size: 0.85rem;
color: var(--ta-text-muted);
border-top: 1px solid var(--ta-border-soft);
background: var(--ta-bg-surface);
border-radius: 0 0 0.75rem 0.75rem;
flex-wrap: wrap; /* prevent overflow */
flex-shrink: 0;
padding-bottom: 12px; /* your “leave some padding at the bottom†*/
}
/* Desktop/tablet: left–right layout */
@media (min-width: 640px) {
.ta-pagination-bar {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* LEFT: Showing x–y of z */
.ta-page-info {
white-space: nowrap;
}
/* RIGHT: buttons */
.ta-pagination-buttons {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
justify-content: center;
}
/* Page pills */
.ta-page-pill,
.ta-page-number {
border-radius: 999px;
border: 1px solid var(--ta-border-soft);
background: white;
color: var(--ta-text-primary);
padding: 0.35rem 0.9rem;
font-size: 0.85rem;
transition: all .2s ease;
cursor: pointer;
}
html[data-theme='dark'] .ta-page-pill,
html[data-theme='dark'] .ta-page-number {
background: var(--ta-bg-surface);
color: var(--ta-text-primary);
}
/* Hover */
.ta-page-pill:hover,
.ta-page-number:hover {
background: var(--ta-bg-hover);
}
/* Active */
.ta-active {
background: var(--ta-primary);
border-color: var(--ta-primary);
color: white !important;
}
/* Disabled */
.ta-page-pill:disabled {
opacity: 0.4;
pointer-events: none;
}
/* ================================================================
12. BULK ACTION BAR – FLOATING, NO LAYOUT SHIFT
================================================================ */
/* IMPORTANT: parent wrapper in HTML must have `class="relative"` */
.ta-bulk-bar {
position: absolute;
top: -2.4rem;
left: 0;
right: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--ta-border-soft);
box-shadow: 0 12px 30px rgb(var(--ta-primary-rgb) / 0.15);
}
html[data-theme="dark"] .ta-bulk-bar {
background: rgba(10, 10, 10, 0.9);
border-color: rgba(82, 82, 91, 0.9);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}
/* Default mobile button position */
#mobileToggleWrap {
transition: transform .25s ease;
}
/* Move ONLY the hamburger/X when sidebar opens */
html.sidebar-open #mobileToggleWrap {
transform: translateX(16rem); /* same as your sidebar width */
}
/* Disable on desktop */
@media (min-width: 1024px) {
html.sidebar-open #mobileToggleWrap {
transform: none !important;
}
}
/* Move the mobile toggle button to the right when sidebar opens */
.mobile-toggle-shift {
transform: translateX(5rem);
}
#sidebarMobileToggle {
transition: transform 0.25s ease;
}
#sidebarMenuContainer {
z-index: 9999 !important;
}
#mobileOverlay {
z-index: 9998 !important;
}
/* ================================================================
13. ADMIN ERROR PAGE LAYOUT
================================================================ */
.error-meta-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
color: var(--ta-text-muted);
}
.error-meta-value {
font-size: 0.9rem;
color: var(--ta-text-main);
}
.error-trace-block {
background-color: #0f0f0f;
color: #e0e0e0;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0.75rem;
white-space: pre-wrap;
line-height: 1.35rem;
transition: opacity 0.25s ease;
}
html[data-theme="light"] .error-trace-block {
background-color: #f9fafb;
color: #374151;
border-color: rgba(148, 163, 184, 0.25);
}
/* ---------------------------
ERROR PAGE - MOBILE FIX
--------------------------- */
@media (max-width: 640px) {
/* Reduce the massive top padding */
.ta-card {
padding-top: 3rem !important;
padding-bottom: 2.5rem !important;
}
/* Bring content up and tighten spacing */
.ta-card > .space-y-10 {
margin-top: 0 !important;
gap: 2rem !important;
}
/* Error heading */
.ta-card h2 {
margin-top: 0 !important;
font-size: 1.25rem !important;
}
/* The parent wrapper that centers everything */
.app-shell #appMainContent {
padding-top: 0 !important;
}
/* Technical Details card spacing */
.error-info-box {
margin-top: 1rem !important;
padding: 1rem !important;
}
/* Stack trace collapse button */
#toggleTrace {
margin-top: 0.5rem !important;
}
}
/* ---------------------------
ADD BUTTON
--------------------------- */
.evo-add-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1rem;
border-radius: 999px;
background: var(--ta-primary-soft);
color: var(--evo-accent);
border: 1px solid var(--ta-border-soft);
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s ease;
}
.evo-add-btn:hover {
background: var(--evo-accent);
color: white;
border-color: var(--evo-accent);
}
html[data-theme="dark"] .evo-add-btn {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .evo-add-btn:hover {
background: var(--evo-accent);
color: white;
}
.ta-core-toggle {
min-height: 2.35rem;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ta-core-toggle-input {
width: 1rem;
height: 1rem;
accent-color: var(--evo-accent);
}
.ta-core-toggle:has(.ta-core-toggle-input:checked) {
background: var(--ta-primary-soft) !important;
border-color: var(--evo-accent) !important;
color: var(--evo-accent) !important;
}
html[data-theme="dark"] .ta-core-toggle {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
/* ============================================================
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,");
background-repeat: no-repeat;
background-position: right 12px center;
}
/* Multiselect */
select[multiple].form-control {
height: auto;
min-height: 90px;
background-image: none;
}
/* Radio / Checkbox */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
transform: scale(1.12);
margin-right: 6px;
}
/* Help text */
.form-text {
font-size: .75rem;
margin-top: 4px;
color: var(--ta-text-muted);
}
/* ============================================================================
EVO  MODAL & FORM FIX PACK
(Non-destructive: does NOT alter any existing CSS)
============================================================================ */
/* ===========================
1. OVERLAY FIX
=========================== */
#evoModal {
position: fixed;
inset: 0;
z-index: 999999;
display: none;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .25s ease;
}
#evoModal.show {
display: flex;
opacity: 1;
}
/* Overlay transition */
#evoModalOverlay {
transition: opacity .18s ease;
opacity: 0;
inset: 0;
z-index: 0;
}
#evoModal.show #evoModalOverlay {
opacity: 1;
}
/* ===========================
2. MODAL BOX FIX
=========================== */
#evoModalBox {
width: 96%;
max-width: 1100px;
background: rgba(var(--white-rgb), 0.20);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
transition: opacity .18s ease, transform .18s ease;
opacity: 0;
transform: scale(.95);
position: relative;
z-index: 1;
}
#evoModal.show #evoModalBox {
opacity: 1;
transform: scale(1);
}
/* Make profile card flat when inside a modal */
#evoModalBox .evo-profile-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Mobile responsiveness */
@media (max-width: 480px) {
#evoModalBox {
margin: 1rem;
max-width: 100%;
}
}
/* ===========================
LIGHT MODE MODAL BACKGROUND
=========================== */
html:not([data-theme="dark"]) #evoModalBox {
background: rgba(255, 255, 255, 1); /* <-- perfect glass */
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}
/* ======================================================
3. DARK MODE MODAL BOX  premium black glass
====================================================== */
html[data-theme="dark"] #evoModalBox {
background: rgba(15, 15, 15, 0.35); /* <-- actual glass effect */
backdrop-filter: blur(26px) saturate(160%);
-webkit-backdrop-filter: blur(26px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
}
/* ===========================
3. HEADER FIX
=========================== */
#evoModalHeader {
padding: 1.2rem 1.6rem;
border-bottom: 1px solid var(--ta-border-soft);
display: flex;
justify-content: space-between;
align-items: center;
}
#evoModalTitle {
font-size: 1.15rem;
font-weight: 600;
color: var(--ta-text-main);
}
#evoModalCloseX {
cursor: pointer;
font-size: 1.25rem;
color: var(--ta-text-muted);
transition: color .2s ease;
}
#evoModalCloseX:hover {
color: var(--ta-dot-danger);
}
/* ===========================
4. BODY FIX (SCROLL + PADDING)
=========================== */
#evoModalBody {
padding: 1.6rem;
max-height: 68vh;
overflow-y: auto;
background: transparent;
}
#evoModalBody::-webkit-scrollbar {
width: 6px;
}
#evoModalBody::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.45);
border-radius: 6px;
}
html[data-theme="dark"] #evoModalBody::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
}
/* ===========================
5. FOOTER FIX
=========================== */
#evoModalFooter {
padding: 1rem 1.6rem;
display: flex;
justify-content: flex-end;
gap: .75rem;
border-top: 1px solid var(--ta-border-soft);
background: transparent;
}
#evoModalActionBtn,
#evoModalCancelBtn {
padding: 0.55rem 1.2rem;
border-radius: 8px;
font-size: .9rem;
}
/* ===========================
6. FORM ELEMENT FIXES (ONLY INSIDE MODAL)
=========================== */
#evoModalBody .form-group {
margin-bottom: 1.25rem !important;
}
#evoModalBody .form-group label {
display: block;
font-size: .82rem;
font-weight: 600;
margin-bottom: 6px;
color: var(--ta-text-muted);
}
/* Inputs ONLY inside modal */
#evoModalBody .form-control {
width: 100%;
padding: 10px 12px;
font-size: .9rem;
border-radius: 8px;
border: 1px solid var(--ta-border-soft);
background: var(--ta-surface-soft);
color: var(--ta-text-main);
transition: .18s ease;
}
#evoModalBody .form-control:focus {
border-color: var(--ta-primary);
box-shadow: 0 0 0 2px rgba(var(--ta-primary-rgb), .25);
outline: none;
}
/* DARK MODE FIX */
html[data-theme="dark"] #evoModalBody .form-control {
background: var(--ta-surface-soft-dark);
border-color: var(--ta-border-soft-dark);
color: var(--ta-text-main-dark);
}
html[data-theme="dark"] #evoModalBody .form-control::placeholder {
color: #888;
}
/* Textarea */
#evoModalBody textarea.form-control {
resize: vertical;
}
/* Select dropdown */
#evoModalBody select.form-control {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
/* Multiselect */
#evoModalBody select[multiple].form-control {
background-image: none;
min-height: 95px;
}
/* Radio / Checkbox fix */
#evoModalBody input[type="checkbox"],
#evoModalBody input[type="radio"] {
transform: scale(1.15);
margin-right: 6px;
}
/* PROFILE CARD CONTAINER */
.evo-profile-card {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
background: transparent;
}
/* HEADER */
.ep-header {
display: flex;
align-items: center;
gap: 1.25rem;
}
/* AVATAR CIRCLE */
.ep-avatar {
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--ta-primary);
color: white;
font-weight: 700;
font-size: 1.35rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
/* NAME + EMAIL BLOCK */
.ep-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.ep-name {
font-size: 1.05rem;
font-weight: 600;
color: var(--ta-text-main);
}
.ep-email {
font-size: .9rem;
color: var(--ta-text-muted);
}
/* STATUS PILL */
.ep-status {
margin-top: 4px;
display: inline-block;
font-size: .75rem;
padding: 3px 10px;
border-radius: 999px;
font-weight: 500;
}
.ep-status-green {
background: #dcfce7;
color: #166534;
}
.ep-status-red {
background: #fee2e2;
color: #b91c1c;
}
.ep-status-orange {
background: #ffedd5;
color: #c2410c;
}
.ep-status-blue {
background: #dbeafe;
color: #1d4ed8;
}
/* DARK MODE PROFILE PILL FIX */
html[data-theme="dark"] .ep-status-green {
background: rgba(34, 197, 94, .15);
color: #4ade80;
}
html[data-theme="dark"] .ep-status-red {
background: rgba(239, 68, 68, .15);
color: #f87171;
}
html[data-theme="dark"] .ep-status-orange {
background: rgba(251, 146, 60, .15);
color: #fb923c;
}
html[data-theme="dark"] .ep-status-blue {
background: rgba(59, 130, 246, .20);
color: #93c5fd;
}
/* INFO GRID */
.ep-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.5rem;
}
/* LABEL + VALUE */
.ep-grid label {
font-size: .75rem;
color: var(--ta-text-muted);
}
.ep-grid span {
display: block;
margin-top: 2px;
font-size: .9rem;
color: var(--ta-text-main);
}
/* DARK MODE FIXES */
html[data-theme="dark"] .evo-profile-card {
color: var(--ta-text-main-dark);
}
.evo-pill-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 500;
background-color: var(--evo-gray-100, rgba(148, 163, 184, 0.18));
color: var(--evo-gray-700, #475569);
white-space: nowrap;
}
.evo-toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 10000000; /* higher than #evoModal */
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.evo-toast {
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
color: white;
opacity: 0;
transform: translateY(-10px);
transition: opacity .25s ease, transform .25s ease;
font-size: 0.875rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.evo-toast-success {
background: var(--evo-green-600);
}
.evo-toast-error {
background: var(--evo-red-600);
}
.evo-toast-warning {
background: var(--evo-yellow-600);
}
.evo-toast.show {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
PROFILE CHROME  PRO UI
Put this at the VERY END of your CSS (override duplicates)
========================================================= */
/* Layout: tabs on top, buttons below, centered */
.evo-profile-chrome {
display: flex;
flex-direction: column;
gap: 12px;
}
/* -----------------------------
TABS ROW (Segmented Control)
------------------------------ */
.evo-profile-tabs-row {
display: flex;
justify-content: flex-start !important;
}
.evo-profile-tabs {
display: inline-flex;
align-items: center;
/* One unified "track" so it doesn't look like buttons */
background: color-mix(in srgb, var(--ta-bg-header) 92%, transparent);
border: 1px solid var(--ta-border-soft);
border-radius: 14px;
padding: 4px;
/* Responsive safety */
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 4px; /* subtle spacing inside the track */
/* keep the segmented control styling, just align it left */
margin-right: auto; /* pushes it to the left */
margin-left: 0 !important;
}
.evo-profile-tabs::-webkit-scrollbar {
display: none;
}
/* Individual tab (NOT pill buttons anymore) */
.evo-tab-pill {
appearance: none;
border: 0 !important;
background: transparent !important;
padding: 10px 14px;
border-radius: 11px; /* smaller than the container radius */
font-size: 0.86rem;
font-weight: 650;
letter-spacing: .01em;
color: var(--ta-text-muted);
cursor: pointer;
transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
white-space: nowrap;
}
/* Hover: subtle lift, not button-like */
.evo-tab-pill:hover {
transform: translateY(-1px);
color: var(--ta-text-main);
background: color-mix(in srgb, var(--ta-text-main) 4%, transparent);
}
/* Active: looks like a selected segment */
.evo-tab-pill.is-active {
background: var(--ta-bg-surface) !important;
color: var(--ta-primary) !important;
box-shadow: 0 10px 22px rgb(var(--ta-primary-rgb) / 0.10),
inset 0 0 0 1px rgb(var(--ta-primary-rgb) / 0.22);
transform: none;
}
/* Keyboard focus (accessibility) */
.evo-tab-pill:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgb(var(--ta-primary-rgb) / 0.22),
inset 0 0 0 1px rgb(var(--ta-primary-rgb) / 0.32);
}
/* -----------------------------
ACTIONS ROW (Real CTAs)
------------------------------ */
.evo-profile-actions-row {
display: flex;
justify-content: center !important;
}
.evo-profile-actions {
display: flex;
flex-wrap: wrap;
justify-content: center !important;
gap: 10px;
}
/* Make actions look like CTAs, NOT tabs */
.evo-profile-btn {
border: 1px solid rgba(var(--ta-primary-rgb), 0.18) !important;
background: color-mix(in srgb, var(--ta-primary) 9%, var(--ta-bg-surface)) !important;
color: var(--ta-text-main);
padding: 10px 14px;
border-radius: 12px; /* squared-ish compared to tab track */
font-size: 0.86rem;
font-weight: 650;
cursor: pointer;
transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.evo-profile-btn:hover {
transform: translateY(-1px);
border-color: rgba(var(--ta-primary-rgb), 0.32) !important;
box-shadow: 0 12px 26px rgba(var(--ta-primary-rgb), 0.10);
background: color-mix(in srgb, var(--ta-primary) 14%, var(--ta-bg-surface)) !important;
}
.evo-profile-btn:active {
transform: translateY(0px);
box-shadow: none;
}
.evo-profile-btn.is-disabled,
.evo-profile-btn:disabled {
opacity: .45;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* -----------------------------
Mobile: tabs become full-width segments
------------------------------ */
@media (max-width: 520px) {
.evo-profile-tabs-row {
justify-content: stretch;
}
.evo-profile-tabs {
width: auto !important; /* don't force 100% */
max-width: 100%;
}
.evo-tab-pill {
flex: 1 1 auto;
text-align: center;
padding: 10px 10px;
}
.evo-profile-actions {
width: 100%;
}
.evo-profile-btn {
width: 100%;
max-width: 420px; /* prevents ugly ultra-wide on tablets */
}
}
/* Dark-mode polish (keeps segmented track premium) */
html[data-theme="dark"] .evo-profile-tabs {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .evo-tab-pill.is-active {
background: rgba(255, 255, 255, 0.10) !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.50),
inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .evo-profile-btn {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
/* =========================================================
EVO Modal  Opt-in Confirmation Card (ONLY when you add .is-confirm)
========================================================= */
#evoModalBody #dynamicForm .form-group.is-confirm {
display: flex;
align-items: flex-start;
gap: .85rem;
padding: 1rem 1.05rem;
border-radius: 14px;
background: var(--ta-bg-header);
border: 1px solid var(--ta-border-soft);
box-shadow: 0 10px 24px rgba(var(--ta-primary-rgb), 0.06);
}
html[data-theme="dark"] #evoModalBody #dynamicForm .form-group.is-confirm {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.10);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}
#evoModalBody #dynamicForm .form-group.is-confirm .ta-checkbox {
margin-top: .18rem;
width: 1.1rem;
height: 1.1rem;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.65);
background: var(--ta-bg-surface);
cursor: pointer;
flex: 0 0 auto;
}
html[data-theme="dark"] #evoModalBody #dynamicForm .form-group.is-confirm .ta-checkbox {
background: rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.20);
}
#evoModalBody #dynamicForm .form-group.is-confirm .ta-checkbox:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--ta-primary-rgb), .22);
}
#evoModalBody #dynamicForm .form-group.is-confirm label {
margin: 0 !important;
font-size: .92rem;
line-height: 1.4rem;
color: var(--ta-text-main);
font-weight: 550;
}
/* Only add the "cannot be undone" hint when you ALSO opt in */
#evoModalBody #dynamicForm .form-group.is-confirm.has-hint label::after {
/*content:"This action cannot be undone.";*/
content: attr(data-i18n-after-text);
display: block;
margin-top: .25rem;
font-size: .78rem;
color: var(--ta-text-muted);
font-weight: 500;
}
@media (max-width: 520px) {
#evoModalBody #dynamicForm .form-group.is-confirm {
padding: .9rem .9rem;
border-radius: 12px;
}
}
/* =========================================================
AUTH LOGO THEME SWITCH
========================================================= */
.evo-auth-logo {
height: 26px;
width: auto;
object-fit: contain;
}
.evo-auth-logo-light {
display: none;
}
.evo-auth-logo-dark {
display: block;
}
html[data-theme="dark"] .evo-auth-logo-light {
display: block;
}
html[data-theme="dark"] .evo-auth-logo-dark {
display: none;
}
/* =========================================================
AUTH FORM INPUT THEME SWITCH
========================================================= */
/* Auth + global form controls: fix dark theme input surfaces */
html[data-theme="dark"] .form-control {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: var(--ta-text-main);
}
html[data-theme="dark"] .form-control::placeholder {
color: rgba(255, 255, 255, 0.45);
}
/* Keep 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,
.sidebar-submenu-item {
color: var(--ta-text-muted);
}
.sidebar-item svg,
.sidebar-submenu a svg,
.sidebar-submenu-item 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;
color: var(--ta-text-muted) !important;
border: 1px solid transparent;
white-space: nowrap;
}
.sidebar-item:hover {
background: var(--ta-bg-hover);
color: var(--ta-text-main) !important;
}
.sidebar-item-active {
background: var(--ta-primary-soft) !important;
color: var(--ta-text-main) !important;
border-color: var(--ta-border-soft);
}
.sidebar-submenu {
position: relative;
overflow: hidden;
max-height: 0;
opacity: 0;
margin: 0.35rem 0 0.25rem 1.25rem;
padding: 0 0 0 1rem;
transform: translateY(-4px);
transition: max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 180ms ease,
transform 180ms ease;
}
.sidebar-submenu::before {
content: "";
position: absolute;
left: 0.3rem;
top: 0.35rem;
bottom: 0.35rem;
width: 1px;
background: var(--ta-border-soft);
}
.sidebar-submenu[data-open="true"] {
max-height: 34rem;
opacity: 1;
transform: translateY(0);
}
.sidebar-submenu-item {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
min-height: 2.35rem;
padding: 0.45rem 0.7rem;
border-radius: 0.85rem;
color: var(--ta-text-muted) !important;
font-size: 0.84rem;
line-height: 1.15rem;
text-align: left;
transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.sidebar-submenu-item:hover {
background: var(--ta-bg-hover);
color: var(--ta-text-main) !important;
transform: translateX(2px);
}
.sidebar-submenu-item.sidebar-item-active {
background: color-mix(in srgb, var(--ta-primary) 10%, transparent) !important;
color: var(--ta-primary) !important;
border-color: transparent;
}
.sidebar-submenu-dot {
width: 0.4rem;
height: 0.4rem;
min-width: 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--ta-text-muted) 38%, transparent);
transition: background-color 0.18s ease, transform 0.18s ease;
}
.sidebar-submenu-item:hover .sidebar-submenu-dot,
.sidebar-submenu-item.sidebar-item-active .sidebar-submenu-dot {
background: var(--ta-primary);
transform: scale(1.15);
}
.sidebar-submenu-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
html[data-theme="dark"] .sidebar-item {
color: var(--evo-neutral-300) !important;
}
html[data-theme="dark"] .sidebar-item:hover,
html[data-theme="dark"] .sidebar-item-active {
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(var(--ta-primary-rgb), 0.34), rgba(var(--ta-primary-rgb), 0.14)) !important;
border-color: rgba(var(--ta-primary-rgb), 0.48);
box-shadow: inset 3px 0 0 var(--ta-primary), 0 10px 24px rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] .sidebar-item-active .sidebar-icon-wrap {
color: var(--evo-neutral-50);
background: rgba(var(--ta-primary-rgb), 0.32);
border-color: rgba(var(--ta-primary-rgb), 0.62);
}
html[data-theme="dark"] .sidebar-submenu::before {
background: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .sidebar-submenu-item {
color: var(--evo-neutral-300) !important;
}
html[data-theme="dark"] .sidebar-submenu-item:hover {
background: rgba(255, 255, 255, 0.07);
color: var(--evo-neutral-50) !important;
}
html[data-theme="dark"] .sidebar-submenu-item.sidebar-item-active {
background: rgba(var(--ta-primary-rgb), 0.28) !important;
color: var(--evo-neutral-50) !important;
box-shadow: inset 2px 0 0 var(--ta-primary);
}
.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-item {
width: 3rem !important;
height: 3rem;
padding: 0 !important;
justify-content: center;
gap: 0 !important;
margin-left: auto;
margin-right: auto;
}
/* ================================================================
MuzikiHub admin skin
================================================================ */
html[data-evo-shell^="admin"] {
--evo-accent-h: 17;
--evo-accent-s: 88%;
--evo-accent-l: 54%;
--evo-accent: var(--muzikihub-orange);
--ta-primary: var(--muzikihub-orange);
--ta-primary-rgb: 241 96 34;
--ta-primary-soft: #fff1e9;
--ta-primary-soft-deep: rgb(241 96 34 / 0.16);
--ta-bg-body: var(--muzikihub-paper);
--ta-bg-sidebar: #ffffff;
--ta-bg-header: color-mix(in srgb, #ffffff 88%, var(--muzikihub-orange) 12%);
--ta-border-soft: #d6deea;
--ta-border-sidebar: #d6deea;
}
html[data-theme="dark"][data-evo-shell^="admin"] {
--ta-primary: var(--muzikihub-orange);
--ta-primary-rgb: 241 96 34;
--ta-primary-soft: rgb(241 96 34 / 0.16);
--ta-primary-soft-deep: rgb(241 96 34 / 0.22);
--ta-bg-body: var(--muzikihub-black);
--ta-bg-sidebar: var(--muzikihub-ink);
--ta-bg-header: color-mix(in srgb, var(--muzikihub-blue-soft) 88%, var(--muzikihub-orange) 12%);
--ta-border-soft: rgb(255 255 255 / 0.14);
--ta-border-sidebar: rgb(255 255 255 / 0.14);
}
.muzikihub-admin-mark {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.8rem;
background: transparent;
color: inherit;
box-shadow: none;
}
.muzikihub-admin-mark svg {
width: 62%;
height: 62%;
}
.muzikihub-admin-wordmark {
color: var(--muzikihub-navy);
font-weight: 800;
font-size: 1.08rem;
letter-spacing: 0;
line-height: 1;
}
html[data-theme="dark"] .muzikihub-admin-wordmark {
color: #eef4ff;
}
.sidebar-logo-icon.muzikihub-admin-mark {
border-radius: 0.85rem;
}
.evo-logo-icon.h-16.muzikihub-admin-mark,
.muzikihub-auth-mark {
width: 4rem;
height: 4rem;
}
.muzikihub-auth-mark-img {
width: 4rem;
height: 4rem;
display: inline-block;
object-fit: contain;
}
.sidebar-logo-icon-img {
width: 2.5rem;
height: 2.5rem;
display: block;
object-fit: contain;
}
html[data-evo-shell="admin-auth"] body {
background:
linear-gradient(135deg, rgb(245 247 250 / 0.96), rgb(255 255 255 / 0.9) 48%, rgb(241 96 34 / 0.12)),
url('/public/images/muzikihub-admin-auth-bg.jpg') center / cover fixed no-repeat,
radial-gradient(circle at 15% 20%, rgb(241 96 34 / 0.11), transparent 28%) !important;
}
html[data-theme="dark"][data-evo-shell="admin-auth"] body {
background:
linear-gradient(135deg, var(--muzikihub-black), var(--muzikihub-blue-soft) 54%, rgb(241 96 34 / 0.14)),
url('/public/images/muzikihub-admin-auth-bg.jpg') center / cover fixed no-repeat,
radial-gradient(circle at 15% 20%, rgb(241 96 34 / 0.16), transparent 28%) !important;
}
.muzikihub-admin-hero {
background:
linear-gradient(120deg, var(--muzikihub-blue) 0%, var(--muzikihub-blue-mid) 58%, var(--muzikihub-orange) 100%);
color: var(--muzikihub-white);
border: 1px solid rgb(255 255 255 / 0.16);
box-shadow: 0 16px 34px rgb(15 23 42 / 0.12);
padding: 1.15rem 1.3rem;
}
.muzikihub-admin-hero .dashboard-kicker,
.muzikihub-admin-hero .dashboard-title,
.muzikihub-admin-hero .dashboard-subtitle {
color: var(--muzikihub-white);
}
.muzikihub-admin-hero .dashboard-subtitle {
opacity: 0.88;
max-width: 27rem;
font-size: 0.95rem;
line-height: 1.55;
}
.muzikihub-admin-hero .dashboard-title {
font-size: 1.35rem;
}
.muzikihub-admin-hero .dashboard-icon-tile-primary {
width: 2.9rem;
height: 2.9rem;
}
.muzikihub-admin-hero > .flex {
gap: 1rem;
}
.muzikihub-admin-hero .command-identity-grid {
gap: 0.6rem;
grid-template-columns: repeat(4, minmax(8rem, 1fr));
min-width: 0;
width: min(100%, 54rem);
}
.muzikihub-admin-hero .command-identity-grid div {
background: rgb(255 255 255 / 0.12);
border-color: rgb(255 255 255 / 0.5);
min-height: 3.65rem;
padding: 0.55rem 0.7rem;
}
.muzikihub-admin-hero .command-identity-grid span {
color: rgb(255 255 255 / 0.74) !important;
font-size: 0.7rem;
}
.muzikihub-admin-hero .command-identity-grid strong {
color: var(--muzikihub-white) !important;
font-size: 0.82rem;
}
.muzikihub-dashboard-tab-shell {
position: static;
z-index: auto;
margin: 0.75rem 0 1.25rem;
overflow: visible;
}
.muzikihub-dashboard-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.3rem;
padding: 0.3rem;
border: 1px solid color-mix(in srgb, var(--muzikihub-blue) 14%, transparent);
border-radius: 0.5rem;
background: color-mix(in srgb, var(--muzikihub-white) 94%, var(--muzikihub-blue) 6%);
box-shadow: 0 8px 20px rgb(15 23 42 / 0.07);
}
.muzikihub-dashboard-tab {
min-height: 2.25rem;
border: 0;
border-radius: 0.42rem;
background: transparent;
color: var(--muzikihub-blue);
font-size: 0.86rem;
font-weight: 800;
line-height: 1.2;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.muzikihub-dashboard-tab:hover,
.muzikihub-dashboard-tab:focus-visible {
background: color-mix(in srgb, var(--muzikihub-blue) 8%, var(--muzikihub-white));
outline: none;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muzikihub-blue) 20%, transparent);
}
.muzikihub-dashboard-tab.is-active {
background: color-mix(in srgb, var(--muzikihub-orange) 16%, var(--muzikihub-white));
color: var(--muzikihub-orange);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muzikihub-orange) 22%, transparent);
}
.muzikihub-dashboard-panel[hidden] {
display: none !important;
}
html[data-theme="dark"] .muzikihub-dashboard-tabs {
border-color: color-mix(in srgb, var(--muzikihub-white) 16%, transparent);
background: color-mix(in srgb, var(--muzikihub-blue) 82%, var(--muzikihub-black) 18%);
box-shadow: 0 10px 26px rgb(0 0 0 / 0.22);
}
html[data-theme="dark"] .muzikihub-dashboard-tab {
color: var(--muzikihub-white);
}
html[data-theme="dark"] .muzikihub-dashboard-tab:hover,
html[data-theme="dark"] .muzikihub-dashboard-tab:focus-visible {
background: color-mix(in srgb, var(--muzikihub-white) 10%, var(--muzikihub-blue));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muzikihub-white) 16%, transparent);
}
html[data-theme="dark"] .muzikihub-dashboard-tab.is-active {
background: color-mix(in srgb, var(--muzikihub-orange) 22%, var(--muzikihub-blue));
color: var(--muzikihub-white);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muzikihub-orange) 30%, transparent);
}
@media (max-width: 1279px) {
.muzikihub-admin-hero .command-identity-grid {
grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
}
}
@media (min-width: 1280px) {
.muzikihub-admin-hero > .flex {
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.muzikihub-admin-hero > .flex > .flex:first-child {
max-width: 31rem;
}
}
@media (max-width: 768px) {
.muzikihub-admin-hero {
padding: 1rem;
}
.muzikihub-admin-hero .command-identity-grid {
grid-template-columns: 1fr;
}
.muzikihub-dashboard-tabs {
grid-template-columns: 1fr;
}
}
.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"])
- Styles native "Choose File" button + field in both themes
========================================================= */
input[type="file"] {
width: 100%;
color: var(--ta-text-main);
background: var(--ta-bg);
border: 1px solid var(--ta-border-soft);
border-radius: 12px;
padding: 10px 12px;
font-size: 0.9rem;
line-height: 1.25rem;
}
input[type="file"]:focus {
outline: none;
border-color: var(--ta-primary);
box-shadow: 0 0 0 4px var(--ta-primary-ring);
}
/* Modern browsers */
input[type="file"]::file-selector-button {
appearance: none;
-webkit-appearance: none;
margin-right: 12px;
padding: 8px 14px;
border: 1px solid var(--ta-border-soft);
border-radius: 9999px;
background: var(--ta-bg-surface);
color: var(--ta-text-main);
font-weight: 650;
cursor: pointer;
transition: background-color .15s ease, opacity .15s ease, transform .05s ease;
}
input[type="file"]:hover::file-selector-button {
background: var(--ta-row-hover);
}
input[type="file"]:active::file-selector-button {
transform: translateY(1px);
}
/* Safari/older Chromium fallback */
input[type="file"]::-webkit-file-upload-button {
appearance: none;
-webkit-appearance: none;
margin-right: 12px;
padding: 8px 14px;
border: 1px solid var(--ta-border-soft);
border-radius: 9999px;
background: var(--ta-bg-surface);
color: var(--ta-text-main);
font-weight: 650;
cursor: pointer;
transition: background-color .15s ease, opacity .15s ease, transform .05s ease;
}
input[type="file"]:hover::-webkit-file-upload-button {
background: var(--ta-row-hover);
}
input[type="file"]:active::-webkit-file-upload-button {
transform: translateY(1px);
}
/* =========================================================
GENERIC SELECT STYLING (native