/* =========================================================
   RAVANYAB - GLOBAL DARK MODE
   Theme selector: html[data-theme="dark"]
   ========================================================= */

/* ---------------------------------------------------------
   1. DARK THEME VARIABLES
--------------------------------------------------------- */

html[data-theme="dark"] {
    color-scheme: dark;
    /* Variables used in site.css */
    --primary-color: #83AD98;
    --primary-dark: #638C77;
    --primary-light: #30483B;
    --primary-hover: #638C77;
    --secondary-color: #202D28;
    --accent-color: #D9A76A;
    --accent-light: #453827;
    --text-color: #E5ECE7;
    --text-light: #B4C1BA;
    --border-color: #405148;
    --white: #24332C;
    --card-bg: #283931;
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, .18);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .25);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, .32);
    /* Variables used by newer Home styles */
    --clinic-bg: #1B2722;
    --clinic-surface: #283730;
    --clinic-text: #E5ECE7;
    --clinic-muted: #B4C1BA;
    --clinic-border: #405148;
    --clinic-shadow: 0 16px 45px rgba(0, 0, 0, .22);
    --clinic-sage: #83AD98;
    --clinic-sage-dark: #A5CBB3;
    --clinic-sage-light: #34483F;
    --clinic-sage-soft: #34483F;
    --clinic-blue-gray: #A8BBC8;
    --clinic-blue-gray-soft: #354650;
}

    /* ---------------------------------------------------------
   2. GENERAL PAGE
--------------------------------------------------------- */

    html[data-theme="dark"],
    html[data-theme="dark"] body {
        background-color: #1B2722 !important;
        color: #E5ECE7 !important;
    }

        html[data-theme="dark"] body {
            transition: background-color .25s ease, color .25s ease;
        }

        /* General text */
        html[data-theme="dark"] h1,
        html[data-theme="dark"] h2,
        html[data-theme="dark"] h3,
        html[data-theme="dark"] h4,
        html[data-theme="dark"] h5,
        html[data-theme="dark"] h6,
        html[data-theme="dark"] p,
        html[data-theme="dark"] li,
        html[data-theme="dark"] small,
        html[data-theme="dark"] strong,
        html[data-theme="dark"] .form-text {
            color: inherit;
        }

        html[data-theme="dark"] .text-dark,
        html[data-theme="dark"] .text-body {
            color: #E5ECE7 !important;
        }

        html[data-theme="dark"] .text-muted,
        html[data-theme="dark"] .text-secondary {
            color: #B4C1BA !important;
        }

        html[data-theme="dark"] hr {
            border-color: #405148;
            opacity: .8;
        }

        /* Links */
        html[data-theme="dark"] a {
            color: #A5CBB3;
        }

            html[data-theme="dark"] a:hover {
                color: #E8C18F;
            }

        /* Bootstrap light backgrounds */
        html[data-theme="dark"] .bg-white,
        html[data-theme="dark"] .bg-light {
            background-color: #283730 !important;
        }

        html[data-theme="dark"] .border,
        html[data-theme="dark"] .border-bottom,
        html[data-theme="dark"] .border-top {
            border-color: #405148 !important;
        }

        /* ---------------------------------------------------------
   3. NAVBAR
--------------------------------------------------------- */

        html[data-theme="dark"] .clinic-navbar {
            background-color: rgba(29, 43, 35, .98) !important;
            border-bottom-color: #405148 !important;
        }

        html[data-theme="dark"] .clinic-logo,
        html[data-theme="dark"] .clinic-logo span {
            color: #A5CBB3 !important;
        }

            html[data-theme="dark"] .clinic-logo small {
                color: #B4C1BA !important;
            }

        html[data-theme="dark"] .clinic-navbar .nav-link {
            color: #E5ECE7 !important;
        }

            html[data-theme="dark"] .clinic-navbar .nav-link:hover {
                background-color: #34483F !important;
                color: #E8C18F !important;
            }

        html[data-theme="dark"] .navbar-toggler {
            border-color: #718B7E !important;
        }

        html[data-theme="dark"] .navbar-toggler-icon {
            filter: invert(1);
        }

        html[data-theme="dark"] .therapist-panel-button,
        html[data-theme="dark"] .client-panel-button {
            color: #E5ECE7 !important;
        }

        html[data-theme="dark"] .therapist-panel-icon,
        html[data-theme="dark"] .client-panel-icon {
            color: #A5CBB3 !important;
        }

        /* Dropdown */
        html[data-theme="dark"] .dropdown-menu {
            background-color: #283931 !important;
            border-color: #405148 !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
        }

        html[data-theme="dark"] .dropdown-item {
            color: #E5ECE7 !important;
        }

            html[data-theme="dark"] .dropdown-item:hover,
            html[data-theme="dark"] .dropdown-item:focus {
                background-color: #3A5044 !important;
                color: #E8C18F !important;
            }

        html[data-theme="dark"] .dropdown-divider {
            border-color: #405148 !important;
        }

        /* Theme toggle */
        html[data-theme="dark"] .theme-toggle {
            background-color: #34483F !important;
            color: #E8C18F !important;
            border-color: #718B7E !important;
        }

            html[data-theme="dark"] .theme-toggle:hover {
                background-color: #40594A !important;
                color: #FFFFFF !important;
            }

        /* ---------------------------------------------------------
   4. HOME PAGE
--------------------------------------------------------- */

        /* All main sections */
        html[data-theme="dark"] .hero-section,
        html[data-theme="dark"] .services-section,
        html[data-theme="dark"] .about-section,
        html[data-theme="dark"] .articles-section,
        html[data-theme="dark"] .reviews-section,
        html[data-theme="dark"] .suitability-section,
        html[data-theme="dark"] .credentials-section,
        html[data-theme="dark"] .assessment-section,
        html[data-theme="dark"] .section-light {
            background-color: #1B2722 !important;
            color: #E5ECE7 !important;
        }

        /* Hero */
        html[data-theme="dark"] .hero-section {
            background: radial-gradient( circle at 85% 20%, rgba(217, 167, 106, .08), transparent 30% ), linear-gradient(135deg, #202F28, #293A40) !important;
        }

            html[data-theme="dark"] .hero-section h1,
            html[data-theme="dark"] .hero-section h2,
            html[data-theme="dark"] .hero-section p {
                color: #E5ECE7 !important;
            }

                html[data-theme="dark"] .hero-section h1 span {
                    color: #A5CBB3 !important;
                }

        html[data-theme="dark"] .hero-badge {
            background-color: #34483F !important;
            color: #C1D8C9 !important;
            border-color: #52695A !important;
        }

        /* Home cards */
        html[data-theme="dark"] .service-card,
        html[data-theme="dark"] .article-card,
        html[data-theme="dark"] .about-box,
        html[data-theme="dark"] .review-placeholder,
        html[data-theme="dark"] .suitability-card,
        html[data-theme="dark"] .credentials-card {
            background-color: #283730 !important;
            color: #E5ECE7 !important;
            border-color: #405148 !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
        }

            html[data-theme="dark"] .service-card h3,
            html[data-theme="dark"] .article-card h3,
            html[data-theme="dark"] .article-body h3,
            html[data-theme="dark"] .section-heading h2,
            html[data-theme="dark"] .about-section h2,
            html[data-theme="dark"] .suitability-content h2,
            html[data-theme="dark"] .suitability-visual h3,
            html[data-theme="dark"] .credentials-card h2 {
                color: #E5ECE7 !important;
            }

            html[data-theme="dark"] .service-card p,
            html[data-theme="dark"] .article-card p,
            html[data-theme="dark"] .section-heading p,
            html[data-theme="dark"] .about-section p,
            html[data-theme="dark"] .suitability-card p {
                color: #B4C1BA !important;
            }

        /* Home icons and decorative elements */
        html[data-theme="dark"] .service-icon,
        html[data-theme="dark"] .fit-icon {
            background-color: #354B40 !important;
            color: #A5CBB3 !important;
        }

        html[data-theme="dark"] .article-placeholder,
        html[data-theme="dark"] .suitability-visual {
            background-color: #354650 !important;
            color: #C0D0D9 !important;
        }

        html[data-theme="dark"] .fit-list li {
            color: #E5ECE7 !important;
        }

        html[data-theme="dark"] .fit-list i {
            color: #A5CBB3 !important;
        }

        html[data-theme="dark"] .fit-note {
            background-color: #35483E !important;
            color: #DCE6DF !important;
        }

        /* Assessment and CTA retain their gradient appearance */
        html[data-theme="dark"] .assessment-box,
        html[data-theme="dark"] .cta-section {
            color: #FFFFFF !important;
        }

            html[data-theme="dark"] .assessment-box h2,
            html[data-theme="dark"] .assessment-box p,
            html[data-theme="dark"] .cta-section h2,
            html[data-theme="dark"] .cta-section p {
                color: #FFFFFF !important;
            }

        /* Home form */
        html[data-theme="dark"] .credentials-form .form-control {
            background-color: #1D2B24 !important;
            color: #E5ECE7 !important;
            border-color: #52695A !important;
        }

        /* ---------------------------------------------------------
   5. GENERAL CARDS AND PANELS
--------------------------------------------------------- */

        html[data-theme="dark"] .card,
        html[data-theme="dark"] .modal-content,
        html[data-theme="dark"] .list-group-item,
        html[data-theme="dark"] .accordion-item,
        html[data-theme="dark"] .profile-card,
        html[data-theme="dark"] .dashboard-card,
        html[data-theme="dark"] .panel-card,
        html[data-theme="dark"] .content-card,
        html[data-theme="dark"] .appointment-card {
            background-color: #283730 !important;
            color: #E5ECE7 !important;
            border-color: #405148 !important;
        }

        html[data-theme="dark"] .card-header,
        html[data-theme="dark"] .card-footer {
            background-color: #304239 !important;
            color: #E5ECE7 !important;
            border-color: #405148 !important;
        }

        html[data-theme="dark"] .accordion-button {
            background-color: #283730 !important;
            color: #E5ECE7 !important;
        }

            html[data-theme="dark"] .accordion-button:not(.collapsed) {
                background-color: #354B40 !important;
                color: #C1D8C9 !important;
            }

            html[data-theme="dark"] .accordion-button::after {
                filter: invert(1);
            }

        html[data-theme="dark"] .accordion-body {
            background-color: #283730 !important;
            color: #E5ECE7 !important;
        }

        /* ---------------------------------------------------------
   6. FORMS AND INPUTS
--------------------------------------------------------- */

        html[data-theme="dark"] .form-control,
        html[data-theme="dark"] .form-select,
        html[data-theme="dark"] input,
        html[data-theme="dark"] textarea,
        html[data-theme="dark"] select {
            background-color: #1D2B24;
            color: #E5ECE7;
            border-color: #52695A;
        }

            html[data-theme="dark"] .form-control:focus,
            html[data-theme="dark"] .form-select:focus,
            html[data-theme="dark"] input:focus,
            html[data-theme="dark"] textarea:focus,
            html[data-theme="dark"] select:focus {
                background-color: #24372D;
                color: #FFFFFF;
                border-color: #83AD98;
                box-shadow: 0 0 0 .2rem rgba(131, 173, 152, .18);
            }

            html[data-theme="dark"] .form-control::placeholder,
            html[data-theme="dark"] input::placeholder,
            html[data-theme="dark"] textarea::placeholder {
                color: #A3B2A8 !important;
                opacity: 1;
            }

        html[data-theme="dark"] .form-label,
        html[data-theme="dark"] label {
            color: #DCE6DF;
        }

        html[data-theme="dark"] input:disabled,
        html[data-theme="dark"] textarea:disabled,
        html[data-theme="dark"] select:disabled,
        html[data-theme="dark"] .form-control:disabled {
            background-color: #303D35 !important;
            color: #AAB8AF !important;
            opacity: 1;
        }

        /* Readonly fields */
        html[data-theme="dark"] input[readonly],
        html[data-theme="dark"] textarea[readonly] {
            background-color: #303D35 !important;
            color: #DCE6DF !important;
        }

        /* ---------------------------------------------------------
   7. TABLES
--------------------------------------------------------- */

        html[data-theme="dark"] .table {
            --bs-table-bg: #283730;
            --bs-table-color: #E5ECE7;
            --bs-table-border-color: #405148;
            --bs-table-striped-bg: #304239;
            --bs-table-striped-color: #E5ECE7;
            --bs-table-hover-bg: #3A5044;
            --bs-table-hover-color: #FFFFFF;
            color: #E5ECE7 !important;
            border-color: #405148 !important;
        }

            html[data-theme="dark"] .table th,
            html[data-theme="dark"] .table td {
                color: #E5ECE7 !important;
                border-color: #405148 !important;
            }

            html[data-theme="dark"] .table thead th {
                background-color: #35483E !important;
                color: #E5ECE7 !important;
            }

        html[data-theme="dark"] .table-light {
            --bs-table-bg: #35483E;
            --bs-table-color: #E5ECE7;
        }

        /* ---------------------------------------------------------
   8. LOGIN AND REGISTER
--------------------------------------------------------- */

        html[data-theme="dark"] .login-wrapper,
        html[data-theme="dark"] .register-wrapper {
            background-color: #1B2722 !important;
        }

        html[data-theme="dark"] .login-box,
        html[data-theme="dark"] .register-box,
        html[data-theme="dark"] .login-form,
        html[data-theme="dark"] .register-form {
            background-color: #283730 !important;
            color: #E5ECE7 !important;
            border-color: #405148 !important;
        }

            html[data-theme="dark"] .login-form h1,
            html[data-theme="dark"] .login-form h2,
            html[data-theme="dark"] .register-form h1,
            html[data-theme="dark"] .register-form h2 {
                color: #E5ECE7 !important;
            }

        /* ---------------------------------------------------------
   9. CLIENT DASHBOARD
--------------------------------------------------------- */

        html[data-theme="dark"] .ry-dashboard {
            --ry-green: #83AD98;
            --ry-green-dark: #A5CBB3;
            --ry-green-light: #354B40;
            --ry-text: #E5ECE7;
            --ry-muted: #B4C1BA;
            --ry-border: #405148;
            --ry-bg: #1B2722;
            background-color: var(--ry-bg) !important;
            color: var(--ry-text) !important;
        }

            html[data-theme="dark"] .ry-dashboard h1,
            html[data-theme="dark"] .ry-dashboard h2,
            html[data-theme="dark"] .ry-dashboard h3,
            html[data-theme="dark"] .ry-dashboard p,
            html[data-theme="dark"] .ry-dashboard span,
            html[data-theme="dark"] .ry-dashboard label {
                color: inherit;
            }

        /* ---------------------------------------------------------
   10. WORKING HOURS PAGE
--------------------------------------------------------- */

        html[data-theme="dark"] .wh-page {
            --wh-primary: #83AD98;
            --wh-primary-dark: #638C77;
            --wh-primary-soft: #354B40;
            --wh-gold: #D9A76A;
            --wh-text: #E5ECE7;
            --wh-muted: #B4C1BA;
            --wh-border: #405148;
            --wh-surface: #283730;
            --wh-page-bg: #1B2722;
            background-color: var(--wh-page-bg) !important;
            color: var(--wh-text) !important;
        }

            html[data-theme="dark"] .wh-page .wh-card {
                background-color: #283730 !important;
                border-color: #405148 !important;
            }

            html[data-theme="dark"] .wh-page h1,
            html[data-theme="dark"] .wh-page h2,
            html[data-theme="dark"] .wh-page h3 {
                color: #E5ECE7 !important;
            }

        /* ---------------------------------------------------------
   11. FOOTER
--------------------------------------------------------- */

        html[data-theme="dark"] .clinic-footer {
            background-color: #111B16 !important;
            color: #E5ECE7 !important;
            border-top: 1px solid #405148;
        }

            html[data-theme="dark"] .clinic-footer h4,
            html[data-theme="dark"] .clinic-footer h5 {
                color: #E5ECE7 !important;
            }

            html[data-theme="dark"] .clinic-footer p,
            html[data-theme="dark"] .clinic-footer a {
                color: #B4C1BA;
            }

                html[data-theme="dark"] .clinic-footer a:hover {
                    color: #E8C18F;
                }

        /* ---------------------------------------------------------
   12. MODALS, ALERTS AND TOASTS
--------------------------------------------------------- */

        html[data-theme="dark"] .modal-header,
        html[data-theme="dark"] .modal-footer {
            border-color: #405148 !important;
        }

        html[data-theme="dark"] .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

        html[data-theme="dark"] .alert-secondary,
        html[data-theme="dark"] .alert-light {
            background-color: #354239 !important;
            color: #E5ECE7 !important;
            border-color: #52695A !important;
        }

        /* ---------------------------------------------------------
   13. BUTTONS
--------------------------------------------------------- */

        html[data-theme="dark"] .btn-outline-clinic {
            color: #A5CBB3 !important;
            border-color: #83AD98 !important;
        }

            html[data-theme="dark"] .btn-outline-clinic:hover {
                background-color: #40594A !important;
                color: #FFFFFF !important;
            }

        html[data-theme="dark"] .btn-clinic {
            background-color: #638C77 !important;
            border-color: #638C77 !important;
            color: #FFFFFF !important;
        }

        /* ---------------------------------------------------------
   14. SCROLLBAR
--------------------------------------------------------- */

        html[data-theme="dark"] ::-webkit-scrollbar {
            width: 9px;
            height: 9px;
        }

        html[data-theme="dark"] ::-webkit-scrollbar-track {
            background: #1B2722;
        }

        html[data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: #52695A;
            border-radius: 10px;
        }

            html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
                background: #83AD98;
            }

        /* ---------------------------------------------------------
   15. WHATSAPP
--------------------------------------------------------- */

        html[data-theme="dark"] .whatsapp-float {
            color: #FFFFFF !important;
        }


