/* ==========================================================================
   KARBONBOX DIET & FIT - APP THEME CSS
   Organized for quick white-label customization
   ========================================================================== */

:root {
    /* --- BASE PALETTE (Core Colors) --- */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    --success-color: #10b981;
    --success-gradient: linear-gradient(90deg, #10b981 0%, #059669 100%);
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-border: rgba(245, 158, 11, 0.2);

    /* --- BRANDING (Brand Colors) --- */
    --primary: #2563eb;
    --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --primary-glow: rgba(37, 99, 235, 0.35);

    /* --- TYPOGRAPHY --- */
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* --- BORDERS (Design System) --- */
    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 20px;
    --border-radius-pill: 9999px;

    /* --- SHARED STRUCTURAL VARIABLES --- */
    --app-bottom-padding: 90px;
    --icon-size-md: 1.1rem;
    --icon-size-lg: 1.25rem;
    --input-height: 44px;
    --modal-backdrop: rgba(12, 13, 16, 0.68);
    --progress-height: 8px;
}

/* ==========================================================================
   LIGHT THEME (Neutral Foundation)
   Surface and text colors stay neutral across every brand palette.
   Only interactive accent tokens change with data-kb-color.
   ========================================================================== */
:root, [data-theme="light"] {
    --bg-color: #f8f9fa;
    --fg-color: #ffffff;

    /* Cards and Containers */
    --card-bg: #ffffff;
    --card-border: #e2e5e9;
    --card-shadow: 0 4px 20px -2px rgba(20, 22, 26, 0.05), 0 2px 6px -1px rgba(20, 22, 26, 0.03);

    /* Neutral Text */
    --text-primary: #17191d;
    --text-secondary: #5e626b;
    --text-muted: #6a6f77;
    --text-warning: #b45309;

    /* Supporting Surfaces (Inputs, Modals, Headers) */
    --surface-subtle: #f1f3f5;
    --surface-border: #e2e5e9;

    /* Brand Chips (Overridden by the Selected Palette) */
    --chip-bg: rgba(37, 99, 235, 0.08);
    --chip-text: #1d4ed8;
    --chip-border: rgba(37, 99, 235, 0.18);

    /* Muted Chips Remain Neutral */
    --chip-muted-bg: rgba(255, 255, 255, 0.85);
    --chip-muted-text: var(--text-secondary);

    /* Next Meal uses neutral surfaces and the selected brand accent. */
    --diet-next-meal-bg: var(--surface-subtle);
    --diet-next-meal-border: var(--primary);
    --diet-next-meal-text: var(--text-primary);

    /* Navigation */
    --nav-bg: rgba(255, 255, 255, 0.92);
    --nav-border: rgba(226, 229, 233, 0.90);
    --nav-toggler-icon: rgba(23, 25, 29, 0.70);
    --nav-toggler-border: rgba(23, 25, 29, 0.12);

    /* Footer and Disabled Fields */
    --footer-border: #e2e5e9;
    --disabled-control-bg: var(--surface-subtle);
    --dark-border-color: var(--surface-border);
}

/* ==========================================================================
   DARK THEME (Neutral Charcoal Foundation)
   Avoid tinting the application shell with the selected brand palette.
   ========================================================================== */
[data-theme="dark"] {
    --bg-color: #101216;
    --fg-color: #171a20;

    /* Cards and Containers */
    --card-bg: #1b1e24;
    --card-border: #343840;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03);

    /* Neutral Text */
    --text-primary: #f7f8fa;
    --text-secondary: #b6bcc7;
    --text-muted: #a2a9b4;
    --text-warning: #fbbf24;

    /* Supporting Surfaces (Inputs, Modals, Headers) */
    --surface-subtle: #252931;
    --surface-border: #343840;

    /* Brand Chips (Overridden by the Selected Palette) */
    --chip-bg: rgba(59, 130, 246, 0.15);
    --chip-text: #93c5fd;
    --chip-border: rgba(96, 165, 250, 0.25);

    /* Muted Chips Remain Neutral */
    --chip-muted-bg: rgba(255, 255, 255, 0.07);
    --chip-muted-text: var(--text-secondary);

    /* Next Meal uses neutral surfaces and the selected brand accent. */
    --diet-next-meal-bg: var(--surface-subtle);
    --diet-next-meal-border: var(--primary);
    --diet-next-meal-text: var(--text-primary);

    /* Navigation */
    --nav-bg: rgba(23, 26, 32, 0.93);
    --nav-border: rgba(255, 255, 255, 0.10);
    --nav-toggler-icon: rgba(255, 255, 255, 0.65);
    --nav-toggler-border: rgba(255, 255, 255, 0.12);

    /* Footer and Disabled Fields */
    --footer-border: #343840;
    --disabled-control-bg: var(--surface-subtle);
    --dark-border-color: var(--surface-border);
}

/* ==========================================================================
   GENERAL PAGE STYLES (Base)
   ========================================================================== */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-family-sans-serif) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Standard utility classes */
.text-primary { color: var(--primary) !important; }
.text-dark { color: var(--text-primary) !important; }

