/* ============================================
   SKELLIA — Premium Clinic Skin v1
   Design-only overlay. Disable this file or open ?skin=classic to return to the previous UI.
   ============================================ */

:root,
body.light-theme {
    --premium-navy-950: #07111f;
    --premium-navy-900: #0b1424;
    --premium-navy-800: #15233a;
    --premium-blue: #2563eb;
    --premium-cyan: #0ea5a4;
    --premium-mint: #10b981;
    --premium-gold: #d7a03a;
    --premium-bg: #f3f7fb;
    --premium-card: rgba(255, 255, 255, 0.92);
    --premium-card-solid: #ffffff;
    --premium-border: #dbe7f3;
    --premium-border-strong: #c4d3e4;
    --premium-text: #0f1f35;
    --premium-muted: #5f7189;
    --premium-soft: #8b9aae;
    --premium-shadow-xs: 0 1px 2px rgba(15, 31, 53, 0.04);
    --premium-shadow-sm: 0 10px 24px rgba(15, 31, 53, 0.07);
    --premium-shadow-md: 0 18px 46px rgba(15, 31, 53, 0.11);
    --premium-shadow-lg: 0 28px 74px rgba(15, 31, 53, 0.16);
    --premium-ring: 0 0 0 4px rgba(37, 99, 235, 0.13);

    --app-bg: var(--premium-bg);
    --page-container-bg: var(--premium-bg);
    --sidebar-bg: var(--premium-navy-950);
    --topbar-bg: rgba(255, 255, 255, 0.88);
    --card-bg: var(--premium-card-solid);
    --glass-bg: var(--premium-card);
    --glass-bg-strong: var(--premium-card-solid);
    --glass-border: var(--premium-border);
    --glass-border-strong: var(--premium-border-strong);
    --border-default: var(--premium-border);
    --border-muted: #e9f0f7;
    --border-subtle: #f4f8fc;
    --surface-0: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #f7fbff;
    --surface-3: #eef5fb;
    --surface-4: #e2ecf6;
    --surface-secondary: #f7fbff;
    --text-primary: var(--premium-text);
    --text-secondary: var(--premium-muted);
    --text-tertiary: var(--premium-soft);
    --text-muted: #a8b6c7;
    --brand-blue: var(--premium-blue);
    --brand-blue-light: #4f8ff7;
    --brand-blue-dark: #1d4ed8;
    --brand-blue-subtle: #eaf2ff;
    --brand-teal: var(--premium-cyan);
    --brand-mint: var(--premium-mint);
    --brand-gold: var(--premium-gold);
    --brand-gold-dark: #b97a16;
    --success: #059669;
    --success-bg: #e9fbf4;
    --warning: #b7791f;
    --warning-bg: #fff7e8;
    --danger: #dc2626;
    --danger-bg: #fff1f2;
    --info: var(--premium-blue);
    --info-bg: #eaf2ff;
    --input-bg: #ffffff;
    --input-border: #cfdeed;
    --shadow-sm: var(--premium-shadow-xs);
    --shadow-md: var(--premium-shadow-sm);
    --shadow-lg: var(--premium-shadow-md);
    --shadow-xl: var(--premium-shadow-lg);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-card: 18px;
    --radius-btn: 13px;
    --radius-input: 13px;
    --header-height: 68px;
    --sidebar-width: 252px;
}

html[data-skin="premium"],
html[data-skin="premium"] body {
    background: var(--premium-bg);
}

html[data-skin="premium"] body.light-theme,
html[data-skin="premium"] body.light-theme .app-container,
html[data-skin="premium"] body.light-theme .main-content {
    background:
        radial-gradient(circle at 28% -14%, rgba(37, 99, 235, 0.14), transparent 34%),
        radial-gradient(circle at 96% 4%, rgba(14, 165, 164, 0.12), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, var(--premium-bg) 310px, #eef4fa 100%);
    color: var(--premium-text);
}

html[data-skin="premium"] body.light-theme {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

html[data-skin="premium"] body.light-theme .page-container {
    background: transparent;
    padding: 28px clamp(18px, 2.15vw, 34px) 34px;
}

/* Sidebar: serious clinic cockpit */
html[data-skin="premium"] body.light-theme .sidebar {
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.12), transparent 270px),
        radial-gradient(circle at 22px 28px, rgba(14, 165, 164, 0.28), transparent 125px),
        linear-gradient(180deg, var(--premium-navy-950) 0%, #08101d 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 20px 0 52px rgba(7, 17, 31, 0.19);
    width: var(--sidebar-width);
}

html[data-skin="premium"] body.light-theme .sidebar::before {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.24), rgba(14, 165, 164, 0.08) 58%, transparent 100%),
        radial-gradient(circle at 18% 8%, rgba(125, 211, 252, 0.16), transparent 32%);
    height: 260px;
}

html[data-skin="premium"] body.light-theme .sidebar-header {
    padding: 14px 12px 12px;
}

html[data-skin="premium"] body.light-theme .logo {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    min-height: 78px;
    padding: 12px 50px 12px 12px;
}

html[data-skin="premium"] body.light-theme .logo-icon,
html[data-skin="premium"] body.light-theme .user-avatar {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5a4 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 28px rgba(14, 165, 164, 0.22);
}

html[data-skin="premium"] body.light-theme .logo-title,
html[data-skin="premium"] body.light-theme .app-name {
    color: #f8fbff;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -0.02em;
}

html[data-skin="premium"] body.light-theme .logo-subtitle,
html[data-skin="premium"] body.light-theme .app-subtitle {
    color: #aebdd1;
    font-size: 9.5px;
    letter-spacing: 0.13em;
}

html[data-skin="premium"] body.light-theme .sidebar-nav {
    gap: 5px;
    padding: 8px 10px 14px;
}

html[data-skin="premium"] body.light-theme .nav-item {
    border-radius: 14px;
    color: #b5c1d2;
    font-weight: 650;
    gap: 11px;
    min-height: 44px;
    padding: 0 12px;
}

html[data-skin="premium"] body.light-theme .nav-item .nav-icon {
    color: #8fa1ba;
    height: 20px;
    stroke-width: 1.85;
    width: 20px;
}

html[data-skin="premium"] body.light-theme .nav-item:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

html[data-skin="premium"] body.light-theme .nav-item:hover .nav-icon {
    color: #dbeafe;
}

html[data-skin="premium"] body.light-theme .nav-item.active {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5a4 100%);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.31), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