/* =========================================
   Client Dashboard - Light & Dark Theme
========================================= */

/* ---------- Light Theme ---------- */
.ry-dashboard {
    --ry-bg: #f5f8f6;
    --ry-surface: #ffffff;
    --ry-surface-soft: #f1f5f2;
    --ry-text: #263a31;
    --ry-text-secondary: #52665c;
    --ry-muted: #74857c;
    --ry-border: #dce6df;
    --ry-shadow: 0 8px 28px rgba(35, 65, 49, .07);
    --ry-green: #527b66;
    --ry-green-soft: #e6f0e9;
    --ry-blue: #527b91;
    --ry-blue-soft: #e8f0f5;
    --ry-purple: #8170a5;
    --ry-purple-soft: #f0ecf7;
    --ry-orange: #bd8952;
    --ry-orange-soft: #f8efe5;
    background: var(--ry-bg);
    color: var(--ry-text);
    padding: 28px 0 45px;
    min-height: 100vh;
    transition: background .25s ease, color .25s ease;
}

    .ry-dashboard,
    .ry-dashboard * {
        box-sizing: border-box;
    }

        .ry-dashboard a {
            text-decoration: none;
        }

/* ---------- Dark Theme ---------- */
html[data-theme="dark"] .ry-dashboard {
    --ry-bg: #17221d;
    --ry-surface: #24332b;
    --ry-surface-soft: #2c3d33;
    --ry-text: #edf3ef;
    --ry-text-secondary: #d0ddd5;
    --ry-muted: #aabbb0;
    --ry-border: #405448;
    --ry-shadow: 0 8px 28px rgba(0, 0, 0, .20);
    --ry-green: #a3c8ae;
    --ry-green-soft: #344b3d;
    --ry-blue: #a8c9dc;
    --ry-blue-soft: #304653;
    --ry-purple: #c3b2e2;
    --ry-purple-soft: #443a56;
    --ry-orange: #e6bd91;
    --ry-orange-soft: #51402f;
    background: var(--ry-bg);
    color: var(--ry-text);
}