/* Main container for width constraints and mobile alignment */
.page_content {
    margin: 0 auto;
    padding: 0 4px;
}
@media (max-width: 991px) {
    .page_content {
        margin: 0;
    }
}

/* Footer spacing and mobile safe-area bottom padding */
.web-footer { border-color: var(--footer-border); }

@media (max-width: 991px) {
    .web-footer {
        padding-bottom: var(--app-bottom-padding) !important;
    }
    
}

/* ==========================================================================
   TYPOGRAPHY & GENERAL HEADINGS
   ========================================================================== */
h1, .h1, p.h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
    color: var(--text-primary) !important;
}

p.h1 {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.75rem !important;
}

/* Main workout header margins */
.page_content > .d-flex.justify-content-between.align-items-center {
    margin-top: 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

/* Section titles (Prescriptions, Exercises, Warm-up) */
h4, .h4, h5.font-weight-bold.text-secondary {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

h4, .h4 {
    color: var(--primary) !important;
    margin-top: 2rem !important;
    margin-bottom: 0.85rem !important;
}

h5.font-weight-bold.text-secondary {
    color: var(--text-secondary) !important;
    margin-bottom: 0.35rem !important;
}

/* Vertical accent bar beside section titles */
h4::before, h5.font-weight-bold.text-secondary::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    border-radius: 4px;
    background: var(--primary-gradient);
}

/* ==========================================================================
   GENERAL COMPONENTS (Buttons, Alerts, Progress)
   ========================================================================== */

.workout__layout .es-button{
    height: auto !important;
}

/* Back button (iOS-style pill) */
a.btn.btn-link, .btn-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--surface-border) !important;
    padding: 6px 14px !important;
    border-radius: var(--border-radius-pill) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

a.btn.btn-link:hover, a.btn.btn-link:active {
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
    transform: scale(0.97);
}

/* Primary action buttons (Large and Gradient) */
.btn-primary.finish-workout, 
.btn-primary.start-workout, 
.btn-primary.btn-block {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: var(--primary-contrast, #ffffff) !important;
    border-radius: var(--border-radius-md) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 24px -4px var(--primary-glow) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Large size (Start and Finish Workout) */
.btn-primary.finish-workout, 
.btn-primary.start-workout {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.01em;
    padding: 14px 20px !important;
}

/* Standard size (View Workout, etc.) */
.btn-primary.btn-block {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 12px 16px !important;
    box-shadow: 0 4px 14px -2px var(--primary-glow) !important;
}

/* Pressed interaction feedback (All) */
.btn-primary.finish-workout:active, 
.btn-primary.start-workout:active, 
.btn-primary.btn-block:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 12px -2px var(--primary-glow) !important;
}

/* Global instruction alerts */
.alert.small:not(:has(#workout-timer)) {
    background: var(--surface-subtle) !important;
    border: 1px dashed var(--card-border) !important;
    border-radius: var(--border-radius-md) !important;
    color: var(--text-secondary) !important;
    padding: 10px 14px !important;
    margin-bottom: 1.5rem !important;
}

/* General warning alerts */
.alert-warning {
    background-color: var(--warning-bg) !important;
    border: 1px solid var(--warning-border) !important;
    color: var(--text-warning) !important;
    border-radius: var(--border-radius-md) !important;
}

/* App progress bar */
.progress {
    background-color: var(--surface-subtle) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--border-radius-pill) !important;
    height: var(--progress-height) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
}

.progress-bar.bg-success {
    background: var(--success-gradient) !important;
    border-radius: var(--border-radius-pill) !important;
}

/* ==========================================================================
   SCREEN: MY WORKOUT (Timer & Exercises)
   ========================================================================== */

/* Workout timer display */
.alert.bg-light.border.text-muted.text-center,
.alert:has(#workout-timer) {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-md) !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 12px 16px !important;
    margin-bottom: 1.25rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#workout-timer {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

.alert:has(#workout-timer) i {
    color: var(--primary) !important;
    font-size: var(--icon-size-md);
}

/* Exercise cards (Glassmorphism) */
.card.apple-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Exercise header */
.card.apple-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--surface-border) !important;
    padding: 14px 18px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card.apple-card .card-header label {
    margin: 0 !important;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Interactive completion checkbox */
.performed-input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--surface-border);
    background-color: var(--surface-subtle);
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.performed-input[type="checkbox"]:checked {
    background: var(--primary-gradient);
    border-color: var(--primary);
    box-shadow: 0 3px 10px var(--primary-glow);
}

.performed-input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid #ffffff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* Exercise body */
.card.apple-card .card-body {
    padding: 16px 18px !important;
}

.card.apple-card .card-body p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.2rem;
}

.card.apple-card .card-body p b {
    color: var(--text-primary);
    font-weight: 600;
}

.card.apple-card .card-body p span {
    color: var(--primary);
    font-weight: 700;
}

/* Exercise action buttons/chips (Edit, Video) */
.card.apple-card .card-body .d-flex.flex-wrap {
    gap: 8px !important;
    margin-top: 14px !important;
}

.card.apple-card .card-body a.text-primary {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px !important;
    border-radius: var(--border-radius-pill) !important;
    background: var(--chip-bg) !important;
    color: var(--chip-text) !important;
    border: 1px solid var(--chip-border) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out;
}

