/* 
 * MedApp Global Theme Overrides
 * Base: Radzen Blazor Material3 Dark (FREE)
 * DO NOT use inline styles - extend these CSS variables instead
 */

:root {
    /* Spacing System (Radzen-compatible) */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */

    /* Action Hierarchy */
    --action-primary-size: 2.5rem;     /* 40px */
    --action-secondary-size: 2rem;     /* 32px */
    --action-tertiary-size: 1.5rem;    /* 24px */
    
    /* Touch Targets (Mobile) */
    --touch-target-min: 44px;          /* iOS/Android minimum */
    
    /* Layout Dimensions */
    --sidebar-width: 280px;
    --mobile-bottom-nav-height: 64px;
    --header-height: 64px;
    
    /* Z-Index Layers */
    --z-header: 1000;
    --z-sidebar: 900;
    --z-bottom-nav: 1000;
    --z-modal: 1100;
    --z-toast: 1200;
}

/* Dark Theme Tokens (Material3 Dark) */
body {
    --rz-primary: #5bbad5;           /* Clinical navy highlight for dark theme */
    --rz-danger: #ef6a5f;            /* Error red */
    --rz-success: #2db07b;           /* Success green */
    --rz-warning: #f2a45a;           /* Warning orange */
    --rz-info: #6ec3e6;              /* Info blue */
    
    --rz-surface: #0b141a;           /* Dark surface */
    --rz-surface-variant: #111c24;   /* Elevated surface */
    --rz-surface-hover: rgba(255, 255, 255, 0.08);
    
    --rz-text-primary: rgba(255, 255, 255, 0.87);
    --rz-text-secondary: rgba(255, 255, 255, 0.60);
    --rz-text-disabled: rgba(255, 255, 255, 0.38);
    
    --rz-border-color: rgba(230, 238, 243, 0.16);
    --rz-divider-color: rgba(230, 238, 243, 0.16);
}

/* Global Utility Classes (Minimal - prefer Radzen Gap) */
.rz-p-0 { padding: 0; }
.rz-p-1 { padding: var(--spacing-xs); }
.rz-p-2 { padding: var(--spacing-sm); }
.rz-p-3 { padding: var(--spacing-md); }
.rz-p-4 { padding: var(--spacing-lg); }
.rz-p-5 { padding: var(--spacing-xl); }

.rz-mt-0 { margin-top: 0; }
.rz-mt-1 { margin-top: var(--spacing-xs); }
.rz-mt-2 { margin-top: var(--spacing-sm); }
.rz-mt-3 { margin-top: var(--spacing-md); }
.rz-mt-4 { margin-top: var(--spacing-lg); }
.rz-mt-5 { margin-top: var(--spacing-xl); }

.rz-mb-0 { margin-bottom: 0; }
.rz-mb-1 { margin-bottom: var(--spacing-xs); }
.rz-mb-2 { margin-bottom: var(--spacing-sm); }
.rz-mb-3 { margin-bottom: var(--spacing-md); }
.rz-mb-4 { margin-bottom: var(--spacing-lg); }
.rz-mb-5 { margin-bottom: var(--spacing-xl); }

/* Full Width Utility */
.w-100 { width: 100%;}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-bottom-nav-height);
    background-color: var(--rz-surface-variant);
    border-top: 1px solid var(--rz-border-color);
    z-index: var(--z-bottom-nav);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: var(--touch-target-min);
    color: var(--rz-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.mobile-bottom-nav-item:hover,
.mobile-bottom-nav-item.active {
    color: var(--rz-primary);
}

.mobile-bottom-nav-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.mobile-bottom-nav-label {
    font-size: 12px;
    font-weight: 500;
}

/* Mobile Layout Body Clearance */
.mobile-layout-body {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--spacing-md));
}

/* Loading States */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--rz-surface) 0%,
        var(--rz-surface-variant) 50%,
        var(--rz-surface) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* Empty States */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--rz-text-secondary);
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--rz-text-primary);
}

.empty-state-description {
    font-size: 0.875rem;
    max-width: 400px;
}

/* Touch-Friendly Action Buttons */
@media (max-width: 768px) {
    .rz-button {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }
}

/* Responsive Sidebar */
@media (max-width: 768px) {
    .rz-sidebar {
        width: 100% !important;
        max-width: 320px;
    }
}

/* FAB (Floating Action Button) Container */
.fab-container {
    position: fixed;
    z-index: 100;
}

/* Form Section Card Spacing */
.form-section-card {
    margin-bottom: var(--spacing-md);
}

/* Button Loading State */
.rz-button-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

/* MedApp premium shell */
:root {
    --app-font-body: "Aptos", "Segoe UI", "Helvetica Neue", sans-serif;
    --app-font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --app-shell-bg:
        radial-gradient(circle at top left, rgba(44, 191, 174, 0.08), transparent 22%),
        radial-gradient(circle at top right, rgba(91, 186, 213, 0.08), transparent 26%),
        linear-gradient(180deg, #08111a, #0d1824 42%, #0e1b28);
    --app-shell-surface: rgba(10, 24, 36, 0.82);
    --app-shell-surface-strong: rgba(6, 18, 28, 0.94);
    --app-shell-border: rgba(143, 221, 234, 0.14);
    --app-shell-shadow: 0 22px 60px rgba(2, 8, 14, 0.34);
    --app-shell-highlight: linear-gradient(135deg, #8fddea, #2cbfae);
}

body {
    font-family: var(--app-font-body);
    background: var(--app-shell-bg);
    color: var(--rz-text-primary);
}

.app-shell {
    min-height: 100vh;
    background: transparent;
}

.app-shell-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    padding: 1rem 1.25rem 0;
    background: transparent;
}

.app-shell-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--app-shell-border);
    border-radius: 1.5rem;
    background: rgba(6, 18, 28, 0.82);
    backdrop-filter: blur(18px);
    box-shadow: var(--app-shell-shadow);
}

