/* ====================================================
   HEALTion Patient Portal - Premium UI Stylesheet
   Modern Healthcare Design System with Distinctive Typography
   ==================================================== */

/* Google Fonts - Distinctive Premium Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ============================================
   CSS Custom Properties - Design Tokens
   ============================================ */
:root {
    /* Premium Typography */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Outfit', sans-serif;

    /* Refined Color Palette */
    --primary-500: #1ABC9C;
    --primary-600: #16A085;
    --primary-400: #48C9B0;
    --primary-300: #7EDFC9;
    --primary-200: #A3E4D7;
    --primary-100: #D1F2EB;
    --primary-50: #E8F8F5;

    --secondary-500: #3498DB;
    --secondary-600: #2980B9;

    --accent-gold: #F1C40F;
    --accent-coral: #E67E22;
    --accent-rose: #E74C3C;
    --accent-violet: #9B59B6;
    --accent-emerald: #27AE60;

    /* Neutral Palette */
    --slate-900: #1a1f36;
    --slate-800: #2C3E50;
    --slate-700: #34495E;
    --slate-600: #576574;
    --slate-500: #7F8C8D;
    --slate-400: #95A5A6;
    --slate-300: #BDC3C7;
    --slate-200: #D5DBDB;
    --slate-100: #ECF0F1;
    --slate-50: #F8FFFE;

    /* Premium Shadows */
    --shadow-xs: 0 1px 2px rgba(26, 188, 156, 0.05);
    --shadow-sm: 0 2px 8px rgba(26, 188, 156, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(26, 188, 156, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 32px rgba(26, 188, 156, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 16px 48px rgba(26, 188, 156, 0.2), 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 40px rgba(26, 188, 156, 0.25);

    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.2);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-fast: 150ms var(--ease-smooth);
    --transition-normal: 250ms var(--ease-smooth);
    --transition-slow: 400ms var(--ease-smooth);
}

/* ============================================
   Base Typography & Reset
   ============================================ */
.dashboard-app,
.dashboard-app :not(i),
.healthion-dashboard,
.healthion-dashboard :not(i) {
    font-family: var(--font-body) !important;
    letter-spacing: -0.01em;
}

.dashboard-app h1,
.dashboard-app h2,
.dashboard-app h3,
.dashboard-app h4,
.dashboard-app h5,
.dashboard-app h6,
.healthion-dashboard h1,
.healthion-dashboard h2,
.healthion-dashboard h3,
.healthion-dashboard h4,
.healthion-dashboard h5,
.healthion-dashboard h6,
.page-title h1,
.welcome-section h1,
.section-title,
.cs-title,
.modal h2,
.modal h3 {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* Body & Background */
body:has(.dashboard-app),
body:has(.healthion-dashboard) {
    font-family: var(--font-body) !important;
    background: linear-gradient(135deg, #F8FFFE 0%, #E8F8F5 50%, #D1F2EB 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ============================================
   Premium Sidebar Styles
   ============================================ */
.sidebar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgba(26, 188, 156, 0.1) !important;
    box-shadow: var(--shadow-lg);
}


.sidebar-header {
    border-bottom: 1px solid rgba(26, 188, 156, 0.08) !important;
    padding: var(--space-5) !important;
    position: relative;
}

.sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-400), transparent);
}

.sidebar-subtitle {
    font-family: var(--font-accent) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px !important;
    color: var(--primary-500) !important;
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation Menu */
.nav-section-title {
    font-family: var(--font-accent) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    color: var(--slate-400) !important;
    text-transform: uppercase;
    margin-bottom: var(--space-3) !important;
    padding: 0 var(--space-4) !important;
}

.nav-item {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-1) !important;
    transition: all var(--transition-normal) !important;
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-400), var(--primary-600));
    border-radius: 0 4px 4px 0;
    transform: scaleY(0);
    transition: transform var(--transition-normal);
}

.nav-item:hover::before {
    transform: scaleY(1);
}

.nav-item:hover {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-50)) !important;
    transform: translateX(4px);
}

.nav-item.active {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
    box-shadow: var(--shadow-md), 0 4px 20px rgba(26, 188, 156, 0.3) !important;
}

.nav-item.active::before {
    display: none;
}

.nav-item i {
    font-size: 16px !important;
    width: 22px !important;
}