.card.apple-card .card-body a.text-primary:hover,
.card.apple-card .card-body a.text-primary:active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px);
}

/* Exercise tips/instructions footer */
.card.apple-card .card-footer {
    background: var(--surface-subtle) !important;
    border-top: 1px solid var(--surface-border) !important;
    padding: 10px 18px !important;
}

.card.apple-card .card-footer p.small {
    font-size: 0.78rem !important;
    line-height: 1.45;
    color: var(--text-muted) !important;
}

.card.apple-card .card-footer i {
    color: var(--primary);
}

/* ==========================================================================
   SCREEN: DASHBOARDS (Prescriptions, Groups & Diets)
   ========================================================================== */

/* Dashboard base cards */
.card.shadow-sm.h-100, .card.h-100 {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.card.shadow-sm.h-100:active, .card.h-100:active {
    transform: scale(0.98);
}

/* Dashboard card headers */
.card.shadow-sm .card-header, .card-header.bg-white.text-info {
    background: transparent !important;
    border-bottom: 1px solid var(--surface-border) !important;
    padding: 16px 18px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card.shadow-sm .card-header i, .card-header.bg-white.text-info i {
    color: var(--primary) !important;
}

/* Statistics box (Groups screen) */
.stats-box {
    background-color: var(--surface-subtle) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--border-radius-md) !important;
    padding: 12px 14px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Footer & secondary buttons (View Workout) */
.card.shadow-sm .card-footer {
    background: var(--surface-subtle) !important;
    border-top: 1px solid var(--surface-border) !important;
    padding: 10px 16px !important;
}

.card.shadow-sm .card-footer .btn-link.btn-block {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    border: none !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: color 0.15s ease, transform 0.15s ease;
}

.card.shadow-sm .card-footer .btn-link.btn-block:hover,
.card.shadow-sm .card-footer .btn-link.btn-block:active {
    color: var(--primary) !important;
    transform: translateX(2px);
}

/* Wide pill-style View Workout button on Groups screen */
.card-body > a.btn.btn-link {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
    margin-top: 0.5rem;
    padding: 14px !important;
    background: var(--chip-bg) !important;
    color: var(--primary) !important;
    border: 1px solid var(--chip-border) !important;
    border-radius: var(--border-radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
}

.card-body > a.btn.btn-link:active {
    background: var(--primary) !important;
    color: #ffffff !important;
    transform: scale(0.97);
}

/* Empty States (Telas sem dados) */
.p-5.bg-light {
    background-color: var(--surface-subtle) !important;
    border: 1px dashed var(--card-border) !important;
    border-radius: var(--border-radius-lg) !important;
}

.p-5.bg-light i.text-muted {
    color: var(--primary) !important;
    opacity: 0.5;
}

/* Next Meal card: neutral surface with the selected brand accent. */
.diet-next-meal {
    background-color: var(--diet-next-meal-bg);
    border: 1px solid var(--surface-border);
    border-left: 4px solid var(--diet-next-meal-border);
    border-radius: var(--border-radius-md);
    color: var(--diet-next-meal-text);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.diet-next-meal__label {
    color: var(--primary);
    font-weight: 700;
}

.diet-next-meal__title {
    color: var(--text-primary);
    font-weight: 700;
}

.diet-next-meal .badge.diet-next-meal__time {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background-color: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: var(--border-radius-pill);
    color: var(--chip-text);
    font-size: 0.72rem;
    font-weight: 700;
}

.diet-next-meal .badge.diet-next-meal__food {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background-color: var(--card-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius-pill);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
}

/* Compatibility for older templates with inline green styles. */
div[style*="background-color: #f0fdf4"],
div[style*="border-left: 4px solid #16a34a"] {
    background-color: var(--diet-next-meal-bg) !important;
    border-left-color: var(--diet-next-meal-border) !important;
    border-radius: var(--border-radius-md) !important;
}

div[style*="background-color: #f0fdf4"] .text-success,
div[style*="border-left: 4px solid #16a34a"] .text-success {
    color: var(--primary) !important;
}

div[style*="background-color: #f0fdf4"] .badge.badge-success,
div[style*="border-left: 4px solid #16a34a"] .badge.badge-success {
    background-color: var(--chip-bg) !important;
    border: 1px solid var(--chip-border) !important;
    color: var(--chip-text) !important;
}

div[style*="background-color: #f0fdf4"] .badge[style*="background-color: rgb(255 255 255 / 80%)"],
div[style*="border-left: 4px solid #16a34a"] .badge[style*="background-color: rgb(255 255 255 / 80%)"] {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-secondary) !important;
}

/* Semantic status badges elsewhere remain independent from the brand. */
.badge.badge-success {
    background: var(--success-color) !important;
    color: #ffffff !important;
    border-radius: var(--border-radius-pill) !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
}

.badge[style*="background-color: rgb(255 255 255 / 80%)"] {
    background-color: var(--chip-muted-bg) !important;
    color: var(--chip-muted-text) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--border-radius-pill) !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
}

/* ==========================================================================
   NAVIGATION (Top/Bottom Navbars)
   ========================================================================== */

/* Top navbar (Default header) */
.navbar-light {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--nav-border) !important;
}

.navbar-brand img {
    max-height: 30px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Mobile menu button (Hamburger) */
.navbar-light .navbar-toggler {
    color: var(--nav-toggler-icon);
    border-color: var(--nav-toggler-border);
    border-radius: var(--border-radius-sm);
    padding: 6px 10px;
    outline: none;
}

.navbar-light .navbar-toggler i {
    color: var(--nav-toggler-icon);
}

.navbar-light .navbar-toggler:active {
    transform: scale(0.95);
    transition: transform 0.15s ease;
}

/* Floating Bottom TabBar (Mobile) */
@media (max-width: 991px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--nav-bg) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid var(--nav-border) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        padding: 10px 16px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 1030;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--text-muted) !important;
        font-size: 0.7rem !important;
        font-weight: 600;
        text-decoration: none !important;
        transition: color 0.2s ease, transform 0.15s ease;
    }
    
    .bottom-nav-item i {
        font-size: var(--icon-size-lg);
        margin-bottom: 3px;
        transition: transform 0.2s ease;
    }
    
    .bottom-nav-item.active,
    .bottom-nav-item:active,
    .bottom-nav-item:hover {
        color: var(--primary) !important;
    }
    
    .bottom-nav-item:active i {
        transform: scale(0.9);
    }
}

