@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --color-card: var(--color-gray-900);
    --exercise-brand: #3b82f6;
    --exercise-brand-strong: #1d4ed8;
    --exercise-brand-soft: #bfdbfe;
    --scrollbar-size: 10px;
    --scrollbar-radius: 999px;
    --scrollbar-track: rgba(148, 163, 184, 0.24);
    --scrollbar-thumb: rgba(59, 130, 246, 0.55);
    --scrollbar-thumb-hover: rgba(59, 130, 246, 0.72);
    --scrollbar-thumb-active: rgba(59, 130, 246, 0.88);
}

html:not(.dark) {
    --scrollbar-track: color-mix(in srgb, var(--color-gray-200) 72%, transparent);
    --scrollbar-thumb: color-mix(in srgb, var(--color-brand-500) 38%, var(--color-gray-500));
    --scrollbar-thumb-hover: color-mix(in srgb, var(--color-brand-600) 48%, var(--color-gray-600));
    --scrollbar-thumb-active: color-mix(in srgb, var(--color-brand-700) 62%, var(--color-gray-700));
}

html.dark {
    --scrollbar-track: color-mix(in srgb, var(--color-gray-800) 82%, transparent);
    --scrollbar-thumb: color-mix(in srgb, var(--color-brand-400) 34%, var(--color-gray-500));
    --scrollbar-thumb-hover: color-mix(in srgb, var(--color-brand-400) 50%, var(--color-gray-400));
    --scrollbar-thumb-active: color-mix(in srgb, var(--color-brand-500) 62%, var(--color-gray-300));
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--scrollbar-radius);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid transparent;
    border-radius: var(--scrollbar-radius);
    background-clip: padding-box;
    min-height: 40px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
    background-clip: padding-box;
}

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

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark .dark\:bg-card {
    background-color: var(--color-card);
}

.exercise-library-row > td {
    transition: background-color 150ms ease;
}