html[data-skin="premium"] body.light-theme .nav-badge {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

html[data-skin="premium"] body.light-theme .sidebar-footer {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    margin: 12px 10px 16px 10px !important;
    padding: 10px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

html[data-skin="premium"] body:not(.light-theme) .sidebar-footer {
    background: #202329 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    margin: 12px 10px 16px 10px !important;
    padding: 10px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html[data-skin="premium"] .user-profile {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

html[data-skin="premium"] .user-avatar {
    height: 38px !important;
    width: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}

html[data-skin="premium"] .user-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

html[data-skin="premium"] body.light-theme .user-profile .user-name {
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html[data-skin="premium"] body.light-theme .user-profile .user-role {
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html[data-skin="premium"] body:not(.light-theme) .user-profile .user-name {
    color: #f1f5f9 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html[data-skin="premium"] body:not(.light-theme) .user-profile .user-role {
    color: #94a3b8 !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html[data-skin="premium"] body.light-theme .btn-logout {
    align-items: center !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 10px !important;
    color: #ef4444 !important;
    display: flex !important;
    height: 36px !important;
    width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

html[data-skin="premium"] body.light-theme .btn-logout:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

html[data-skin="premium"] body:not(.light-theme) .btn-logout {
    align-items: center !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 10px !important;
    color: #fca5a5 !important;
    display: flex !important;
    height: 36px !important;
    width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

html[data-skin="premium"] body:not(.light-theme) .btn-logout:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

html[data-skin="premium"] .btn-logout::before {
    content: '' !important;
    width: 20px !important;
    height: 20px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Responsive collapsed state footer overrides */
html[data-skin="premium"] body.light-theme .sidebar.collapsed .sidebar-footer,
html[data-skin="premium"] body:not(.light-theme) .sidebar.collapsed .sidebar-footer {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 4px !important;
    margin: 8px 4px !important;
}

html[data-skin="premium"] body.light-theme .sidebar.collapsed .btn-logout,
html[data-skin="premium"] body:not(.light-theme) .sidebar.collapsed .btn-logout {
    height: 34px !important;
    width: 34px !important;
    padding: 0 !important;
}

/* Header */
html[data-skin="premium"] body.light-theme .header {
    background: rgba(255, 255, 255, 0.84);
    border-bottom: 1px solid rgba(207, 222, 237, 0.74);
    box-shadow: 0 16px 36px rgba(15, 31, 53, 0.07);
    height: var(--header-height);
    padding: 0 clamp(18px, 2vw, 30px);
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    html[data-skin="premium"] body.light-theme .header,
    html[data-skin="premium"] body.light-theme .modal-content,
    html[data-skin="premium"] body.light-theme .card,
    html[data-skin="premium"] body.light-theme .stat-card,
    html[data-skin="premium"] body.light-theme .finance-stat-card,
    html[data-skin="premium"] body.light-theme .chart-card,
    html[data-skin="premium"] body.light-theme .settings-card {
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
}

html[data-skin="premium"] body.light-theme .search-box {
    max-width: 580px;
}

html[data-skin="premium"] body.light-theme .search-input,
html[data-skin="premium"] body.light-theme .patients-search-input,
html[data-skin="premium"] body.light-theme .form-input,
html[data-skin="premium"] body.light-theme .form-select,
html[data-skin="premium"] body.light-theme .form-textarea,
html[data-skin="premium"] body.light-theme input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="premium"] body.light-theme select,
html[data-skin="premium"] body.light-theme textarea {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-input);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 1px 2px rgba(15, 31, 53, 0.03);
    color: var(--text-primary);
}

html[data-skin="premium"] body.light-theme .search-input:focus,
html[data-skin="premium"] body.light-theme .patients-search-input:focus,
html[data-skin="premium"] body.light-theme .form-input:focus,
html[data-skin="premium"] body.light-theme .form-select:focus,
html[data-skin="premium"] body.light-theme .form-textarea:focus,
html[data-skin="premium"] body.light-theme input:focus,
html[data-skin="premium"] body.light-theme select:focus,
html[data-skin="premium"] body.light-theme textarea:focus {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: var(--premium-ring);
    outline: none;
}

html[data-skin="premium"] body.light-theme .header-date,
html[data-skin="premium"] body.light-theme .notification-btn,
html[data-skin="premium"] body.light-theme .mobile-menu-btn,
html[data-skin="premium"] body.light-theme .back-admin-btn {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--premium-border);
    border-radius: 14px;
    box-shadow: var(--premium-shadow-xs);
    color: var(--premium-muted);
}

html[data-skin="premium"] body.light-theme .header-date:hover,
html[data-skin="premium"] body.light-theme .notification-btn:hover,
html[data-skin="premium"] body.light-theme .mobile-menu-btn:hover,
html[data-skin="premium"] body.light-theme .back-admin-btn:hover {
    background: #ffffff;
    border-color: #bfd0e4;
    color: var(--premium-blue);
    box-shadow: var(--premium-shadow-sm);
}

/* Typography */
html[data-skin="premium"] .page-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--premium-border) !important;
    box-shadow: none !important;
    padding: 0 0 16px 0 !important;
    margin-bottom: 28px !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

@media (max-width: 900px) {
    html[data-skin="premium"] .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
}

html[data-skin="premium"] .page-title,
html[data-skin="premium"] .page-title h1,
html[data-skin="premium"] .page-header-title,
html[data-skin="premium"] .section-title,
html[data-skin="premium"] h1 {
    color: var(--premium-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

html[data-skin="premium"] .page-subtitle,
html[data-skin="premium"] .section-subtitle {
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    font-size: 14px !important;
    margin-top: 4px !important;
}

html[data-skin="premium"] body.light-theme .page-title,
html[data-skin="premium"] body.light-theme .page-title h1 {
    font-size: clamp(25px, 2.2vw, 34px);
}

html[data-skin="premium"] body.light-theme .page-subtitle,
html[data-skin="premium"] body.light-theme .section-subtitle,
html[data-skin="premium"] body.light-theme .text-secondary {
    color: var(--premium-muted);
}

/* Buttons */
html[data-skin="premium"] body.light-theme .btn,
html[data-skin="premium"] body.light-theme button {
    letter-spacing: -0.005em;
}

html[data-skin="premium"] body.light-theme .quick-add-btn,
html[data-skin="premium"] body.light-theme .btn-primary,
html[data-skin="premium"] body.light-theme .btn-success {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5a4 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-btn);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
    color: #ffffff;
    font-weight: 750;
}

html[data-skin="premium"] body.light-theme .quick-add-btn:hover,
html[data-skin="premium"] body.light-theme .btn-primary:hover:not(:disabled),
html[data-skin="premium"] body.light-theme .btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8 0%, #0b8f8d 100%);
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.31);
    transform: translateY(-1px);
}

html[data-skin="premium"] body.light-theme .btn-secondary,
html[data-skin="premium"] body.light-theme .btn-ghost {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--premium-border);
    border-radius: var(--radius-btn);
    color: var(--premium-muted);
}

html[data-skin="premium"] body.light-theme .btn-secondary:hover:not(:disabled),
html[data-skin="premium"] body.light-theme .btn-ghost:hover:not(:disabled) {
    background: #ffffff;
    border-color: #bfd0e4;
    color: var(--premium-blue);
    box-shadow: var(--premium-shadow-sm);
}

html[data-skin="premium"] body.light-theme .btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef6461);
    border-radius: var(--radius-btn);
}

/* Cards / panels */
html[data-skin="premium"] body.light-theme .card,
html[data-skin="premium"] body.light-theme .stat-card,
html[data-skin="premium"] body.light-theme .dashboard-card,
html[data-skin="premium"] body.light-theme .admin-stat-card,
html[data-skin="premium"] body.light-theme .admin-section,
html[data-skin="premium"] body.light-theme .clinic-card,
html[data-skin="premium"] body.light-theme .patient-card,
html[data-skin="premium"] body.light-theme .invoice-card,
html[data-skin="premium"] body.light-theme .supply-card,
html[data-skin="premium"] body.light-theme .supplier-card,
html[data-skin="premium"] body.light-theme .settings-card,
html[data-skin="premium"] body.light-theme .settings-section,
html[data-skin="premium"] body.light-theme .finance-card,
html[data-skin="premium"] body.light-theme .chart-card,
html[data-skin="premium"] body.light-theme .ranking-card,
html[data-skin="premium"] body.light-theme .activity-card,
html[data-skin="premium"] body.light-theme .profile-patient-banner,
html[data-skin="premium"] body.light-theme .profile-tabs-bar,
html[data-skin="premium"] body.light-theme .profile-content-card,
html[data-skin="premium"] body.light-theme .orthodontic-card,
html[data-skin="premium"] body.light-theme .ortho-stat-card,
html[data-skin="premium"] body.light-theme .appointment-card,
html[data-skin="premium"] body.light-theme .appointment-list-card,
html[data-skin="premium"] body.light-theme .calendar-container,
html[data-skin="premium"] body.light-theme .table-container,
html[data-skin="premium"] body.light-theme .modal-content,
html[data-skin="premium"] body.light-theme .quick-add-option {
    background: var(--premium-card);
    border: 1px solid rgba(207, 222, 237, 0.9);
    border-radius: var(--radius-card);
    box-shadow: var(--premium-shadow-xs);
}

html[data-skin="premium"] body.light-theme .card:hover,
html[data-skin="premium"] body.light-theme .patient-card:hover,
html[data-skin="premium"] body.light-theme .invoice-card:hover,
html[data-skin="premium"] body.light-theme .supply-card:hover,
html[data-skin="premium"] body.light-theme .supplier-card:hover,
html[data-skin="premium"] body.light-theme .clinic-card:hover,
html[data-skin="premium"] body.light-theme .quick-add-option:hover,
html[data-skin="premium"] body.light-theme .orthodontic-card:hover,
html[data-skin="premium"] body.light-theme .appointment-card:hover {
    border-color: rgba(156, 181, 209, 0.9);
    box-shadow: var(--premium-shadow-sm);
    transform: translateY(-2px);
}

html[data-skin="premium"] body.light-theme .card-header,
html[data-skin="premium"] body.light-theme .card-footer,
html[data-skin="premium"] body.light-theme .modal-header,
html[data-skin="premium"] body.light-theme .table-header,
html[data-skin="premium"] body.light-theme .settings-section-header {
    border-color: rgba(219, 231, 243, 0.86);
}

html[data-skin="premium"] body.light-theme .card-title,
html[data-skin="premium"] body.light-theme .dashboard-card h3,
html[data-skin="premium"] body.light-theme .chart-card h3,
html[data-skin="premium"] body.light-theme .finance-card h3,
html[data-skin="premium"] body.light-theme .settings-card h3 {
    color: var(--premium-text);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* KPI cards */
html[data-skin="premium"] body.light-theme .dashboard-grid,
html[data-skin="premium"] body.light-theme .finance-stats-grid,
html[data-skin="premium"] body.light-theme .stats-kpi-grid,
html[data-skin="premium"] body.light-theme .stats-grid {
    gap: 18px;
}

html[data-skin="premium"] body.light-theme .stat-card,
html[data-skin="premium"] body.light-theme .finance-stat-card,
html[data-skin="premium"] body.light-theme .stat-card-premium,
html[data-skin="premium"] body.light-theme .admin-stat-card,
html[data-skin="premium"] body.light-theme .ortho-stat-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.91)),
        var(--premium-card-solid);
    min-height: 122px;
    overflow: hidden;
    padding: 19px;
    position: relative;
}

html[data-skin="premium"] body.light-theme .stat-card::before,
html[data-skin="premium"] body.light-theme .finance-stat-card::before,
html[data-skin="premium"] body.light-theme .stat-card-premium::before,
html[data-skin="premium"] body.light-theme .admin-stat-card::before {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(14, 165, 164, 0.08));
    border-radius: inherit;
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 180ms ease;
}

html[data-skin="premium"] body.light-theme .stat-card:hover::before,
html[data-skin="premium"] body.light-theme .finance-stat-card:hover::before,
html[data-skin="premium"] body.light-theme .stat-card-premium:hover::before,
html[data-skin="premium"] body.light-theme .admin-stat-card:hover::before {
    opacity: 1;
}