/* Default menu link style */
.navbar-nav .nav-item .nav-link {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: var(--text-secondary) !important;
    padding: 8px 16px !important;
    margin: 0 4px !important;
    border-radius: var(--border-radius-pill) !important;
    transition: all 0.2s ease !important;
}

/* Hover effect */
.navbar-nav .nav-item:not(.active) .nav-link:hover {
    color: var(--text-primary) !important;
    background-color: var(--surface-subtle) !important;
}

/* Active effect (Current page) */
.navbar-nav .nav-item.active .nav-link {
    color: var(--primary) !important;
    background-color: var(--chip-bg) !important;
    font-weight: 700 !important;
}

/* Ensure correct mobile menu indentation when expanded */
@media (max-width: 991px) {
    .navbar-nav .nav-item .nav-link {
        margin: 4px 0 !important;
        padding: 10px 16px !important;
    }
}

/* ==========================================================================
   MODALS / POPUPS (Editing, Alerts)
   ========================================================================== */

/* Blurred backdrop */
.modal-backdrop.show {
    background-color: var(--modal-backdrop) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-dialog {
    margin: 1.5rem auto;
    padding: 0 12px;
}

.modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--card-shadow), 0 20px 40px -10px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden;
}

/* Modal header */
.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--surface-border) !important;
    padding: 16px 20px 14px 20px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header .modal-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

/* Close modal button */
.modal-header .close {
    opacity: 1 !important;
    color: var(--text-secondary) !important;
    background: var(--surface-subtle) !important;
    border: 1px solid var(--surface-border) !important;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-pill) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: -4px 0 !important;
    outline: none !important;
    transition: all 0.15s ease;
}

.modal-header .close:hover,
.modal-header .close:active {
    color: var(--text-primary) !important;
    background: var(--chip-bg) !important;
    border-color: var(--primary) !important;
    transform: scale(0.94);
}

.modal-header .close svg.icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Modal body and inputs */
.modal-body {
    padding: 20px !important;
    background-color: transparent !important;
}

.modal-body .frappe-control {
    margin-bottom: 1.15rem !important;
}

.modal-body .control-label {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary) !important;
    margin-bottom: 6px !important;
    display: block;
}

/* Keep grid inputs proportional to cells */
.modal-body .form-grid .form-control,
.modal-body .form-grid input.input-with-feedback {
    height: 34px !important;
    min-height: 34px;
    padding: 5px 8px !important;
    border-radius: var(--border-radius-sm) !important;
}

/* Do not apply standard input sizing to checkboxes */
.modal-body .form-grid input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-height: 15px;
    padding: 0 !important;
    cursor: pointer;
}

/* Grid container */
.modal-body .form-grid {
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--border-radius-md) !important;
    color: var(--text-primary) !important;
    min-height: 75px;
    background-color: var(--card-bg) !important;
    overflow-y: hidden;
}

.modal-body .form-grid .grid-add-multiple-rows {
    display: none;
}


/* ==========================================================
   MODAL FORM CONTROLS — THEME SUPPORT
   ========================================================== */

/* Default state */
.modal-body .form-control,
.modal-body input.input-with-feedback {
    background-color: var(--surface-subtle) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--border-radius-sm) !important;
    caret-color: var(--primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Placeholder */
.modal-body .form-control::placeholder,
.modal-body input.input-with-feedback::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1;
}

/* Hover state */
.modal-body .form-control:hover:not(:disabled),
.modal-body input.input-with-feedback:hover:not(:disabled) {
    border-color: var(--text-secondary) !important;
}

