/* Local fonts (self-hosted) */
/* Note: font CSS files are loaded via <link> tags in HTML, before this file */

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('./fonts/material-symbols-outlined.woff2') format('woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Apply numerical font style globally where possible */
    font-variant-numeric: lining-nums;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Initially hidden elements — JS shows them via el.style.display = '...' */
.hidden-initial {
    display: none;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 12px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
    transform: translateY(-200%);
    transition: transform 0.2s ease;
    z-index: var(--z-nav);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: var(--focus-outline, 3px solid rgba(37, 99, 235, 0.7));
    outline-offset: 3px;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.last-sync {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo-text,
.nav-item span:not(.material-symbols-outlined),
.btn,
.btn-take,
.btn-skip,
.btn-snooze,
button,
.chip,
select,
input,
.med-name,
.med-time,
.med-details,
.next-title,
.stat-value,
.stat-label-details,
.adherence-value,
.adherence-badge,
.patient-name,
.patient-stats span,
.next-med-details p,
.next-med-details .next-med-title,
.dashboard-greeting h1,
.dashboard-greeting p,
.view-all-link,
.inventory-badge,
.dose-value,
.time-value,
.quantity,
.unit,
#dateDisplay,
.progress-text-center,
.progress-stats-label,
.week-range,
.time-cell,
.table-med-item,
th,
.filter-btn,
.meal-tag,
.dosage-info,
.font-serif {
    font-family: var(--font-family-sans) !important;
    font-variant-numeric: lining-nums !important;
}

/* ROBUST ICON RENDERING - Prevent FOUC globally */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    visibility: visible;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

/* Social Buttons Row */
.social-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.social-icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-primary);
    /* Ensure text/currentColor follows theme */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Fix Apple Icon in Dark Mode */
[data-theme="dark"] .social-icon-btn.apple svg,
body:not([data-theme="light"]) .social-icon-btn.apple svg {
    fill: #ffffff;
}

.social-icon-btn:hover {
    background: var(--input-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-icon-btn img,
.social-icon-btn svg {
    width: 24px;
    height: 24px;
}

/* Ensure nav icons are sized correctly */
.nav-item .material-symbols-outlined {
    font-size: 1.5rem;
}

.feature-icon .material-symbols-outlined {
    font-size: 32px;
}

body:not(.loaded) {
    opacity: 0;
}

body.loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Don't hide critical semantic elements (headings) before translation */
[data-i18n]:not(.translated):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    visibility: hidden;
}

[data-icon]:not(.translated) {
    visibility: hidden;
}

body:not(.loaded) .material-symbols-outlined {
    visibility: hidden;
}

body.loaded .material-symbols-outlined {
    visibility: visible;
}

/* --- Effects --- */

/* Enhanced Flashlight/Spotlight Effect */
.cursor-glow {
    position: fixed;
    width: var(--cursor-glow-size, 800px);
    height: var(--cursor-glow-size, 800px);
    background: radial-gradient(circle,
            var(--cursor-glow-color, var(--primary)) 0%,
            rgba(var(--color-blue-500-rgb), 0.08) 25%,
            rgba(var(--color-blue-500-rgb), 0.03) 50%,
            transparent var(--cursor-glow-blur, 70%));
    opacity: var(--cursor-glow-opacity, 0.15);
    pointer-events: none;
    z-index: var(--z-cursor-glow, 9999);
    transform: translate(-50%, -50%);
    transition: opacity var(--transition-slow), width var(--transition-slow), height var(--transition-slow);
    will-change: transform, opacity;
}

/* Pulse animation on interaction */
.cursor-glow.pulse {
    animation: cursorPulse 0.6s ease-out;
}

@keyframes cursorPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: var(--cursor-glow-opacity, 0.15);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: calc(var(--cursor-glow-opacity, 0.15) * 1.5);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: var(--cursor-glow-opacity, 0.15);
    }
}

/* Light theme - subtler glow */
[data-theme="light"] .cursor-glow {
    background: radial-gradient(circle,
            rgba(var(--color-blue-500-rgb), 0.12) 0%,
            rgba(var(--color-blue-500-rgb), 0.05) 30%,
            transparent 60%);
    opacity: 0.6;
}

.mesh-gradient {
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.1) 0px, transparent 50%);
    transition: background-color 0.3s ease;
}

/* --- Navigation --- */

/* Top Glass Nav */
.glass-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 72px;
    display: flex;
    align-items: center;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.glass-nav .container {
    width: 100%;
    padding: 0 1.5rem;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

/* Prevent page titles from wrapping in nav header */
.nav-content > h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}

/* When sidebar is present, header uses flex layout */
body.has-sidebar .nav-content {
    display: flex;
    justify-content: space-between;
}

body.has-sidebar .nav-content .logo-wrapper {
    display: none;
    /* Hide logo in header, it's in sidebar */
}

body.has-sidebar .nav-content .header-title-wrapper {
    flex: 0 1 auto;
    text-align: left;
    margin-left: 0;
    min-width: 0;
}

body.has-sidebar .nav-content .header-title-wrapper:first-of-type {
    flex: 1 1 auto;
    margin-left: 0.5rem;
}