html[data-skin="premium"] body.light-theme .stat-icon,
html[data-skin="premium"] body.light-theme .finance-stat-icon,
html[data-skin="premium"] body.light-theme .admin-stat-icon,
html[data-skin="premium"] body.light-theme .ortho-stat-icon,
html[data-skin="premium"] body.light-theme .quick-stat-icon,
html[data-skin="premium"] body.light-theme .activity-icon,
html[data-skin="premium"] body.light-theme .popup-icon,
html[data-skin="premium"] body.light-theme .supply-icon {
    align-items: center;
    background: linear-gradient(135deg, #eaf2ff 0%, #e8fbf8 100%);
    border: 1px solid rgba(191, 208, 228, 0.8);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 8px 18px rgba(15, 31, 53, 0.06);
    color: var(--premium-blue);
    display: inline-flex;
    justify-content: center;
}

html[data-skin="premium"] body.light-theme .stat-icon svg,
html[data-skin="premium"] body.light-theme .finance-stat-icon svg,
html[data-skin="premium"] body.light-theme .admin-stat-icon svg,
html[data-skin="premium"] body.light-theme .ortho-stat-icon svg,
html[data-skin="premium"] body.light-theme .quick-stat-icon svg,
html[data-skin="premium"] body.light-theme .activity-icon svg,
html[data-skin="premium"] body.light-theme .popup-icon svg,
html[data-skin="premium"] body.light-theme .supply-icon svg {
    color: currentColor;
    height: 21px;
    stroke-width: 1.9;
    width: 21px;
}

html[data-skin="premium"] body.light-theme .stat-value,
html[data-skin="premium"] body.light-theme .finance-stat-value,
html[data-skin="premium"] body.light-theme .stat-card-premium-value,
html[data-skin="premium"] body.light-theme .quick-stat-value {
    color: var(--premium-text);
    font-weight: 850;
    letter-spacing: -0.045em;
}

html[data-skin="premium"] body.light-theme .stat-label,
html[data-skin="premium"] body.light-theme .finance-stat-label,
html[data-skin="premium"] body.light-theme .stat-card-premium-label,
html[data-skin="premium"] body.light-theme .quick-stat-label {
    color: var(--premium-muted);
    font-weight: 700;
}

html[data-skin="premium"] body.light-theme .finance-stat-card.income,
html[data-skin="premium"] body.light-theme .stat-card-premium.primary {
    border-left: 4px solid var(--premium-blue);
}

html[data-skin="premium"] body.light-theme .finance-stat-card.advances,
html[data-skin="premium"] body.light-theme .stat-card-premium.info {
    border-left: 4px solid var(--premium-cyan) !important;
}

html[data-skin="premium"] body.light-theme .finance-stat-card.expenses,
html[data-skin="premium"] body.light-theme .stat-card-premium.warning {
    border-left: 4px solid var(--premium-gold);
}

html[data-skin="premium"] body.light-theme .finance-stat-card.balance.negative,
html[data-skin="premium"] body.light-theme .finance-stat-card.unpaid.has-unpaid,
html[data-skin="premium"] body.light-theme .stat-card-premium.danger {
    border-left: 4px solid var(--danger);
}

html[data-skin="premium"] body.light-theme .finance-stat-card.balance.positive,
html[data-skin="premium"] body.light-theme .finance-stat-card.unpaid.is-clear,
html[data-skin="premium"] body.light-theme .stat-card-premium.success {
    border-left: 4px solid var(--success);
}

/* Tables */
html[data-skin="premium"] body.light-theme table,
html[data-skin="premium"] body.light-theme .data-table,
html[data-skin="premium"] body.light-theme .patients-table,
html[data-skin="premium"] body.light-theme .payments-table,
html[data-skin="premium"] body.light-theme .settings-table,
html[data-skin="premium"] body.light-theme .stock-table {
    border-collapse: separate;
    border-spacing: 0;
}

html[data-skin="premium"] body.light-theme thead th,
html[data-skin="premium"] body.light-theme .table-head,
html[data-skin="premium"] body.light-theme .patients-table th,
html[data-skin="premium"] body.light-theme .payments-table th,
html[data-skin="premium"] body.light-theme .settings-table th,
html[data-skin="premium"] body.light-theme .stock-table th {
    background: #f4f8fc;
    color: #53667d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

html[data-skin="premium"] body.light-theme tbody tr,
html[data-skin="premium"] body.light-theme .table-row {
    transition: background 160ms ease, transform 160ms ease;
}

html[data-skin="premium"] body.light-theme tbody tr:hover,
html[data-skin="premium"] body.light-theme .table-row:hover {
    background: #f8fbff;
}

/* Tabs */
html[data-skin="premium"] body.light-theme .tabs,
html[data-skin="premium"] body.light-theme .finance-tabs,
html[data-skin="premium"] body.light-theme .patient-tabs,
html[data-skin="premium"] body.light-theme .profile-tabs-bar,
html[data-skin="premium"] body.light-theme .stats-tabs,
html[data-skin="premium"] body.light-theme .settings-sidebar {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(207, 222, 237, 0.86);
    border-radius: 18px;
    box-shadow: var(--premium-shadow-xs);
    padding: 6px;
}

html[data-skin="premium"] body.light-theme .tab,
html[data-skin="premium"] body.light-theme .finance-tab,
html[data-skin="premium"] body.light-theme .patient-tab,
html[data-skin="premium"] body.light-theme .profile-tab,
html[data-skin="premium"] body.light-theme .stats-tab,
html[data-skin="premium"] body.light-theme .settings-tab,
html[data-skin="premium"] body.light-theme .settings-sidebar-item {
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--premium-muted);
    font-weight: 750;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

html[data-skin="premium"] body.light-theme .tab:hover,
html[data-skin="premium"] body.light-theme .finance-tab:hover,
html[data-skin="premium"] body.light-theme .patient-tab:hover,
html[data-skin="premium"] body.light-theme .profile-tab:hover,
html[data-skin="premium"] body.light-theme .stats-tab:hover,
html[data-skin="premium"] body.light-theme .settings-tab:hover,
html[data-skin="premium"] body.light-theme .settings-sidebar-item:hover {
    background: #f2f7fd;
    color: var(--premium-blue);
}

html[data-skin="premium"] body.light-theme .tab.active,
html[data-skin="premium"] body.light-theme .finance-tab.active,
html[data-skin="premium"] body.light-theme .patient-tab.active,
html[data-skin="premium"] body.light-theme .profile-tab.active,
html[data-skin="premium"] body.light-theme .stats-tab.active,
html[data-skin="premium"] body.light-theme .settings-tab.active,
html[data-skin="premium"] body.light-theme .settings-sidebar-item.active {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5a4 100%);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
    color: #ffffff;
}

/* Dashboard */
html[data-skin="premium"] body.light-theme .welcome-section,
html[data-skin="premium"] body.light-theme .dashboard-hero {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.11), rgba(14, 165, 164, 0.08)),
        rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(191, 208, 228, 0.88);
    border-radius: 24px;
    box-shadow: var(--premium-shadow-sm);
}

html[data-skin="premium"] body.light-theme .appointment-time {
    background: linear-gradient(135deg, #eaf2ff 0%, #e8fbf8 100%);
    border: 1px solid #d8e8f6;
}

html[data-skin="premium"] body.light-theme .appointment-hour {
    color: var(--premium-blue);
}

/* Patient profile */
html[data-skin="premium"] body.light-theme .profile-patient-banner {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 251, 255, 0.9)),
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 35%);
    border-radius: 24px;
    padding: clamp(20px, 2.4vw, 30px);
}

html[data-skin="premium"] body.light-theme .profile-patient-banner .avatar,
html[data-skin="premium"] body.light-theme .patient-avatar,
html[data-skin="premium"] body.light-theme .avatar {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5a4 100%);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
    color: #ffffff;
}

html[data-skin="premium"] body.light-theme .patient-card.selected {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.13);
}

/* Statistics: cockpit but contained */
html[data-skin="premium"] body.light-theme .statistics-page .chart-card,
html[data-skin="premium"] body.light-theme .statistics-page .ranking-card,
html[data-skin="premium"] body.light-theme .statistics-page .activity-card,
html[data-skin="premium"] body.light-theme .statistics-page .chart-container {
    overflow: hidden;
}

html[data-skin="premium"] body.light-theme .statistics-page .chart-card,
html[data-skin="premium"] body.light-theme .statistics-page .ranking-card,
html[data-skin="premium"] body.light-theme .statistics-page .activity-card {
    border-radius: 24px;
    padding: clamp(18px, 1.8vw, 26px);
}

html[data-skin="premium"] body.light-theme .chart-canvas-wrapper {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.62), rgba(255, 255, 255, 0));
    border-radius: 18px;
    max-width: 100%;
    overflow: hidden;
}

html[data-skin="premium"] body.light-theme .chart-icon,
html[data-skin="premium"] body.light-theme .chart-no-data-icon {
    align-items: center;
    background: linear-gradient(135deg, #eaf2ff 0%, #e8fbf8 100%);
    border: 1px solid #d8e8f6;
    border-radius: 12px;
    color: var(--premium-blue);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    margin-right: 8px;
    min-width: 34px;
    width: 34px;
}

html[data-skin="premium"] body.light-theme .top-list-item,
html[data-skin="premium"] body.light-theme .ranking-item,
html[data-skin="premium"] body.light-theme .treatment-row,
html[data-skin="premium"] body.light-theme .journal-event {
    border-radius: 15px;
}

/* Finance */
html[data-skin="premium"] body.light-theme .finances-page .finance-content,
html[data-skin="premium"] body.light-theme .finance-content {
    min-width: 0;
}

html[data-skin="premium"] body.light-theme .finance-stat-card {
    cursor: pointer;
}

html[data-skin="premium"] body.light-theme .finance-stat-card:hover {
    border-color: rgba(156, 181, 209, 0.96);
    box-shadow: var(--premium-shadow-sm);
    transform: translateY(-2px);
}

html[data-skin="premium"] body.light-theme .transaction-item,
html[data-skin="premium"] body.light-theme .advance-row,
html[data-skin="premium"] body.light-theme .expense-row,
html[data-skin="premium"] body.light-theme .fixed-charge-item {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(219, 231, 243, 0.9);
    border-radius: 15px;
}

/* Settings/admin */
html[data-skin="premium"] body.light-theme .settings-layout {
    gap: 20px;
}

html[data-skin="premium"] body.light-theme .settings-sidebar {
    align-self: flex-start;
}

html[data-skin="premium"] body.light-theme .admin-dashboard {
    background:
        radial-gradient(circle at 82% -10%, rgba(14, 165, 164, 0.12), transparent 34%),
        var(--premium-bg);
}

/* Admin header background handled in unified rules */

/* Modals / menus */
html[data-skin="premium"] body.light-theme .modal-overlay {
    background: rgba(7, 17, 31, 0.52);
    backdrop-filter: blur(10px);
}

html[data-skin="premium"] body.light-theme .modal-content,
html[data-skin="premium"] body.light-theme .quick-add-menu,
html[data-skin="premium"] body.light-theme .notification-panel {
    border-radius: 24px;
    box-shadow: var(--premium-shadow-lg);
}

html[data-skin="premium"] body.light-theme .modal-close,
html[data-skin="premium"] body.light-theme .btn-dismiss {
    background: #f8fbff;
    border: 1px solid var(--premium-border);
    border-radius: 13px;
    color: var(--premium-muted);
}

html[data-skin="premium"] body.light-theme .modal-close:hover,
html[data-skin="premium"] body.light-theme .btn-dismiss:hover {
    background: var(--danger-bg);
    border-color: #fecdd3;
    color: var(--danger);
}

html[data-skin="premium"] body.light-theme .toast,
html[data-skin="premium"] body.light-theme .sync-status,
html[data-skin="premium"] body.light-theme .pwa-install-banner {
    border: 1px solid rgba(207, 222, 237, 0.9);
    border-radius: 18px;
    box-shadow: var(--premium-shadow-md);
}

/* Empty/placeholder states */
html[data-skin="premium"] body.light-theme .empty-state,
html[data-skin="premium"] body.light-theme .admin-empty-state,
html[data-skin="premium"] body.light-theme .no-data,
html[data-skin="premium"] body.light-theme .empty-message,
html[data-skin="premium"] body.light-theme .chart-no-data {
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.06), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 255, 0.82));
    border: 1px dashed #bfd0e4;
    border-radius: 20px;
    color: var(--premium-muted);
}