/* Focus state */
.modal-body .form-control:focus,
.modal-body input.input-with-feedback:focus {
    background-color: var(--surface-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
    outline: none !important;
}

/* Disabled state */
.modal-body .form-control:disabled,
.modal-body input.input-with-feedback:disabled {
    background-color: var(--disabled-control-bg) !important;
    color: var(--text-secondary) !important;
    border-color: var(--surface-border) !important;
    opacity: 0.65;
    cursor: not-allowed;
}

/* Read-only state */
.modal-body .form-control[readonly],
.modal-body input.input-with-feedback[readonly] {
    background-color: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    border-color: var(--surface-border) !important;
}

/* Browser autofill */
.modal-body input.form-control:-webkit-autofill,
.modal-body input.input-with-feedback:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface-subtle) inset !important;
    caret-color: var(--primary);
}

/* Native controls in dark mode */
html[data-theme="dark"] .modal-body .form-control,
html[data-theme="dark"] .modal-body input.input-with-feedback {
    color-scheme: dark;
}

/* Modal footer and buttons */
.modal-footer {
    background-color: var(--surface-subtle) !important;
    border-top: 1px solid var(--surface-border) !important;
    padding: 12px 20px !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-footer .btn-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    border-radius: var(--border-radius-md) !important;
    padding: 10px 22px !important;
    box-shadow: 0 4px 14px -2px var(--primary-glow) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.modal-footer .btn-primary:active {
    transform: scale(0.96);
}

.modal-footer .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--border-radius-md) !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
}

.modal-footer .btn-secondary:active {
    background: var(--surface-subtle) !important;
    color: var(--text-primary) !important;
}

/* Main container */
.modal-body .form-grid-container {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden;
    color: var(--text-primary) !important;
}