.nav-item span {
    font-weight: 500 !important;
    display: inline-block;
}

.nav-badge {
    font-family: var(--font-accent) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: var(--radius-full) !important;
    background: linear-gradient(135deg, var(--accent-rose), #c0392b) !important;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* ============================================
   Premium Header Styles
   ============================================ */
.top-header {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(26, 188, 156, 0.08) !important;
    padding: 0 32px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky;
    top: 0;
    z-index: 1010 !important;
    height: 72px !important;
    width: 100% !important;
}

/* Search Box Enhancement */
.search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.search-box i {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--slate-400) !important;
    font-size: 16px !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.search-box input {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 16px 10px 48px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(26, 188, 156, 0.1) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-normal) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    width: 420px !important;
}

.search-box input:focus {
    background: white !important;
    border-color: var(--primary-400) !important;
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(26, 188, 156, 0.1) !important;
    outline: none !important;
}

.search-box input::placeholder {
    color: var(--slate-400) !important;
    font-weight: 400 !important;
}

/* Header Buttons */
.header-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    margin-left: auto !important;
}

.wallet-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(26, 188, 156, 0.08) !important;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--slate-600) !important;
    text-decoration: none !important;
    transition: all var(--transition-normal) !important;
}

.header-btn:hover {
    background: white !important;
    border-color: var(--primary-400) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm) !important;
    color: var(--primary-600) !important;
}

.header-btn .badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    font-family: var(--font-accent) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    background: linear-gradient(135deg, var(--accent-rose), #c0392b) !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-full) !important;
    color: white !important;
}

/* User Profile */
.user-profile {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    padding: 4px 6px 4px 16px !important;
    border-radius: var(--radius-full) !important;
    transition: all var(--transition-normal) !important;
    border: 1px solid rgba(26, 188, 156, 0.1) !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

.user-profile:hover {
    background: white !important;
    border-color: rgba(26, 188, 156, 0.2) !important;
    box-shadow: var(--shadow-sm) !important;
}

.user-name {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--slate-800) !important;
    text-align: right;
    line-height: 1.2;
}

.user-role {
    font-family: var(--font-accent) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--slate-500) !important;
    text-align: right;
}

.user-avatar {
    width: 42px !important;
    height: 42px !important;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
    box-shadow: var(--shadow-md), 0 0 0 2px rgba(255, 255, 255, 1);
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    overflow: hidden !important;
}

/* ============================================
   Premium Page Content
   ============================================ */
.page-content,
.dashboard-content {
    padding: var(--space-6) var(--space-8) !important;
}

/* Page Title */
.page-title h1,
.welcome-section h1 {
    font-family: var(--font-display) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--slate-800) !important;
    margin-bottom: var(--space-2) !important;
}

.page-title p,
.welcome-section p {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--slate-500) !important;
}

/* Section Title */
.section-title,
.section-header h2 {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--slate-800) !important;
}

/* ============================================
   Premium Cards & Containers
   ============================================ */
.stat-card,
.action-card,
.consultation-card,
.consultations-section,
.activity-section,
.wallet-widget,
.health-tips-widget,
.health-score-widget {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-normal) !important;
}

.stat-card:hover,
.action-card:hover,
.consultation-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(26, 188, 156, 0.1) !important;
}

/* Stats Cards */
.stat-card {
    padding: var(--space-5) !important;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.stat-info h3 {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--slate-600) !important;
    margin-bottom: var(--space-2) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px !important;
}

.stat-info .value {
    font-family: var(--font-display) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--slate-800) !important;
    line-height: 1.1 !important;
}

.stat-info .label,
.stat-info p {
    font-family: var(--font-accent) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--slate-500) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--radius-lg) !important;
    font-size: 22px !important;
}

.stat-icon.teal {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200)) !important;
    color: var(--primary-600) !important;
}