/* Badges and statuses */
html[data-skin="premium"] body.light-theme .badge,
html[data-skin="premium"] body.light-theme .status-badge,
html[data-skin="premium"] body.light-theme .appointment-status,
html[data-skin="premium"] body.light-theme .patient-balance,
html[data-skin="premium"] body.light-theme .invoice-status {
    border-radius: 999px;
    font-weight: 780;
}

html[data-skin="premium"] body.light-theme .badge-success,
html[data-skin="premium"] body.light-theme .status-success,
html[data-skin="premium"] body.light-theme .appointment-status.confirmed,
html[data-skin="premium"] body.light-theme .appointment-status.completed {
    background: var(--success-bg);
    color: var(--success);
}

html[data-skin="premium"] body.light-theme .badge-warning,
html[data-skin="premium"] body.light-theme .status-warning,
html[data-skin="premium"] body.light-theme .appointment-status.pending {
    background: var(--warning-bg);
    color: var(--warning);
}

html[data-skin="premium"] body.light-theme .badge-danger,
html[data-skin="premium"] body.light-theme .status-danger,
html[data-skin="premium"] body.light-theme .appointment-status.cancelled {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Visual icon cleanup: emoji containers become sober icon holders when JS injects SVG */
html[data-skin="premium"] body.light-theme .premium-svg-icon {
    font-size: 0 !important;
}

html[data-skin="premium"] body.light-theme .premium-svg-icon svg {
    display: block;
    height: 21px;
    stroke-width: 1.9;
    width: 21px;
}

html[data-skin="premium"] body.light-theme .premium-clean-label {
    letter-spacing: -0.01em;
}

/* Preserve dental chart precision, but modernize the shell */
html[data-skin="premium"] body.light-theme .odontogram-hd,
html[data-skin="premium"] body.light-theme .dental-chart-container,
html[data-skin="premium"] body.light-theme .dental-view-card {
    background: #ffffff;
    border: 1px solid rgba(207, 222, 237, 0.92);
    border-radius: 22px;
    box-shadow: var(--premium-shadow-xs);
}

@media (max-width: 1100px) {
    html[data-skin="premium"] body.light-theme .page-container {
        padding: 20px 16px 28px;
    }

    html[data-skin="premium"] body.light-theme .header {
        padding: 0 16px;
    }
}

@media (max-width: 900px) {
    html[data-skin="premium"] body.light-theme .header {
        min-height: var(--header-height);
    }

    html[data-skin="premium"] body.light-theme .page-header,
    html[data-skin="premium"] body.light-theme .patients-list-header,
    html[data-skin="premium"] body.light-theme .payments-filters,
    html[data-skin="premium"] body.light-theme .stats-filters,
    html[data-skin="premium"] body.light-theme .profile-header-bar {
        align-items: stretch;
        flex-direction: column;
    }

    html[data-skin="premium"] body.light-theme .tabs,
    html[data-skin="premium"] body.light-theme .finance-tabs,
    html[data-skin="premium"] body.light-theme .patient-tabs,
    html[data-skin="premium"] body.light-theme .profile-tabs-bar,
    html[data-skin="premium"] body.light-theme .stats-tabs {
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    html[data-skin="premium"] body.light-theme .page-container {
        padding: 14px 12px 24px;
    }

    html[data-skin="premium"] body.light-theme .card,
    html[data-skin="premium"] body.light-theme .stat-card,
    html[data-skin="premium"] body.light-theme .finance-stat-card,
    html[data-skin="premium"] body.light-theme .modal-content,
    html[data-skin="premium"] body.light-theme .profile-patient-banner {
        border-radius: 16px;
    }
}

/* ============================================
   Palette v2 — inspired by the reference dashboard
   Goal: fewer unrelated colors, one controlled signature gradient.
   ============================================ */

html[data-skin="premium"] {
    --ref-cyan: #15b9c7;
    --ref-blue: #9266f9;
    --ref-violet: #7c3af2;
    --ref-magenta: #ec1c8b;
    --ref-success: #32d08c;
    --ref-danger: #d65b7a;
}

html[data-skin="premium"] body.light-theme {
    --premium-bg: #f4f4f6;
    --premium-card: rgba(255, 255, 255, 0.95);
    --premium-card-solid: #ffffff;
    --premium-border: #e9e9ee;
    --premium-border-strong: #d9d9e0;
    --premium-text: #15151a;
    --premium-muted: #646471;
    --premium-soft: #9a9aa6;
    --premium-ring: 0 0 0 4px rgba(124, 58, 242, 0.14);

    --app-bg: #f4f4f6;
    --page-container-bg: #f4f4f6;
    --topbar-bg: rgba(255, 255, 255, 0.92);
    --card-bg: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-bg-strong: #ffffff;
    --glass-border: var(--premium-border);
    --glass-border-strong: var(--premium-border-strong);
    --border-default: var(--premium-border);
    --border-muted: #e9e9ee;
    --border-subtle: #fbfbfc;
    --surface-0: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #f7f7f9;
    --surface-3: #fbfbfc;
    --surface-4: #d9d9e0;
    --surface-secondary: #f7f7f9;
    --text-primary: var(--premium-text);
    --text-secondary: var(--premium-muted);
    --text-tertiary: var(--premium-soft);
    --text-muted: #646471;
    --brand-blue: #7c3af2;
    --brand-blue-light: #9084ce;
    --brand-blue-dark: #6b2ad6;
    --brand-blue-subtle: rgba(124, 58, 242, 0.08);
    --brand-teal: #0e9aa7;
    --brand-mint: #0e9aa7;
    --brand-gold: #c77e08;
    --brand-gold-dark: #a0650a;
    --success: #0a7882;
    --success-bg: rgba(14, 154, 167, 0.1);
    --warning: #c77e08;
    --warning-bg: rgba(199, 126, 8, 0.1);
    --danger: #d6157a;
    --danger-bg: rgba(214, 21, 122, 0.1);
    --info: #7c3af2;
    --info-bg: rgba(124, 58, 242, 0.1);
    --input-bg: #ffffff;
    --input-border: #e9e9ee;

    --brand-grad: linear-gradient(95deg, #15b9c7 0%, #7c3af2 50%, #ec1c8b 100%);
    --brand-grad-v: linear-gradient(180deg, #15b9c7 0%, #7c3af2 50%, #ec1c8b 100%);
    --ref-gradient: var(--brand-grad);
    --ref-gradient-soft: linear-gradient(135deg, rgba(21, 185, 199, 0.15) 0%, rgba(124, 58, 242, 0.1) 50%, rgba(236, 28, 139, 0.12) 100%);
}

html[data-skin="premium"] body.light-theme,
html[data-skin="premium"] body.light-theme .app-container,
html[data-skin="premium"] body.light-theme .main-content {
    background:
        radial-gradient(circle at 76% -10%, rgba(216, 183, 101, 0.10), transparent 30%),
        radial-gradient(circle at 22% -12%, rgba(35, 199, 216, 0.12), transparent 34%),
        linear-gradient(180deg, #fbf8f2 0%, #f4f1eb 320px, #eee9e1 100%);
}

html[data-skin="premium"] body.light-theme .sidebar {
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(244, 241, 235, 0.96)),
        radial-gradient(circle at 0% 0%, rgba(35, 199, 216, 0.16), transparent 34%);
    border-right: 1px solid #ded7cb;
    box-shadow: 18px 0 45px rgba(69, 61, 52, 0.10);
}

html[data-skin="premium"] body.light-theme .sidebar::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 100%),
        radial-gradient(circle at 18% 8%, rgba(35, 199, 216, 0.12), transparent 35%),
        radial-gradient(circle at 88% 4%, rgba(216, 183, 101, 0.08), transparent 34%);
}

html[data-skin="premium"] body.light-theme .logo,
html[data-skin="premium"] body.light-theme .user-profile {
    background: rgba(255, 253, 248, 0.72);
    border-color: rgba(219, 210, 198, 0.88);
    box-shadow: 0 12px 26px rgba(69, 61, 52, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

html[data-skin="premium"] body.light-theme .logo-title,
html[data-skin="premium"] body.light-theme .app-name,
html[data-skin="premium"] body.light-theme .user-name {
    color: #24262d;
}

html[data-skin="premium"] body.light-theme .logo-subtitle,
html[data-skin="premium"] body.light-theme .app-subtitle,
html[data-skin="premium"] body.light-theme .user-role {
    color: #8b8478;
}

html[data-skin="premium"] body.light-theme .logo-icon,
html[data-skin="premium"] body.light-theme .user-avatar,
html[data-skin="premium"] body.light-theme .quick-add-btn,
html[data-skin="premium"] body.light-theme .btn-primary,
html[data-skin="premium"] body.light-theme .btn-success,
html[data-skin="premium"] body.light-theme .nav-item.active,
html[data-skin="premium"] body.light-theme .tab.active,
html[data-skin="premium"] body.light-theme .finance-tab.active,
html[data-skin="premium"] body.light-theme .patient-tab.active,
html[data-skin="premium"] body.light-theme .profile-tab.active,
html[data-skin="premium"] body.light-theme .stats-tab.active,
html[data-skin="premium"] body.light-theme .settings-tab.active,
html[data-skin="premium"] body.light-theme .settings-sidebar-item.active {
    background: var(--ref-gradient);
}

html[data-skin="premium"] body.light-theme .nav-item {
    color: #706b65;
}

html[data-skin="premium"] body.light-theme .nav-item .nav-icon {
    color: #8e887f;
}

html[data-skin="premium"] body.light-theme .nav-item:hover {
    background: rgba(255, 253, 248, 0.78);
    border-color: rgba(36, 191, 208, 0.18);
    color: #24262d;
}

html[data-skin="premium"] body.light-theme .nav-item:hover .nav-icon {
    color: var(--ref-violet);
}

html[data-skin="premium"] body.light-theme .header {
    background: rgba(255, 253, 248, 0.78);
    border-bottom-color: rgba(222, 215, 203, 0.78);
    box-shadow: 0 14px 35px rgba(69, 61, 52, 0.07);
}

html[data-skin="premium"] body.light-theme .search-input,
html[data-skin="premium"] body.light-theme .patients-search-input,
html[data-skin="premium"] body.light-theme .form-input,
html[data-skin="premium"] body.light-theme .form-select,
html[data-skin="premium"] body.light-theme .form-textarea,
html[data-skin="premium"] body.light-theme input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="premium"] body.light-theme select,
html[data-skin="premium"] body.light-theme textarea,
html[data-skin="premium"] body.light-theme .header-date,
html[data-skin="premium"] body.light-theme .notification-btn,
html[data-skin="premium"] body.light-theme .mobile-menu-btn,
html[data-skin="premium"] body.light-theme .back-admin-btn,
html[data-skin="premium"] body.light-theme .tabs,
html[data-skin="premium"] body.light-theme .finance-tabs,
html[data-skin="premium"] body.light-theme .patient-tabs,
html[data-skin="premium"] body.light-theme .profile-tabs-bar,
html[data-skin="premium"] body.light-theme .stats-tabs,
html[data-skin="premium"] body.light-theme .settings-sidebar {
    background: rgba(255, 253, 248, 0.76);
    border-color: rgba(217, 208, 196, 0.92);
}

html[data-skin="premium"] body.light-theme .card,
html[data-skin="premium"] body.light-theme .stat-card,
html[data-skin="premium"] body.light-theme .dashboard-card,
html[data-skin="premium"] body.light-theme .admin-stat-card,
html[data-skin="premium"] body.light-theme .admin-section,
html[data-skin="premium"] body.light-theme .clinic-card,
html[data-skin="premium"] body.light-theme .patient-card,
html[data-skin="premium"] body.light-theme .invoice-card,
html[data-skin="premium"] body.light-theme .supply-card,
html[data-skin="premium"] body.light-theme .supplier-card,
html[data-skin="premium"] body.light-theme .settings-card,
html[data-skin="premium"] body.light-theme .settings-section,
html[data-skin="premium"] body.light-theme .finance-card,
html[data-skin="premium"] body.light-theme .chart-card,
html[data-skin="premium"] body.light-theme .ranking-card,
html[data-skin="premium"] body.light-theme .activity-card,
html[data-skin="premium"] body.light-theme .profile-patient-banner,
html[data-skin="premium"] body.light-theme .profile-tabs-bar,
html[data-skin="premium"] body.light-theme .profile-content-card,
html[data-skin="premium"] body.light-theme .orthodontic-card,
html[data-skin="premium"] body.light-theme .ortho-stat-card,
html[data-skin="premium"] body.light-theme .appointment-card,
html[data-skin="premium"] body.light-theme .appointment-list-card,
html[data-skin="premium"] body.light-theme .calendar-container,
html[data-skin="premium"] body.light-theme .table-container,
html[data-skin="premium"] body.light-theme .modal-content,
html[data-skin="premium"] body.light-theme .quick-add-option {
    background: rgba(255, 253, 248, 0.86);
    border-color: rgba(222, 215, 203, 0.88);
    box-shadow: 0 12px 32px rgba(69, 61, 52, 0.055);
}

html[data-skin="premium"] body.light-theme .stat-card,
html[data-skin="premium"] body.light-theme .finance-stat-card,
html[data-skin="premium"] body.light-theme .stat-card-premium,
html[data-skin="premium"] body.light-theme .admin-stat-card,
html[data-skin="premium"] body.light-theme .ortho-stat-card {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(248, 244, 237, 0.86));
}

html[data-skin="premium"] body.light-theme .stat-icon,
html[data-skin="premium"] body.light-theme .finance-stat-icon,
html[data-skin="premium"] body.light-theme .admin-stat-icon,
html[data-skin="premium"] body.light-theme .ortho-stat-icon,
html[data-skin="premium"] body.light-theme .quick-stat-icon,
html[data-skin="premium"] body.light-theme .activity-icon,
html[data-skin="premium"] body.light-theme .popup-icon,
html[data-skin="premium"] body.light-theme .supply-icon,
html[data-skin="premium"] body.light-theme .chart-icon,
html[data-skin="premium"] body.light-theme .chart-no-data-icon {
    background: linear-gradient(135deg, rgba(36, 191, 208, 0.12), rgba(74, 143, 227, 0.10) 52%, rgba(216, 183, 101, 0.10));
    border-color: rgba(217, 208, 196, 0.9);
    color: #2f7fbd;
}

html[data-skin="premium"] body.light-theme .finance-stat-card.income,
html[data-skin="premium"] body.light-theme .stat-card-premium.primary,
html[data-skin="premium"] body.light-theme .finance-stat-card.advances,
html[data-skin="premium"] body.light-theme .stat-card-premium.info,
html[data-skin="premium"] body.light-theme .finance-stat-card.expenses,
html[data-skin="premium"] body.light-theme .stat-card-premium.warning,
html[data-skin="premium"] body.light-theme .finance-stat-card.balance.negative,
html[data-skin="premium"] body.light-theme .finance-stat-card.unpaid.has-unpaid,
html[data-skin="premium"] body.light-theme .stat-card-premium.danger,
html[data-skin="premium"] body.light-theme .finance-stat-card.balance.positive,
html[data-skin="premium"] body.light-theme .finance-stat-card.unpaid.is-clear,
html[data-skin="premium"] body.light-theme .stat-card-premium.success {
    border-left-color: transparent;
    border-image: var(--ref-gradient) 1;
}

html[data-skin="premium"] body.light-theme thead th,
html[data-skin="premium"] body.light-theme .table-head,
html[data-skin="premium"] body.light-theme .patients-table th,
html[data-skin="premium"] body.light-theme .payments-table th,
html[data-skin="premium"] body.light-theme .settings-table th,
html[data-skin="premium"] body.light-theme .stock-table th {
    background: rgba(246, 241, 233, 0.86);
    color: #7b746a;
}

html[data-skin="premium"] body.light-theme .welcome-section,
html[data-skin="premium"] body.light-theme .dashboard-hero,
html[data-skin="premium"] body.light-theme .profile-patient-banner {
    background:
        var(--ref-gradient-soft),
        rgba(255, 253, 248, 0.86);
}

/* Dark mode gets the same color identity: graphite surfaces + aqua/blue/champagne accents. */
html[data-skin="premium"] body:not(.light-theme) {
    --premium-bg: #2d3138;
    --premium-card: rgba(88, 92, 101, 0.62);
    --premium-card-solid: #4b5059;
    --premium-border: rgba(255, 255, 255, 0.13);
    --premium-border-strong: rgba(255, 255, 255, 0.22);
    --premium-text: #fbf7ef;
    --premium-muted: #d0c9bd;
    --premium-soft: #a9a39a;
    --premium-ring: 0 0 0 4px rgba(35, 199, 216, 0.18);

    --app-bg: #2d3138;
    --page-container-bg: #2d3138;
    --sidebar-bg: #171c25;
    --topbar-bg: rgba(82, 87, 97, 0.72);
    --card-bg: #4b5059;
    --glass-bg: rgba(88, 92, 101, 0.62);
    --glass-bg-strong: rgba(98, 103, 113, 0.76);
    --glass-border: var(--premium-border);
    --glass-border-strong: var(--premium-border-strong);
    --border-default: var(--premium-border);
    --border-muted: rgba(255, 255, 255, 0.10);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --surface-0: #2d3138;
    --surface-1: #3c414a;
    --surface-2: #494e58;
    --surface-3: #565b66;
    --surface-4: #656b76;
    --surface-secondary: #3c414a;
    --text-primary: var(--premium-text);
    --text-secondary: var(--premium-muted);
    --text-tertiary: var(--premium-soft);
    --text-muted: #878d98;
    --brand-blue: var(--ref-violet);
    --brand-blue-light: #9e8dff;
    --brand-blue-dark: #6b54ed;
    --brand-blue-subtle: rgba(74, 143, 227, 0.16);
    --brand-teal: var(--ref-cyan);
    --brand-mint: var(--ref-cyan);
    --brand-gold: var(--ref-gold);
    --brand-gold-dark: #c59b3e;
    --success: #57e3a1;
    --success-bg: rgba(50, 208, 140, 0.15);
    --warning: #f1cd76;
    --warning-bg: rgba(216, 183, 101, 0.14);
    --danger: #ff86aa;
    --danger-bg: rgba(201, 106, 118, 0.14);
    --info: #85e9f3;
    --info-bg: rgba(35, 199, 216, 0.14);
    --input-bg: rgba(96, 101, 111, 0.66);
    --input-border: rgba(255, 255, 255, 0.14);
}

html[data-skin="premium"] body:not(.light-theme),
html[data-skin="premium"] body:not(.light-theme) .app-container,
html[data-skin="premium"] body:not(.light-theme) .main-content {
    background:
        radial-gradient(circle at 78% -8%, rgba(216, 183, 101, 0.16), transparent 34%),
        radial-gradient(circle at 18% -12%, rgba(35, 199, 216, 0.18), transparent 34%),
        linear-gradient(180deg, #353941 0%, #2d3138 360px, #262b33 100%);
    color: var(--premium-text);
}

html[data-skin="premium"] body:not(.light-theme) .sidebar {
    background: linear-gradient(180deg, #171c25 0%, #10151d 100%);
    border-right-color: rgba(255, 255, 255, 0.10);
    box-shadow: 20px 0 48px rgba(0, 0, 0, 0.24);
}

html[data-skin="premium"] body:not(.light-theme) .header,
html[data-skin="premium"] body:not(.light-theme) .card,
html[data-skin="premium"] body:not(.light-theme) .stat-card,
html[data-skin="premium"] body:not(.light-theme) .dashboard-card,
html[data-skin="premium"] body:not(.light-theme) .finance-stat-card,
html[data-skin="premium"] body:not(.light-theme) .chart-card,
html[data-skin="premium"] body:not(.light-theme) .settings-card,
html[data-skin="premium"] body:not(.light-theme) .modal-content,
html[data-skin="premium"] body:not(.light-theme) .table-container,
html[data-skin="premium"] body:not(.light-theme) .patient-card,
html[data-skin="premium"] body:not(.light-theme) .profile-patient-banner,
html[data-skin="premium"] body:not(.light-theme) .appointment-card {
    background: rgba(88, 92, 101, 0.62);
    border-color: rgba(255, 255, 255, 0.13);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-skin="premium"] body:not(.light-theme) .logo-icon,
html[data-skin="premium"] body:not(.light-theme) .user-avatar,
html[data-skin="premium"] body:not(.light-theme) .quick-add-btn,
html[data-skin="premium"] body:not(.light-theme) .btn-primary,
html[data-skin="premium"] body:not(.light-theme) .nav-item.active,
html[data-skin="premium"] body:not(.light-theme) .tab.active,
html[data-skin="premium"] body:not(.light-theme) .finance-tab.active,
html[data-skin="premium"] body:not(.light-theme) .patient-tab.active,
html[data-skin="premium"] body:not(.light-theme) .profile-tab.active,
html[data-skin="premium"] body:not(.light-theme) .stats-tab.active,
html[data-skin="premium"] body:not(.light-theme) .settings-sidebar-item.active {
    background: var(--ref-gradient);
}

html[data-skin="premium"] body:not(.light-theme) .stat-icon,
html[data-skin="premium"] body:not(.light-theme) .finance-stat-icon,
html[data-skin="premium"] body:not(.light-theme) .chart-icon,
html[data-skin="premium"] body:not(.light-theme) .chart-no-data-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #8feaf3;
}

html[data-skin="premium"] body:not(.light-theme) .search-input,
html[data-skin="premium"] body:not(.light-theme) .form-input,
html[data-skin="premium"] body:not(.light-theme) .form-select,
html[data-skin="premium"] body:not(.light-theme) .form-textarea,
html[data-skin="premium"] body:not(.light-theme) input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="premium"] body:not(.light-theme) select,
html[data-skin="premium"] body:not(.light-theme) textarea {
    background: rgba(96, 101, 111, 0.66);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--premium-text);
}

html[data-skin="premium"] body:not(.light-theme) thead th,
html[data-skin="premium"] body:not(.light-theme) .table-head {
    background: rgba(255, 255, 255, 0.07);
    color: #d8d1c6;
}

/* Login screen follows the same palette instead of the old blue/green identity. */
html[data-skin="premium"] body.light-theme #loginScreen {
    background:
        linear-gradient(120deg, rgba(25, 30, 39, 0.98) 0%, rgba(37, 42, 52, 0.98) 42%, rgba(244, 241, 235, 0.94) 42%, rgba(251, 248, 242, 0.98) 100%),
        radial-gradient(circle at 18% 18%, rgba(35, 199, 216, 0.16), transparent 32%),
        radial-gradient(circle at 78% 22%, rgba(216, 183, 101, 0.12), transparent 32%);
}