/* ---------- Main Header ---------- */
.ry-dashboard .ry-header {
    background: var(--ry-surface);
    border: 1px solid var(--ry-border);
    border-radius: 18px;
    padding: 15px 22px;
    box-shadow: var(--ry-shadow);
}

.ry-dashboard .ry-brand,
.ry-dashboard .ry-profile-link {
    color: var(--ry-text);
}

    .ry-dashboard .ry-brand span {
        color: var(--ry-text);
        font-weight: 700;
    }

.ry-dashboard .ry-profile-link {
    background: var(--ry-surface-soft);
    border: 1px solid var(--ry-border);
    border-radius: 12px;
    padding: 10px 14px;
}

    .ry-dashboard .ry-profile-link:hover {
        color: var(--ry-green);
    }

/* ---------- Welcome ---------- */
.ry-dashboard .ry-welcome {
    background: var(--ry-surface);
    border: 1px solid var(--ry-border);
    box-shadow: var(--ry-shadow);
    border-radius: 24px;
}

    .ry-dashboard .ry-welcome h1 {
        color: var(--ry-text);
    }

    .ry-dashboard .ry-welcome p {
        color: var(--ry-text-secondary);
    }

.ry-dashboard .ry-eyebrow {
    color: var(--ry-green);
    font-weight: 700;
}