.exercise-library-row:hover > td,
.exercise-library-row:focus-visible > td {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

.dark .exercise-library-row:hover > td,
.dark .exercise-library-row:focus-visible > td {
    background-color: rgba(0, 0, 0, 0.22) !important;
}

/* Brand palettes drive every bg/text/border brand utility in the compiled theme. */
html[data-brand="default"] {
    --color-brand-50: #eff6ff; --color-brand-100: #dbeafe; --color-brand-200: #bfdbfe; --color-brand-300: #93c5fd; --color-brand-400: #60a5fa; --color-brand-500: #3b82f6; --color-brand-600: #2563eb; --color-brand-700: #1d4ed8; --color-brand-800: #1e40af; --color-brand-900: #1e3a8a; --color-brand-950: #172554;
    --cw-brand-500: #3b82f6; --cw-brand-600: #2563eb; --cw-brand-700: #1d4ed8;
    --exercise-brand: #3b82f6; --exercise-brand-strong: #1d4ed8; --exercise-brand-soft: #bfdbfe;
}
html[data-brand="emerald"] {
    --color-brand-50: #ecfdf5; --color-brand-100: #d1fae5; --color-brand-200: #a7f3d0; --color-brand-300: #6ee7b7; --color-brand-400: #34d399; --color-brand-500: #10b981; --color-brand-600: #059669; --color-brand-700: #047857; --color-brand-800: #065f46; --color-brand-900: #064e3b; --color-brand-950: #022c22;
    --cw-brand-500: #10b981; --cw-brand-600: #059669; --cw-brand-700: #047857;
    --exercise-brand: #10b981; --exercise-brand-strong: #047857; --exercise-brand-soft: #a7f3d0;
}
html[data-brand="orange"] {
    --color-brand-50: #fff7ed; --color-brand-100: #ffedd5; --color-brand-200: #fed7aa; --color-brand-300: #fdba74; --color-brand-400: #fb923c; --color-brand-500: #f97316; --color-brand-600: #ea580c; --color-brand-700: #c2410c; --color-brand-800: #9a3412; --color-brand-900: #7c2d12; --color-brand-950: #431407;
    --cw-brand-500: #f97316; --cw-brand-600: #ea580c; --cw-brand-700: #c2410c;
    --exercise-brand: #f97316; --exercise-brand-strong: #c2410c; --exercise-brand-soft: #fed7aa;
}
html[data-brand="purple"] {
    --color-brand-50: #f5f3ff; --color-brand-100: #ede9fe; --color-brand-200: #ddd6fe; --color-brand-300: #c4b5fd; --color-brand-400: #a78bfa; --color-brand-500: #8b5cf6; --color-brand-600: #7c3aed; --color-brand-700: #6d28d9; --color-brand-800: #5b21b6; --color-brand-900: #4c1d95; --color-brand-950: #2e1065;
    --cw-brand-500: #8b5cf6; --cw-brand-600: #7c3aed; --cw-brand-700: #6d28d9;
    --exercise-brand: #8b5cf6; --exercise-brand-strong: #6d28d9; --exercise-brand-soft: #ddd6fe;
}
html[data-brand="rose"] {
    --color-brand-50: #fff1f2; --color-brand-100: #ffe4e6; --color-brand-200: #fecdd3; --color-brand-300: #fda4af; --color-brand-400: #fb7185; --color-brand-500: #f43f5e; --color-brand-600: #e11d48; --color-brand-700: #be123c; --color-brand-800: #9f1239; --color-brand-900: #881337; --color-brand-950: #4c0519;
    --cw-brand-500: #f43f5e; --cw-brand-600: #e11d48; --cw-brand-700: #be123c;
    --exercise-brand: #f43f5e; --exercise-brand-strong: #be123c; --exercise-brand-soft: #fecdd3;
}
html[data-brand="gold"] {
    --color-brand-50: #fefce8; --color-brand-100: #fef9c3; --color-brand-200: #fef08a; --color-brand-300: #fde047; --color-brand-400: #facc15; --color-brand-500: #eab308; --color-brand-600: #ca8a04; --color-brand-700: #a16207; --color-brand-800: #854d0e; --color-brand-900: #713f12; --color-brand-950: #422006;
    --cw-brand-500: #eab308; --cw-brand-600: #ca8a04; --cw-brand-700: #a16207;
    --exercise-brand: #eab308; --exercise-brand-strong: #a16207; --exercise-brand-soft: #fef08a;
}
html[data-brand="charcoal"] {
    --color-brand-50: #f9fafb; --color-brand-100: #f3f4f6; --color-brand-200: #e5e7eb; --color-brand-300: #d1d5db; --color-brand-400: #6b7280; --color-brand-500: #374151; --color-brand-600: #1f2937; --color-brand-700: #111827; --color-brand-800: #0f172a; --color-brand-900: #030712; --color-brand-950: #020617;
    --cw-brand-500: #374151; --cw-brand-600: #1f2937; --cw-brand-700: #111827;
    --exercise-brand: #374151; --exercise-brand-strong: #111827; --exercise-brand-soft: #d1d5db;
}
html[data-brand="navy"] {
    --color-brand-50: #eff6ff; --color-brand-100: #dbeafe; --color-brand-200: #bfdbfe; --color-brand-300: #93c5fd; --color-brand-400: #60a5fa; --color-brand-500: #1e3a8a; --color-brand-600: #1a3278; --color-brand-700: #162a66; --color-brand-800: #122254; --color-brand-900: #0e1a42; --color-brand-950: #071020;
    --cw-brand-500: #1e3a8a; --cw-brand-600: #1a3278; --cw-brand-700: #162a66;
    --exercise-brand: #1e3a8a; --exercise-brand-strong: #172554; --exercise-brand-soft: #bfdbfe;
}
html[data-brand="maroon"] {
    --color-brand-50: #fff1f2; --color-brand-100: #ffe4e6; --color-brand-200: #fecdd3; --color-brand-300: #fda4af; --color-brand-400: #fb7185; --color-brand-500: #881337; --color-brand-600: #76102f; --color-brand-700: #640d28; --color-brand-800: #520a21; --color-brand-900: #40071a; --color-brand-950: #24030e;
    --cw-brand-500: #881337; --cw-brand-600: #76102f; --cw-brand-700: #640d28;
    --exercise-brand: #881337; --exercise-brand-strong: #4c0519; --exercise-brand-soft: #fecdd3;
}
html[data-brand="teal"] {
    --color-brand-50: #f0fdfa; --color-brand-100: #ccfbf1; --color-brand-200: #99f6e4; --color-brand-300: #5eead4; --color-brand-400: #2dd4bf; --color-brand-500: #14b8a6; --color-brand-600: #0d9488; --color-brand-700: #0f766e; --color-brand-800: #115e59; --color-brand-900: #134e4a; --color-brand-950: #042f2e;
    --cw-brand-500: #14b8a6; --cw-brand-600: #0d9488; --cw-brand-700: #0f766e;
    --exercise-brand: #14b8a6; --exercise-brand-strong: #0f766e; --exercise-brand-soft: #99f6e4;
}

/* Background palettes stay near the original dark baseline while carrying a restrained hue. */
html[data-gray="default"] { --color-gray-50: #f0f2f5; --color-gray-100: #e1e5eb; --color-gray-200: #c8ced8; --color-gray-300: #a5afbd; --color-gray-400: #7c8798; --color-gray-500: #5c6878; --color-gray-600: #3c4654; --color-gray-700: #203650; --color-gray-800: #142439; --color-gray-900: #0b1420; --color-gray-950: #050a12; }
html[data-gray="emerald"] { --color-gray-50: #f0f6f1; --color-gray-100: #dce7df; --color-gray-200: #bfd0c4; --color-gray-300: #96b39e; --color-gray-400: #699174; --color-gray-500: #3d6b4c; --color-gray-600: #254f34; --color-gray-700: #173b22; --color-gray-800: #102a18; --color-gray-900: #091b0f; --color-gray-950: #041108; }
html[data-gray="orange"] { --color-gray-50: #f8f4ef; --color-gray-100: #ebe2d8; --color-gray-200: #d8c8b6; --color-gray-300: #bda38a; --color-gray-400: #9a7957; --color-gray-500: #705436; --color-gray-600: #523a21; --color-gray-700: #40250e; --color-gray-800: #2e1a08; --color-gray-900: #1e1005; --color-gray-950: #120802; }
html[data-gray="purple"] { --color-gray-50: #f6f3f8; --color-gray-100: #e8e1ec; --color-gray-200: #d3c8d9; --color-gray-300: #b6a5c1; --color-gray-400: #927aa2; --color-gray-500: #684f79; --color-gray-600: #49345b; --color-gray-700: #32213f; --color-gray-800: #21172b; --color-gray-900: #160f1d; --color-gray-950: #0d0812; }
html[data-gray="rose"] { --color-gray-50: #f8f3f4; --color-gray-100: #ece0e3; --color-gray-200: #d9c4ca; --color-gray-300: #bea0a8; --color-gray-400: #9e7783; --color-gray-500: #744a55; --color-gray-600: #55303b; --color-gray-700: #482633; --color-gray-800: #321c27; --color-gray-900: #21121b; --color-gray-950: #12060b; }
html[data-gray="gold"] { --color-gray-50: #f7f4ed; --color-gray-100: #eae3d3; --color-gray-200: #d6c9ae; --color-gray-300: #bba784; --color-gray-400: #98825a; --color-gray-500: #6f5e39; --color-gray-600: #514322; --color-gray-700: #3d3b16; --color-gray-800: #27290d; --color-gray-900: #181a08; --color-gray-950: #100e03; }
html[data-gray="charcoal"] { --color-gray-50: #efeff1; --color-gray-100: #dfdfe2; --color-gray-200: #c5c5cc; --color-gray-300: #a2a3ad; --color-gray-400: #7a7c88; --color-gray-500: #5b5d6a; --color-gray-600: #3a3d47; --color-gray-700: #252831; --color-gray-800: #151820; --color-gray-900: #0b0e14; --color-gray-950: #05070b; }
html[data-gray="navy"] { --color-gray-50: #f0f4f8; --color-gray-100: #dbe2ea; --color-gray-200: #bdc8d6; --color-gray-300: #97a8bd; --color-gray-400: #6c829f; --color-gray-500: #3e5677; --color-gray-600: #263b5a; --color-gray-700: #173254; --color-gray-800: #0d2040; --color-gray-900: #06132b; --color-gray-950: #030912; }
html[data-gray="maroon"] { --color-gray-50: #f9f2f4; --color-gray-100: #eddee2; --color-gray-200: #dbc1c8; --color-gray-300: #c09ca6; --color-gray-400: #9c707d; --color-gray-500: #754653; --color-gray-600: #572a38; --color-gray-700: #481126; --color-gray-800: #320c20; --color-gray-900: #200713; --color-gray-950: #110308; }
html[data-gray="teal"] { --color-gray-50: #eff6f4; --color-gray-100: #dbe7e4; --color-gray-200: #bdcfcb; --color-gray-300: #94b3ad; --color-gray-400: #669189; --color-gray-500: #3b6a63; --color-gray-600: #234e49; --color-gray-700: #123f3f; --color-gray-800: #0b2b2b; --color-gray-900: #061b1b; --color-gray-950: #021111; }

/* Light mode keeps a clear canvas/panel/card hierarchy while carrying the chosen hue. */
html:not(.dark)[data-gray] body.bg-gray-50 {
    background-color: color-mix(in srgb, #ffffff 45%, var(--color-gray-100));
}

html:not(.dark)[data-gray] :is(header, aside, main, section, article, div, form).bg-white {
    background-color: color-mix(in srgb, #ffffff 78%, var(--color-gray-100));
}

html:not(.dark)[data-gray] .bg-gray-50 {
    background-color: color-mix(in srgb, #ffffff 65%, var(--color-gray-100));
}

html:not(.dark)[data-gray] .bg-gray-50\/70 {
    background-color: color-mix(in srgb, #ffffff 55%, var(--color-gray-100));
}

html:not(.dark)[data-gray] .bg-gray-50\/60 {
    background-color: color-mix(in srgb, #ffffff 50%, var(--color-gray-100));
}

/* Default slate-blue is the implicit baseline, no overrides needed */

/* Forest Green */
html[data-theme="forest-green"] {
    --cw-font-sans: "Inter", sans-serif;
    --font-sans: "Inter", sans-serif;
    --color-brand-50: #ecfdf5;
    --color-brand-100: #d1fae5;
    --color-brand-200: #a7f3d0;
    --color-brand-300: #6ee7b7;
    --color-brand-400: #34d399;
    --color-brand-500: #10b981;
    --color-brand-600: #059669;
    --color-brand-700: #047857;
    --color-brand-800: #065f46;
    --color-brand-900: #064e3b;
    --color-brand-950: #022c22;
    --cw-brand-500: #10b981;
    --cw-brand-600: #059669;
    --cw-brand-700: #047857;
    --cw-accent-500: #f59e0b;
    --color-orange-500: #f59e0b;
    
    /* Gray Scale mapping to Forest Green shades */
    --color-gray-50: #f0fdf4;
    --color-gray-100: #dcfce7;
    --color-gray-200: #bbf7d0;
    --color-gray-300: #86efac;
    --color-gray-400: #4ade80;
    --color-gray-500: #22c55e;
    --color-gray-600: #16a34a;
    --color-gray-700: #15803d;
    --color-gray-800: #166534;
    --color-gray-900: #14532d;
    --color-gray-950: #052e16;
}

/* Amber Slate */
html[data-theme="amber-slate"] {
    --cw-font-sans: "Outfit", sans-serif;
    --font-sans: "Outfit", sans-serif;
    --color-brand-50: #fffbeb;
    --color-brand-100: #fef3c7;
    --color-brand-200: #fde68a;
    --color-brand-300: #fcd34d;
    --color-brand-400: #fbbf24;
    --color-brand-500: #f59e0b;
    --color-brand-600: #d97706;
    --color-brand-700: #b45309;
    --color-brand-800: #92400e;
    --color-brand-900: #78350f;
    --color-brand-950: #451a03;
    --cw-brand-500: #f59e0b;
    --cw-brand-600: #d97706;
    --cw-brand-700: #b45309;
    --cw-accent-500: #10b981;
    --color-orange-500: #10b981;
    
    /* Gray Scale mapping to Slate shades */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    --color-gray-950: #020617;
}

/* Light Basic */
html[data-theme="light-basic"] {
    --cw-font-sans: "Inter", sans-serif;
    --font-sans: "Inter", sans-serif;
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-300: #93c5fd;
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;
    --color-brand-800: #1e40af;
    --color-brand-900: #1e3a8a;
    --color-brand-950: #172554;
    --cw-brand-500: #3b82f6;
    --cw-brand-600: #2563eb;
    --cw-brand-700: #1d4ed8;
    --cw-accent-500: #f43f5e;
    --color-orange-500: #f43f5e;
    
    /* Gray Scale mapping to Zinc shades */
    --color-gray-50: #fafafa;
    --color-gray-100: #f4f4f5;
    --color-gray-200: #e4e4e7;
    --color-gray-300: #d4d4d8;
    --color-gray-400: #a1a1aa;
    --color-gray-500: #71717a;
    --color-gray-600: #52525b;
    --color-gray-700: #3f3f46;
    --color-gray-800: #27272a;
    --color-gray-900: #18181b;
    --color-gray-950: #09090b;
}

/* Map surface tokens dynamically based on the preset */
body.dark {
    /* No overrides needed, tailwind transparency works perfectly */
}

body {
    font-family: var(--cw-font-sans, var(--font-sans, "Outfit", sans-serif));
}

/* Unified, theme-aware button system for admin surfaces. */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: var(--shadow-theme-xs, 0 1px 2px 0 rgb(0 0 0 / 0.06));
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
    text-decoration: none;
}

.app-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-400) 30%, transparent);
}

.app-btn:active {
    transform: translateY(1px);
}

.app-btn-primary {
    color: #fff;
    border-color: color-mix(in srgb, var(--color-brand-600) 82%, transparent);
    background: var(--color-brand-500);
}

.app-btn-primary:hover {
    background: var(--color-brand-600);
    border-color: color-mix(in srgb, var(--color-brand-700) 78%, transparent);
}

.app-btn-secondary {
    color: color-mix(in srgb, var(--color-brand-700) 34%, var(--color-gray-700));
    border-color: color-mix(in srgb, var(--color-brand-300) 18%, var(--color-gray-300));
    background: color-mix(in srgb, #fff 96%, var(--color-brand-50));
}

.app-btn-secondary:hover {
    color: color-mix(in srgb, var(--color-brand-800) 46%, var(--color-gray-800));
    border-color: color-mix(in srgb, var(--color-brand-400) 24%, var(--color-gray-300));
    background: color-mix(in srgb, #fff 88%, var(--color-brand-100));
}

.app-btn-ghost {
    color: color-mix(in srgb, var(--color-brand-700) 20%, var(--color-gray-600));
    border-color: color-mix(in srgb, var(--color-brand-200) 24%, var(--color-gray-200));
    background: color-mix(in srgb, #fff 88%, var(--color-brand-50));
}

.app-btn-ghost:hover {
    color: color-mix(in srgb, var(--color-brand-800) 34%, var(--color-gray-700));
    border-color: color-mix(in srgb, var(--color-brand-300) 36%, var(--color-gray-300));
    background: color-mix(in srgb, #fff 76%, var(--color-brand-100));
}

.app-btn-danger {
    color: rgb(220 38 38 / 0.95);
    border-color: rgb(254 202 202 / 1);
    background: rgb(254 242 242 / 1);
}

.app-btn-danger:hover {
    color: rgb(185 28 28 / 1);
    border-color: rgb(252 165 165 / 1);
    background: rgb(254 226 226 / 1);
}

.app-btn-success {
    color: rgb(22 101 52 / 0.96);
    border-color: rgb(187 247 208 / 1);
    background: rgb(240 253 244 / 1);
}

.app-btn-success:hover {
    color: rgb(21 128 61 / 1);
    border-color: rgb(134 239 172 / 1);
    background: rgb(220 252 231 / 1);
}

.app-btn-warning {
    color: rgb(180 83 9 / 0.98);
    border-color: rgb(254 215 170 / 1);
    background: rgb(255 247 237 / 1);
}

.app-btn-warning:hover {
    color: rgb(146 64 14 / 1);
    border-color: rgb(253 186 116 / 1);
    background: rgb(255 237 213 / 1);
}

.app-btn-xs {
    min-height: 1.7rem;
    padding: 0.33rem 0.58rem;
    font-size: 0.6875rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

.app-btn-sm {
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
}

.app-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 1px solid var(--color-gray-300);
    background: #fff;
    color: var(--color-gray-500);
    box-shadow: var(--shadow-theme-xs, 0 1px 2px 0 rgb(0 0 0 / 0.06));
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.app-icon-btn:hover {
    color: var(--color-gray-700);
    border-color: var(--color-gray-300);
    background: var(--color-gray-50);
}

html.dark .app-btn-secondary {
    color: color-mix(in srgb, var(--color-brand-200) 26%, var(--color-gray-300));
    border-color: color-mix(in srgb, var(--color-brand-500) 18%, var(--color-gray-700));
    background: color-mix(in srgb, var(--color-brand-500) 6%, var(--color-gray-800));
}

html.dark .app-btn-secondary:hover {
    color: color-mix(in srgb, #fff 72%, var(--color-brand-200));
    border-color: color-mix(in srgb, var(--color-brand-400) 28%, var(--color-gray-600));
    background: color-mix(in srgb, var(--color-brand-500) 12%, var(--color-gray-800));
}

html.dark .app-btn-ghost {
    color: color-mix(in srgb, var(--color-brand-200) 18%, var(--color-gray-200));
    border-color: color-mix(in srgb, var(--color-brand-500) 14%, var(--color-gray-700));
    background: color-mix(in srgb, var(--color-brand-500) 5%, var(--color-gray-900));
}

html.dark .app-btn-ghost:hover {
    color: color-mix(in srgb, #fff 78%, var(--color-brand-200));
    border-color: color-mix(in srgb, var(--color-brand-400) 20%, var(--color-gray-600));
    background: color-mix(in srgb, var(--color-brand-500) 9%, var(--color-gray-800));
}

html.dark .app-btn-danger {
    color: rgb(239 68 68 / 1);
    border-color: rgb(239 68 68 / 0.3);
    background: rgb(239 68 68 / 0.15);
}

html.dark .app-btn-danger:hover {
    color: rgb(248 113 113 / 1);
    border-color: rgb(239 68 68 / 0.45);
    background: rgb(239 68 68 / 0.2);
}

html.dark .app-btn-success {
    color: rgb(74 222 128 / 1);
    border-color: rgb(34 197 94 / 0.3);
    background: rgb(34 197 94 / 0.14);
}

html.dark .app-btn-success:hover {
    color: rgb(134 239 172 / 1);
    border-color: rgb(34 197 94 / 0.45);
    background: rgb(34 197 94 / 0.22);
}

html.dark .app-btn-warning {
    color: rgb(251 191 36 / 1);
    border-color: rgb(245 158 11 / 0.35);
    background: rgb(245 158 11 / 0.14);
}

html.dark .app-btn-warning:hover {
    color: rgb(253 224 71 / 1);
    border-color: rgb(245 158 11 / 0.5);
    background: rgb(245 158 11 / 0.22);
}

html.dark .app-icon-btn {
    color: rgb(148 163 184 / 0.95);
    border-color: rgb(31 41 55 / 1);
    background: rgb(255 255 255 / 0.03);
}

html.dark .app-icon-btn:hover {
    color: #fff;
    border-color: rgb(71 85 105 / 0.95);
    background: rgb(255 255 255 / 0.08);
}

/* Unified, theme-aware badge system for app-wide status and chips. */
.app-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 600;
    white-space: nowrap;
}

.app-badge-sm {
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
}

.app-badge-xs {
    padding: 0.125rem 0.4375rem;
    font-size: 0.625rem;
}

.app-badge-primary {
    background: color-mix(in srgb, var(--color-brand-200) 46%, var(--color-brand-600));
    color: var(--color-brand-700);
    border-color: color-mix(in srgb, var(--color-brand-300) 62%, var(--color-brand-600));
}

.app-badge-success {
    background: rgb(240 253 244 / 1);
    color: rgb(22 101 52 / 1);
    border-color: rgb(187 247 208 / 1);
}

.app-badge-warning {
    background: rgb(255 247 237 / 1);
    color: rgb(180 83 9 / 1);
    border-color: rgb(254 215 170 / 1);
}

.app-badge-danger {
    background: rgb(254 242 242 / 1);
    color: rgb(185 28 28 / 1);
    border-color: rgb(254 202 202 / 1);
}

.app-badge-muted {
    background: color-mix(in srgb, #fff 52%, var(--color-gray-100));
    color: color-mix(in srgb, var(--color-brand-700) 4%, var(--color-gray-700));
    border-color: color-mix(in srgb, var(--color-brand-200) 8%, var(--color-gray-300));
}

.app-badge-solid {
    color: #fff;
}

.app-badge-solid-primary {
    background: var(--color-brand-500);
}

.app-badge-solid-success {
    background: rgb(34 197 94 / 1);
}

.app-badge-solid-warning {
    background: rgb(245 158 11 / 1);
}

.app-badge-solid-danger {
    background: rgb(239 68 68 / 1);
}

/* Weight-room library chips: Coach uses solid progression, Global uses soft progression. */
.app-badge-library-coach {
    background: var(--color-brand-600);
    color: var(--color-brand-50);
    border-color: color-mix(in srgb, var(--color-brand-300) 54%, var(--color-brand-700));
}

.app-badge-library-global {
    background: color-mix(in srgb, var(--color-brand-50) 90%, transparent);
    color: var(--color-brand-600);
    border-color: color-mix(in srgb, var(--color-brand-200) 46%, transparent);
}

html.dark .app-badge-primary {
    background: color-mix(in srgb, var(--color-brand-500) 52%, var(--color-gray-900));
    color: color-mix(in srgb, var(--color-brand-100) 88%, var(--color-brand-50));
    border-color: color-mix(in srgb, var(--color-brand-300) 70%, var(--color-brand-700));
}

html.dark .app-badge-success {
    background: rgb(34 197 94 / 0.15);
    color: rgb(74 222 128 / 1);
    border-color: rgb(34 197 94 / 0.35);
}

html.dark .app-badge-warning {
    background: rgb(245 158 11 / 0.15);
    color: rgb(251 191 36 / 1);
    border-color: rgb(245 158 11 / 0.4);
}

html.dark .app-badge-danger {
    background: rgb(239 68 68 / 0.15);
    color: rgb(248 113 113 / 1);
    border-color: rgb(239 68 68 / 0.38);
}

html.dark .app-badge-muted {
    background: color-mix(in srgb, var(--color-brand-400) 8%, var(--color-gray-700));
    color: color-mix(in srgb, #fff 84%, var(--color-gray-200));
    border-color: color-mix(in srgb, var(--color-brand-300) 10%, var(--color-gray-600));
}

html.dark .app-badge-library-coach {
    background: color-mix(in srgb, var(--color-brand-500) 62%, var(--color-gray-900));
    color: color-mix(in srgb, var(--color-brand-100) 92%, #ffffff);
    border-color: color-mix(in srgb, var(--color-brand-300) 70%, var(--color-brand-700));
}

html.dark .app-badge-library-global {
    background: color-mix(in srgb, var(--color-brand-500) 15%, transparent);
    color: color-mix(in srgb, var(--color-brand-200) 84%, #ffffff);
    border-color: color-mix(in srgb, var(--color-brand-400) 38%, transparent);
}

/*
 * Sidebar menu icon normalization:
 * - Uses explicit icon path fills defined in the markup instead of currentColor/gradients.
 * - Light and dark mode icons are rendered in place; only the appropriate set is visible.
 */
.menu-nav-icon {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* Default (light mode) uses the .icon-light path. */
.menu-nav-icon .icon-light {
    display: block !important;
}

.menu-nav-icon .icon-dark {
    display: none !important;
}

.dark .menu-nav-icon .icon-light {
    display: none !important;
}

.dark .menu-nav-icon .icon-dark {
    display: block !important;
}

/* Suppress any theme CSS filter that could hide the icon after paint. */
.sidebar .menu-item > svg.menu-nav-icon,
.sidebar .menu-item > svg.menu-nav-icon path {
    filter: none !important;
}

/* Counter the theme's gradient-url override so fill="currentColor" resolves correctly. */
.sidebar .menu-item > svg.menu-nav-icon [fill='currentColor'] {
    fill: currentColor !important;
}