.stat-icon.blue {
    background: linear-gradient(135deg, #EBF5FB, #D6EAF8) !important;
    color: var(--secondary-600) !important;
}

.stat-icon.orange {
    background: linear-gradient(135deg, #FEF5E7, #FCE4CC) !important;
    color: var(--accent-coral) !important;
}

.stat-icon.green {
    background: linear-gradient(135deg, #E9F7EF, #D4EFDF) !important;
    color: var(--accent-emerald) !important;
}

/* ============================================
   Quick Action Cards
   ============================================ */
.action-card {
    padding: var(--space-5) var(--space-4) !important;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: 0;
}

.action-card:hover::before {
    opacity: 1;
}

.action-card:hover .action-icon,
.action-card:hover .action-title,
.action-card:hover .action-desc {
    color: white !important;
    position: relative;
    z-index: 1;
}

.action-card:hover .action-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1);
}

.action-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: var(--radius-lg) !important;
    margin: 0 auto var(--space-3) !important;
    font-size: 26px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.action-title {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--slate-800) !important;
    margin-bottom: var(--space-1) !important;
    position: relative;
    z-index: 1;
}

.action-desc {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--slate-500) !important;
    position: relative;
    z-index: 1;
}

/* ============================================
   Consultation Cards
   ============================================ */
.consultation-card,
.consultation-item {
    padding: var(--space-5) !important;
    display: flex;
    align-items: center;
    gap: var(--space-4) !important;
    position: relative;
    overflow: hidden;
}

.consultation-card::after,
.consultation-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-400), var(--primary-600));
    transform: scaleY(0);
    transition: transform var(--transition-normal);
}

.consultation-card:hover::after,
.consultation-item:hover::after {
    transform: scaleY(1);
}

.doctor-avatar {
    width: 56px !important;
    height: 56px !important;
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-md);
}

.consultation-info h4,
.consultation-details h3 {
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--slate-800) !important;
    margin-bottom: var(--space-1) !important;
}

.specialty {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--primary-600) !important;
}

.consultation-meta .meta-item {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--slate-500) !important;
}

.consultation-meta .meta-item i {
    color: var(--slate-400) !important;
}

/* Status Badges */
.status-badge,
.consultation-type {
    font-family: var(--font-accent) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-full) !important;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}

.status-badge.scheduled {
    background: linear-gradient(135deg, #EBF5FB, #D6EAF8) !important;
    color: var(--secondary-600) !important;
}

.status-badge.confirmed {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200)) !important;
    color: var(--primary-600) !important;
}

.status-badge.completed {
    background: linear-gradient(135deg, #E9F7EF, #D4EFDF) !important;
    color: var(--accent-emerald) !important;
}

.status-badge.cancelled {
    background: linear-gradient(135deg, #FDEDEC, #FADBD8) !important;
    color: var(--accent-rose) !important;
}

.status-badge.expired {
    background: linear-gradient(135deg, #F2F3F4, #E5E8E8) !important;
    color: var(--slate-500) !important;
}

.rescheduled-badge {
    font-family: var(--font-accent) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: var(--radius-sm) !important;
    background: linear-gradient(135deg, #FFF3CD, #FCE5AC) !important;
    color: #856404 !important;
    border: none !important;
}

/* ============================================
   Premium Buttons
   ============================================ */
.btn-primary,
.action-btn.primary {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: var(--space-3) var(--space-5) !important;
    border-radius: var(--radius-md) !important;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
    border: none !important;
    color: white !important;
    box-shadow: var(--shadow-sm), 0 4px 16px rgba(26, 188, 156, 0.3);
    transition: all var(--transition-normal) !important;
    cursor: pointer;
}

.btn-primary:hover,
.action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 6px 24px rgba(26, 188, 156, 0.4) !important;
}

.action-btn.secondary {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(26, 188, 156, 0.08) !important;
    color: var(--primary-600) !important;
    border: 1px solid rgba(26, 188, 156, 0.2) !important;
    transition: all var(--transition-normal) !important;
}

.action-btn.secondary:hover {
    background: rgba(26, 188, 156, 0.15) !important;
    border-color: var(--primary-400) !important;
}

/* ============================================
   Wallet Widget Enhancement
   ============================================ */
.wallet-widget {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 50%, var(--secondary-500) 100%) !important;
    color: white !important;
    position: relative;
    overflow: hidden;
    padding: var(--space-6) !important;
}

.wallet-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float-pulse 6s ease-in-out infinite;
}

.wallet-widget::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float-pulse 8s ease-in-out infinite reverse;
}

@keyframes float-pulse {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(10px, -10px) scale(1.05);
    }
}