.ry-dashboard .ry-welcome-illustration {
    color: var(--ry-green);
}

/* ---------- Statistics ---------- */
.ry-dashboard .ry-stat-card {
    background: var(--ry-surface);
    border: 1px solid var(--ry-border);
    box-shadow: var(--ry-shadow);
    color: var(--ry-text);
    border-radius: 20px;
}

    .ry-dashboard .ry-stat-card span {
        color: var(--ry-text-secondary);
    }

    .ry-dashboard .ry-stat-card strong {
        color: var(--ry-text);
    }

    .ry-dashboard .ry-stat-card small {
        color: var(--ry-muted);
    }

.ry-dashboard .stat-green .ry-stat-icon {
    background: var(--ry-green-soft);
    color: var(--ry-green);
}

.ry-dashboard .stat-blue .ry-stat-icon {
    background: var(--ry-blue-soft);
    color: var(--ry-blue);
}

.ry-dashboard .stat-purple .ry-stat-icon {
    background: var(--ry-purple-soft);
    color: var(--ry-purple);
}

/* ---------- Panels ---------- */
.ry-dashboard .ry-panel {
    background: var(--ry-surface);
    border: 1px solid var(--ry-border);
    box-shadow: var(--ry-shadow);
    border-radius: 22px;
    color: var(--ry-text);
}

    .ry-dashboard .ry-panel h2,
    .ry-dashboard .ry-section-heading h2 {
        color: var(--ry-text);
    }

    .ry-dashboard .ry-panel p,
    .ry-dashboard .ry-panel span {
        color: var(--ry-text-secondary);
    }

    .ry-dashboard .ry-panel .ry-eyebrow {
        color: var(--ry-green);
    }