html[data-skin="premium"] body.light-theme .login-container {
    background: rgba(255, 253, 248, 0.91);
    border-color: rgba(222, 215, 203, 0.92);
    box-shadow: 0 28px 78px rgba(69, 61, 52, 0.18);
}

html[data-skin="premium"] body.light-theme .login-container::before,
html[data-skin="premium"] body:not(.light-theme) .login-container::before {
    background: var(--ref-gradient);
}

html[data-skin="premium"] body.light-theme .login-title,
html[data-skin="premium"] body:not(.light-theme) .login-title {
    background: var(--ref-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-skin="premium"] body.light-theme .login-logo svg circle,
html[data-skin="premium"] body.light-theme .default-logo-svg circle {
    stroke: var(--ref-cyan);
}

html[data-skin="premium"] body.light-theme .login-logo svg path,
html[data-skin="premium"] body.light-theme .default-logo-svg path {
    stroke: var(--ref-violet);
}

html[data-skin="premium"] body.light-theme .login-form .form-input,
html[data-skin="premium"] body.light-theme .login-form .form-select,
html[data-skin="premium"] body.light-theme .login-form .form-textarea {
    background: rgba(255, 253, 248, 0.90);
    border-color: #d9d0c4;
}

html[data-skin="premium"] body:not(.light-theme) #loginScreen {
    background:
        radial-gradient(circle at 18% 12%, rgba(35, 199, 216, 0.20), transparent 34%),
        radial-gradient(circle at 80% 14%, rgba(216, 183, 101, 0.13), transparent 34%),
        linear-gradient(120deg, #171c25 0%, #252a34 42%, #343943 42%, #2d3138 100%);
}

html[data-skin="premium"] body:not(.light-theme) .login-container {
    background: rgba(72, 77, 87, 0.76);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--premium-text);
}