/* Mobile: Show burger, hide logo */
@media (max-width: 1023px) {
    body.has-sidebar .nav-content .burger-btn {
        order: -1;
    }
}

/* Desktop: No burger needed, logo in sidebar */
@media (min-width: 1024px) {
    body.has-sidebar .glass-nav {
        border-bottom: 1px solid var(--border-color);
    }
}

.header-title-wrapper {
    text-align: center;
    min-width: 0;
    /* Allow flexbox shrinking */
}

.header-title-wrapper h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    /* Allow wrapping on very small screens */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

@media (min-width: 481px) {
    .header-title-wrapper h1 {
        white-space: nowrap;
        display: block;
    }
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.logo-svg {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 12px;
    /* Rounded corners like notification icon */
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logoShimmer 4s ease-in-out infinite;
}

@keyframes logoShimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* On pages with sidebar, hide button text in nav when space is limited */
@media (max-width: 1279px) {
    body.has-sidebar .nav-actions .btn-secondary span:not(.material-symbols-outlined) {
        display: none;
    }
}

@media (max-width: 1023px) {
    .nav-actions .btn-secondary span:not(.material-symbols-outlined),
    .nav-actions .btn-primary span:not(.material-symbols-outlined) {
        display: none;
    }
}

/* Bottom Navigation (Mobile/App) */
.bottom-nav {
    position: fixed;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    z-index: 1000;
    box-shadow: var(--shadow-card-hover);
    transition: background var(--transition-base), border-color var(--transition-base);
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 9999px;
    /* Pill shape for nav items */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item .material-symbols-outlined {
    font-size: 1.5rem;
    margin-bottom: 2px;
    transition: transform 0.3s;
}

.nav-item span:not(.material-symbols-outlined) {
    font-size: 0.75rem;
    font-weight: 600;
}

.nav-item.active {
    color: var(--primary);
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb, 37, 99, 235), 0.1);
}

.nav-item.active .material-symbols-outlined {
    background: var(--primary);
    color: white;
    min-width: 48px;
    width: auto;
    padding: 0 8px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 4px;
    transform: translateY(-2px);
    font-variation-settings: 'FILL' 1;
}

/* --- Buttons --- */

.btn,
.btn-primary,
.btn-secondary,
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3-5) var(--space-8);
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

/* Focus states for accessibility */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-accent:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Primary Button - Blue */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white !important;
    box-shadow: var(--shadow-blue);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue-lg);
    filter: brightness(1.05);
    color: white !important;
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.97);
    box-shadow: var(--shadow-blue);
}

/* Secondary Button - Outline */
.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(4px);
}

.btn-secondary:hover {
    background: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
    border-color: var(--border-color-strong);
    color: var(--text-primary) !important;
}

/* Accent Button - Orange (Demo/CTA) */
.btn-accent,
.btn-demo {
    background: linear-gradient(135deg, var(--color-orange-500), var(--color-orange-600));
    color: white !important;
    box-shadow: var(--shadow-orange);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-accent:hover,
.btn-demo:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange-lg);
    filter: brightness(1.05);
    color: white !important;
}

.btn-accent:active,
.btn-demo:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.97);
}

/* Light theme button adjustments */
[data-theme="light"] .btn-secondary {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border-color-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* PWA install prompt (soft) */
.install-prompt {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0) + 1rem);
    transform: translateX(-50%);
    width: min(520px, calc(100% - 2rem));
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1rem 1.25rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    backdrop-filter: blur(16px);
}

.install-prompt-title {
    font-weight: 700;
    font-size: 1rem;
}

.install-prompt-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.install-prompt-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.install-prompt-actions .btn-secondary,
.install-prompt-actions .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Update Banner */
.update-banner {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-bottom-height, 0px) + env(safe-area-inset-bottom, 0) + 1rem);
    transform: translateX(-50%);
    width: min(560px, calc(100% - 2rem));
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 0.85rem 1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    backdrop-filter: blur(16px);
}

.update-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.update-banner-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.update-banner-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.update-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.update-banner-actions .btn-secondary,
.update-banner-actions .btn-primary {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
}

@media (max-width: 420px) {
    .update-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .update-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.btn-danger-outline {
    background: transparent;
    color: var(--danger) !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.05);
    border-color: var(--danger);
    transform: translateY(-2px);
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

.icon-btn:hover {
    color: var(--text-primary);
    background: rgba(128, 128, 128, 0.1);
    transform: rotate(15deg);
}

.icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* .btn-icon — small inline action button (edit/delete inside cards) */
.btn-icon {
    background: rgba(128, 128, 128, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 10px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
}

.btn-icon:hover {
    color: var(--text-primary);
    background: rgba(128, 128, 128, 0.15);
    border-color: rgba(128, 128, 128, 0.25);
}

.btn-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Cards --- */

.card {
    background: var(--bg-card);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-card);
}

button.card {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.card-action {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
}

.card-action:focus-visible {
    outline: var(--focus-outline);
    outline-offset: -2px;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-action-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-color-strong);
}

.floating-card {
    position: absolute;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(16, 185, 129, 0.05));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 0;
}

/* --- Forms --- */

input,
select,
textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(128, 128, 128, 0.04);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

/* Toggle Switch */
.toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle input:focus-visible+.toggle-track {
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.35));
}