.ry-dashboard .ry-heading-icon {
    border-radius: 14px;
}

.ry-dashboard .green-icon {
    background: var(--ry-green-soft);
    color: var(--ry-green);
}

.ry-dashboard .blue-icon {
    background: var(--ry-blue-soft);
    color: var(--ry-blue);
}

/* ---------- Next Appointment ---------- */
.ry-dashboard .ry-next-date,
.ry-dashboard .ry-next-time {
    background: var(--ry-surface-soft);
    border: 1px solid var(--ry-border);
    border-radius: 14px;
}

.ry-dashboard .ry-date-icon {
    background: var(--ry-green-soft);
    color: var(--ry-green);
}

.ry-dashboard .ry-next-date span,
.ry-dashboard .ry-next-time span {
    color: var(--ry-muted);
}

.ry-dashboard .ry-next-date strong,
.ry-dashboard .ry-next-time strong {
    color: var(--ry-text);
}

.ry-dashboard .ry-appointment-note {
    background: var(--ry-green-soft);
    border: 1px solid var(--ry-border);
    color: var(--ry-text-secondary);
    border-radius: 14px;
}

    .ry-dashboard .ry-appointment-note p {
        color: var(--ry-text-secondary);
    }

/* ---------- Status Badges ---------- */
.ry-dashboard .ry-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    padding: 7px 12px;
    font-size: .8rem;
    font-weight: 700;
}

.ry-dashboard .status-pending {
    background: #fff0cf;
    color: #805500 !important;
}

.ry-dashboard .status-confirmed {
    background: #d9f1df;
    color: #205c35 !important;
}

.ry-dashboard .status-other {
    background: var(--ry-surface-soft);
    color: var(--ry-text-secondary) !important;
}

html[data-theme="dark"] .ry-dashboard .status-pending {
    background: #59451f;
    color: #ffe2a0 !important;
}

html[data-theme="dark"] .ry-dashboard .status-confirmed {
    background: #244d36;
    color: #b7ebc7 !important;
}

/* ---------- Upcoming Appointments ---------- */
.ry-dashboard .ry-text-link {
    color: var(--ry-green);
    font-weight: 700;
}

.ry-dashboard .ry-appointment-item {
    background: var(--ry-surface-soft);
    border: 1px solid var(--ry-border);
    border-radius: 16px;
}

.ry-dashboard .ry-item-calendar {
    background: var(--ry-green-soft);
    color: var(--ry-green);
}

.ry-dashboard .ry-item-info strong {
    color: var(--ry-text);
}

.ry-dashboard .ry-item-info span {
    color: var(--ry-muted);
}

.ry-dashboard .ry-secondary-btn {
    background: var(--ry-surface-soft);
    border: 1px solid var(--ry-border);
    color: var(--ry-text);
    border-radius: 12px;
}

    .ry-dashboard .ry-secondary-btn:hover {
        background: var(--ry-green-soft);
        color: var(--ry-green);
        border-color: var(--ry-green);
    }

/* ---------- Empty States ---------- */
.ry-dashboard .ry-empty-appointments,
.ry-dashboard .ry-list-empty {
    color: var(--ry-text-secondary);
}

    .ry-dashboard .ry-empty-appointments h3 {
        color: var(--ry-text);
    }

    .ry-dashboard .ry-empty-appointments p,
    .ry-dashboard .ry-list-empty p {
        color: var(--ry-muted);
    }

.ry-dashboard .ry-empty-icon {
    background: var(--ry-green-soft);
    color: var(--ry-green);
}

/* ---------- Messages ---------- */
.ry-dashboard .ry-message-content {
    background: var(--ry-surface-soft);
    border: 1px solid var(--ry-border);
    border-radius: 18px;
}