.modal-body .form-grid {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Grid header */
.modal-body .grid-heading-row,
.modal-body .grid-heading-row .grid-row,
.modal-body .grid-heading-row .data-row,
.modal-body .grid-heading-row .grid-static-col {
    background-color: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
}

/* Column heading text */
.modal-body .grid-heading-row .static-area,
.modal-body .grid-heading-row .row-index {
    color: var(--text-secondary) !important;
    font-weight: 700;
}

/* Grid body */
.modal-body .grid-body,
.modal-body .grid-body .rows,
.modal-body .grid-body .grid-row,
.modal-body .grid-body .data-row,
.modal-body .grid-body .grid-static-col {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Cell values */
.modal-body .grid-body .static-area,
.modal-body .grid-body .row-index,
.modal-body .grid-body .static-area * {
    color: var(--text-primary) !important;
}

/* Rows and dividers */
.modal-body .form-grid .grid-row {
    border-color: var(--surface-border) !important;
}

.modal-body .form-grid .grid-static-col,
.modal-body .form-grid .row-check,
.modal-body .form-grid .row-index {
    border-color: var(--surface-border) !important;
}

/* Subtle alternating row backgrounds */
.modal-body .grid-body .grid-row:nth-child(even) .data-row,
.modal-body .grid-body .grid-row:nth-child(even) .grid-static-col {
    background-color: var(--surface-subtle) !important;
}

/* Row hover */
.modal-body .grid-body .grid-row:hover .data-row,
.modal-body .grid-body .grid-row:hover .grid-static-col {
    background-color: var(--chip-bg) !important;
}

/* Selected/edited cell */
.modal-body .form-grid .grid-static-col:focus,
.modal-body .form-grid .grid-static-col:focus-within,
.modal-body .grid-heading-row .grid-static-col,
.modal-body .grid-heading-row .row-check,
.modal-body .grid-heading-row .row-index {
    background-color: var(--chip-bg) !important;
    outline-color: var(--primary) !important;
}

/* Inputs inside cells */
.modal-body .form-grid input,
.modal-body .form-grid select,
.modal-body .form-grid textarea {
    background-color: var(--surface-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--surface-border) !important;
}

/* Checkbox */
.modal-body .form-grid input[type="checkbox"] {
    accent-color: var(--primary);
}

/* Actions below the table */
.modal-body .grid-footer,
.modal-body .grid-buttons,
.modal-body .grid-add-row {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Add-row button */
.modal-body .grid-add-row {
    background-color: var(--chip-bg) !important;
    color: var(--chip-text) !important;
    border: 1px solid var(--chip-border) !important;
    border-radius: var(--border-radius-sm) !important;
    font-weight: 600;
}

/* Add-row button hover */
.modal-body .grid-add-row:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* Empty rows message */
.modal-body .grid-empty {
    background-color: var(--card-bg) !important;
    color: var(--text-muted) !important;
}

/* Required field indicator */
.modal-body .form-grid .reqd::after {
    color: var(--danger-color) !important;
}

/* ==========================================================================
   PROFILE AND SETTINGS SCREEN (Portal / Settings)
   ========================================================================== */

/* 1. Main container */
.portal-container {
    max-width: 600px;
    min-width: 600px;
    margin: 1.5rem auto;
}

body[data-path="me"] .portal-container {
    padding: 0 4px;
}

@media (max-width: 991px) {
    .portal-container {
        min-width: auto;
    }
}

/* 2. Profile header (Avatar and Name) */
.portal-section.head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
}

.portal-section.head .title {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    color: var(--text-primary) !important;
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

/* Arrange avatar and name vertically */
.portal-section.head > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Increase both parent container and avatar circle size to prevent overlap */
.my-account-avatar .avatar,
.my-account-avatar .avatar-frame {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    font-size: 2.5rem !important;
    border-radius: var(--border-radius-pill) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-account-avatar .avatar-frame {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.my-account-name {
    display: block;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important; /* Remove native horizontal spacing (ml-2) */
}

/* 3. Grouped links (iOS-style Settings Card) */
.portal-items {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden;
    margin-bottom: 2rem;
}

.portal-items .portal-section {
    border-bottom: 1px solid var(--surface-border);
}

.portal-items .portal-section:last-child {
    border-bottom: none;
}

/* Individual settings links - force left alignment */
.my-account-item-link {
    width: 100%;
}

.my-account-item-link a {
    display: block;
    /* align-items: center; */
    /* justify-content: flex-start !important;  */
    padding: 16px 20px !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
    width: 100%;
}

.portal-section .my-account-item-link .item-link-text,
.portal-section .my-account-item-link i{
    color: var(--text-primary);
}

.portal-section .my-account-item-link .icon,
.portal-section .my-account-item-link .es-icon {
    stroke: var(--text-primary);
}

.my-account-item-link a:hover,
.my-account-item-link a:active {
    background-color: var(--surface-subtle) !important;
}

/* Settings link icons */
/* .my-account-item-link svg, 
.my-account-item-link i {
    width: 24px !important;
    height: 24px !important;
    margin-right: 14px !important;
    color: var(--primary) !important;
    fill: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
} */

/* 4. Portal footer (Quick Actions and Logout) */
.portal-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 991px) {
    .portal-footer {
        flex-direction: column;
    }
}

/* Force left alignment to match the top menu */
.portal-footer a {
    /* display: flex !important; */
    /* align-items: center; */
    /* justify-content: flex-start !important;  */
    padding: 14px 20px !important;
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--border-radius-md) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    box-shadow: var(--card-shadow) !important;
    transition: transform 0.15s ease, background-color 0.15s ease;
    text-align: center;
    width: 100%;
}

.portal-footer a:active {
    transform: scale(0.98);
    background-color: var(--surface-subtle) !important;
}

.portal-footer svg,
.portal-footer i {
    width: 20px !important;
    height: 20px !important;
    margin-right: 14px !important;
    fill: currentColor;
    color: inherit;
}

/* Logout button highlighted in red */
.portal-footer a[href="/logout"] {
    color: var(--danger-color) !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}

.portal-footer a[href="/logout"]:active {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Override native Frappe inline style for the profile page */
body[data-path="me"] {
    background-color: var(--bg-color) !important;
}

body[data-path="update-password"] .field-icon {
    top: 14px !important;
}

body[data-path="update-password"] .password-field .toggle-password {
    top: 14px !important;
}

/* ==========================================================================
   MY WORKOUT — CUSTOM FIELD TABLE
   Compatible with Light and Dark Mode
   ========================================================================== */

.workout-table-field {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}

/* Title and row count */
.workout-table-field strong {
    color: var(--text-primary);
    font-weight: 600;
}

.workout-table-field .text-muted {
    color: var(--text-muted) !important;
}

/* Horizontally scrollable container */
.workout-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius-sm);
}

/* Main table */
.workout-table-field .workout-detail-table {
    width: 100%;
    margin: 0 !important;
    border: none !important;
    border-collapse: collapse;
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem;
}

/* Header */
.workout-table-field .workout-detail-table thead th {
    background-color: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--surface-border) !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 10px 12px !important;
}

/* Cells */
.workout-table-field .workout-detail-table tbody td {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--surface-border) !important;
    padding: 10px 12px !important;
    vertical-align: middle;
    font-weight: 500;
    white-space: nowrap;
}

/* Subtle alternating rows */
.workout-table-field .workout-detail-table tbody tr:nth-child(even) td {
    background-color: var(--surface-subtle) !important;
}

/* Original prescription values (struck through) */
.workout-table-field .workout-reference {
    display: inline-block;
    margin-left: 6px;
    color: var(--text-muted) !important;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.85;
}

.workout-table-field .workout-reference s {
    color: inherit !important;
    text-decoration: line-through;
}

/* Horizontal scrolling on mobile devices */
@media (max-width: 767px) {
    .workout-table-field .workout-detail-table {
        font-size: 0.8125rem;
    }

    .workout-table-field .workout-detail-table thead th,
    .workout-table-field .workout-detail-table tbody td {
        padding: 8px 10px !important;
    }

    .workout-table-field .workout-reference {
        font-size: 0.7rem;
        margin-left: 4px;
    }
}

/* ==========================================================================
   KARBONBOX — PRESET COLOR PALETTES (STAGE 2)
   Brand tokens, independent from data-theme and semantic status colors.
   data-kb-color comes from an allowlisted site-wide setting.
   ========================================================================== */

:root {
    --primary-contrast: #ffffff;
    --primary-hover: #1d4ed8;
    --kb-primary-rgb: 37, 99, 235;
}