html[data-skin="premium"] body:not(.light-theme) .login-subtitle,
html[data-skin="premium"] body:not(.light-theme) .login-footer,
html[data-skin="premium"] body:not(.light-theme) .login-divider,
html[data-skin="premium"] body:not(.light-theme) .login-info,
html[data-skin="premium"] body:not(.light-theme) .login-info p {
    color: var(--premium-muted);
}

/* ============================================
   Palette v3 — calmer, no purple/pink glare
   Signature: aqua + clear blue + soft champagne.
   ============================================ */

html[data-skin="premium"] {
    --ref-cyan: #15b9c7;
    --ref-blue: #9266f9;
    --ref-violet: #7c3af2;
    --ref-magenta: #ec1c8b;
    --ref-success: #32d08c;
    --ref-danger: #d65b7a;
}

html[data-skin="premium"] body.light-theme {
    --brand-blue: #3f83d8;
    --brand-blue-light: #62a6eb;
    --brand-blue-dark: #2f6fbd;
    --brand-blue-subtle: #edf6fb;
    --brand-teal: #24bfd0;
    --brand-mint: #24bfd0;
    --brand-gold: #d8b765;
    --info: #3f83d8;
    --info-bg: #edf6fb;
    --premium-ring: 0 0 0 4px rgba(36, 191, 208, 0.14);

    /* Solid color overrides to eliminate multi-color brand gradients on buttons/badges */
    --brand-grad: #3f83d8;
    --brand-grad-v: #3f83d8;
    --ref-gradient: #3f83d8;
    --ref-gradient-soft: rgba(63, 131, 216, 0.08);
}