.ry-dashboard .ry-message-text strong {
    color: var(--ry-text);
}

.ry-dashboard .ry-message-text span,
.ry-dashboard .ry-message-text p {
    color: var(--ry-text-secondary);
}

.ry-dashboard .ry-doctor-avatar {
    background: var(--ry-green-soft);
}

/* ---------- Quick Access ---------- */
.ry-dashboard .ry-section-heading p {
    color: var(--ry-muted);
}

.ry-dashboard .ry-section-heading > i {
    color: var(--ry-green);
}

.ry-dashboard .ry-quick-card {
    position: relative;
    background: var(--ry-surface);
    border: 1px solid var(--ry-border);
    box-shadow: var(--ry-shadow);
    border-radius: 18px;
    color: var(--ry-text);
}

    .ry-dashboard .ry-quick-card strong {
        color: var(--ry-text);
    }

    .ry-dashboard .ry-quick-card span {
        color: var(--ry-muted);
    }

.ry-dashboard .ry-quick-arrow {
    color: var(--ry-green);
}

.ry-dashboard .quick-green {
    background: var(--ry-green-soft);
    color: var(--ry-green);
}

.ry-dashboard .quick-blue {
    background: var(--ry-blue-soft);
    color: var(--ry-blue);
}

.ry-dashboard .quick-purple {
    background: var(--ry-purple-soft);
    color: var(--ry-purple);
}

.ry-dashboard .quick-orange {
    background: var(--ry-orange-soft);
    color: var(--ry-orange);
}

.ry-dashboard .ry-quick-card:hover {
    border-color: var(--ry-green);
    color: var(--ry-text);
    transform: translateY(-3px);
}

/* ---------- Tests ---------- */
.ry-dashboard .ry-test-item {
    background: var(--ry-surface-soft);
    border: 1px solid var(--ry-border);
    border-radius: 15px;
}

.ry-dashboard .ry-test-icon {
    background: var(--ry-green-soft);
    color: var(--ry-green);
}

.ry-dashboard .ry-test-info strong {
    color: var(--ry-text);
}

.ry-dashboard .ry-test-info span {
    color: var(--ry-muted);
}

.ry-dashboard .ry-test-link {
    color: var(--ry-green);
    font-weight: 700;
}

/* ---------- Primary Buttons ---------- */
.ry-dashboard .ry-primary-btn .ry-test-link {
    background: #527b66;
    color: #ffffff !important;
    border: 1px solid #527b66;
    border-radius: 12px;
    font-weight: 700;
}

    .ry-dashboard .ry-primary-btn .ry-test-link:hover {
        background: #3f6652;
        color: #ffffff !important;
    }

html[data-theme="dark"] .ry-dashboard .ry-primary-btn {
    background: #6f9c80;
    border-color: #6f9c80;
    color: #102219 !important;
}

    html[data-theme="dark"] .ry-dashboard .ry-primary-btn:hover {
        background: #8bb69a;
        border-color: #8bb69a;
        color: #102219 !important;
    }

/* ---------- Footer Quote ---------- */
.ry-dashboard .ry-footer-quote {
    background: var(--ry-surface);
    border: 1px solid var(--ry-border);
    box-shadow: var(--ry-shadow);
    border-radius: 18px;
    color: var(--ry-text);
}

    .ry-dashboard .ry-footer-quote strong {
        color: var(--ry-text);
    }

    .ry-dashboard .ry-footer-quote p {
        color: var(--ry-muted);
    }

    .ry-dashboard .ry-footer-quote > i {
        color: var(--ry-green);
    }

/* ---------- Links / Icons / General ---------- */
.ry-dashboard a:not(.ry-primary-btn):not(.ry-secondary-btn) {
    transition: color .2s ease, background .2s ease;
}

.ry-dashboard i {
    line-height: 1;
}

html[data-theme="dark"] .ry-dashboard .ry-stat-card:hover,
html[data-theme="dark"] .ry-dashboard .ry-quick-card:hover {
    background: #2c4035;
}

@media (max-width: 768px) {
    .ry-dashboard {
        padding: 16px 0 30px;
    }

        .ry-dashboard .ry-header {
            padding: 12px 14px;
        }

        .ry-dashboard .ry-panel {
            border-radius: 17px;
        }
}

/* =========================================
   Quick Access - Dark Mode Fix
========================================= */

html[data-theme="dark"] .ry-dashboard .ry-quick-section {
    background: transparent !important;
    color: #edf3ef !important;
}

    html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-section-heading {
        background: transparent !important;
        color: #edf3ef !important;
    }

        html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-section-heading h2 {
            color: #edf3ef !important;
        }

        html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-section-heading p {
            color: #b8c9bf !important;
        }

        html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-section-heading > i {
            color: #a3c8ae !important;
        }

    /* Quick Access Cards */
    html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-quick-card {
        background: #26382e !important;
        border: 1px solid #405749 !important;
        color: #edf3ef !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .18) !important;
    }

        html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-quick-card strong {
            color: #edf3ef !important;
        }

        html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-quick-card span {
            color: #b8c9bf !important;
        }

        html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-quick-card .ry-quick-arrow {
            color: #a3c8ae !important;
        }

    /* Card Icons */
    html[data-theme="dark"] .ry-dashboard .ry-quick-section .quick-green {
        background: #344f3e !important;
        color: #b6d9bf !important;
    }

    html[data-theme="dark"] .ry-dashboard .ry-quick-section .quick-blue {
        background: #304653 !important;
        color: #b5d5e6 !important;
    }

    html[data-theme="dark"] .ry-dashboard .ry-quick-section .quick-purple {
        background: #443a56 !important;
        color: #d1c1ed !important;
    }

    html[data-theme="dark"] .ry-dashboard .ry-quick-section .quick-orange {
        background: #51402f !important;
        color: #f0c99c !important;
    }

    /* Hover */
    html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-quick-card:hover {
        background: #304539 !important;
        border-color: #83ad98 !important;
        transform: translateY(-3px);
    }

        html[data-theme="dark"] .ry-dashboard .ry-quick-section .ry-quick-card:hover strong {
            color: #ffffff !important;
        }