:root[data-theme="light"][data-kb-color="blue"],
:root:not([data-theme])[data-kb-color="blue"] {
    --primary: #2563eb;
    --primary-hover: #1556e4;
    --primary-gradient: linear-gradient(135deg, #2563eb 0%, #1554df 100%);
    --primary-contrast: #ffffff;
    --kb-primary-rgb: 37, 99, 235;
    --primary-glow: rgba(37, 99, 235, 0.30);
    --chip-bg: rgba(37, 99, 235, 0.10);
    --chip-text: #2563eb;
    --chip-border: rgba(37, 99, 235, 0.22);
}

:root[data-theme="dark"][data-kb-color="blue"] {
    --primary: #60a5fa;
    --primary-hover: #4797f9;
    --primary-gradient: linear-gradient(135deg, #71affb 0%, #4a98f9 100%);
    --primary-contrast: #101216;
    --kb-primary-rgb: 96, 165, 250;
    --primary-glow: rgba(96, 165, 250, 0.24);
    --chip-bg: rgba(96, 165, 250, 0.18);
    --chip-text: #60a5fa;
    --chip-border: rgba(96, 165, 250, 0.32);
}

:root[data-theme="light"][data-kb-color="gold"],
:root:not([data-theme])[data-kb-color="gold"] {
    --primary: #946200;
    --primary-hover: #7d5300;
    --primary-gradient: linear-gradient(135deg, #946200 0%, #784f00 100%);
    --primary-contrast: #ffffff;
    --kb-primary-rgb: 148, 98, 0;
    --primary-glow: rgba(148, 98, 0, 0.30);
    --chip-bg: rgba(148, 98, 0, 0.10);
    --chip-text: #946200;
    --chip-border: rgba(148, 98, 0, 0.22);
}

:root[data-theme="dark"][data-kb-color="gold"] {
    --primary: #f2c56a;
    --primary-hover: #f0bc53;
    --primary-gradient: linear-gradient(135deg, #f3cb7a 0%, #f0bd55 100%);
    --primary-contrast: #101216;
    --kb-primary-rgb: 242, 197, 106;
    --primary-glow: rgba(242, 197, 106, 0.24);
    --chip-bg: rgba(242, 197, 106, 0.18);
    --chip-text: #f2c56a;
    --chip-border: rgba(242, 197, 106, 0.32);
}

:root[data-theme="light"][data-kb-color="black"],
:root:not([data-theme])[data-kb-color="black"] {
    --primary: #111827;
    --primary-hover: #0a0e17;
    --primary-gradient: linear-gradient(135deg, #111827 0%, #080c13 100%);
    --primary-contrast: #ffffff;
    --kb-primary-rgb: 17, 24, 39;
    --primary-glow: rgba(17, 24, 39, 0.30);
    --chip-bg: rgba(17, 24, 39, 0.10);
    --chip-text: #111827;
    --chip-border: rgba(17, 24, 39, 0.22);
}

:root[data-theme="dark"][data-kb-color="black"] {
    --primary: #e2e8f0;
    --primary-hover: #d1dbe7;
    --primary-gradient: linear-gradient(135deg, #eef1f6 0%, #d3dce8 100%);
    --primary-contrast: #101216;
    --kb-primary-rgb: 226, 232, 240;
    --primary-glow: rgba(226, 232, 240, 0.24);
    --chip-bg: rgba(226, 232, 240, 0.18);
    --chip-text: #e2e8f0;
    --chip-border: rgba(226, 232, 240, 0.32);
}

:root[data-theme="light"][data-kb-color="gray"],
:root:not([data-theme])[data-kb-color="gray"] {
    --primary: #475569;
    --primary-hover: #3e4a5b;
    --primary-gradient: linear-gradient(135deg, #475569 0%, #3c4758 100%);
    --primary-contrast: #ffffff;
    --kb-primary-rgb: 71, 85, 105;
    --primary-glow: rgba(71, 85, 105, 0.30);
    --chip-bg: rgba(71, 85, 105, 0.10);
    --chip-text: #475569;
    --chip-border: rgba(71, 85, 105, 0.22);
}

:root[data-theme="dark"][data-kb-color="gray"] {
    --primary: #94a3b8;
    --primary-hover: #8596ae;
    --primary-gradient: linear-gradient(135deg, #9facbf 0%, #8697af 100%);
    --primary-contrast: #101216;
    --kb-primary-rgb: 148, 163, 184;
    --primary-glow: rgba(148, 163, 184, 0.24);
    --chip-bg: rgba(148, 163, 184, 0.18);
    --chip-text: #94a3b8;
    --chip-border: rgba(148, 163, 184, 0.32);
}

:root[data-theme="light"][data-kb-color="red"],
:root:not([data-theme])[data-kb-color="red"] {
    --primary: #b91c1c;
    --primary-hover: #a51919;
    --primary-gradient: linear-gradient(135deg, #b91c1c 0%, #a11818 100%);
    --primary-contrast: #ffffff;
    --kb-primary-rgb: 185, 28, 28;
    --primary-glow: rgba(185, 28, 28, 0.30);
    --chip-bg: rgba(185, 28, 28, 0.10);
    --chip-text: #b91c1c;
    --chip-border: rgba(185, 28, 28, 0.22);
}

:root[data-theme="dark"][data-kb-color="red"] {
    --primary: #f87171;
    --primary-hover: #f75959;
    --primary-gradient: linear-gradient(135deg, #f98282 0%, #f75b5b 100%);
    --primary-contrast: #101216;
    --kb-primary-rgb: 248, 113, 113;
    --primary-glow: rgba(248, 113, 113, 0.24);
    --chip-bg: rgba(248, 113, 113, 0.18);
    --chip-text: #f87171;
    --chip-border: rgba(248, 113, 113, 0.32);
}

:root[data-theme="light"][data-kb-color="orange"],
:root:not([data-theme])[data-kb-color="orange"] {
    --primary: #c2410c;
    --primary-hover: #ac3a0b;
    --primary-gradient: linear-gradient(135deg, #c2410c 0%, #a8380a 100%);
    --primary-contrast: #ffffff;
    --kb-primary-rgb: 194, 65, 12;
    --primary-glow: rgba(194, 65, 12, 0.30);
    --chip-bg: rgba(194, 65, 12, 0.10);
    --chip-text: #c2410c;
    --chip-border: rgba(194, 65, 12, 0.22);
}

:root[data-theme="dark"][data-kb-color="orange"] {
    --primary: #fb923c;
    --primary-hover: #fa8423;
    --primary-gradient: linear-gradient(135deg, #fb9c4d 0%, #fb8526 100%);
    --primary-contrast: #101216;
    --kb-primary-rgb: 251, 146, 60;
    --primary-glow: rgba(251, 146, 60, 0.24);
    --chip-bg: rgba(251, 146, 60, 0.18);
    --chip-text: #fb923c;
    --chip-border: rgba(251, 146, 60, 0.32);
}

:root[data-theme="light"][data-kb-color="green"],
:root:not([data-theme])[data-kb-color="green"] {
    --primary: #15803d;
    --primary-hover: #126c34;
    --primary-gradient: linear-gradient(135deg, #15803d 0%, #116832 100%);
    --primary-contrast: #ffffff;
    --kb-primary-rgb: 21, 128, 61;
    --primary-glow: rgba(21, 128, 61, 0.30);
    --chip-bg: rgba(21, 128, 61, 0.10);
    --chip-text: #15803d;
    --chip-border: rgba(21, 128, 61, 0.22);
}

:root[data-theme="dark"][data-kb-color="green"] {
    --primary: #4ade80;
    --primary-hover: #34da71;
    --primary-gradient: linear-gradient(135deg, #59e18b 0%, #37da72 100%);
    --primary-contrast: #101216;
    --kb-primary-rgb: 74, 222, 128;
    --primary-glow: rgba(74, 222, 128, 0.24);
    --chip-bg: rgba(74, 222, 128, 0.18);
    --chip-text: #4ade80;
    --chip-border: rgba(74, 222, 128, 0.32);
}

:root[data-theme="light"][data-kb-color="yellow"],
:root:not([data-theme])[data-kb-color="yellow"] {
    --primary: #854d0e;
    --primary-hover: #70410c;
    --primary-gradient: linear-gradient(135deg, #854d0e 0%, #6c3e0b 100%);
    --primary-contrast: #ffffff;
    --kb-primary-rgb: 133, 77, 14;
    --primary-glow: rgba(133, 77, 14, 0.30);
    --chip-bg: rgba(133, 77, 14, 0.10);
    --chip-text: #854d0e;
    --chip-border: rgba(133, 77, 14, 0.22);
}

:root[data-theme="dark"][data-kb-color="yellow"] {
    --primary: #facc15;
    --primary-hover: #f0c105;
    --primary-gradient: linear-gradient(135deg, #fad026 0%, #f3c305 100%);
    --primary-contrast: #101216;
    --kb-primary-rgb: 250, 204, 21;
    --primary-glow: rgba(250, 204, 21, 0.24);
    --chip-bg: rgba(250, 204, 21, 0.18);
    --chip-text: #facc15;
    --chip-border: rgba(250, 204, 21, 0.32);
}

/* Controls using the brand color in both themes. */
.btn-primary.finish-workout,
.btn-primary.start-workout,
.btn-primary.btn-block,
.modal-footer .btn-primary,
.card.apple-card .card-body a.text-primary:hover,
.card.apple-card .card-body a.text-primary:active,
.card-body > a.btn.btn-link:hover,
.modal-body .grid-add-row:hover {
    color: var(--primary-contrast) !important;
}

.performed-input[type="checkbox"]:checked::after {
    border-color: var(--primary-contrast) !important;
}

/* Frappe forms: scoped to the application interaction area. */
.modal-body .form-grid input[type="checkbox"] {
    accent-color: var(--primary);
}

/* Brand utilities without overriding semantic success/error/warning badges. */
.workout-params {
    background-color: var(--chip-bg) !important;
    border-left-color: var(--primary) !important;
}
.workout-params b { color: var(--chip-text) !important; }
.combo-badge {
    background: var(--chip-bg) !important;
    color: var(--chip-text) !important;
    border-color: var(--chip-border) !important;
}