html[data-skin="premium"] body.light-theme,
html[data-skin="premium"] body.light-theme .app-container,
html[data-skin="premium"] body.light-theme .main-content {
    background:
        radial-gradient(circle at 74% -10%, rgba(216, 183, 101, 0.10), transparent 30%),
        radial-gradient(circle at 22% -12%, rgba(36, 191, 208, 0.12), transparent 34%),
        linear-gradient(180deg, #fbf8f2 0%, #f4f1eb 320px, #eee9e1 100%);
}

html[data-skin="premium"] body.light-theme .logo-icon,
html[data-skin="premium"] body.light-theme .user-avatar,
html[data-skin="premium"] body.light-theme .quick-add-btn,
html[data-skin="premium"] body.light-theme .btn-primary,
html[data-skin="premium"] body.light-theme .btn-success,
html[data-skin="premium"] body.light-theme .nav-item.active,
html[data-skin="premium"] body.light-theme .tab.active,
html[data-skin="premium"] body.light-theme .finance-tab.active,
html[data-skin="premium"] body.light-theme .patient-tab.active,
html[data-skin="premium"] body.light-theme .profile-tab.active,
html[data-skin="premium"] body.light-theme .stats-tab.active,
html[data-skin="premium"] body.light-theme .settings-tab.active,
html[data-skin="premium"] body.light-theme .settings-sidebar-item.active,
html[data-skin="premium"] body:not(.light-theme) .logo-icon,
html[data-skin="premium"] body:not(.light-theme) .user-avatar,
html[data-skin="premium"] body:not(.light-theme) .quick-add-btn,
html[data-skin="premium"] body:not(.light-theme) .btn-primary,
html[data-skin="premium"] body:not(.light-theme) .nav-item.active,
html[data-skin="premium"] body:not(.light-theme) .tab.active,
html[data-skin="premium"] body:not(.light-theme) .finance-tab.active,
html[data-skin="premium"] body:not(.light-theme) .patient-tab.active,
html[data-skin="premium"] body:not(.light-theme) .profile-tab.active,
html[data-skin="premium"] body:not(.light-theme) .stats-tab.active,
html[data-skin="premium"] body:not(.light-theme) .settings-sidebar-item.active {
    background: var(--ref-gradient);
    box-shadow: 0 14px 30px rgba(36, 191, 208, 0.18);
}

html[data-skin="premium"] body.light-theme .quick-add-btn:hover,
html[data-skin="premium"] body.light-theme .btn-primary:hover:not(:disabled),
html[data-skin="premium"] body.light-theme .btn-success:hover:not(:disabled) {
    background: #2f6fbd !important;
    box-shadow: 0 18px 36px rgba(36, 191, 208, 0.22);
}

html[data-skin="premium"] body.light-theme .welcome-section,
html[data-skin="premium"] body.light-theme .dashboard-hero,
html[data-skin="premium"] body.light-theme .profile-patient-banner {
    background:
        linear-gradient(135deg, rgba(36, 191, 208, 0.12), rgba(74, 143, 227, 0.08) 55%, rgba(216, 183, 101, 0.10)),
        rgba(255, 253, 248, 0.88);
}

html[data-skin="premium"] body.light-theme .stat-icon,
html[data-skin="premium"] body.light-theme .finance-stat-icon,
html[data-skin="premium"] body.light-theme .admin-stat-icon,
html[data-skin="premium"] body.light-theme .ortho-stat-icon,
html[data-skin="premium"] body.light-theme .quick-stat-icon,
html[data-skin="premium"] body.light-theme .activity-icon,
html[data-skin="premium"] body.light-theme .popup-icon,
html[data-skin="premium"] body.light-theme .supply-icon,
html[data-skin="premium"] body.light-theme .chart-icon,
html[data-skin="premium"] body.light-theme .chart-no-data-icon {
    background: linear-gradient(135deg, rgba(36, 191, 208, 0.11), rgba(74, 143, 227, 0.08) 60%, rgba(216, 183, 101, 0.10));
    color: #2f7fbd;
}

html[data-skin="premium"] body.light-theme .login-title,
html[data-skin="premium"] body:not(.light-theme) .login-title {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

html[data-skin="premium"] body.light-theme .logo-title,
html[data-skin="premium"] body.light-theme .app-name {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #1e3a8a !important;
    -webkit-text-fill-color: #1e3a8a !important;
    font-weight: 800 !important;
}

html[data-skin="premium"] body:not(.light-theme) .logo-title,
html[data-skin="premium"] body:not(.light-theme) .app-name {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-skin="premium"] body.light-theme .login-logo svg path,
html[data-skin="premium"] body.light-theme .default-logo-svg path {
    stroke: #3f83d8;
}

html[data-skin="premium"] body.light-theme .login-logo svg circle,
html[data-skin="premium"] body.light-theme .default-logo-svg circle {
    stroke: #24bfd0;
}

/* Softer dark mode: graphite, not black. */
html[data-skin="premium"] body:not(.light-theme) {
    --premium-bg: #15161a;
    --premium-card: rgba(28, 29, 34, 0.95);
    --premium-card-solid: #1c1d22;
    --premium-border: #2b2c33;
    --premium-border-strong: #3a3b43;
    --premium-text: #e7e8ec;
    --premium-muted: #93949e;
    --premium-soft: #62636d;
    --app-bg: #15161a;
    --page-container-bg: #15161a;
    --sidebar-bg: #191a1e;
    --topbar-bg: rgba(28, 29, 34, 0.92);
    --card-bg: #1c1d22;
    --glass-bg: rgba(28, 29, 34, 0.85);
    --glass-bg-strong: rgba(28, 29, 34, 0.95);
    --surface-0: #15161a;
    --surface-1: #1c1d22;
    --surface-2: #23242a;
    --surface-3: #191a1e;
    --surface-4: #2b2c33;
    --surface-secondary: #23242a;
    --brand-blue: #9084ce;
    --brand-blue-light: #b4a9e2;
    --brand-blue-dark: #6b2ad6;
    --brand-blue-subtle: rgba(144, 132, 206, 0.08);
    --brand-teal: #48abb4;
    --brand-mint: #48abb4;
    --brand-gold: #cf9f54;
    --success: #79c4cb;
    --success-bg: rgba(72, 171, 180, 0.15);
    --warning: #cf9f54;
    --warning-bg: rgba(207, 159, 84, 0.15);
    --danger: #cc6e9f;
    --danger-bg: rgba(204, 110, 159, 0.15);
    --info: #9084ce;
    --info-bg: rgba(144, 132, 206, 0.15);
    --input-bg: #23242a;
    --input-border: #2b2c33;
    --text-muted: #93949e;

    --brand-grad: linear-gradient(95deg, #15b9c7 0%, #9266f9 50%, #ec1c8b 100%);
    --brand-grad-v: linear-gradient(180deg, #15b9c7 0%, #9266f9 50%, #ec1c8b 100%);
    --ref-gradient: var(--brand-grad);
    --ref-gradient-soft: linear-gradient(135deg, rgba(21, 185, 199, 0.15) 0%, rgba(146, 102, 249, 0.1) 50%, rgba(236, 28, 139, 0.12) 100%);
}

html[data-skin="premium"] body:not(.light-theme),
html[data-skin="premium"] body:not(.light-theme) .app-container,
html[data-skin="premium"] body:not(.light-theme) .main-content {
    background:
        radial-gradient(circle at 78% -8%, rgba(216, 183, 101, 0.14), transparent 34%),
        radial-gradient(circle at 18% -12%, rgba(36, 191, 208, 0.17), transparent 34%),
        linear-gradient(180deg, #4b525b 0%, #3f464d 360px, #373f47 100%);
}

html[data-skin="premium"] body:not(.light-theme) .sidebar {
    background: linear-gradient(180deg, #26313d 0%, #222b35 100%);
    border-right-color: rgba(255, 255, 255, 0.11);
}

html[data-skin="premium"] body:not(.light-theme) .header,
html[data-skin="premium"] body:not(.light-theme) .card,
html[data-skin="premium"] body:not(.light-theme) .stat-card,
html[data-skin="premium"] body:not(.light-theme) .dashboard-card,
html[data-skin="premium"] body:not(.light-theme) .finance-stat-card,
html[data-skin="premium"] body:not(.light-theme) .chart-card,
html[data-skin="premium"] body:not(.light-theme) .settings-card,
html[data-skin="premium"] body:not(.light-theme) .modal-content,
html[data-skin="premium"] body:not(.light-theme) .table-container,
html[data-skin="premium"] body:not(.light-theme) .patient-card,
html[data-skin="premium"] body:not(.light-theme) .profile-patient-banner,
html[data-skin="premium"] body:not(.light-theme) .appointment-card {
    background: rgba(105, 111, 120, 0.58);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html[data-skin="premium"] body:not(.light-theme) .stat-icon,
html[data-skin="premium"] body:not(.light-theme) .finance-stat-icon,
html[data-skin="premium"] body:not(.light-theme) .chart-icon,
html[data-skin="premium"] body:not(.light-theme) .chart-no-data-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #81e2ec;
}

html[data-skin="premium"] body:not(.light-theme) .search-input,
html[data-skin="premium"] body:not(.light-theme) .form-input,
html[data-skin="premium"] body:not(.light-theme) .form-select,
html[data-skin="premium"] body:not(.light-theme) .form-textarea,
html[data-skin="premium"] body:not(.light-theme) input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="premium"] body:not(.light-theme) select,
html[data-skin="premium"] body:not(.light-theme) textarea {
    background: rgba(116, 123, 133, 0.58);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--premium-text);
}

html[data-skin="premium"] body:not(.light-theme) #loginScreen {
    background:
        radial-gradient(circle at 18% 12%, rgba(36, 191, 208, 0.18), transparent 34%),
        radial-gradient(circle at 80% 14%, rgba(216, 183, 101, 0.13), transparent 34%),
        linear-gradient(120deg, #26313d 0%, #3b424b 42%, #4a515a 42%, #3f464d 100%);
}

html[data-skin="premium"] body:not(.light-theme) .login-container {
    background: rgba(105, 111, 120, 0.66);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Palette v3.1 — remove the last violet/magenta glow and soften dark graphite. */
html[data-skin="premium"] body.light-theme #loginScreen {
    background:
        linear-gradient(120deg, rgba(25, 30, 39, 0.98) 0%, rgba(37, 42, 52, 0.98) 42%, rgba(244, 241, 235, 0.94) 42%, rgba(251, 248, 242, 0.98) 100%),
        radial-gradient(circle at 18% 18%, rgba(36, 191, 208, 0.16), transparent 32%),
        radial-gradient(circle at 78% 22%, rgba(216, 183, 101, 0.12), transparent 32%);
}

html[data-skin="premium"] body.light-theme .sidebar::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 100%),
        radial-gradient(circle at 18% 8%, rgba(36, 191, 208, 0.12), transparent 35%),
        radial-gradient(circle at 88% 4%, rgba(216, 183, 101, 0.10), transparent 34%);
}

html[data-skin="premium"] body.light-theme .nav-item:hover {
    border-color: rgba(36, 191, 208, 0.18);
}

html[data-skin="premium"] body:not(.light-theme) {
    --premium-bg: #363a43;
    --premium-card: rgba(32, 35, 41, 0.75);
    --premium-card-solid: #202329;
    --premium-border: rgba(255, 255, 255, 0.08);
    --premium-border-strong: rgba(255, 255, 255, 0.15);
    --premium-muted: #abb2bf;
    --premium-soft: #828997;
    --app-bg: #363a43;
    --page-container-bg: #363a43;
    --sidebar-bg: #1e2026;
    --topbar-bg: rgba(30, 32, 38, 0.85);
    --card-bg: #202329;
    --glass-bg: rgba(32, 35, 41, 0.75);
    --glass-bg-strong: rgba(32, 35, 41, 0.90);
    --surface-0: #363a43;
    --surface-1: #202329;
    --surface-2: #272a32;
    --surface-3: #1a1c21;
    --surface-4: #30343e;
    --surface-secondary: #202329;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --input-bg: #272a32;
    --input-border: rgba(255, 255, 255, 0.12);

    /* Clean vibrant solid colors in dark mode instead of gradients and pastel purple */
    --brand-blue: #3b82f6;
    --brand-blue-light: #60a5fa;
    --brand-blue-dark: #2563eb;
    --brand-blue-subtle: rgba(59, 130, 246, 0.08);
    --brand-teal: #14b8a6;
    --brand-mint: #14b8a6;
    --brand-gold: #eab308;
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.15);

    /* Solid color definitions for ref-gradient in dark mode */
    --brand-grad: #3b82f6;
    --brand-grad-v: #3b82f6;
    --ref-gradient: #3b82f6;
    --ref-gradient-soft: rgba(59, 130, 246, 0.1);
}

html[data-skin="premium"] body:not(.light-theme),
html[data-skin="premium"] body:not(.light-theme) .app-container,
html[data-skin="premium"] body:not(.light-theme) .main-content {
    background:
        radial-gradient(circle at 78% -8%, rgba(59, 130, 246, 0.08), transparent 34%),
        radial-gradient(circle at 18% -12%, rgba(20, 184, 166, 0.08), transparent 34%),
        linear-gradient(180deg, #3f444d 0%, #363a43 360px, #2e3139 100%) !important;
}

html[data-skin="premium"] body:not(.light-theme) .sidebar {
    background: #1e2026 !important;
}

html[data-skin="premium"] body:not(.light-theme) .header,
html[data-skin="premium"] body:not(.light-theme) .card,
html[data-skin="premium"] body:not(.light-theme) .stat-card,
html[data-skin="premium"] body:not(.light-theme) .dashboard-card,
html[data-skin="premium"] body:not(.light-theme) .finance-stat-card,
html[data-skin="premium"] body:not(.light-theme) .chart-card,
html[data-skin="premium"] body:not(.light-theme) .settings-card,
html[data-skin="premium"] body:not(.light-theme) .modal-content,
html[data-skin="premium"] body:not(.light-theme) .table-container,
html[data-skin="premium"] body:not(.light-theme) .patient-card,
html[data-skin="premium"] body:not(.light-theme) .profile-patient-banner,
html[data-skin="premium"] body:not(.light-theme) .appointment-card {
    background: var(--premium-card) !important;
}

html[data-skin="premium"] body:not(.light-theme) .search-input,
html[data-skin="premium"] body:not(.light-theme) .form-input,
html[data-skin="premium"] body:not(.light-theme) .form-select,
html[data-skin="premium"] body:not(.light-theme) .form-textarea,
html[data-skin="premium"] body:not(.light-theme) input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="premium"] body:not(.light-theme) select,
html[data-skin="premium"] body:not(.light-theme) textarea {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--premium-text) !important;
}