.wallet-header h3 {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.wallet-balance .label {
    font-family: var(--font-accent) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.wallet-balance .amount {
    font-family: var(--font-display) !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.wallet-btn {
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-normal) !important;
    position: relative;
    z-index: 1;
}

.wallet-btn.add {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
}

.wallet-btn.add:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
}

.wallet-btn.transfer {
    background: white !important;
    color: var(--primary-600) !important;
}

.wallet-btn.transfer:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   Tabs Enhancement
   ============================================ */
.tabs-container {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-2) !important;
    box-shadow: var(--shadow-sm) !important;
}

.tab-btn {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: var(--space-3) var(--space-5) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-normal) !important;
    position: relative;
}

.tab-btn:hover {
    color: var(--primary-600) !important;
}

.tab-btn.active {
    color: var(--primary-600) !important;
    background: var(--primary-100) !important;
}

.tab-btn .count {
    font-family: var(--font-accent) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-full) !important;
    background: rgba(26, 188, 156, 0.1) !important;
}

.tab-btn.active .count {
    background: var(--primary-200) !important;
    color: var(--primary-700) !important;
}

.sliding-indicator {
    background: linear-gradient(90deg, var(--primary-400), var(--primary-600)) !important;
    height: 3px !important;
    border-radius: 3px !important;
}

/* ============================================
   Empty State Enhancement
   ============================================ */
.empty-state {
    padding: var(--space-12) var(--space-8) !important;
    text-align: center;
    background: var(--glass-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--radius-xl) !important;
}

.empty-state i {
    font-size: 72px !important;
    background: linear-gradient(135deg, var(--primary-300), var(--primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-6) !important;
}

.empty-state h3,
.empty-state h4 {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--slate-800) !important;
    margin-bottom: var(--space-3) !important;
}

.empty-state p {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    color: var(--slate-500) !important;
    margin-bottom: var(--space-6) !important;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Coming Soon Modal Enhancement
   ============================================ */
.modal-overlay {
    background: rgba(44, 62, 80, 0.6) !important;
    backdrop-filter: blur(8px);
    z-index: 2000 !important;
}

.coming-soon-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-2xl) !important;
    padding: var(--space-10) !important;
    box-shadow: var(--shadow-xl) !important;
}

.cs-icon {
    width: 88px !important;
    height: 88px !important;
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500)) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 32px rgba(26, 188, 156, 0.4);
}

.cs-icon i {
    font-size: 36px !important;
}

.cs-title {
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--slate-900) !important;
}

.cs-desc {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--slate-600) !important;
}

.cs-btn {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: var(--space-3) var(--space-8) !important;
    border-radius: var(--radius-md) !important;
    background: var(--slate-900) !important;
    transition: all var(--transition-normal) !important;
}

.cs-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   Health Tips & Score Widgets
   ============================================ */
.health-tips-widget,
.health-score-widget {
    padding: var(--space-6) !important;
}

.tips-header h3,
.score-header h3 {
    font-family: var(--font-display) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--slate-800) !important;
}

.tips-header i {
    color: var(--accent-gold) !important;
    font-size: 22px !important;
}

.tip-item {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--slate-600) !important;
}

.tip-item::before {
    color: var(--primary-500) !important;
}

.tips-link {
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--primary-600) !important;
}

.score-value .number {
    font-family: var(--font-display) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--accent-emerald) !important;
}

.score-value .label {
    font-family: var(--font-accent) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--slate-500) !important;
}

.score-status {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--slate-600) !important;
}

/* ============================================
   Dark Mode Overrides
   ============================================ */