/* ==========================================
   Client Appointments - Dark & Light Theme
========================================== */

/* Light Theme Variables */
.client-appointments {
    --ca-bg: #f5f8f6;
    --ca-surface: #ffffff;
    --ca-surface-soft: #f0f5f1;
    --ca-text: #2e4036;
    --ca-text-secondary: #586b60;
    --ca-muted: #7b8980;
    --ca-border: #dfe8e1;
    --ca-green: #557d66;
    --ca-green-soft: #e6f0e9;
    --ca-blue: #547e98;
    --ca-blue-soft: #e8f0f5;
    --ca-purple: #8170a5;
    --ca-purple-soft: #f0ecf7;
    --ca-orange: #bd8952;
    --ca-orange-soft: #f8efe5;
    --ca-shadow: 0 8px 25px rgba(35, 65, 49, .06);
    background: var(--ca-bg);
    color: var(--ca-text);
    min-height: 100vh;
    padding: 35px 0 50px;
    transition: background .25s ease, color .25s ease;
}

    .client-appointments,
    .client-appointments * {
        box-sizing: border-box;
    }

/* Dark Theme Variables */
html[data-theme="dark"] .client-appointments {
    --ca-bg: #17221d;
    --ca-surface: #25352c;
    --ca-surface-soft: #2d4035;
    --ca-text: #edf3ef;
    --ca-text-secondary: #cedbd2;
    --ca-muted: #aabbb0;
    --ca-border: #43594b;
    --ca-green: #a7ceb3;
    --ca-green-soft: #354e3e;
    --ca-blue: #acd0e3;
    --ca-blue-soft: #314b59;
    --ca-purple: #c8b8e5;
    --ca-purple-soft: #473d59;
    --ca-orange: #edc397;
    --ca-orange-soft: #51402f;
    --ca-shadow: 0 8px 25px rgba(0, 0, 0, .2);
    background: var(--ca-bg);
    color: var(--ca-text);
}

.client-appointments a {
    text-decoration: none;
}

/* Intro */
.client-appointments .ca-intro {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 22px;
    padding: 28px 32px;
    box-shadow: var(--ca-shadow);
}

    .client-appointments .ca-intro h1 {
        color: var(--ca-text);
    }

    .client-appointments .ca-intro p {
        color: var(--ca-text-secondary);
    }

.client-appointments .ca-eyebrow {
    color: var(--ca-green);
    font-weight: 700;
}

.client-appointments .ca-intro-icon {
    color: var(--ca-green);
}

/* Statistics */
.client-appointments .ca-stat-card {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 17px;
    box-shadow: var(--ca-shadow);
    color: var(--ca-text);
}

    .client-appointments .ca-stat-card span {
        color: var(--ca-muted);
    }

    .client-appointments .ca-stat-card strong {
        color: var(--ca-text);
    }

.client-appointments .ca-stat-icon.stat-green {
    background: var(--ca-green-soft);
    color: var(--ca-green);
}

.client-appointments .ca-stat-icon.stat-blue {
    background: var(--ca-blue-soft);
    color: var(--ca-blue);
}

.client-appointments .ca-stat-icon.stat-purple {
    background: var(--ca-purple-soft);
    color: var(--ca-purple);
}

.client-appointments .ca-stat-icon.stat-orange {
    background: var(--ca-orange-soft);
    color: var(--ca-orange);
}

/* Main Panel */
.client-appointments .ca-panel {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 22px;
    box-shadow: var(--ca-shadow);
    color: var(--ca-text);
}

.client-appointments .ca-panel-header h2 {
    color: var(--ca-text);
}

.client-appointments .ca-panel-header p {
    color: var(--ca-muted);
}

.client-appointments .ca-header-icon {
    background: var(--ca-green-soft);
    color: var(--ca-green);
}

/* Filters */
.client-appointments .ca-filter {
    background: var(--ca-surface-soft);
    border: 1px solid var(--ca-border);
    color: var(--ca-text-secondary);
    border-radius: 10px;
}

    .client-appointments .ca-filter:hover {
        border-color: var(--ca-green);
        color: var(--ca-green);
    }

    .client-appointments .ca-filter.active {
        background: var(--ca-green);
        border-color: var(--ca-green);
        color: #ffffff;
    }

/* Search */
.client-appointments .ca-search {
    background: var(--ca-surface-soft);
    border: 1px solid var(--ca-border);
    border-radius: 12px;
}

    .client-appointments .ca-search i {
        color: var(--ca-muted);
    }

    .client-appointments .ca-search input {
        background: transparent;
        color: var(--ca-text);
        border: none;
        outline: none;
    }

        .client-appointments .ca-search input::placeholder {
            color: var(--ca-muted);
            opacity: 1;
        }

    .client-appointments .ca-search button {
        background: var(--ca-green);
        color: #ffffff;
        border: none;
    }