html[data-skin="premium"] body:not(.light-theme) #loginScreen {
    background:
        radial-gradient(circle at 18% 12%, rgba(59, 130, 246, 0.12), transparent 34%),
        radial-gradient(circle at 80% 14%, rgba(216, 183, 101, 0.08), transparent 34%),
        linear-gradient(120deg, #1e2026 0%, #2e3139 42%, #3c414a 42%, #363a43 100%) !important;
}

html[data-skin="premium"] body:not(.light-theme) .login-container {
    background: rgba(32, 35, 41, 0.85) !important;
}


/* ============================================
   Super Admin Dashboard fixes (Contrast & readability)
   ============================================ */
/* Admin title and subtitle handled in unified rules */


/* ============================================
   Custom Sidebar Clean Design & Active Navigation overrides (No solid blue capsule)
   ============================================ */
html[data-skin="premium"] body.light-theme .sidebar {
    background: #fbfbfc !important;
    border-right: 1px solid var(--premium-border) !important;
    box-shadow: none !important;
}
html[data-skin="premium"] body:not(.light-theme) .sidebar {
    background: #1e2026 !important;
    border-right: 1px solid var(--premium-border) !important;
    box-shadow: none !important;
}
html[data-skin="premium"] body.light-theme .nav-item.active,
html[data-skin="premium"] body:not(.light-theme) .nav-item.active {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--premium-text) !important;
    box-shadow: none !important;
    border-color: transparent !important;
    font-weight: 600 !important;
}
html[data-skin="premium"] body.light-theme .nav-item.active {
    background: rgba(0, 0, 0, 0.04) !important;
}
html[data-skin="premium"] body.light-theme .nav-item.active .nav-icon,
html[data-skin="premium"] body.light-theme .nav-item.active .nav-text {
    color: #7c3af2 !important; /* Purple active icon & text in light theme */
}
html[data-skin="premium"] body:not(.light-theme) .nav-item.active .nav-icon,
html[data-skin="premium"] body:not(.light-theme) .nav-item.active .nav-text {
    color: #48abb4 !important; /* Teal active icon & text in dark theme */
}
html[data-skin="premium"] .nav-item.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 18px !important;
    background: var(--brand-grad-v) !important;
    border-radius: 2px !important;
}

/* ============================================
   Extra overrides to force solid colors on hover and borders
   ============================================ */
html[data-skin="premium"] body.light-theme .btn-danger {
    background: #dc2626 !important;
}
html[data-skin="premium"] body.light-theme .btn-danger:hover,
html[data-skin="premium"] body:not(.light-theme) .btn-danger:hover {
    background: #b91c1c !important;
}
html[data-skin="premium"] body:not(.light-theme) .quick-add-btn:hover,
html[data-skin="premium"] body:not(.light-theme) .btn-primary:hover:not(:disabled),
html[data-skin="premium"] body:not(.light-theme) .btn-success:hover:not(:disabled) {
    background: #2563eb !important;
    box-shadow: 0 18px 36px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}
html[data-skin="premium"] body.light-theme .finance-stat-card,
html[data-skin="premium"] body.light-theme .stat-card-premium,
html[data-skin="premium"] body:not(.light-theme) .finance-stat-card,
html[data-skin="premium"] body:not(.light-theme) .stat-card-premium {
    border-left-style: solid !important;
    border-image: none !important;
}

/* ============================================
   Logo icon container style to ensure high contrast in both themes
   ============================================ */
html[data-skin="premium"] body.light-theme .logo-icon {
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    box-shadow: none !important;
}

html[data-skin="premium"] body:not(.light-theme) .logo-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}


/* ============================================
   Status indicator dot (online dot) adjustments
   ============================================ */
html[data-skin="premium"] .user-profile::after {
    display: none !important; /* Hide the old offset profile dot */
}

html[data-skin="premium"] .user-avatar {
    position: relative !important;
}

html[data-skin="premium"] .user-avatar::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 10px !important;
    height: 10px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    z-index: 2 !important;
}

html[data-skin="premium"] body.light-theme .user-avatar::after {
    border: 2px solid #f1f5f9 !important; /* Matches footer background in light mode */
}

html[data-skin="premium"] body:not(.light-theme) .user-avatar::after {
    border: 2px solid #202329 !important; /* Matches footer background in dark mode */
}


/* ============================================
   Page title SVG icon adjustments to prevent huge scaling
   ============================================ */
html[data-skin="premium"] .page-title,
html[data-skin="premium"] .page-header-title,
html[data-skin="premium"] .settings-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

html[data-skin="premium"] .page-title svg,
html[data-skin="premium"] .page-header-title svg,
html[data-skin="premium"] .settings-title svg {
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
    stroke-width: 2.2px !important;
    vertical-align: middle !important;
}


/* ============================================
   Super Admin Dashboard Header Refinements (Contrast & Modernization)
   ============================================ */
html[data-skin="premium"] .admin-header {
    background: linear-gradient(135deg, #1e2530 0%, #11151d 100%) !important; /* Premium dark charcoal slate */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 14px 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

html[data-skin="premium"] .admin-brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

html[data-skin="premium"] .admin-logo {
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

html[data-skin="premium"] .admin-logo svg {
    width: 100% !important;
    height: 100% !important;
}

html[data-skin="premium"] .admin-logo svg circle,
html[data-skin="premium"] .admin-logo svg path {
    stroke: #3b82f6 !important; /* Luminous brand blue */
}

html[data-skin="premium"] .admin-title {
    background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
}

html[data-skin="premium"] .admin-subtitle {
    color: #94a3b8 !important; /* Soft light slate with high contrast */
    font-size: 11.5px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
}

html[data-skin="premium"] .admin-user {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

html[data-skin="premium"] .admin-user-name {
    color: #f1f5f9 !important; /* Light text for readability */
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

html[data-skin="premium"] .admin-user .btn {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

html[data-skin="premium"] .admin-user .btn-secondary {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

html[data-skin="premium"] .admin-user .btn-secondary:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}