.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    transition: all 0.2s ease;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.toggle input:checked+.toggle-track {
    background: var(--primary);
    border-color: transparent;
}

.toggle input:checked+.toggle-track::after {
    transform: translateX(20px);
    background: white;
}

label {
    color: var(--text-primary);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(128, 128, 128, 0.1);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.35));
}

:where(a, button, [role="button"], [role="link"], summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--focus-outline, 3px solid rgba(37, 99, 235, 0.7));
    outline-offset: 3px;
}

/* --- Typography Helpers --- */
.container {
    max-width: min(100%, 1200px);
    margin: 0 auto;
    padding: 0 1rem;
}

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

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.8125rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 1.3;
}

.text-3xl {
    font-size: 2rem;
    line-height: 1.2;
}

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

.opacity-60 {
    opacity: 0.8;
}

/* Ensure good contrast in light theme */
[data-theme="light"] .text-xs.opacity-60,
[data-theme="light"] .opacity-60 {
    color: #6b7280;
    /* Gray-500 */
    opacity: 1;
}

/* Dark theme */
[data-theme="dark"] .text-xs.opacity-60,
[data-theme="dark"] .opacity-60 {
    color: #9ca3af;
    /* Gray-400 */
    opacity: 1;
}

.gradient-text {
    background: linear-gradient(135deg, var(--text-primary), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-4 {
    margin-top: 1rem;
}

/* --- Hero Section --- */
.hero-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.hero-tagline {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    text-transform: none;
    letter-spacing: 0.02em;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.hero-buttons .btn,
.hero-buttons .btn-primary,
.hero-buttons .btn-demo {
    min-width: 180px;
    max-width: 280px;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    white-space: nowrap;
    flex: 0 1 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 9999px;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
}

/* --- Features --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns on desktop */
    gap: 0.75rem;
    padding: 1rem 0;
    width: 100%;
}

/* Tablet: 2x2 grid */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: single column */
@media (max-width: 480px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    padding: 1.25rem;
    text-align: center;
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.feature-icon .material-symbols-outlined {
    font-size: 32px;
}

/* --- Animations --- */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

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

/* Subtle page entrance animation */
@keyframes subtleEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .screen-scroll > section,
    .screen-scroll > .card,
    .stats-grid .stat-card,
    .med-card {
        animation: subtleEnter 0.4s ease-out both;
    }

    .screen-scroll > *:nth-child(1) { animation-delay: 0.05s; }
    .screen-scroll > *:nth-child(2) { animation-delay: 0.1s; }
    .screen-scroll > *:nth-child(3) { animation-delay: 0.15s; }
    .screen-scroll > *:nth-child(4) { animation-delay: 0.2s; }
    .screen-scroll > *:nth-child(5) { animation-delay: 0.25s; }

    .stats-grid .stat-card:nth-child(1) { animation-delay: 0.05s; }
    .stats-grid .stat-card:nth-child(2) { animation-delay: 0.1s; }
    .stats-grid .stat-card:nth-child(3) { animation-delay: 0.15s; }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .nav-content {
        justify-content: space-between;
    }

    .nav-actions {
        gap: 0.5rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
    }
}

/* --- Dashboard Specific --- */
.p-6 {
    padding: 1.25rem;
}

.mb-6 {
    margin-bottom: 1rem;
}

.status-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    /* Fully round for modern look */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-icon.danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-icon.success {
    background: var(--success-bg);
    color: var(--success);
}

.status-icon.primary {
    background: var(--primary-bg);
    color: var(--primary);
}

.text-danger {
    color: var(--danger);
}

.text-success {
    color: var(--success);
}

.text-primary {
    color: var(--primary);
}

/* Improve link contrast in dark mode for WCAG AA */
[data-theme="dark"] .text-primary,
[data-theme="dark"] a.text-primary {
    color: #60a5fa;
    /* Lighter blue for dark backgrounds */
}

[data-theme="light"] .text-primary,
[data-theme="light"] a.text-primary {
    color: #1e40af;
    /* Darker blue for light backgrounds - 7:1 contrast */
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
}

/* Skeleton Loader */
.skeleton {
    background: linear-gradient(90deg,
            var(--input-bg) 25%,
            rgba(255, 255, 255, 0.1) 50%,
            var(--input-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.skeleton-card {
    height: 120px;
    border-radius: 16px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

[data-theme="light"] .skeleton {
    background: linear-gradient(90deg,
            #e5e7eb 25%,
            #f3f4f6 50%,
            #e5e7eb 75%);
    background-size: 200% 100%;
}

/* Modal Improvements for Light Theme */
.modal-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .modal-overlay .card {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
}

/* Import target selector */
.import-target-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem 0;
}

.import-target-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.import-target-item:hover {
    border-color: var(--primary);
    background: rgba(var(--color-blue-500-rgb, 37, 99, 235), 0.08);
}

.import-target-item.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--color-blue-500-rgb, 37, 99, 235), 0.15);
}

.import-target-text {
    flex: 1;
}

.import-target-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.import-target-check {
    opacity: 0;
    color: var(--success);
    transition: opacity 0.2s;
}

.import-target-item.active .import-target-check {
    opacity: 1;
}

/* Chip button improvements for light theme */
[data-theme="light"] .chip {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[data-theme="light"] .chip:hover:not(.active) {
    background: #e5e7eb;
}

/* Global Auth Button Grid - EQUAL FOR ALL LANGUAGES */
.auth-group {
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.auth-group .btn-primary,
.auth-group .btn-secondary {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
    /* Allow wrap for long text like "Регистрация" */
    word-break: keep-all;
    line-height: 1.2;
    padding: 0.5rem 0.4rem !important;
    font-size: clamp(0.8125rem, 2.2vw, 0.875rem) !important;
}

/* Very small screens */
@media (max-width: 360px) {
    .auth-group {
        gap: 0.25rem;
    }

    .auth-group .btn-primary,
    .auth-group .btn-secondary {
        padding: 0.4rem 0.3rem !important;
        font-size: 0.75rem !important;
    }
}

/* Mobile Header Adaptation */
@media (max-width: 640px) {

    .logo-wrapper {
        gap: 0.5rem;
    }

    .logo-svg {
        width: 36px;
        height: 36px;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .nav-actions {
        gap: 0.25rem;
    }

    .nav-actions>a.btn-primary,
    .nav-actions>a.btn-secondary {
        min-width: auto;
        /* Shrink to fit content */
        padding: 0.5rem 0.5rem;
        font-size: 0.8rem;
        flex: 1;
        /* Distribute space */
        white-space: nowrap;
        height: 36px;
        min-height: 0;
    }

    .nav-actions .icon-btn {
        width: 32px;
        height: 32px;
    }

    /* Ensure container fits */
    .glass-nav .container {
        padding: 0 0.5rem;
    }
}

/* ========================================
   DASHBOARD COMPONENTS
   ======================================== */

/* Progress Header */
.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.progress-info {
    flex: 1;
    min-width: 0;
}

.progress-value {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.progress-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.progress-circle {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.progress-circle svg {
    width: 100%;
    height: 100%;
}

.progress-arc {
    transition: stroke-dashoffset 0.5s ease;
    transform: rotate(-90deg);
    transform-origin: 40px 40px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stats-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.stat-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 1rem 0.875rem;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.stat-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
}

.stat-icon-wrapper.success {
    background: var(--success-bg);
    color: var(--success);
}

.stat-icon-wrapper.primary {
    background: var(--primary-bg);
    color: var(--primary);
}

.stat-icon-wrapper.warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.stat-icon-wrapper .material-symbols-outlined {
    font-size: 18px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stat-label-details {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-top: -0.25rem;
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Light theme: use darker color for better contrast */
[data-theme="light"] .stat-label {
    color: #4b5563;
    /* Gray-600: ensures 7:1 contrast ratio (WCAG AAA) */
    opacity: 1;
}

/* Dark theme: use lighter color */
[data-theme="dark"] .stat-label {
    color: #d1d5db;
    /* Gray-300: ensures good contrast on dark backgrounds */
    opacity: 1;
}

.stat-card.stat-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.stat-card.stat-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
}

.view-all-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

/* Medication Cards */
.med-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 0.875rem;
    margin-bottom: 0.625rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.med-card-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

.med-card:hover {
    border-color: var(--primary);
}

.med-card-taken,
.med-card-skipped {
    opacity: 0.7;
}

.med-card-taken {
    border-color: rgba(16, 185, 129, 0.3);
}

.med-card-skipped {
    border-color: rgba(239, 68, 68, 0.3);
}

.med-card-critical {
    border-left: 3px solid var(--danger);
}

.med-card-success {
    border-left: 3px solid var(--success);
}

.med-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.med-card-icon .material-symbols-outlined {
    font-size: 22px;
}

.icon-primary {
    background: rgba(37, 99, 235, 0.15);
    color: var(--primary);
}

.icon-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.icon-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.med-card-content {
    flex: 1;
    min-width: 0;
}

.med-name {
    font-weight: 600;
    font-size: 0.95rem;
    /* Allow wrapping on mobile, truncate after 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.med-details {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    margin-top: 0.125rem;
    /* Allow wrapping for details */
    overflow: hidden;
    text-overflow: ellipsis;
}

.med-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.med-time {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
}

.med-time.time-taken {
    color: var(--success);
}

.med-menu-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 50%;
    transition: all 0.2s;
}

.med-menu-btn:hover {
    color: var(--text-primary);
    background: var(--input-bg);
}

.med-menu-btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
    color: var(--text-primary);
}

.med-menu-btn .material-symbols-outlined {
    font-size: 18px;
}

.adherence-value {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.adherence-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Responsive Dashboard */
@media (max-width: 480px) {
    .stats-grid.three-cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .stat-card {
        padding: 0.625rem 0.375rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .stat-icon-wrapper {
        width: 28px;
        height: 28px;
    }

    .stat-icon-wrapper .material-symbols-outlined {
        font-size: 16px;
    }

    .progress-value {
        font-size: 2rem;
    }

    .progress-circle {
        width: 60px;
        height: 60px;
    }

    .med-card {
        padding: 0.75rem;
        gap: 0.625rem;
    }

    .med-card-icon {
        width: 36px;
        height: 36px;
    }

    .med-name {
        font-size: 0.875rem;
    }

    .med-details {
        font-size: 0.75rem;
    }

    .med-time {
        font-size: 0.8rem;
    }
}

/* ========================================
   UI/UX ENHANCEMENTS (2026-01-19)
   ======================================== */

/* Ripple Effect for Buttons */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-effect 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-effect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Progress Bar Animation */
.progress-bar-animated {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    background-size: 200% 100%;
    animation: progress-shimmer 2s ease infinite;
}

@keyframes progress-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Offline Banner */
.offline-banner {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 0.5rem;
    font-size: 0.825rem;
    font-weight: 500;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

.offline-banner.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Global Toast / Snackbar */
.global-toast {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 260px;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--surface, #1e293b);
    color: var(--text-primary, #fafafa);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0;
    transition: transform 0.3s var(--ease-out, ease), opacity 0.3s var(--ease-out, ease);
    pointer-events: none;
}
.global-toast.toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.global-toast .toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.toast-success .toast-icon { color: var(--color-success, #10b981); }
.toast-error .toast-icon { color: var(--color-danger, #ef4444); }
.toast-warning .toast-icon { color: var(--color-warning, #f59e0b); }
.toast-info .toast-icon { color: var(--primary, #1a66ff); }
.toast-message {
    flex: 1;
    min-width: 0;
}
.toast-action {
    background: none;
    border: none;
    color: var(--primary, #1a66ff);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.toast-action:hover {
    background: rgba(26, 102, 255, 0.15);
}
.toast-action:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}
.toast-dismiss {
    background: none;
    border: none;
    color: var(--text-secondary, #a0a0a0);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    opacity: 0.5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.toast-dismiss:hover {
    opacity: 1;
}

/* Swipe Hint for Med Cards */
.swipe-hint {
    position: absolute;
    right: -80px;
    top: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(90deg, transparent, var(--success));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.med-card.swiping .swipe-hint {
    opacity: 1;
}

/* FAB (Floating Action Button) */
.fab {
    position: fixed;
    bottom: 100px;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 900;
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.6);
}

.fab .material-symbols-outlined {
    font-size: 28px;
}

/* Haptic Feedback Visual */
.haptic-pulse {
    animation: haptic-pulse 0.3s ease;
}

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

    50% {
        transform: scale(0.95);
    }

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

/* Onboarding Tooltip */
.onboard-tooltip {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    max-width: 280px;
    font-size: 0.875rem;
}

.onboard-tooltip::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--primary);
}

.onboard-tooltip-close {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
}

/* Vibration on mobile */
@media (hover: none) {

    .btn-primary:active,
    .med-card:active {
        transform: scale(0.98);
    }
}

/* Next Intake Card Rendering */
.next-intake-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    position: relative;
    box-shadow: var(--shadow-card);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 480px) {
    .next-intake-card {
        border-radius: 16px;
        padding: 0.75rem;
    }
}

.next-intake-card.no-intakes {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(var(--secondary-rgb), 0.05));
    border: 1px dashed rgba(var(--primary-rgb), 0.2);
}

.next-intake-card.overdue {
    border-left: 4px solid var(--danger);
}

.next-intake-card.upcoming {
    border-left: 4px solid var(--primary);
}

.next-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 60px; /* space for absolute-positioned progress ring */
}

.next-header-with-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.next-intake-progress-wrapper {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-stats-label {
    font-size: 0.75rem;
    font-weight: 800;
    margin-top: 0.2rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-circle.small {
    width: 44px;
    height: 44px;
    position: relative;
}

.progress-circle.mini {
    width: 32px;
    height: 32px;
    position: relative;
}

.progress-text-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
}

.progress-arc {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.no-intakes .next-progress-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 12px;
}

.bell-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--icon-color-rgb), 0.1);
    color: var(--icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.next-intake-card.overdue {
    --icon-color: var(--danger);
    --icon-color-rgb: 239, 68, 68;
}

.next-intake-card.upcoming {
    --icon-color: var(--primary);
    --icon-color-rgb: 37, 99, 235;
}

.next-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.next-med-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
}

.next-med-icon {
    color: var(--primary);
}

.next-med-icon .material-symbols-outlined {
    font-size: 28px;
}

.next-med-details .next-med-title {
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.next-med-details p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.dashboard-greeting {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
}

.dashboard-greeting h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.dashboard-greeting p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.dashboard-patient-context {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    vertical-align: middle;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

/* Hide old header title on dashboard */
.dashboard-page .header-title-block {
    display: none !important;
}

.next-actions {
    display: grid;
    grid-template-columns: 1fr 1.2fr 2fr;
    gap: 0.75rem;
}



.btn-next-action {
    padding: 0.75rem 0.5rem;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-primary);
    white-space: nowrap;
}

.btn-next-action:active {
    transform: scale(0.96);
}

.btn-next-action.btn-take {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    grid-column: span 1;
}

.btn-next-action .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 480px) {
    .next-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .btn-next-action.btn-take {
        grid-column: span 2;
    }
}

/* Supply warnings inside next-intake card */
.supply-warnings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.supply-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.supply-chip .material-symbols-outlined {
    font-size: 14px;
}

.supply-chip-secondary {
    background: rgba(107, 114, 128, 0.08);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: default;
}

[data-theme="dark"] .supply-chip {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .supply-chip-secondary {
    background: rgba(107, 114, 128, 0.15);
}

.language-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 0.75rem;
}

.language-picker-card {
    width: min(420px, 100%);
    background: var(--glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 2.75rem 1rem 1rem;
    text-align: center;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
    position: relative;
}

.language-picker-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.language-picker-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.language-picker-close:hover,
.language-picker-close:focus-visible {
    border-color: var(--primary);
    background: rgba(var(--color-blue-500-rgb), 0.14);
}

.language-picker-options {
    display: grid;
    gap: 0.75rem;
}

.language-picker-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.language-picker-btn:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.12);
}

.language-picker-btn[data-recommended="true"] {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.16);
}

.language-picker-recommended {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--primary);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.lang-btn {
    min-width: 3.25rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .lang-btn {
        min-width: 2.75rem;
        padding: 0.5rem !important;
        font-size: 0.6875rem !important;
    }
}

/* ========================================
   ERROR BOUNDARY NOTIFICATION
   ======================================== */
.error-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: var(--bg-card);
    border: 1px solid #ef4444;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.error-notification-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.error-notification-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
    margin-left: 0.5rem;
}

.error-notification-close:hover {
    color: var(--text-primary);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   SYNC QUEUE BADGE
   ======================================== */
.sync-queue-badge {
    position: fixed;
    bottom: 80px;
    right: 16px;
    z-index: 9999;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-radius: 20px;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.sync-queue-badge.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sync-queue-badge .material-symbols-outlined {
    font-size: 16px;
    animation: pulse-icon 2s infinite;
}

@keyframes pulse-icon {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ========================================
   FITBIT INTEGRATION UI
   ======================================== */
.fitbit-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.fitbit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.fitbit-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
}

.fitbit-logo {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #00B0B9, #00D4AA);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

.fitbit-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.fitbit-status.connected {
    background: var(--success-bg);
    color: var(--success);
}

.fitbit-status.disconnected {
    background: var(--danger-bg);
    color: var(--danger);
}

.fitbit-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.fitbit-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.fitbit-metric {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
}

.fitbit-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.fitbit-metric-value .unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    opacity: 0.8;
}

[data-theme="light"] .fitbit-metric-value .unit {
    color: #6b7280;
    /* Gray-500: ensures 4.5:1 contrast (WCAG AA) */
    opacity: 1;
}

[data-theme="dark"] .fitbit-metric-value .unit {
    color: #9ca3af;
    /* Gray-400: good contrast on dark */
    opacity: 1;
}

.fitbit-metric-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.fitbit-zones {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.fitbit-zone {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
}

.fitbit-zone-bar {
    height: 4px;
    border-radius: 2px;
    margin-bottom: 0.35rem;
}

.fitbit-zone-bar.fat-burn {
    background: var(--success);
}

.fitbit-zone-bar.cardio {
    background: var(--warning);
}

.fitbit-zone-bar.peak {
    background: var(--danger);
}

.fitbit-zone-value {
    font-size: 0.85rem;
    font-weight: 600;
}

.fitbit-zone-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.fitbit-actions {
    display: flex;
    gap: 0.5rem;
}

.fitbit-actions .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 0.6rem;
}

.fitbit-last-sync {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.75rem;
}

.fitbit-empty {
    text-align: center;
    padding: 0.75rem;
}

.fitbit-empty-icon {
    font-size: 3rem;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.fitbit-empty-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Heart rate animation */
@keyframes heartbeat {

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

    15% {
        transform: scale(1.15);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.1);
    }
}

.fitbit-heart-icon {
    display: inline-block;
    color: var(--danger);
    animation: heartbeat 1.2s infinite;
}

/* --- Architectural Components (v2) --- */

/* Sync Status UI - Minimal dot only */
.sync-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    margin-left: 0.5rem;
    cursor: help;
}

.sync-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sync-dot.online {
    background: var(--success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.sync-dot.offline {
    background: var(--warning);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.sync-dot.syncing {
    background: var(--color-info);
    animation: sync-pulse 1s infinite alternate;
}

@keyframes sync-pulse {
    from {
        opacity: 0.4;
        transform: scale(0.9);
    }

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

/* Global Error Boundary UI */
.global-error-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: white;
    text-align: center;
}

.global-error-card {
    max-width: 440px;
    background: rgba(255, 255, 255, 0.05);
    padding: 3rem 2rem;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.global-error-icon {
    font-size: 4rem;
    margin-bottom: 0.75rem;
    display: block;
}

.global-error-title {
    font-family: 'Lora', serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.global-error-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

/* --- FIXES FOR LANDING PAGE --- */

/* Hero Layout & Contrast */
.landing-shell {
    padding-top: 96px;
    /* Prevent header overlap */
}

.hero-tagline {
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0.02em;
}

[data-theme='light'] .hero-tagline {
    color: var(--primary-dark);
    opacity: 0.85;
    font-weight: 600;
}

/* Ensure buttons don't break with icons */
.btn {
    white-space: nowrap;
}

/* ===========================================
   LIGHT THEME - Professional Polish
   Comprehensive overrides for light mode
   =========================================== */

/* Cards & Surfaces */
[data-theme="light"] .card,
[data-theme="light"] .feature-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .med-card,
[data-theme="light"] .patient-card,
[data-theme="light"] .role-card,
[data-theme="light"] .inventory-card,
[data-theme="light"] .profile-card,
[data-theme="light"] .login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .role-card:hover,
[data-theme="light"] .patient-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-strong);
}

/* Navigation */
[data-theme="light"] .glass-nav {
    background: var(--nav-bg);
    border-bottom-color: var(--border-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .bottom-nav {
    background: var(--nav-bg);
    border-top-color: var(--border-color);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .nav-item {
    color: var(--text-secondary);
}

[data-theme="light"] .nav-item:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .nav-item.active {
    color: var(--primary);
    background: rgba(var(--color-blue-500-rgb), 0.08);
}

/* Inputs & Forms */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: var(--input-bg);
    border-color: hsl(220, 15%, 88%);
    color: var(--text-primary);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--color-blue-500-rgb), 0.1);
    background: white;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.9;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: hsl(220, 20%, 75%);
    opacity: 0.95;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--text-secondary);
}

/* Text hierarchy */
[data-theme="light"] .text-secondary,
[data-theme="light"] .stat-label,
[data-theme="light"] .med-details,
[data-theme="light"] .patient-stats {
    color: var(--text-secondary);
}

[data-theme="light"] .text-muted,
[data-theme="light"] small,
[data-theme="light"] .helper-text {
    color: var(--text-muted);
}

/* Progress & Stats */
[data-theme="light"] .progress-ring-bg {
    stroke: var(--border-color);
}

[data-theme="light"] .stat-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .btn-icon {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

[data-theme="light"] .btn-icon:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--text-primary);
}

[data-theme="light"] .stat-value {
    color: var(--text-primary);
}

/* Tables */
[data-theme="light"] th {
    background: var(--input-bg);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="light"] td {
    border-color: var(--border-color);
}

[data-theme="light"] tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* Badges & Tags */
[data-theme="light"] .badge,
[data-theme="light"] .meal-tag {
    background: var(--input-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .badge.success,
[data-theme="light"] .status-taken {
    background: var(--color-success-light);
    color: #065f46;
    border-color: transparent;
}

[data-theme="light"] .badge.danger,
[data-theme="light"] .status-missed {
    background: var(--color-danger-light);
    color: #991b1b;
    border-color: transparent;
}

[data-theme="light"] .badge.warning,
[data-theme="light"] .status-pending {
    background: var(--color-warning-light);
    color: #92400e;
    border-color: transparent;
}

/* Mesh gradient for light mode */
[data-theme="light"] .mesh-gradient {
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(at 0% 0%, rgba(var(--color-blue-500-rgb), 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(var(--color-success-rgb), 0.05) 0px, transparent 50%);
}

/* Logo shimmer for light mode */
[data-theme="light"] .logo-text {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Filter buttons */
[data-theme="light"] .filter-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

[data-theme="light"] .filter-btn:hover {
    background: var(--input-bg);
    border-color: var(--border-color-strong);
}

[data-theme="light"] .filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Sync status */
[data-theme="light"] .sync-status {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
}

/* Install prompt */
[data-theme="light"] .install-prompt {
    background: var(--glass-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-xl);
}

[data-theme="light"] .update-banner {
    background: var(--glass-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-xl);
}

/* FAB */
[data-theme="light"] .fab {
    box-shadow: var(--shadow-lg);
}

/* Dividers */
[data-theme="light"] hr,
[data-theme="light"] .divider {
    border-color: var(--border-color);
}

/* Scrollbar styling for light mode */
[data-theme="light"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--input-bg);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--border-color-strong);
    border-radius: var(--radius-full);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */

/* Sidebar Variables */
:root {
    --sidebar-width: 200px;
    --sidebar-collapsed-width: 0px;
    --sidebar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1023px) {
    :root {
        --sidebar-width: min(80vw, 300px);
    }
}

/* Sidebar Container */
.sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width, 320px);
    height: 100vh;
    height: 100dvh;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-color);
    z-index: 1100;
    /* Higher than glass-nav */
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--sidebar-transition, 0.3s ease);
    overflow: hidden;
}

.sidebar-nav.open {
    transform: translateX(0);
}

/* Mobile: Hide bottom-nav when sidebar is available */
body.has-sidebar .bottom-nav {
    display: none;
}

/* Desktop: Always visible sidebar */
@media (min-width: 1024px) {
    .sidebar-nav {
        transform: translateX(0);
    }

    body.has-sidebar {
        padding-left: 0;
    }

    body.has-sidebar .glass-nav {
        left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }

    .sidebar-close {
        display: none;
    }

    .burger-btn {
        display: none !important;
    }
}

/* Sidebar Overlay (mobile) */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 1090;
    transition: opacity var(--sidebar-transition), visibility var(--sidebar-transition);
}

.sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
}

.sidebar-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}

.sidebar-patient-context {
    display: flex;
    align-items: center;
}

.sidebar-patient-context .context-select,
.sidebar-patient-context select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.sidebar-patient-context .context-badge {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    color: var(--text-color);
    opacity: 0.7;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.sidebar-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.sidebar-logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Lora', serif;
}

.sidebar-close {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.sidebar-close:hover {
    background: var(--input-bg);
}

/* Sidebar Content */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
}

/* Sidebar Groups */
.sidebar-group {
    margin-bottom: 0.5rem;
}

.sidebar-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 0.2s;
}

.sidebar-group-header:hover {
    color: var(--text-primary);
}

.sidebar-group-title {
    font-family: 'Lora', serif;
}

.sidebar-group-arrow {
    font-size: 18px !important;
    transition: transform 0.2s;
}

.sidebar-group.collapsed .sidebar-group-arrow {
    transform: rotate(-90deg);
}

.sidebar-group-items {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.3s ease;
}

.sidebar-group.collapsed .sidebar-group-items {
    max-height: 0;
}

/* Desktop: Groups are collapsible, only active expanded by default */
@media (min-width: 1024px) {
    .sidebar-group-header {
        cursor: pointer;
    }

    .sidebar-group-arrow {
        display: block;
    }
}

/* Sidebar Items */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    position: relative;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.sidebar-item:hover {
    background: var(--input-bg);
    color: var(--text-primary);
}

.sidebar-item.active {
    background: rgba(var(--color-blue-500-rgb, 37, 99, 235), 0.08);
    color: var(--primary);
    font-weight: 600;
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    border-radius: 0 3px 3px 0;
}

.sidebar-item .material-symbols-outlined {
    font-size: 22px;
}

.sidebar-item.active .material-symbols-outlined {
    opacity: 1;
}

.sidebar-active-dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    margin-left: auto;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-color);
}

.sidebar-logout {
    color: var(--danger) !important;
}

.sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* ============================================
   BURGER BUTTON
   ============================================ */

.burger-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.burger-btn:hover {
    background: var(--input-bg);
}

/* ============================================
   PATIENT CONTEXT DROPDOWN
   ============================================ */

.patient-context {
    position: relative;
}

.patient-context-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Lora', serif;
    transition: all 0.2s;
    max-width: 180px;
}

.patient-context-btn:hover {
    border-color: var(--primary);
}

.patient-context-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-context-btn .material-symbols-outlined {
    font-size: 18px;
    opacity: 0.6;
    transition: transform 0.2s;
}

.patient-context-dropdown.open+.patient-context-btn .material-symbols-outlined,
.patient-context-dropdown.open~.patient-context-btn .material-symbols-outlined {
    transform: rotate(180deg);
}

.patient-context-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    z-index: 100;
    overflow: hidden;
}

.patient-context-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.patient-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.patient-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    transition: background 0.2s;
}

.patient-list-item:hover {
    background: var(--input-bg);
}

.patient-list-item.active {
    background: rgba(var(--color-blue-500-rgb, 37, 99, 235), 0.1);
    color: var(--primary);
}

.patient-list-item .material-symbols-outlined {
    font-size: 20px;
    opacity: 0.7;
}

.patient-list-item .material-symbols-outlined:last-child {
    margin-left: auto;
    font-size: 18px;
    color: var(--success);
}

/* ============================================
   BODY ADJUSTMENTS FOR SIDEBAR
   ============================================ */

body.sidebar-open {
    overflow: hidden;
}

/* Adjust main content when sidebar is present */
@media (min-width: 1024px) {
    body.has-sidebar .screen-shell {
        max-width: calc(100% - var(--sidebar-width));
    }
}

/* ============================================
   LIGHT THEME SIDEBAR
   ============================================ */

[data-theme="light"] .sidebar-nav {
    background: rgba(255, 255, 255, 0.97);
    border-right-color: var(--border-color);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .sidebar-group-header {
    color: var(--text-muted);
}

[data-theme="light"] .sidebar-item {
    color: var(--text-secondary);
}

[data-theme="light"] .sidebar-item:hover {
    background: var(--input-bg);
}

[data-theme="light"] .sidebar-item.active {
    background: rgba(var(--color-blue-500-rgb), 0.08);
}

[data-theme="light"] .patient-context-dropdown {
    background: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.material-symbols-outlined {
    visibility: hidden !important;
}

body.icons-ready .material-symbols-outlined {
    visibility: visible !important;
}

/* --- Header Avatar & Role Popover --- */

.header-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-left: 0.5rem;
}

.header-avatar-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 37, 99, 235), 0.3);
}

.header-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Role Popover Menu */
.role-popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    /* Above Glass Nav */
    background: transparent;
}

.role-popover-menu {
    position: absolute;
    top: 70px;
    /* Below header */
    right: 20px;
    width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 10002;
    animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
}

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

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

.role-popover-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.25rem;
}

.role-popover-user-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-popover-user-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.role-menu-item:hover {
    background: var(--input-bg);
    color: var(--text-primary);
}

.role-menu-item.active {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: var(--primary);
    font-weight: 600;
}

.role-menu-item .material-symbols-outlined {
    font-size: 20px;
}

.role-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0.5rem;
}

/* Micro-animations */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 600ms linear;
    background-color: rgba(255, 255, 255, 0.4);
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    pointer-events: none;
}

[data-theme="light"] .btn-secondary .ripple-effect {
    background-color: rgba(0, 0, 0, 0.1);
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Sidebar content constraints for desktop */
@media (min-width: 1024px) {
    body.has-sidebar .screen-scroll {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    body.has-sidebar main.screen-shell.container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}