.app-shell-brand-cluster,
.app-shell-brand-link,
.app-shell-toolbar,
.app-shell-user-pill,
.app-shell-footer-inner {
    display: flex;
    align-items: center;
}

.app-shell-brand-cluster,
.app-shell-toolbar {
    gap: 0.75rem;
}

.app-shell-brand-link {
    gap: 0.85rem;
    color: var(--rz-text-primary);
    text-decoration: none;
}

.app-shell-brand-mark,
.app-shell-user-pill,
.app-shell-status-pill,
.app-nav-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--app-shell-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.app-shell-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    color: #06141f;
    background: var(--app-shell-highlight);
    box-shadow: 0 10px 24px rgba(44, 191, 174, 0.22);
}

.app-shell-brand-copy {
    display: grid;
    gap: 0.08rem;
}

.app-shell-brand-overline {
    color: #8fddea;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.app-shell-brand-title {
    font-family: var(--app-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.app-shell-status-pill,
.app-shell-user-pill {
    padding: 0.55rem 0.85rem;
    color: var(--rz-text-primary);
}

.app-shell-status-pill {
    font-size: 0.82rem;
    color: var(--rz-text-secondary);
}

.app-shell-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #2cbfae;
    box-shadow: 0 0 0 6px rgba(44, 191, 174, 0.16);
}

.app-shell-icon-button,
.app-shell-cta-button,
.app-shell-toggle {
    border-radius: 999px !important;
}

.app-shell-sidebar {
    margin: 1rem 0 1rem 1rem;
    border: 1px solid var(--app-shell-border);
    border-radius: 1.75rem;
    background: var(--app-shell-surface);
    backdrop-filter: blur(20px);
    box-shadow: var(--app-shell-shadow);
    overflow: hidden;
}

.app-shell-body {
    background: transparent;
}

.app-shell-page {
    padding: 0 1rem 1.25rem;
}

.app-shell-page-public {
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 0.75rem;
}

.app-shell-main {
    padding-top: 1rem;
}

.app-shell-footer {
    background: transparent;
    padding: 0 1rem 1rem;
}

.app-shell-footer-inner {
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--app-shell-border);
    border-radius: 1.25rem;
    background: rgba(6, 18, 28, 0.72);
    color: var(--rz-text-secondary);
    font-size: 0.82rem;
}

.app-shell-public-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 1px solid var(--app-shell-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--rz-text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.app-shell-public-pill:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.07);
}

.app-shell-public-pill--primary {
    color: #06141f;
    background: var(--app-shell-highlight);
    border-color: rgba(143, 221, 234, 0.28);
}

.nav-menu {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.app-nav-intro,
.app-nav-summary {
    padding: 1rem;
}

.app-nav-intro {
    border-radius: 1.35rem;
    border: 1px solid var(--app-shell-border);
    background:
        radial-gradient(circle at top right, rgba(143, 221, 234, 0.18), transparent 30%),
        rgba(255, 255, 255, 0.04);
}

.app-nav-kicker,
.app-nav-summary-label {
    color: #8fddea;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.app-nav-intro h3,
.app-nav-summary-value {
    margin: 0.55rem 0 0.4rem;
    color: var(--rz-text-primary);
    font-family: var(--app-font-display);
    font-size: 1.2rem;
}

.app-nav-intro p {
    margin: 0;
    color: var(--rz-text-secondary);
    line-height: 1.55;
}

.app-nav-summary {
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

.app-nav-panel .rz-navigation-item-wrapper,
.app-nav-panel .rz-navigation-item-link {
    border-radius: 1rem;
}

.app-nav-panel .rz-navigation-item-link {
    margin-bottom: 0.25rem;
    color: var(--rz-text-primary);
}

.app-nav-panel .rz-navigation-item-link:hover,
.app-nav-panel .rz-navigation-item-wrapper-active > .rz-navigation-item-link {
    background: rgba(143, 221, 234, 0.1);
}

.mobile-bottom-nav {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: auto;
    padding: 0.45rem;
    border: 1px solid var(--app-shell-border);
    border-radius: 1.35rem;
    background: rgba(6, 18, 28, 0.88);
    backdrop-filter: blur(20px);
    box-shadow: var(--app-shell-shadow);
}

.mobile-bottom-nav-item {
    gap: 0.2rem;
    border-radius: 1rem;
}

.mobile-bottom-nav-item.active {
    background: rgba(143, 221, 234, 0.1);
}

.app-shell-page-mobile {
    padding: 0.35rem 0.35rem calc(var(--mobile-bottom-nav-height) + 2rem);
}

.app-shell-header-mobile {
    padding: 0.75rem 0.75rem 0;
}

.app-shell-header-inner-mobile {
    padding: 0.8rem 0.9rem;
}

.app-shell-brand-link-mobile .app-shell-brand-title {
    font-size: 1.15rem;
}

.app-shell-user-pill-mobile {
    padding: 0.5rem;
}

@media (max-width: 960px) {
    .app-shell-header-inner,
    .app-shell-footer-inner {
        flex-wrap: wrap;
    }

    .app-shell-toolbar {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .app-shell-status-pill {
        display: none;
    }
}

@media (max-width: 640px) {
    .app-shell-public-pill {
        flex: 1 1 calc(50% - 0.75rem);
    }

    .app-shell-footer-inner {
        justify-content: center;
    }
}