body.dark-mode {
    --glass-bg: rgba(30, 30, 30, 0.9);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body.dark-mode .sidebar,
body.dark-mode .top-header,
body.dark-mode .stat-card,
body.dark-mode .action-card,
body.dark-mode .consultation-card,
body.dark-mode .consultations-section,
body.dark-mode .activity-section,
body.dark-mode .health-tips-widget,
body.dark-mode .health-score-widget,
body.dark-mode .tabs-container,
body.dark-mode .empty-state,
body.dark-mode .coming-soon-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

body.dark-mode .stat-info h3,
body.dark-mode .stat-info .value,
body.dark-mode .page-title h1,
body.dark-mode .welcome-section h1,
body.dark-mode .section-title,
body.dark-mode .action-title,
body.dark-mode .consultation-details h3,
body.dark-mode .consultation-info h4,
body.dark-mode .tips-header h3,
body.dark-mode .score-header h3,
body.dark-mode .empty-state h3,
body.dark-mode .empty-state h4,
body.dark-mode .cs-title {
    color: white !important;
}

body.dark-mode .stat-info .label,
body.dark-mode .stat-info p,
body.dark-mode .page-title p,
body.dark-mode .welcome-section p,
body.dark-mode .action-desc,
body.dark-mode .specialty,
body.dark-mode .consultation-meta .meta-item,
body.dark-mode .tip-item,
body.dark-mode .score-status,
body.dark-mode .empty-state p,
body.dark-mode .cs-desc {
    color: #B3B3B3 !important;
}

body.dark-mode .search-box input {
    background: rgba(45, 45, 45, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

body.dark-mode .header-btn {
    background: rgba(45, 45, 45, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .action-btn.secondary {
    background: rgba(26, 188, 156, 0.15) !important;
    border-color: rgba(26, 188, 156, 0.3) !important;
}

body.dark-mode .tab-btn.active {
    background: rgba(26, 188, 156, 0.2) !important;
}

body.dark-mode:has(.dashboard-app),
body.dark-mode:has(.healthion-dashboard) {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important;
}

/* ============================================
   Animations & Micro-interactions
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered animations */
.stat-card:nth-child(1) {
    animation: fadeInUp 0.5s var(--ease-smooth) 0.1s backwards;
}

.stat-card:nth-child(2) {
    animation: fadeInUp 0.5s var(--ease-smooth) 0.15s backwards;
}

.stat-card:nth-child(3) {
    animation: fadeInUp 0.5s var(--ease-smooth) 0.2s backwards;
}

.stat-card:nth-child(4) {
    animation: fadeInUp 0.5s var(--ease-smooth) 0.25s backwards;
}

.action-card:nth-child(1) {
    animation: scaleIn 0.4s var(--ease-smooth) 0.2s backwards;
}

.action-card:nth-child(2) {
    animation: scaleIn 0.4s var(--ease-smooth) 0.25s backwards;
}

.action-card:nth-child(3) {
    animation: scaleIn 0.4s var(--ease-smooth) 0.3s backwards;
}

.action-card:nth-child(4) {
    animation: scaleIn 0.4s var(--ease-smooth) 0.35s backwards;
}

.action-card:nth-child(5) {
    animation: scaleIn 0.4s var(--ease-smooth) 0.4s backwards;
}

.action-card:nth-child(6) {
    animation: scaleIn 0.4s var(--ease-smooth) 0.45s backwards;
}

.consultation-card,
.consultation-item {
    animation: slideInLeft 0.4s var(--ease-smooth) backwards;
}

.consultations-section,
.activity-section {
    animation: fadeInUp 0.5s var(--ease-smooth) 0.3s backwards;
}

.wallet-widget {
    animation: fadeInUp 0.5s var(--ease-smooth) 0.2s backwards;
}

.health-score-widget,
.health-tips-widget {
    animation: fadeInUp 0.5s var(--ease-smooth) 0.35s backwards;
}

/* Smooth page load */
.main-content,
.page-content,
.dashboard-content {
    animation: fadeInUp 0.6s var(--ease-smooth);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {

    .page-title h1,
    .welcome-section h1 {
        font-size: 24px !important;
    }

    .stats-row,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {

    .page-content,
    .dashboard-content {
        padding: var(--space-4) !important;
    }

    .page-title h1,
    .welcome-section h1 {
        font-size: 22px !important;
    }

    .stats-row,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stat-info h3,
    .stat-info .value {
        font-size: 26px !important;
    }

    .consultation-card {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4) !important;
    }

    .consultation-meta {
        justify-content: center;
        flex-wrap: wrap;
    }

    .consultation-status {
        text-align: center;
    }

    .wallet-balance .amount {
        font-size: 28px !important;
    }
}

@media (max-width: 480px) {

    .page-title h1,
    .welcome-section h1 {
        font-size: 20px !important;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-3) !important;
    }

    .action-card {
        padding: var(--space-4) var(--space-3) !important;
    }

    .action-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 22px !important;
    }

    .action-title {
        font-size: 12px !important;
    }

    .action-desc {
        font-size: 10px !important;
    }
}

/* ============================================
   Care Plan Slider Styles (Active Consultations)
   ============================================ */
.care-plan-slider-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
    overflow: hidden;
}

.care-plan-slider-viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.care-plan-slides {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.care-plan-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    opacity: 0.4;
    transform: scale(0.98);
    transition: all 0.6s var(--ease-smooth);
    box-sizing: border-box;
}

.care-plan-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* Clinical Layout Row - Two Column Layout */
.clinical-layout-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .clinical-layout-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.care-plan-section,
.medicines-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(26, 188, 156, 0.08);
    min-width: 0;
    overflow: hidden;
}


/* Dots Navigation */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--slate-300);
    cursor: pointer;
    transition: all 0.3s var(--ease-smooth);
    border: 2px solid transparent;
}