html[data-theme="dark"] .client-appointments .ca-search button {
    background: #6f9c80;
    color: #14251a;
}

/* Appointment Cards */
.client-appointments .ca-appointment-item {
    background: var(--ca-surface-soft);
    border: 1px solid var(--ca-border);
    border-radius: 17px;
    box-shadow: var(--ca-shadow);
    color: var(--ca-text);
}

.client-appointments .ca-appointment-icon {
    background: var(--ca-green-soft);
    color: var(--ca-green);
}

.client-appointments .ca-title-row h3 {
    color: var(--ca-text);
}

.client-appointments .ca-details {
    color: var(--ca-text-secondary);
}

    .client-appointments .ca-details span {
        color: var(--ca-text-secondary);
    }

    .client-appointments .ca-details i {
        color: var(--ca-green);
    }

.client-appointments .ca-description {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    color: var(--ca-text-secondary);
    border-radius: 10px;
}

    .client-appointments .ca-description i {
        color: var(--ca-green);
    }

.client-appointments .ca-appointment-side {
    border-right: 1px solid var(--ca-border);
}

.client-appointments .ca-date-label {
    color: var(--ca-muted);
}

.client-appointments .ca-appointment-side strong {
    color: var(--ca-text);
}

/* Appointment Statuses */
.client-appointments .ca-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 30px;
    padding: 7px 12px;
    font-size: .8rem;
    font-weight: 700;
}

.client-appointments .status-pending {
    background: #fff0cf;
    color: #805500;
}

.client-appointments .status-confirmed {
    background: #d9f1df;
    color: #205c35;
}

.client-appointments .status-cancelled {
    background: #f9e1e1;
    color: #9b3333;
}

.client-appointments .status-completed {
    background: #dceafa;
    color: #285b8b;
}

html[data-theme="dark"] .client-appointments .status-pending {
    background: #59451f;
    color: #ffe2a0;
}

html[data-theme="dark"] .client-appointments .status-confirmed {
    background: #244d36;
    color: #b7ebc7;
}

html[data-theme="dark"] .client-appointments .status-cancelled {
    background: #542f34;
    color: #ffc0c0;
}

html[data-theme="dark"] .client-appointments .status-completed {
    background: #29465c;
    color: #b9ddfa;
}

/* Pagination */
.client-appointments .ca-pagination {
    color: var(--ca-text);
}

.client-appointments .ca-page-btn,
.client-appointments .ca-page-number {
    background: var(--ca-surface-soft);
    border: 1px solid var(--ca-border);
    color: var(--ca-text-secondary);
    border-radius: 10px;
}

    .client-appointments .ca-page-btn:hover,
    .client-appointments .ca-page-number:hover {
        background: var(--ca-green-soft);
        border-color: var(--ca-green);
        color: var(--ca-green);
    }

    .client-appointments .ca-page-number.active {
        background: var(--ca-green);
        border-color: var(--ca-green);
        color: #ffffff;
    }

    .client-appointments .ca-page-btn.disabled {
        opacity: .4;
        pointer-events: none;
    }

.client-appointments .ca-pagination-info {
    color: var(--ca-muted);
}

/* Empty State */
.client-appointments .ca-empty {
    color: var(--ca-text-secondary);
}

    .client-appointments .ca-empty h3 {
        color: var(--ca-text);
    }

    .client-appointments .ca-empty p {
        color: var(--ca-muted);
    }

.client-appointments .ca-empty-icon {
    background: var(--ca-green-soft);
    color: var(--ca-green);
}

/* Primary Button */
.client-appointments .ca-primary-btn {
    background: #527b66;
    border: 1px solid #527b66;
    color: #ffffff !important;
    border-radius: 12px;
}

    .client-appointments .ca-primary-btn:hover {
        background: #3f6652;
        color: #ffffff !important;
    }

html[data-theme="dark"] .client-appointments .ca-primary-btn {
    background: #6f9c80;
    border-color: #6f9c80;
    color: #14251a !important;
}

    html[data-theme="dark"] .client-appointments .ca-primary-btn:hover {
        background: #8bb69a;
        border-color: #8bb69a;
        color: #14251a !important;
    }

/* Footer */
.client-appointments .ca-footer {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 18px;
    box-shadow: var(--ca-shadow);
    color: var(--ca-text);
}

    .client-appointments .ca-footer strong {
        color: var(--ca-text);
    }

    .client-appointments .ca-footer p {
        color: var(--ca-muted);
    }

    .client-appointments .ca-footer > i {
        color: var(--ca-green);
    }

/* General Hover */
.client-appointments .ca-appointment-item,
.client-appointments .ca-stat-card {
    transition: background .2s ease, border-color .2s ease;
}

html[data-theme="dark"] .client-appointments .ca-appointment-item:hover {
    background: #34483b;
    border-color: #668675;
}

/* Responsive */
@media (max-width: 768px) {
    .client-appointments {
        padding: 20px 0 35px;
    }

        .client-appointments .ca-intro {
            padding: 22px 18px;
        }

        .client-appointments .ca-panel {
            border-radius: 16px;
        }
}