.slider-dot:hover {
    background: var(--primary-300);
}

.slider-dot.active {
    width: 30px;
    border-radius: 6px;
    background: var(--primary-500);
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.3);
}

/* Section Label for Slider */
.slider-label {
    position: absolute;
    top: -25px;
    right: 0;
    font-family: var(--font-accent);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-600);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.slider-label i {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   Upcoming Consultations Slider
   ============================================ */
.upcoming-slider-container {
    position: relative;
    width: 100%;
}

.upcoming-slider-viewport {
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius-lg);
}

.upcoming-slides {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.upcoming-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 2px;
}

.consultation-item.slider {
    margin: 0;
    background: white !important;
    border: 1px solid rgba(26, 188, 156, 0.1) !important;
}

.upcoming-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.upcoming-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--slate-300);
    cursor: pointer;
    transition: all 0.3s var(--ease-smooth);
}

.upcoming-dot.active {
    width: 18px;
    border-radius: 3px;
    background: var(--primary-400);
}

/* ============================================
   Locked Navigation Items
   ============================================ */
.nav-item.locked {
    opacity: 0.6;
    position: relative;
    cursor: not-allowed !important;
}

.nav-item.locked::after {
    content: '\f023';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 16px;
    font-size: 11px;
    color: var(--slate-500);
    opacity: 0.8;
}

.nav-item.locked:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
}

.nav-item.locked:hover::before {
    display: none !important;
}

body.dark-mode .nav-item.locked {
    opacity: 0.5;
}

body.dark-mode .nav-item.locked::after {
    color: #B3B3B3;
}

/* ============================================
   Top-up Credits Styles
   ============================================ */
.btn-topup {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent-gold), #F39C12);
    color: var(--slate-900) !important;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    transition: all var(--transition-normal);
    border: none;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.btn-topup:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 44px 12px rgba(241, 196, 15, 0.3);
    color: var(--slate-900) !important;
}

.btn-topup i {
    font-size: 14px;
}

/* Top-up Modal Styles */
.topup-modal {
    max-width: 450px !important;
}

.topup-config-info {
    background: var(--primary-50);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    border: 1px solid var(--primary-100);
}

.topup-config-info p {
    margin: 0;
    font-size: 13px;
    color: var(--primary-600);
    font-weight: 500;
    line-height: 1.5;
}

.topup-input-group {
    margin-bottom: 24px;
}

.topup-input-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: 8px;
}

.topup-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.topup-input-wrapper input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--slate-200);
    border-radius: var(--radius-md);
    font-size: 24px;
    font-weight: 700;
    color: var(--slate-800);
    transition: all var(--transition-normal);
    text-align: center;
}

.topup-input-wrapper input:focus {
    border-color: var(--primary-400);
    outline: none;
    box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.1);
}

.topup-calc-summary {
    background: var(--slate-50);
    padding: 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    border: 1px dashed var(--slate-200);
}

.calc-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--slate-600);
}

.calc-row.total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--slate-200);
    font-weight: 800;
    font-size: 20px;
    color: var(--slate-900);
}

.payment-methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.payment-method-card {
    padding: 16px;
    border: 2px solid var(--slate-100);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: white;
}

.payment-method-card:hover {
    border-color: var(--primary-200);
    background: var(--primary-50);
}

.payment-method-card.active {
    border-color: var(--primary-500);
    background: var(--primary-50);
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.1);
}

.payment-method-card i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.payment-method-card .method-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-700);
}

.payment-method-card.wallet i {
    color: #E67E22;
}

.payment-method-card.razorpay i {
    color: #2980B9;
}