/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #1f2937;
    background: #ffffff;
    margin: 0;
    padding: 0;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="medical-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(102,126,234,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23medical-pattern)"/></svg>');
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

:root { 
    --sidebar-width: 272px;
    /* Professional Color Palette - Aligned with Login */
    --app-accent: #2563eb;
    --app-accent-dark: #1d4ed8;
    --app-accent-light: #dbeafe;
    --app-text: #1f2937;
    --app-text-muted: #6b7280;
    --app-text-light: #d1d5db;
    --app-border: #e5e7eb;
    --app-surface: #ffffff;
    --app-background: #f9fafb;
    --app-success: #10b981;
    --app-error: #ef4444;
    --app-warning: #f59e0b;
}

/* Login page layout and branding rules are maintained in assets/css/login.css. */

    .alert {
        padding: 14px 16px;
        border-radius: 8px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 13px;
        font-weight: 500;
        border-left: 4px solid;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    .alert-success {
        background: rgba(16, 185, 129, 0.08);
        color: #047857;
        border-left-color: var(--app-success);
    }

    .alert-error {
        background: rgba(239, 68, 68, 0.08);
        color: #991b1b;
        border-left-color: var(--app-error);
    }

    .alert-warning {
        background: rgba(245, 158, 11, 0.08);
        color: #92400e;
        border-left-color: var(--app-warning);
    }

    .alert-info {
        color: #1e40af;
        border-left-color: var(--app-accent);
    }

    .alert-close {
        margin-left: auto;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }

.alert-close:hover {
    opacity: 1;
}

    .alert i {
        font-size: 16px;
        flex-shrink: 0;
    }

.input-group {
    position: relative;
}

.input-group i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 16px;
    transition: color 0.2s ease;
}

.input-group input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #1f2937;
}

.input-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    background: #ffffff;
}

.input-group input:focus + i {
    color: #3b82f6;
}

.form-options {
    margin-bottom: 24px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    padding: 0;
    border: none;
    background: transparent;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-text {
    font-weight: 500;
    color: #6b7280;
}

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        letter-spacing: 0.025em;
        min-height: 40px;
        white-space: nowrap;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--app-accent), var(--app-accent-dark));
        color: white;
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
        border: none;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        box-shadow: 0 14px 32px rgba(37, 99, 235, 0.35);
        transform: translateY(-2px);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

    .btn-secondary {
        background: var(--app-surface);
        color: var(--app-accent);
        border: 2px solid var(--app-accent);
        box-shadow: none;
    }

    .btn-success {
        background: linear-gradient(135deg, var(--app-success), #059669);
        color: white;
        box-shadow: 0 10px 24px rgba(16, 185, 129, 0.25);
    }

    .btn-success:hover {
        background: linear-gradient(135deg, #059669, #047857);
        box-shadow: 0 14px 32px rgba(16, 185, 129, 0.35);
        transform: translateY(-2px);
    }

    .btn-danger {
        background: linear-gradient(135deg, var(--app-error), #dc2626);
        color: white;
        box-shadow: 0 10px 24px rgba(239, 68, 68, 0.25);
    }

    .btn-danger:hover {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        box-shadow: 0 14px 32px rgba(239, 68, 68, 0.35);
        transform: translateY(-2px);
    }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn-action:focus-visible,
.action-menu-panel button:focus-visible,
.quick-filter-pill:focus-visible,
.tab-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
    font-size: 16px;
}

/* Dashboard Layout */
.dashboard-container {
    display: flex;
    min-height: 100vh;
}

/* Ensure the app canvas spans the full width with no unintended margins */
html, body { width: 100%; }
body { margin: 0; padding: 0; }

/* Sidebar appears instantly - no animation */
.sidebar {
    transform: translateX(0);
    opacity: 1;
}

/* ===== SYSTEM SETTINGS STYLES ===== */

/* Settings Header */
.settings-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.settings-header .header-content h1 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-header .header-content p {
    color: #6b7280;
    font-size: 16px;
    margin: 0;
}

.settings-header .header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    gap: 4px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: relative;
    z-index: 10;
}

.tab-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.tab-btn.active {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.tab-btn i {
    font-size: 16px;
}

/* Settings Content */
.settings-content {
    min-height: 200px;
}

.tab-content {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tab-content.active {
    display: block !important;
    opacity: 1;
}

/* Settings Grid */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Settings Cards */
.settings-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s ease;
}

.settings-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: none; }

.settings-card .card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.settings-card .card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-card .card-header h3 i {
    color: #ef4444;
    font-size: 20px;
}

.settings-card .card-body {
    padding: 24px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* Toggle Switch */
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: var(--app-text);
        font-size: 13px;
        letter-spacing: 0.3px;
    }

    input[type="text"], input[type="email"], input[type="password"], input[type="search"], 
    input[type="number"], input[type="date"], input[type="time"], textarea, select {
        width: 100%;
        border: 2px solid var(--app-border);
        border-radius: 8px;
        font-size: 14px;
        background-color: var(--app-surface);
        color: var(--app-text);
        transition: all 0.2s ease;
        box-sizing: border-box;
    }

    input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: var(--app-accent);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
        background-color: var(--app-surface);
    }

    input::placeholder {
        color: var(--app-text-muted);
    }

    textarea {
        resize: vertical;
        min-height: 100px;
        font-family: 'Inter', system-ui, sans-serif;
    }

    /* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.toggle-switch label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: 0.3s;
    border-radius: 24px;
    padding: 12px;
}

.toggle-switch label:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + label {
    background-color: #3b82f6;
    padding: 12px;
}

.toggle-switch input:checked + label:before {
    transform: translateX(20px);
}

/* Range Slider */
.range-slider {
    display: flex;
    align-items: center;
    gap: 16px;
}

.range-input {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #d1d5db;
    outline: none;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.range-value {
    font-weight: 600;
    color: #ef4444;
    min-width: 60px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .settings-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
    
    .settings-header .header-actions {
        width: 100%;
        justify-content: stretch;
    }
    
    .settings-header .header-actions .btn {
        flex: 1;
    }
    
    .settings-tabs {
        padding: 4px;
    }
    
    .tab-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .color-picker {
        flex-direction: column;
        align-items: flex-start;
    }
}

.sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px 12px 12px;
    background: linear-gradient(180deg, rgba(19, 47, 95, 0.78) 0%, rgba(16, 39, 78, 0.56) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.sidebar-header-top {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sidebar-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 12%, rgba(56, 189, 248, 0.14) 0%, transparent 34%),
        radial-gradient(circle at 82% 86%, rgba(37, 99, 235, 0.12) 0%, transparent 42%);
    pointer-events: none;
}

.logo.big-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 2;
}

.sidebar-brand-image {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

.logo.big-logo .alzcare-text {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-align: center;
    letter-spacing: 1px;
    margin: 0;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #fff 0%, #f1f5f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-portal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.24);
    background: rgba(15, 23, 42, 0.35);
    color: rgba(239, 246, 255, 0.9);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Heart Pulse Animation */
@keyframes heartPulse {
    0% {
        transform: scale(1);
        color: #ef4444;
    }
    25% {
        transform: scale(1.1);
        color: #dc2626;
    }
    50% {
        transform: scale(1.05);
        color: #f87171;
    }
    75% {
        transform: scale(1.1);
        color: #dc2626;
    }
    100% {
        transform: scale(1);
        color: #ef4444;
    }
}

/* Heart Glow Animation */
@keyframes heartGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Enhanced sidebar navigation styling */
.sidebar-nav {
    padding: 8px 0 0 0;
    flex: 1 1 auto;
    overflow: visible;
    background: rgba(15, 23, 42, 0.3);
    position: relative;
}

.sidebar-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.2) 50%, transparent 100%);
}

/* Scrollbar styling for sidebar */
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(239, 68, 68, 0.3);
    border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(239, 68, 68, 0.5);
}
.nav-section {
    margin-bottom: 8px;
    padding: 0 12px;
}

.nav-list {
    gap: 0px;
    margin: 0;
    padding: 0 8px;
}

.nav-item {
    margin-bottom: 0px;
    border-radius: 8px;
    overflow: hidden;
}

.nav-link {
    color: #e2e8f0;
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
    transition: width 0.3s ease;
}

.nav-link:hover::before {
    width: 100%;
}

.nav-link i {
    font-size: 1.1rem;
    width: 18px;
    text-align: center;
    color: #94a3b8;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-profile-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #b2b4b9;
}

.dropdown-profile-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    margin-right: 12px;
}

.user-dropdown-btn:hover {
    background-color: #e5e7eb;
}

.user-dropdown-btn i {
    font-size: 16px;
    color: #6b7280;
}

.user-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: white;
    min-width: 200px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    z-index: 1000;
    margin-top: 4px;
    border: 1px solid #e5e7eb;
}

.user-dropdown-content.show {
    display: block;
}

.user-dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.user-dropdown-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.user-dropdown-email {
    font-size: 12px;
    color: #6b7280;
}

.user-dropdown-menu {
    padding: 8px 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
}

.user-dropdown-item:hover {
    background-color: #f9fafb;
    color: #1f2937;
}

.user-dropdown-item i {
    font-size: 16px;
    width: 16px;
    text-align: center;
}

.user-dropdown-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 8px 0;
}



.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 20px 24px 20px 20px;
    background: transparent;
    min-height: 100vh;
    max-width: calc(100vw - var(--sidebar-width));
    overflow-x: hidden;
    transition: margin-left 0.25s ease, max-width 0.25s ease;
}

/* Keep symmetrical side spacing inside content area */
.main-content > * { box-sizing: border-box; }

/* Header Styles - Medical Theme */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 24px 13px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 20px;
    border-radius: 0;
    border-top: 3px solid #667eea;
    min-height: 84px;
    max-height: none;
}

.header-left {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.header-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.12);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header-subtitle {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.35;
    max-width: 72ch;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
    position: relative;
    padding-left: 16px;
}

.header h1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 2px;
}

.header-copy .header-subtitle,
.header-copy .header-badge {
    margin-left: 16px;
}

.header-right .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
    cursor: pointer;

    padding: 0;
    margin: 0;

    box-sizing: border-box;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    border-width: 1px;
    
    background-color: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.2);
    color: #667eea;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-right .icon-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-right .icon-btn:hover {
    background-color: #f8fafc; 
    color: #667eea; 
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15); 
    border-color: rgba(102, 126, 234, 0.3); 
}

.header-right .icon-btn:active { transform: none; }

.header-right .user-dropdown-btn {
    background-color: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.2);
    padding: 6px 12px;
    border-radius: 8px;
    color: #667eea;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    height: 44px;
    width: auto;
    min-width: 120px;
    max-width: 200px;
    backdrop-filter: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.header-right .user-dropdown-btn span {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.header-right .user-dropdown-btn i:last-child {
    display: inline;
    font-size: 12px;
    margin-left: 4px;
    flex-shrink: 0;
}

.header-right .user-dropdown-btn .user-profile-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #667eea;
    flex-shrink: 0;
}

.header-right .user-dropdown-btn:hover {
    background-color: #f8fafc; 
    color: #667eea; 
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15); 
    border-color: rgba(102, 126, 234, 0.3); 
}

.header-right .user-dropdown-btn:active { transform: none; }

.message-badge {
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* Notification badge styles are handled by the main .notification-badge rule with border-color fallbacks */

/* Notification Dropdowns - Fixed */
.notification-dropdown,
.message-dropdown,
.search-dropdown,
.quick-actions-dropdown {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.header-right > .user-dropdown {
    order: 1;
}

/* Ensure buttons inside wrapper divs have no margins */
.header-right > .notification-dropdown > .icon-btn,
.header-right > .message-dropdown > .icon-btn,
.header-right > .quick-actions-dropdown > .icon-btn,
.header-right > .user-dropdown > .user-dropdown-btn {
    margin: 0 !important;
}

.notification-dropdown .notification-content,
.message-dropdown .message-content,
.search-dropdown .search-content,
.quick-actions-dropdown .quick-actions-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    min-width: 350px;
    max-width: 400px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    z-index: 1000;
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    max-height: 500px;
    overflow: hidden;
}

.notification-dropdown .notification-content.show,
.message-dropdown .message-content.show,
.search-dropdown .search-content.show,
.quick-actions-dropdown .quick-actions-content.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

.search-dropdown .search-content {
    min-width: 400px;
    max-width: 500px;
}

.search-dropdown .search-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.search-dropdown .search-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.search-dropdown .search-input-wrapper {
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.search-dropdown .search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.search-dropdown #globalSearchInput {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.search-dropdown #globalSearchInput:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-dropdown .search-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.search-dropdown .search-empty {
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

.search-dropdown .search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    transition: background-color 0.2s;
    margin-bottom: 4px;
}

.search-dropdown .search-result-item:hover {
    background-color: #f3f4f6;
}

.search-dropdown .search-result-item i {
    color: #667eea;
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.search-dropdown .search-result-content {
    flex: 1;
}

.search-dropdown .search-result-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.search-dropdown .search-result-subtitle {
    font-size: 12px;
    color: #6b7280;
}

.search-dropdown .search-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.search-dropdown .search-footer small {
    color: #9ca3af;
    font-size: 12px;
}

.search-dropdown .search-footer kbd {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-family: monospace;
}

/* Quick Actions Dropdown Styles */
.quick-actions-dropdown .quick-actions-content {
    min-width: 220px;
    max-width: 280px;
}

.quick-actions-dropdown .quick-actions-header {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.quick-actions-dropdown .quick-actions-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.quick-actions-dropdown .quick-actions-list {
    padding: 8px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-actions-dropdown .quick-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #1f2937;
    background-color: transparent;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.quick-actions-dropdown button.quick-action-item {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.quick-actions-dropdown button.quick-action-item:hover {
    background-color: #f3f4f6;
    border-color: #667eea;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.1);
}

.quick-actions-dropdown button.quick-action-item i {
    color: #667eea;
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.quick-actions-dropdown button.quick-action-item span {
    font-size: 13px;
    font-weight: 500;
}

.quick-actions-dropdown .quick-action-item:hover {
    background-color: #f3f4f6;
    border-color: #667eea;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.1);
}

.quick-actions-dropdown .quick-action-item i {
    color: #667eea;
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.quick-actions-dropdown .quick-action-item span {
    font-size: 13px;
    font-weight: 500;
}

/* Message Dropdown Additional Styles */
.message-dropdown .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.message-dropdown .message-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.message-dropdown .compose-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}

.message-dropdown .compose-btn:hover {
    background: #5568d3;
}

.message-dropdown .message-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.message-dropdown .message-empty {
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

.message-dropdown .message-item {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.message-dropdown .message-item:hover {
    background-color: #f3f4f6;
}

.message-dropdown .message-item.unread {
    background-color: #eef2ff;
    font-weight: 500;
}

.message-dropdown .message-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.message-dropdown .message-time {
    font-size: 12px;
    color: #9ca3af;
}

.message-dropdown .message-item-subject {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: #1f2937;
}

.message-dropdown .message-item-preview {
    font-size: 12px;
    color: #6b7280;
}

.message-dropdown .message-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.message-dropdown .message-footer a {
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.message-dropdown .message-footer a:hover {
    text-decoration: underline;
}

/* Strong overrides for quick-action modals to ensure scrollability (kept in style.css per request) */
.modal-content.quick-action-modal {
    /* limit modal height so page scrollbar doesn't conflict */
    max-height: calc(100vh - 120px) !important;
    width: min(760px, calc(100% - 32px)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.modal-content.quick-action-modal .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 200px) !important;
    padding: 20px !important;
}

@media (max-width: 768px) {
    .modal-content.quick-action-modal { width: calc(100% - 24px) !important; max-height: calc(100vh - 80px) !important; }
    .modal-content.quick-action-modal .modal-body { max-height: calc(100vh - 160px) !important; }
}

/* Make quick-action modal content use flex layout so internal sections can scroll
   even when the modal doesn't include a .modal-body element (quick-action markup). */
.modal-content.quick-action-modal {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 120px) !important;
    overflow: hidden !important;
}

.modal-content.quick-action-modal .modal-header {
    flex: 0 0 auto !important;
}

.modal-content.quick-action-modal form.modal-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important; /* allow flex child to shrink for scrolling */
    overflow: hidden !important;
}

.modal-content.quick-action-modal .form-sections {
    flex: 1 1 auto !important;
    min-height: 0 !important; /* critical for WebKit to allow scrolling */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px !important;
    max-height: calc(100vh - 240px) !important;
}

.modal-content.quick-action-modal .form-actions {
    flex: 0 0 auto !important;
    border-top: 1px solid rgba(0,0,0,0.04) !important;
    padding: 12px 16px !important;
    background: transparent !important;
}

/* Reassert full quick-action form layout so shared page styles don't collapse fields */
.modal-content.quick-action-modal .form-sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.modal-content.quick-action-modal .form-section {
    display: block !important;
    padding: 20px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%) !important;
    border: 1px solid #dbe7f5 !important;
    overflow: visible !important;
}

.modal-content.quick-action-modal .form-section > * {
    display: block;
}

.modal-content.quick-action-modal .section-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #e2ebf5 !important;
}

.modal-content.quick-action-modal .section-header h4 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
}

.modal-content.quick-action-modal .form-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.modal-content.quick-action-modal .form-row:last-child {
    margin-bottom: 0 !important;
}

.modal-content.quick-action-modal .form-group {
    display: block !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

.modal-content.quick-action-modal .form-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    color: #1f2937 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

.modal-content.quick-action-modal .input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.modal-content.quick-action-modal .input-icon {
    display: inline-flex !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #7b8ca3 !important;
    font-size: 0.9rem !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.modal-content.quick-action-modal .input-wrapper .form-input,
.modal-content.quick-action-modal .input-wrapper .form-select,
.modal-content.quick-action-modal .input-wrapper .form-textarea {
    display: block !important;
    width: 100% !important;
    min-height: 46px !important;
    border: 1px solid #d5e1ee !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    box-shadow: none !important;
}

.modal-content.quick-action-modal .input-wrapper .form-textarea {
    min-height: 110px !important;
    padding-top: 12px !important;
    resize: vertical !important;
}

.modal-content.quick-action-modal .checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.modal-content.quick-action-modal .checkbox-group .checkbox-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border: 1px solid #d5e1ee !important;
    border-radius: 999px !important;
    background: #ffffff !important;
}

.modal-content.quick-action-modal .form-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.modal-content.quick-action-modal .form-actions-left,
.modal-content.quick-action-modal .form-actions-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.modal-content.quick-action-modal .form-actions-right {
    justify-content: flex-end !important;
}

@media (max-width: 768px) {
    .modal-content.quick-action-modal .form-row {
        grid-template-columns: 1fr !important;
    }

    .modal-content.quick-action-modal .form-actions,
    .modal-content.quick-action-modal .form-actions-left,
    .modal-content.quick-action-modal .form-actions-right {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .modal-content.quick-action-modal .form-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .modal-content.quick-action-modal { max-height: calc(100vh - 80px) !important; }
    .modal-content.quick-action-modal .form-sections { max-height: calc(100vh - 180px) !important; }
}

.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-btn {
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.user-dropdown-btn:hover {
    background-color: #f3f4f6;
}

.header * {
    box-sizing: border-box;
}

.medication-dashboard .header-content {
    margin-bottom: 0;
}

.medication-dashboard .header-content h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 12px;
}

.medication-dashboard .header-content p {
    margin: 8px 0 0 0;
    color: #6b7280;
    font-size: 16px;
}

.summary-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #e5e7eb;
}

.card-header h2, .card-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.data-table th {
    background-color: #f9fafb;
    color: #374151;
    font-weight: 700;
    font-size: 11.5px;
    padding: 16px 12px; /* match dark mode exactly */
    text-align: left;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    color: #374151;
    padding: 18px 14px; /* match dark mode exactly */
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
    font-size: 13px; /* match dark mode exactly */
}
/* Base data table styling - Professional Design */
.data-table {
    background: var(--app-surface);
    border-radius: 8px;
    overflow: hidden;
}

.data-table th {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.02));
    color: var(--app-text);
    font-weight: 700;
    font-size: 12px;
    padding: 14px 14px;
    text-align: left;
    border-bottom: 2px solid var(--app-border);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    color: var(--app-text-muted);
    padding: 14px 14px;
    border-bottom: 1px solid var(--app-border);
    vertical-align: middle;
    font-size: 13px;
}

.data-table tbody tr {
    transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.02);
}

/* Health monitoring table specific column widths */
.data-table th:nth-child(1), /* PATIENT */
.data-table td:nth-child(1) {
    min-width: 150px;
    max-width: 180px;
}

.data-table th:nth-child(2), /* VITAL SIGNS */
.data-table td:nth-child(2) {
    min-width: 120px;
    width: 140px;
}

.data-table th:nth-child(3), /* HEALTH METRICS */
.data-table td:nth-child(3) {
    min-width: 180px;
    max-width: 200px;
}

.data-table th:nth-child(4), /* MEDICATION */
.data-table td:nth-child(4) {
    min-width: 120px;
    max-width: 140px;
}

.data-table th:nth-child(5), /* STATUS */
.data-table td:nth-child(5) {
    min-width: 100px;
    max-width: 120px;
}

.data-table th:nth-child(6), /* TREND */
.data-table td:nth-child(6) {
    min-width: 100px;
    max-width: 120px;
}

.data-table th:nth-child(7), /* ALERTS */
.data-table td:nth-child(7) {
    min-width: 120px;
    max-width: 140px;
}

.data-table th:nth-child(8), /* ACTION */
.data-table td:nth-child(8) {
    min-width: 120px;
    max-width: 140px;
}

/* Patient Profiles table column sizing (override generic widths above) */
#patientsTable { 
    table-layout: fixed; 
    width: 100%; 
    min-width: 100%;
}
#patientsTable th, #patientsTable td { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding: 14px 16px;
}

#patientsTable thead th {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #64748b;
    text-transform: uppercase;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

#patientsTable tbody tr {
    border-bottom: 1px solid #eef2f7;
}

#patientsTable tbody tr:hover {
    background: #f8fafc;
}

#patientsTable td:nth-child(2) {
    font-weight: 600;
    color: #0f172a;
}

#patientsTable td:nth-child(3) {
    color: #475569;
}

#patientsTable td:nth-child(6) {
    overflow: visible;
    position: relative;
    text-align: center;
}

#patientsTable {
    overflow: visible;
}

/* Patient Profiles table: keep action menu from clipping */
.patient-profiles-page .table-container,
.patient-profiles-page .patient-table-wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.patient-profiles-page #patientsTable tbody {
    overflow: visible !important;
}

.patient-profiles-page #patientsTable td:nth-child(6) {
    overflow: visible !important;
}

/* 1: Patient ID – make it compact, just enough for text */
#patientsTable th:nth-child(1),
#patientsTable td:nth-child(1) {
    min-width: 118px;
    width: 12%;
    max-width: none;
}

/* 2: Patient Name */
#patientsTable th:nth-child(2),
#patientsTable td:nth-child(2) {
    min-width: 240px;
    width: 28%;
}

/* 3: Guardian */
#patientsTable th:nth-child(3),
#patientsTable td:nth-child(3) {
    min-width: 220px;
    width: 25%;
}

/* 4: Stage – keep consistent to avoid layout shift */
#patientsTable th:nth-child(4),
#patientsTable td:nth-child(4) {
    min-width: 132px;
    width: 14%;
    text-align: left;
}
#patientsTable td:nth-child(4) .status-badge { min-width: 90px; display: inline-flex; justify-content: center; }

/* 5: Phone */
#patientsTable th:nth-child(5),
#patientsTable td:nth-child(5) {
    min-width: 108px;
    width: 11%;
}

/* 6: Risk */
#patientsTable th:nth-child(6),
#patientsTable td:nth-child(6) {
    min-width: 88px;
    width: 10%;
    text-align: center;
}

/* Medication table sizing */
#medicationTable { table-layout: fixed; width: 100%; }
#medicationTable th, #medicationTable td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#medicationTable th:nth-child(1), #medicationTable td:nth-child(1) { min-width: 100px; width: 150px; } /* Patient smaller */
#medicationTable th:nth-child(2), #medicationTable td:nth-child(2) { min-width: 200px; width: 260px; } /* Medication */
#medicationTable th:nth-child(3), #medicationTable td:nth-child(3) { min-width: 220px; width: 280px; } /* Dosage & Frequency (expanded for readability) */
#medicationTable th:nth-child(4), #medicationTable td:nth-child(4) { min-width: 160px; width: 200px; } /* Next Dose */
#medicationTable th:nth-child(5), #medicationTable td:nth-child(5) { min-width: 130px; width: 150px; } /* Status */
#medicationTable th:nth-child(6), #medicationTable td:nth-child(6) { min-width: 160px; width: 180px; } /* Actions width tuned */
#medicationTable td:nth-child(6) { overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid #f3f4f6; }
#medicationTable td:nth-child(6) .action-buttons { justify-content: flex-start; position: static !important; margin: 0; }

/* Keep action buttons inside the cell and wrap nicely */
#medicationTable td:nth-child(6) .action-buttons {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
}
#medicationTable td:nth-child(6) .btn-medical { padding: 8px 10px; }

/* Ensure patient profile action controls stay compact and centered */
#patientsTable td:nth-child(6) .action-menu {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto;
}

#patientsTable td:nth-child(6) .btn-action {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

#patientsTable td:nth-child(6) .action-menu-panel {
    right: 50%;
    transform: translateX(calc(50% + var(--action-menu-offset-x, 0px)));
}

#patientsTable tbody td[colspan="6"] {
    white-space: normal;
    text-align: center;
}

.data-table tbody tr:hover {
    background-color: #f9fafb;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-critical {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-warning {
    background-color: #fffbeb;
    color: #d97706;
    border: 1px solid #fed7aa;
}

.status-normal {
    background-color: #f0fdf4;
    color: #059669;
    border: 1px solid #bbf7d0;
}

/* Badge for destructive actions (deleted) */
.status-danger {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Alerts configuration table tweaks */
#configsTable .updated-col,
.content-card #configsTable .updated-col {
    width: 18%;
    white-space: nowrap;
}

#configsTable .actions-col,
.content-card #configsTable .actions-col {
    width: 12%;
}

#configsTable .config-updated-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

#configsTable .config-updated-cell .status-badge {
    min-width: 70px;
    text-align: center;
}

#configsTable .updated-meta {
    font-size: 12px;
    color: #94a3b8;
}

#configsTable .actions-col .action-buttons {
    justify-content: flex-start;
}

.status-active {
    background-color: #f0fdf4;
    color: #059669;
    border: 1px solid #bbf7d0;
}

.status-inactive {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.status-medical {
    background-color: #f0f4ff;
    color: #667eea;
    border: 1px solid #c7d2fe;
}


.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #f3f4f6;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

/* Medical Theme Cards */
.content-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.1), 0 0 0 1px rgba(102, 126, 234, 0.1);
    overflow: hidden;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
}

/* Patient Profiles: allow action menus to render outside the card */
.patient-profiles-page .content-card {
    overflow: visible;
}

/* User Accounts: allow action menus to render outside the card */
.user-accounts-page .content-card,
.user-accounts-page .table-container,
.user-accounts-page #usersTable,
.user-accounts-page #usersTable tbody,
.user-accounts-page #usersTable tr,
.user-accounts-page #usersTable td {
    overflow: visible;
}

.content-card:hover {
    /* transform: translateY(-2px); - Removed to prevent button movement on hover */
    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.2);
}

.summary-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.08), 0 0 0 1px rgba(102, 126, 234, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    border: 1px solid rgba(102, 126, 234, 0.08);
}

.summary-card:hover {
    /* transform: translateY(-2px); - Removed to prevent button movement on hover */
    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.2);
}

.summary-card:hover {
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.15), 0 8px 8px -5px rgba(0, 0, 0, 0.08);
}

.table-container {
    overflow-x: auto;
    overflow-y: visible;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 100%;
    border: 1px solid #e5e7eb;
}

.table-container thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 2;
}

.table-container .data-table {
    width: 100%;
    table-layout: fixed;
}

/* Patient profiles table container - ensure it fills width */
.table-container #patientsTable {
    width: 100%;
    min-width: 100%;
}

/* Patient cards (mobile-friendly) */
.patient-card-list {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 16px;
}

.patient-care-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 16px 0 18px;
}

.patient-insight-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
}

.patient-insight-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    flex-shrink: 0;
}

.patient-insight-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.patient-insight-icon.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.patient-insight-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.patient-insight-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.patient-insight-value {
    font-size: 24px;
    line-height: 1;
    color: #0f172a;
}

.patient-layout-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 0 16px 16px;
}

.patient-results-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #64748b;
    font-size: 13px;
}

.patient-results-meta strong {
    font-size: 14px;
    color: #0f172a;
}

.patient-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: #475569;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.view-toggle-btn.active {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.patient-filter-pills {
    margin-bottom: 18px;
}

.patient-filter-pills .quick-filter-pill span {
    color: #64748b;
    font-size: 12px;
}

.patient-profiles-page.view-cards .patient-table-wrapper {
    display: none;
}

.patient-profiles-page.view-cards .patient-card-list {
    display: grid;
}

.patient-profiles-page.view-table .patient-card-list {
    display: none;
}

.patient-empty {
    padding: 32px;
    border: 1px dashed #e2e8f0;
    border-radius: 14px;
    text-align: center;
    color: #64748b;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.patient-empty i {
    font-size: 22px;
    color: #94a3b8;
}

.patient-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.patient-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.patient-card-name {
    font-weight: 700;
    color: #0f172a;
}

.patient-card-id {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.patient-card-body {
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.patient-card-body span {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.patient-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.patient-card-actions .btn {
    min-height: 38px;
}

/* Action dropdown menu */
.action-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    isolation: isolate;
    z-index: 1;
}

.action-menu-panel {
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateX(var(--action-menu-offset-x, 0px));
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
    min-width: 160px;
    padding: 6px;
    display: none;
    z-index: 1000;
}

.action-menu.menu-open {
    z-index: 10005;
}

.action-menu.menu-open .btn-action {
    position: relative;
    z-index: 0;
}

.action-menu-panel.show {
    display: block;
}

.action-menu-panel button {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.action-menu-panel button:hover {
    background: #f1f5f9;
}

/* Patient quick details drawer */
.patient-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 20000;
}

.patient-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.patient-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 360px;
    max-width: 90vw;
    background: #ffffff;
    box-shadow: -20px 0 40px rgba(15, 23, 42, 0.15);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 20001;
    display: flex;
    flex-direction: column;
}

.patient-drawer.open {
    transform: translateX(0);
}

.patient-drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.patient-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.patient-drawer-subtitle {
    font-size: 12px;
    color: #64748b;
}

.patient-drawer-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #64748b;
    cursor: pointer;
}

.patient-drawer-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.drawer-section {
    margin-bottom: 16px;
}

.drawer-section h4 {
    font-size: 13px;
    color: #475569;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.drawer-grid {
    display: grid;
    gap: 10px;
}

.drawer-grid span {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.drawer-grid strong {
    font-size: 14px;
    color: #0f172a;
}

.patient-drawer-actions {
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

@media (min-width: 769px) {
    .patient-drawer,
    .patient-drawer-overlay {
        display: none !important;
    }
}

/* Alert Banners */
.alert-banners {
    margin-bottom: 24px;
}

.alert-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
}

.alert-critical {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-warning {
    background-color: #f0f4ff;
    color: #667eea;
    border: 1px solid #c7d2fe;
}

/* Summary Cards */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    max-width: 100%;
}



.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.card-icon.blue {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.card-icon.red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.card-icon.yellow {
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
}

.card-icon.green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.card-content {
    flex: 1;
}

.card-content h3 {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
}

.card-link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.card-link:hover {
    text-decoration: underline;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.card-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Prevent long titles from wrapping to two lines in analytics headers */
.card-header h2, .card-header h3 {
    white-space: nowrap;
}

.card-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.link:hover {
    text-decoration: underline;
}

/* Tables */
.table-container {
    overflow-x: auto;
}



/* Buttons */
/* .btn-sm styles moved to text button section */

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .summary-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 16px;
    }
    
    /* Header styles are handled by the main .header class above */
    
    .data-table th,
    .data-table td {
        padding: 12px 16px;
    }
} 

/* Chart Container Fix for User Accounts */
.chart-container {
    height: 360px !important;
    padding: 16px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 

/* Ensure the canvas scales and stays inside the card */
.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.adherence-container { align-items: stretch; }
.adherence-container canvas { width: 100% !important; }

.card-header .chart-legend { margin-left: auto; }

@media (max-width: 1400px) {
    :root { --sidebar-width: 224px; }
    .sidebar { --sidebar-width: 224px; width: var(--sidebar-width); min-width: var(--sidebar-width); max-width: var(--sidebar-width); }
    .main-content {
        margin-left: var(--sidebar-width);
        padding: 16px 20px;
    }
    .logo.big-logo .big-heart {
        font-size: 2.8rem;
    }
    .sidebar-brand-image {
        width: 90px;
        height: 90px;
    }
    .logo.big-logo .alzcare-text {
        font-size: 1.6rem;
    }
    .nav-link {
        padding: 9px 14px;
        font-size: 12.5px;
    }
}

@media (max-width: 1366px) {
    .main-content {
        margin-left: var(--sidebar-width);
        padding: 12px 16px;
    }
    .logo.big-logo .big-heart {
        font-size: 2.4rem;
    }
    .sidebar-brand-image {
        width: 90px;
        height: 90px;
    }
    .logo.big-logo .alzcare-text {
        font-size: 1.4rem;
    }
    .nav-link {
        padding: 8px 12px;
        font-size: 12px;
    }
    /* Table adjustments for 1366px screens */
    .data-table th {
        font-size: 11.5px;
        padding: 16px 12px;
        min-width: 130px;
    }
    
    .data-table td {
        padding: 18px 14px;
        font-size: 13px;
    }
    
    /* Adjust column widths for better fit on 1366px */
    .data-table th:nth-child(1), /* PATIENT */
    .data-table td:nth-child(1) {
        min-width: 160px;
        max-width: 190px;
    }
    
    .data-table th:nth-child(2), /* VITAL SIGNS */
    .data-table td:nth-child(2) {
        min-width: 140px;
        max-width: 150px;
    }
    
    .data-table th:nth-child(3), /* HEALTH METRICS */
    .data-table td:nth-child(3) {
        min-width: 160px;
        max-width: 190px;
    }
    
    .data-table th:nth-child(4), /* MEDICATION */
    .data-table td:nth-child(4) {
        min-width: 130px;
        max-width: 150px;
    }
    
    .data-table th:nth-child(5), /* STATUS */
    .data-table td:nth-child(5) {
        min-width: 110px;
        max-width: 130px;
    }
    
    .data-table th:nth-child(6), /* TREND */
    .data-table td:nth-child(6) {
        min-width: 110px;
        max-width: 130px;
    }
    
    .data-table th:nth-child(7), /* ALERTS */
    .data-table td:nth-child(7) {
        min-width: 130px;
        max-width: 150px;
    }
    
    .data-table th:nth-child(8), /* ACTION */
    .data-table td:nth-child(8) {
        min-width: 130px;
        max-width: 150px;
    }
    
    /* Adjust health metrics for better readability */
    .health-metrics .metric-value,
    .data-table .health-metrics .metric-value,
    .table-container .health-metrics .metric-value,
    .data-table tbody .health-metrics .metric-value,
    .table-container .data-table .health-metrics .metric-value {
        font-size: 10px !important;
        line-height: 1.2;
    }
    
    .metric-label {
        font-size: 10px;
    }
    
    .metric-item {
        font-size: 10px;
        padding: 3px 0;
    }
    
    /* Adjust patient info for better readability */
    .patient-name {
        font-size: 14px;
    }
    
    .patient-id {
        font-size: 12px;
    }
    
    .patient-age {
        font-size: 11px;
    }
    
    /* Adjust vital signs for better readability */
    .vital-item {
        font-size: 12px;
    }
    
} 

.search-filter-section {
    margin-bottom: 24px;
    padding: 0 24px;
}

.search-filter-section.inside-card {
    margin-bottom: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    margin: 0 0 16px 0;
}

.search-container {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 16px;
    z-index: 2;
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    background: #ffffff;
    color: #374151;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.search-clear:hover {
    background-color: #92400e;
}

.search-clear.is-hidden {
    display: none;
}

.filter-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
}

#addUserBtn,
#refreshUsersBtn {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 40px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Health Details Layout */
.health-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.health-details .detail-section h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #111827;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.detail-label {
    color: #6b7280;
    font-weight: 500;
    font-size: 13px;
}

.detail-value {
    color: #374151;
    font-weight: 600;
    font-size: 13px;
}

.alerts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alert-badge {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* History Modal Enhancements */
.health-history {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Compact table inside history to avoid horizontal scroll */
.health-history .data-table {
    width: 100%;
    table-layout: fixed;
}

.health-history .data-table th,
.health-history .data-table td {
    font-size: 12px;
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-filters {
    display: flex;
    justify-content: flex-end;
}

.history-period-select {
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.history-chart-container {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
}

.history-chart-container canvas {
    width: 100% !important;
    height: 240px !important;
    display: block;
}

.threshold-inputs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.threshold-inputs input {
    width: 84px;
}

@media (max-width: 768px) {
    .health-details {
        grid-template-columns: 1fr;
    }
}

/* Delete Modal Specific Styles */
.warning-icon {
    background: #fef3c7;
    color: #b45309;
    box-shadow: 0 12px 24px rgba(245, 158, 11, 0.18);
}

.delete-warning-text {
    color: #475569;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.5;
}

.delete-patient-id {
    color: #334155;
    margin: 0;
}

/* Professional Healthcare Button Styles - Text Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Small Text Buttons */
.btn-sm {
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: 10px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between; 
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-buttons .btn-action:hover {
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .btn-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Action Button Color Variants */
.action-buttons .btn-action.primary {
    background-color: #3b82f6;
    color: white;
}

.action-buttons .btn-action.primary:hover {
    background-color: #2563eb;
}

.action-buttons .btn-action.secondary {
    background-color: #6b7280;
    color: white;
}

.action-buttons .btn-action.secondary:hover {
    background-color: #4b5563;
}

.action-buttons .btn-action.success {
    background-color: #10b981;
    color: white;
}

.action-buttons .btn-action.success:hover {
    background-color: #059669;
}

.action-buttons .btn-action.warning {
    background-color: #f59e0b;
    color: white;
}

.action-buttons .btn-action.warning:hover {
    background-color: #d97706;
}

.action-buttons .btn-action.danger {
    background-color: #ef4444;
    color: white;
}

.action-buttons .btn-action.danger:hover {
    background-color: #dc2626;
}

.action-buttons .btn-action.info {
    background-color: #06b6d4;
    color: white;
}

.action-buttons .btn-action.info:hover {
    background-color: #0891b2;
}

/* Patient Count */
#patientCount {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Health Monitoring Dashboard Styles */
.health-overview-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.health-stat-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.health-stat-card:hover {
    /* transform: translateY(-2px); - Removed to prevent button movement on hover */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.stat-icon.normal {
    background: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-icon.critical {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.stat-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon.alert {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 2px 0;
}

.stat-content p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Analytics Grid */
.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
    margin-bottom: 12px;
    max-width: 100%;
    width: 100%;
}

.analytics-grid .content-card {
    margin-bottom: 0;
    height: 420px;
    min-height: 420px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.chart-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-left: auto; /* Added to push filter container to the right */
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-color.normal {
    background: #10b981;
}

.legend-color.warning {
    background: #f59e0b;
}

.legend-color.critical {
    background: #dc2626;
}

.vital-sign-select {
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    color: #374151;
}

/* Enhanced Table Styles */
.patient-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.patient-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 13px;
    margin-bottom: 2px;
}

.patient-id {
    font-size: 11px;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    margin-bottom: 1px;
}

.patient-age {
    font-size: 10px;
    color: #9ca3af;
}

.vital-signs {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vital-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.vital-item i {
    width: 12px;
    color: #6b7280;
}

.vital-item .normal {
    color: #10b981;
    font-weight: 500;
}

.vital-item .warning {
    color: #f59e0b;
    font-weight: 600;
}

.health-metrics {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    padding: 2px 0;
    min-height: 16px;
    width: 100%;
}

.metric-label {
    color: #6b7280;
    font-weight: 500;
    font-size: 9px;
    flex-shrink: 0;
    min-width: 60px;
}

.metric-value {
    font-weight: 600;
    font-size: 9px;
    line-height: 1.1;
    text-align: right;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

/* Specific override for health monitoring table metric values */
.health-metrics .metric-value,
.data-table .health-metrics .metric-value,
.table-container .health-metrics .metric-value,
.data-table tbody .health-metrics .metric-value,
.table-container .data-table .health-metrics .metric-value {
    font-size: 9px !important;
    font-weight: 600;
    line-height: 1.1;
    text-align: right !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80px !important;
}

.metric-value.normal {
    color: #10b981;
}

.metric-value.warning {
    color: #f59e0b;
}

.medication-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.medication-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
}

.medication-indicator.taken {
    background: #d1fae5;
    color: #065f46;
}

.medication-indicator.missed {
    background: #fef3c7;
    color: #92400e;
}

.last-updated {
    font-size: 10px;
    color: #9ca3af;
}

.trend-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
}

.trend-indicator.stable {
    background: #d1fae5;
    color: #065f46;
}

.trend-indicator.increasing {
    background: #fef3c7;
    color: #92400e;
}

.trend-indicator.decreasing {
    background: #fee2e2;
    color: #991b1b;
}

.alerts-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 120px;
}

.no-alerts {
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
}

.alert-badge {
    background: #fee2e2;
    color: #991b1b;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-outline {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    transition: all 0.2s;
}

.btn-outline:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.footer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Large Modal */
.large-modal {
    max-width: 800px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .health-overview-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .health-overview-grid {
        grid-template-columns: 1fr;
    }
    
    .header-actions {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    
    .search-container {
        flex-direction: column;
    }
    
    .search-box {
        min-width: auto;
    }
} 

/* Animation for real-time updates */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.health-stat-card.updating {
    animation: pulse 1s ease-in-out;
}

/* Threshold Inputs */
.threshold-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.threshold-inputs input {
    width: 80px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.threshold-inputs span {
    color: #6b7280;
    font-weight: 500;
}

/* Professional Dashboard Styles */
.welcome-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.9fr);
    gap: 24px;
    align-items: center;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.welcome-content h1 {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.welcome-content p {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.welcome-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-self: start;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
}

.stat-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.stat-value.online {
    color: #059669;
}


/* Today Summary Tiles */
.today-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0 28px;
}

.summary-tile {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.summary-icon.alert {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.summary-icon.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.summary-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.summary-icon.info {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 600;
}

.summary-value {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.summary-link {
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.summary-link:hover {
    text-decoration: underline;
}

.operations-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.operation-metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.operation-metric.critical {
    background: #fef2f2;
    border-color: #fecaca;
}

.operation-metric.warning {
    background: #fff7ed;
    border-color: #fed7aa;
}

.operation-metric.info {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.operation-value {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.operation-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}

.operations-list,
.guardian-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.operation-row,
.guardian-item {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
}

.operation-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.operation-title,
.guardian-title {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

.operation-copy,
.guardian-copy {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.operation-meta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
    flex-wrap: wrap;
}

.critical-patient-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
    flex-wrap: wrap;
}

.priority-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.priority-badge.priority-high { background: #fee2e2; color: #991b1b; }
.priority-badge.priority-medium { background: #fef3c7; color: #92400e; }
.priority-badge.priority-low { background: #dbeafe; color: #1d4ed8; }
.priority-badge.priority-critical { background: #fee2e2; color: #991b1b; }

.critical-patient-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.guardian-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.guardian-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.guardian-time {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/* Enhanced Metric Cards - Light Mode */
.metric-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.metric-card:hover {
    /* transform: translateY(-2px); - Removed to prevent button movement on hover */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.metric-value {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.metric-label {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Critical Alerts Banner - Medical Theme */
.critical-alerts-banner {
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 24px;
    box-shadow: 0 10px 24px rgba(248, 113, 113, 0.12);
}

.banner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-weight: 700;
    color: #b91c1c;
}

.alert-count {
    background: #fee2e2;
    color: #b91c1c;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #fff7ed;
    border-radius: 10px;
    border-left: 4px solid #f97316;
}

.alert-item.priority-high {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.alert-item.priority-medium {
    background: #fff7ed;
    border-left-color: #f59e0b;
}

.alert-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.patient-name {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.alert-message {
    color: #6b7280;
    font-size: 12px;
}

.alert-time {
    color: #9ca3af;
    font-size: 11px;
}

/* Metrics Dashboard */
.metrics-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* GPS Tracking toolbar layout */
.gps-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 0 16px;
    flex-wrap: wrap;
}

.gps-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gps-search {
    position: relative;
    display: flex;
    align-items: center;
}

.gps-search i {
    position: absolute;
    left: 12px;
    color: #9ca3af;
}

.gps-search .form-input {
    padding-left: 34px;
    min-width: 220px;
}

.gps-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gps-map-container {
    height: 500px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin: 16px;
}

#gpsMap {
    height: 100%;
    min-height: 400px;
}

.metric-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.metric-card.warning::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.metric-card.success::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.metric-card.info::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.metric-card:hover {
    /* transform: translateY(-2px); - Removed to prevent button movement on hover */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    margin-bottom: 0;
}

.metric-card.warning .metric-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.metric-card.success .metric-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.metric-card.info .metric-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.metric-content {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.metric-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.metric-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
}

.metric-trend.positive {
    color: #10b981;
}

.metric-trend.negative {
    color: #dc2626;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 22px;
    margin-bottom: 28px;
    max-width: 100%;
}

.dashboard-card {
    background: white;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5e7eb;
}

.dashboard-card.large {
    grid-column: span 2;
}

.dashboard-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 16px;
}

.dashboard-card .card-header h3 {
    font-size: 17px;
    font-weight: 700;
}

.dashboard-card .card-actions {
    gap: 8px;
}

.card-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.card-actions .form-input {
    width: 220px;
}

#addAlertBtn {
    padding: 10px 22px;
    font-size: 14px;
    border-radius: 999px;
    line-height: 1.2;
    min-height: 42px;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
    margin-left: 0;
}

#addAlertBtn i {
    font-size: 14px;
}

.alerts-page .form-select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background-color: #ffffff;
}

.alerts-page .alerts-search-input {
    max-width: 240px;
}

.alerts-page .action-buttons {
    display: flex;
    gap: 8px;
}

.alerts-page .action-buttons .btn-action {
    width: 40px;
    height: 40px;
}

.alerts-page .btn-secondary {
    background-color: #6b7280;
    color: #ffffff;
}

.alerts-page .btn-secondary:hover {
    background-color: #4b5563;
}

.alerts-page .btn-danger {
    background-color: #dc2626;
    color: #ffffff;
}

.alerts-page .btn-danger:hover {
    background-color: #b91c1c;
}

.alerts-page .pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px 0 32px 0;
    padding: 0 16px;
}

.alerts-page .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.alerts-page .pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alerts-page .pagination-btn:hover:not(:disabled) {
    background: #f3f4f6;
    color: #374151;
}

.alerts-page .pagination-btn.active {
    background: linear-gradient(170deg, #103263 0%, #1556a0 56%, #0ea5e9 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.alerts-page .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.alerts-page .pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #9ca3af;
    font-size: 14px;
}

.alerts-page .table-container {
    min-height: 300px;
    position: relative;
}

.alerts-page .data-table {
    width: 100%;
    table-layout: fixed;
}

.alerts-page .data-table th,
.alerts-page .data-table td {
    padding: 12px 8px;
    text-align: left;
}

.alerts-page .data-table th {
    font-weight: 600;
    background-color: #f8fafc;
    border-bottom: 2px solid #e5e7eb;
}

.alerts-page .data-table tbody tr {
    height: 50px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.alerts-page .data-table tbody tr:hover {
    background-color: #f3f4f6;
}

.alerts-page .data-table th:nth-child(1),
.alerts-page .data-table td:nth-child(1) { width: 20%; }
.alerts-page .data-table th:nth-child(2),
.alerts-page .data-table td:nth-child(2) { width: 15%; }
.alerts-page .data-table th:nth-child(3),
.alerts-page .data-table td:nth-child(3) { width: 12%; }
.alerts-page .data-table th:nth-child(4),
.alerts-page .data-table td:nth-child(4) { width: 13%; }
.alerts-page .data-table th:nth-child(5),
.alerts-page .data-table td:nth-child(5) { width: 30%; }

.alerts-page .table-container.loading {
    opacity: 0.7;
    pointer-events: none;
    min-height: 300px;
}

.alerts-page .table-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #667eea;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

.alerts-page .config-alert-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.alerts-page .config-condition {
    color: #94a3b8;
}

.alerts-page .updated-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.alerts-page .table-empty-state {
    padding: 40px 0;
}

.alerts-page .table-empty-state .empty-icon {
    font-size: 28px;
    color: #94a3b8;
}

.alerts-page .table-empty-state .empty-text {
    margin-top: 12px;
    color: #94a3b8;
}

.alerts-page .alerts-command-center {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 28px;
}

.alerts-page .alerts-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: stretch;
    padding: 22px 24px;
    border: 1px solid #d7dee7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.alerts-page .alerts-hero-copy,
.alerts-page .alerts-hero-metrics {
    min-width: 0;
}

.alerts-page .alerts-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0;
}

.alerts-page .page-eyebrow {
    display: inline-block;
    width: fit-content;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.alerts-page .alerts-hero-copy h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.18;
    color: #0f172a;
    font-weight: 700;
}

.alerts-page .alerts-hero-copy p {
    margin: 0;
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.6;
    color: #526277;
}

.alerts-page .alerts-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.alerts-page .hero-metric-card {
    justify-content: center;
    min-height: 112px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #d7dee7;
    background: #f8fafc;
    box-shadow: none;
}

.alerts-page .hero-metric-card strong {
    font-size: 28px;
    color: #0f172a;
}

.alerts-page .alerts-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.alerts-page .alerts-summary-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.alerts-page .alerts-summary-card .summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #e2e8f0;
    color: #334155;
    line-height: 1;
}

.alerts-page .alerts-summary-card.critical .summary-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
}

.alerts-page .alerts-summary-card.warning .summary-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
}

.alerts-page .alerts-summary-card.open .summary-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
}

.alerts-page .alerts-summary-card.resolved .summary-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
}

.alerts-page .alerts-summary-card .summary-icon i {
    font-size: 16px;
    line-height: 1;
}

.alerts-page .alerts-summary-card .summary-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.alerts-page .alerts-summary-card .summary-label,
.alerts-page .operations-metric span {
    margin: 0;
}

.alerts-page .alerts-summary-card strong {
    font-size: 24px;
}

.alerts-page .alerts-summary-card small,
.alerts-page .operations-metric small,
.alerts-page .card-title-group p,
.alerts-page .alert-queue-copy p,
.alerts-page .alert-queue-copy small {
    margin: 0;
}

.alerts-page .alerts-operations-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
    gap: 20px;
    align-items: stretch;
}

.alerts-page .urgent-queue-card,
.alerts-page .alert-operations-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: 1px solid #d7dee7;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.alerts-page .card-title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.alerts-page .card-title-group h2 {
    margin: 0;
}

.alerts-page .alerts-queue-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1px solid #d7dee7;
}

.alerts-page .alert-queue-list,
.alerts-page .operations-metrics-grid {
    display: grid;
    gap: 14px;
}

.alerts-page .alert-queue-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #dce3ec;
    background: #f8fafc;
}

.alerts-page .alert-queue-item.critical {
    border-left: 4px solid #dc2626;
}

.alerts-page .alert-queue-item.warning {
    border-left: 4px solid #d97706;
}

.alerts-page .alert-queue-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.alerts-page .alert-queue-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.alerts-page .alert-queue-time {
    flex-shrink: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.alerts-page .operations-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alerts-page .operations-metric {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    min-height: 126px;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #dce3ec;
    background: #f8fafc;
}

.alerts-page .operations-metric strong {
    font-size: 26px;
    line-height: 1.05;
    color: #0f172a;
}

@media (max-width: 1200px) {
    .alerts-page .alerts-hero,
    .alerts-page .alerts-operations-grid {
        grid-template-columns: 1fr;
    }

    .alerts-page .alerts-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .alerts-page .alerts-command-center {
        gap: 18px;
    }

    .alerts-page .alerts-hero-copy {
        padding: 22px 20px;
    }

    .alerts-page .alerts-hero-metrics,
    .alerts-page .alerts-summary-grid,
    .alerts-page .operations-metrics-grid {
        grid-template-columns: 1fr;
    }

    .alerts-page .alerts-summary-card,
    .alerts-page .alert-queue-item {
        align-items: flex-start;
    }

    .alerts-page .alert-queue-item {
        flex-direction: column;
    }

    .alerts-page .alert-queue-time {
        white-space: normal;
    }
}
/* Compact toggle switch used in Alerts Configuration */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; vertical-align: middle; margin-right: 8px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e7eb; transition: .2s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; transition: .2s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(18px); }

.time-range-select {
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    color: #374151;
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.action-icon.blue { background: linear-gradient(135deg, #667eea, #764ba2); }
.action-icon.red { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.action-icon.green { background: linear-gradient(135deg, #10b981, #059669); }
.action-icon.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.action-icon.orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.action-icon.gray { background: linear-gradient(135deg, #93c5fd, #60a5fa); }

.action-title {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

/* Enhanced Activity Feed - Light Mode */
.activity-feed {
    max-height: 400px;
    overflow-y: auto;
    padding: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
}

.activity-item.status-critical {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
}

.activity-item.status-warning {
    border-left: 4px solid #d97706;
    background: #fffbeb;
}

.activity-item.status-normal {
    border-left: 4px solid #059669;
    background: #f0fdf4;
}

.activity-item.status-completed {
    border-left: 4px solid #667eea;
    background: #f0f4ff;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
}

.activity-item.status-critical .activity-icon {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.activity-item.status-warning .activity-icon {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.activity-item.status-normal .activity-icon {
    background: linear-gradient(135deg, #059669, #047857);
}

.activity-item.status-completed .activity-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.activity-description {
    font-size: 14px;
    color: #6b7280;
}

.activity-time {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

/* Enhanced System Health - Light Mode */
.system-health {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.health-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.health-label {
    font-weight: 500;
    color: #374151;
    min-width: 120px;
}

.health-bar {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.health-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.health-value {
    font-weight: 600;
    color: #111827;
    min-width: 40px;
    text-align: right;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-card.large {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .welcome-section {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .welcome-stats {
        justify-content: center;
    }
    
    .metrics-dashboard {
        grid-template-columns: 1fr;
    }

    .gps-toolbar {
        padding: 12px 12px 0 12px;
    }

    .gps-toolbar-left,
    .gps-toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    .gps-search .form-input {
        min-width: 0;
        width: 100%;
    }

    .gps-map-container {
        margin: 12px;
        height: 420px;
    }

    .alerts-summary {
        flex-direction: column;
        gap: 16px;
    }
} 

.sidebar-nav {
    flex: 1;
    padding: 16px 0 0 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Professional Notification and Message Dropdowns */
.notification-dropdown,
.message-dropdown {
    position: relative;
    display: inline-block;
}

.notification-badge{
    border: 2px solid #fff;
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    /* Allow width to expand for two digits while keeping center alignment */
    width: auto;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    padding: 2.2px 5px;
    margin: 0;
    min-height: 18px;
    box-sizing: border-box;
    border-radius: 999px; /* pill shape when wider than tall */
    font-variant-numeric: tabular-nums;
}

.message-badge {
    border: 2px solid #fff;
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: auto;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    padding: 2.2px 5px;
    margin: 0;
    min-height: 18px;
    box-sizing: border-box;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.notification-content,
.message-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    min-width: 350px;
    max-width: 400px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    z-index: 1000;
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    max-height: 500px;
    overflow: hidden;
}

.notification-content.show,
.message-content.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

.notification-header,
.message-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.notification-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
}

.notification-tab {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notification-tab.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    font-weight: 600;
}

.notification-filters {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
}

.notification-search {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-search i {
    position: absolute;
    left: 10px;
    color: #94a3b8;
    font-size: 12px;
}

.notification-search input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px 8px 28px;
    font-size: 12px;
    color: #334155;
    background: #f8fafc;
}

#notificationPatientFilter {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #334155;
    background: #f8fafc;
    min-width: 140px;
}

.notification-header h3,
.message-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.mark-all-read,
.compose-btn {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mark-all-read:hover,
.compose-btn:hover {
    background: #eff6ff;
}

.notification-list,
.message-list {
    max-height: 350px;
    overflow-y: auto;
}

.notification-item,
.message-item {
    padding: 12px 20px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: background-color 0.2s;
    position: relative;
    cursor: pointer;
}

.notification-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
}

.notification-meta .meta-pill {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px 8px;
}

/* Three-dots menu on message items */
.message-more-btn {
    margin-left: 6px;
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}
.message-item:hover .message-more-btn { color: #111827; }
.message-more-btn:hover { background: #f3f4f6; }

.notification-item:hover,
.message-item:hover {
    background: #f9fafb;
}

.notification-item.unread,
.message-item.unread {
    background: #eff6ff;
}

/* Pinned conversation styling */
.message-item.pinned {
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
}
.message-pin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    background: #fde68a;
    color: #92400e;
    margin-left: 8px;
}

.notification-item.unread:hover,
.message-item.unread:hover {
    background: #dbeafe;
}

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

.notification-item.critical .notification-icon {
    background: #fef2f2;
    color: #dc2626;
}

.notification-item.warning .notification-icon {
    background: #fffbeb;
    color: #d97706;
}

.notification-item.success .notification-icon {
    background: #f0fdf4;
    color: #059669;
}

.notification-item.info .notification-icon {
    background: #eff6ff;
    color: #2563eb;
}

.notification-details,
.message-details {
    flex: 1;
    min-width: 0;
}

.notification-title,
.message-sender {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 2px;
}

.notification-message,
.message-subject {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
    line-height: 1.4;
}

.message-preview {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 4px;
    line-height: 1.3;
}

.notification-time,
.message-time {
    font-size: 11px;
    color: #9ca3af;
}

.notification-close,
.message-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0;
}

.notification-item:hover .notification-close,
.message-item:hover .message-close {
    opacity: 1;
}

.notification-close:hover,
.message-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
}

.notification-footer,
.message-footer {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    background: #f8fafc;
}

.notification-footer a,
.message-footer a {
    color: #3b82f6;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.notification-footer a:hover,
.message-footer a:hover {
    text-decoration: underline;
}

/* Profile Modal Styles */
.profile-modal {
    max-width: 600px !important;
    width: 90% !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.profile-section {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.profile-avatar {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
}

.change-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.change-avatar-btn:hover {
    background: #2563eb;
    transform: scale(1.1);
}

.profile-actions {
    display:flex; 
    gap:12px; 
    justify-content:flex-end; 
    padding-top:12px; 
    border-top:1px solid #e5e7eb; }

/* Settings Modal Styles */
.settings-modal {
    max-width: 600px;
    width: 85%;
    max-height: 80vh;
}

.settings-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    font-weight: 500;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: #374151;
    background: #f9fafb;
}

.tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.settings-content {
    max-height: 400px;
    overflow-y: auto;
}

.settings-tab {
    display: none;
}

.settings-tab.active {
    display: block;
}

.settings-tab h4 {
    margin: 0 0 16px 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
}

.color-scheme-options {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.color-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
}

.color-option.active {
    border-color: #3b82f6;
    transform: scale(1.1);
}

.color-option[data-color="blue"] { background: #3b82f6; }
.color-option[data-color="green"] { background: #10b981; }
.color-option[data-color="purple"] { background: #8b5cf6; }
.color-option[data-color="orange"] { background: #f59e0b; }

.settings-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    margin-top: 24px;
}

/* Compose Message Modal */
.compose-modal {
    max-width: 500px;
    width: 90%;
}

.compose-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    margin-top: 16px;
}

/* Enhanced Message Features Styles */

/* Message Header with Actions */
.message-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Message Search and Filters */
.message-search-filters {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    background: #f9fafb;
}

.message-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.message-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
    pointer-events: none;
}

.message-search-wrapper input#messageSearchInput {
    padding-left: 34px;
}

.message-search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    width: 30px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    cursor: pointer;
}
.message-search-btn:hover { background: #dbeafe; border-color: #bfdbfe; }

#messageSearchInput {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #ffffff;
    transition: all 0.2s;
}

#messageSearchInput:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.message-filter-select {
    min-width: 120px;
    padding: 8px 32px 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #ffffff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    transition: all 0.2s;
}

.message-filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Message Item Enhancements */
.message-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.message-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.message-priority-badge.critical {
    background: #fef2f2;
    color: #dc2626;
}

.message-priority-badge.urgent {
    background: #fffbeb;
    color: #d97706;
}

.message-patient-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    background: #f0f9ff;
    color: #0369a1;
}

.message-footer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.message-read-indicator {
    color: #10b981;
    font-size: 11px;
}

.message-thread-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    background: #f3f4f6;
    color: #6b7280;
}

.message-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.message-item:hover .message-actions {
    opacity: 1;
}

.message-action-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-action-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.message-empty {
    padding: 32px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

/* Message Item Priority Colors */
.message-item.critical {
    border-left: 3px solid #dc2626;
}

.message-item.urgent {
    border-left: 3px solid #d97706;
}

.message-item.info {
    border-left: 3px solid #3b82f6;
}

/* Quick Reply Modal */
.quick-reply-modal {
    max-width: 600px;
    width: 90%;
}

.reply-to-message {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.reply-original-header {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reply-original-content {
    font-size: 13px;
    color: #374151;
}

.reply-original-from,
.reply-original-subject {
    margin-bottom: 6px;
    line-height: 1.5;
}

.reply-original-preview {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-style: italic;
    line-height: 1.5;
}

/* Message Thread Modal */
.message-thread-modal {
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
}

#messageThreadBody {
    max-height: calc(90vh - 200px);
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.thread-composer { 
    border-top: 1px solid #e5e7eb; 
    padding: 10px; 
    background: #fff; 
    position: sticky; 
    bottom: 0; 
}
.thread-composer textarea { 
    width: 100%; 
    border: 1px solid #e5e7eb; 
    border-radius: 8px; 
    padding: 10px 12px; 
    resize: vertical; 
}
.thread-composer-actions { 
    display: flex; 
    gap: 8px; 
    justify-content: flex-end; 
    margin-top: 8px; 
}
.thread-unread-separator { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: #1d4ed8; 
    font-weight: 600; 
    margin: 6px 0; 
}
.thread-unread-separator::before, .thread-unread-separator::after {
    content: ''; 
    flex: 1; 
    height: 1px; 
    background: #bfdbfe; 
}

.thread-message.optimistic {
    opacity: 0.7;
}

.thread-message-status {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.thread-typing-indicator {
    padding: 8px 16px;
    color: #6b7280;
    font-size: 13px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}

.thread-typing-indicator .dots {
    display: flex;
    gap: 3px;
}

.thread-typing-indicator .dots span {
    width: 6px;
    height: 6px;
    background: #9ca3af;
    border-radius: 50%;
    animation: typingDot 1.4s infinite;
}

.thread-typing-indicator .dots span:nth-child(2) { animation-delay: 0.2s; }
.thread-typing-indicator .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}

.thread-message-reactions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.thread-reaction-btn {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.thread-reaction-btn:hover {
    background: #e5e7eb;
}

.thread-reaction-btn.active {
    background: #dbeafe;
    border-color: #3b82f6;
}

.thread-message {
    position: relative;
    padding: 16px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.thread-message.sent {
    background: #eff6ff;
    border-color: #bfdbfe;
    margin-left: 20%;
}

.thread-message.received {
    background: #ffffff;
    border-color: #e5e7eb;
    margin-right: 20%;
}

/* Messenger-like per-message more menu */
.thread-more-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: none;
    color: #6b7280;
    opacity: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.thread-message:hover .thread-more-btn { opacity: 1; }
.thread-more-btn:hover { background: #f3f4f6; color: #111827; }

.thread-message-menu {
    position: absolute;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    padding: 6px;
    min-width: 180px;
}
.thread-message-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    color: #111827;
    cursor: pointer;
}
.thread-message-menu button:hover { background: #f3f4f6; }

.thread-message.critical {
    border-left: 4px solid #dc2626;
}

.thread-message.urgent {
    border-left: 4px solid #d97706;
}

.thread-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.thread-message-sender {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

.thread-patient-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    background: #f0f9ff;
    color: #0369a1;
    font-weight: 500;
}

.thread-message-time {
    font-size: 11px;
    color: #9ca3af;
}

.thread-message-priority {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.thread-message-priority.critical {
    background: #fef2f2;
    color: #dc2626;
}

.thread-message-priority.urgent {
    background: #fffbeb;
    color: #d97706;
}

.thread-message-subject {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 8px;
}

.thread-message-content {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.thread-message-read {
    margin-top: 8px;
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .message-search-filters {
        flex-direction: column;
    }
    
    .message-filter-select {
        width: 100%;
    }
    
    .message-item.critical,
    .message-item.urgent,
    .message-item.info {
        border-left-width: 2px;
    }
    
    .thread-message.sent {
        margin-left: 10%;
    }
    
    .thread-message.received {
        margin-right: 10%;
    }
    
    .thread-message-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .notification-content,
    .message-content {
        min-width: 300px;
        max-width: 350px;
        right: -50px;
    }
    
    .profile-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .profile-info {
        grid-template-columns: 1fr;
    }
    
    .settings-tabs {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1;
        min-width: 120px;
    }
}

/* Improved Profile and Settings Styles */
.profile-modal {
    max-width: 600px !important;
    width: 90% !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.profile-modal .profile-section { 
    display:flex; 
    gap: 12px; 
    margin-bottom: 12px; 
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.profile-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    z-index: 5;
}

.profile-avatar:hover .avatar-overlay {
    transform: translateY(0);
}

.change-avatar-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
    width: 100%;
}

.change-avatar-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.profile-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    color: #166534;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse 2s infinite;
}

.status-indicator.online {
    background: #22c55e;
}

.status-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.form-group label {
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.required {
    color: #dc2626;
}

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

.input-icon {
    position: absolute;
    color: #6b7280;
    font-size: 1rem;
    z-index: 1;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.2s;
    background: #ffffff;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.readonly-input {
    background-color: #f9fafb !important;
    color: #6b7280;
    cursor: not-allowed;
}

.profile-actions { display:flex; gap:0.75rem; justify-content:flex-end; padding-top:0.75rem; border-top:1px solid #e5e7eb; }

/* Settings Modal Improvements */
.settings-modal {
    max-width: 600px;
    width: 85%;
}

.settings-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s;
}

.tab-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.tab-btn.active {
    background-color: #3b82f6;
    color: white;
}

.tab-btn i {
    font-size: 1rem;
}

.settings-content {
    min-height: 200px;
}

.settings-tab {
    display: none;
}

.settings-tab.active {
    display: block;
}

.settings-tab h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: #111827;
    font-size: 1.25rem;
}

.settings-tab h4 i {
    color: #3b82f6;
}

.notification-settings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #ffffff;
}

.checkbox-label:hover {
    border-color: #3b82f6;
    background-color: #f8fafc;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid #d1d5db;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background-color: #ffffff;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background-color: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    transform: scale(1);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.875rem;
    animation: checkmarkAppear 0.2s ease;
}

@keyframes checkmarkAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.checkbox-content {
    flex: 1;
}

.checkbox-title {
    display: block;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.checkbox-description {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.4;
}

.settings-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    border-top: 1px solid #e5e7eb;
}

/* Responsive Design */
@media (max-width: 768px) {
    .profile-section {
        flex-direction: column;
        align-items: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .settings-tabs {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1;
        min-width: 120px;
    }
}

.checkbox-label:hover .checkmark {
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* Specific styles for notification settings checkboxes */
.notification-settings .checkbox-label .checkmark {
    position: relative;
    width: 24px !important;
    height: 24px !important;
    border: 3px solid #d1d5db !important;
    border-radius: 6px !important;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
    background-color: #ffffff;
    cursor: pointer;
}

/* Professional Form Styles */
.large-modal {
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s ease;
}

.large-modal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

.large-modal .modal-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.large-modal .form-sections {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.large-modal .form-actions {
    flex-shrink: 0;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* Compact modal for short forms like Alert Settings */
.small-modal {
    max-width: 520px;
    width: 92%;
    margin-left: 16px; /* requested offset */
}

.modal.show .large-modal {
    transform: scale(1);
    opacity: 1;
}

.modal-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.modal-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.modal-title h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
}

.modal-title p {
    margin: 4px 0 0 0;
    color: #1f2937;
    font-size: 14px;
}

.professional-form {
    padding: 0;
}

.form-sections {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px;
}

.form-section {
    background: #f9fafb;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.form-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #d1d5db;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.section-header i {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.section-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 0;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.form-label i {
    color: #6b7280;
    font-size: 12px;
}

.required {
    color: #dc2626;
    font-weight: 700;
}

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

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 10px 12px; /* even padding; room for text */
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
    transition: all 0.3s ease;
    color: #374151;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: #ffffff;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Hide input icons in all forms (add/edit) and align placeholders left */
.input-icon { display: none !important; }

.form-input:focus + .input-icon,
.form-select:focus + .input-icon,
.form-textarea:focus + .input-icon {
    color: #3b82f6;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    gap: 16px;
}

.form-actions-left,
.form-actions-right {
    display: flex;
    gap: 12px;
}

.btn-outline {
    background: transparent;
    border: 2px solid #d1d5db;
    color: #374151;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
}

/* Responsive design */
@media (max-width: 768px) {
    .large-modal {
        width: 95%;
        margin: 20px;
        max-height: 85vh;
    }
    
    .large-modal .form-sections {
        padding: 16px;
        gap: 20px;
    }
    
    .large-modal .form-actions {
        padding: 16px;
        flex-direction: column;
        gap: 8px;
    }
    
    .large-modal .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .form-sections {
        padding: 16px;
        gap: 24px;
    }
    
    .form-section {
        padding: 20px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 12px;
    }
    
    .form-actions-left,
    .form-actions-right {
        width: 100%;
        justify-content: center;
    }
    
    .modal-header-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .modal-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Form validation states */
.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-input.success,
.form-select.success,
.form-textarea.success {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.input-wrapper.error .input-icon {
    color: #dc2626;
}

.input-wrapper.success .input-icon {
    color: #10b981;
}

/* Enhanced form styling */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: #ffffff;
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
}

.form-section {
    background: #f9fafb;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-section:hover::before {
    opacity: 1;
}

.form-section:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: #d1d5db;
}

/* Outline Button Variant */
.btn-outline {
    background: transparent;
    border: 2px solid #d1d5db;
    color: #374151;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #1f2937;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Medication Tracker Styles */
.medication-dashboard {
    margin-bottom: 32px;
    background: #ffffff;
}

/* Medication Tracker: match page width with other sections */
.medication-tracker-page .medication-dashboard .container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.08), 0 0 0 1px rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.08);
}

.stat-card:hover {
    transform: none;
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.15), 0 8px 8px -5px rgba(0, 0, 0, 0.08);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.stat-icon.pending {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.stat-icon.missed {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.stat-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.stat-content h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.stat-content p {
    margin: 4px 0 0 0;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.quick-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.quick-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Prevent shift between light/dark: keep borders and shadows consistent */
.quick-actions .btn
{
    border-width: 2px;
    border-style: solid;
}
.quick-actions .btn-primary { border-color: #1d4ed8; }
.quick-actions .btn-secondary { border-color: #4b5563; }
.quick-actions .btn-outline { border-color: #d1d5db; }

/* Normalize vertical alignment and height */
.quick-actions .btn{
    line-height: 1;
    min-height: 44px;
}

/* Enhanced Table Styles */
.medication-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.medication-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.medication-notes {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

.dosage-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dosage {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.frequency {
    font-size: 12px;
    color: #6b7280;
}

.dose-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.next-dose {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.last-dose {
    font-size: 12px;
    color: #6b7280;
}

.adherence-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.adherence-bar {
    width: 80px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.adherence-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.adherence-text {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    min-width: 35px;
}

/* Enhanced Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.status-pending {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.status-badge.status-taken {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
}

.status-badge.status-missed {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
}

.status-badge.status-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.status-badge.status-success {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
}

.status-badge.status-normal {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
}

/* Schedule Styles */
.schedule-container {
    padding: 20px;
}

.schedule-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
    transition: all 0.3s ease;
}

.schedule-item:hover {
    background: #f3f4f6;
    transform: translateX(4px);
}

.schedule-time {
    font-weight: 700;
    color: #1f2937;
    font-size: 14px;
    min-width: 80px;
}

.schedule-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-patient {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.schedule-medication {
    font-size: 12px;
    color: #6b7280;
}

.schedule-status {
    flex-shrink: 0;
}

.chart-container .chart-legend {
    margin-top: 8px;
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    background: #ffffff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Today's Schedule: make list scrollable within fixed-height card */
.schedule-container {
    padding: 20px;
    max-height: 330px; /* 420 card height - header area */
    overflow-y: auto;
}

/* Legend when placed inside a card header (to the right of the title) */
.card-header .chart-legend {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    margin-left: auto;
}

/* Make header legend compact so the two analytics cards align nicely */
.card-header .legend-item {
    font-size: 12px;
}

.card-header .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-color.taken {
    background: #1e3a8a;
}

.legend-color.late {
    background: #3b82f6;
}

.legend-color.missed {
    background: #93c5fd;
}

.legend-color.skipped {
    background: #d1d5db;
}

/* Content Header Styles */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 0 24px;
}

.header-left h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-left p {
    font-size: 16px;
    color: #64748b;
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-header {
        flex-direction: column;
        gap: 16px;
        padding: 0 16px;
    }
    
    .header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .stat-card {
        padding: 20px;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .stat-content h3 {
        font-size: 28px;
    }
    
    .quick-actions {
        flex-direction: column;
    }
    
    .quick-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .schedule-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .schedule-time {
    min-width: auto;
    color: #1f2937; /* darker for readability */
    font-weight: 700;
    }
    
    .chart-container .chart-legend {
        position: static;
        transform: none;
        margin-top: 20px;
        right: auto;
        top: auto;
    }
}

/* Notification Styles */
/* Container fixed at top-center so notifications are visible regardless of scroll */
.notification-container {
    position: fixed;
    top: 12px;
    right: 12px;
    left: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: auto;
    max-width: 640px;
    z-index: 9999;
    pointer-events: none; /* allow clicks to pass through except the toasts */
}

.notification {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    color: #ffffff;
    background: #334155; /* default fallback */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
    width: auto;            /* size to content, avoid full-width bar */
    max-width: 520px;
    pointer-events: auto;
    animation: toastSlideDown 0.25s ease-out;
}

.notification i { font-size: 18px; }
.notification span { font-weight: 600; color: #ffffff; }

/* If any legacy inner wrapper exists, make it transparent to avoid white card inside colored bar */
.notification .notification-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.notification .notification-content span { color: #ffffff !important; }
.notification .notification-content i { color: #ffffff !important; }

/* Color coding by type */
.notification-success { background-color: #16a34a; }
.notification-error { background-color: #dc2626; }
.notification-warning { background-color: #f59e0b; }
.notification-info { background-color: #3b82f6; }

.notification-close {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    color: #ffffff;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-left: 6px;
}

.notification-close:hover { background: rgba(255,255,255,0.12); }

@keyframes toastSlideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Enhanced Search Styles */
.search-highlight {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 600;
}

/* Additional Medication Tracker Enhancements */
.medication-dashboard .header-content h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 12px;
}

.medication-dashboard .header-content p {
    margin: 8px 0 0 0;
    color: #6b7280;
    font-size: 16px;
}

/* Enhanced Action Buttons - Elegant Icon Style */
.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-buttons .btn-action {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-buttons .btn-action:hover {
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .btn-action.primary {
    background-color: #3b82f6;
    color: white;
}

.action-buttons .btn-action.primary:hover {
    background-color: #2563eb;
}

.action-buttons .btn-action.secondary {
    background-color: #6b7280;
    color: white;
}

.action-buttons .btn-action.secondary:hover {
    background-color: #4b5563;
}

.action-buttons .btn-action.warning {
    background-color: #f59e0b;
    color: white;
}

.action-buttons .btn-action.warning:hover {
    background-color: #d97706;
}

.action-buttons .btn-action.danger {
    background-color: #ef4444;
    color: white;
}

.action-buttons .btn-action.danger:hover {
    background-color: #dc2626;
}

.action-buttons .btn-action.success {
    background-color: #10b981;
    color: white;
}

.action-buttons .btn-action.success:hover {
    background-color: #059669;
}

/* Icon Action Buttons - Elegant Style */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background-color: #6b7280;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-icon:hover {
    background-color: #4b5563;
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-icon i {
    font-size: 14px;
    line-height: 1;
}

.btn-icon:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Recent Activities header alignment */
.pagination-controls { row-gap: 8px; }
.pagination-controls .btn.btn-sm { height: 36px; display: inline-flex; align-items: center; gap: 8px; }
.pagination-controls .form-input { height: 36px; }

/* Enhanced Table Responsiveness */
@media (max-width: 1024px) {
    .action-buttons {
        flex-direction: column;
        gap: 4px;
    }
    
    .action-buttons .btn-action {
        width: 100%;
        justify-content: center;
    }
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f4f6;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Notification badge styles are handled by the main .notification-badge rule with border-color fallbacks */

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0;
    transition: all 0.2s ease;
    min-height: 48px; /* Increased from thin styling */
}

.input-wrapper input,
.input-wrapper select {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    color: #374151;
    min-height: 48px; /* Ensure consistent height */
    box-sizing: border-box;
}

.input-wrapper input:focus,
.input-wrapper select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-wrapper .input-icon {
    position: absolute;
    left: 16px;
    color: #9ca3af;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.profile-avatar {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #e5e7eb;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.profile-avatar:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    border-color: #3b82f6;
}

.profile-avatar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.profile-avatar:hover::after {
    opacity: 1;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    z-index: 5;
}

.profile-avatar:hover .avatar-overlay {
    opacity: 1;
}

.profile-avatar .avatar-overlay {
    opacity: 1;
}

.change-avatar-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: white;
    cursor: pointer;
    padding: 14px;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    position: relative;
    overflow: hidden;
    z-index: 10;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.change-avatar-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.change-avatar-btn:hover::before {
    left: 100%;
}

.change-avatar-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.6);
}

.change-avatar-btn:hover {
    background: rgba(59, 130, 246, 1);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.change-avatar-btn i {
    font-size: 20px;
    color: white;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    z-index: 2;
    position: relative;
}


/* Image Cropper Modal Styles - Professional Design */
.cropper-modal {
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cropper-container {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    border-radius: 12px;
    border: 3px solid #3b82f6;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    flex-shrink: 0;
}

.cropper-container img {
    width: 100%;
    height: auto;
    max-height: 300px;
    display: block;
    object-fit: contain;
}

.cropper-instructions {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #3b82f6;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    flex-shrink: 0;
}

.cropper-instructions p {
    margin: 0;
    color: #1e40af;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.4;
}

.cropper-instructions i {
    color: #1d4ed8;
    font-size: 16px;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 0 0 0;
    border-top: 2px solid #3b82f6;
    margin-top: auto;
    flex-shrink: 0;
}

.modal-footer .btn {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 120px;
}

.modal-footer .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    color: white;
}

.modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    /* transform: translateY(-2px); - Removed to prevent button movement on hover */
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.modal-footer .btn-secondary {
    background: #4b5563;
    border: 2px solid #374151;
    color: #ffffff;
}

.modal-footer .btn-secondary:hover {
    background: #374151;
    border-color: #1f2937;
    color: #ffffff;
}

/* Responsive design for cropper modal */
@media (max-width: 768px) {
    .cropper-modal {
        max-width: 95%;
        max-height: 90vh;
    }
    
    .cropper-container {
        max-height: 250px;
    }
    
    .cropper-container img {
        max-height: 250px;
    }
    
    .cropper-instructions {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .cropper-instructions p {
        font-size: 13px;
        gap: 6px;
    }
    
    .modal-footer {
        padding: 12px 0 0 0;
        gap: 8px;
    }
    
    .modal-footer .btn {
        padding: 10px 16px;
        min-width: 100px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cropper-modal {
        max-width: 98%;
        max-height: 95vh;
    }
    
    .cropper-container {
        max-height: 200px;
    }
    
    .cropper-container img {
        max-height: 200px;
    }
    
    .modal-footer {
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-footer .btn {
        width: 100%;
        min-width: auto;
    }
}

/* Target all edit modals by ID pattern */
[id*="edit"][id*="Modal"] .modal-content,
[id*="Edit"][id*="Modal"] .modal-content {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid #e5e7eb;
}

[id*="edit"][id*="Modal"] .modal-header,
[id*="Edit"][id*="Modal"] .modal-header {
    color: #ffffff;
    padding: 24px 30px;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
}

[id*="edit"][id*="Modal"] .modal-header h3,
[id*="Edit"][id*="Modal"] .modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

[id*="edit"][id*="Modal"] .modal-header h3 i,
[id*="Edit"][id*="Modal"] .modal-header h3 i {
    font-size: 18px;
    color: #ffffff;
}

/* Edit Patient modal: match Add New Patient header background */
#editPatientModal .modal-header {
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    color: #111827;
    border-bottom: 1px solid #dbe5f1;
}
#editPatientModal .modal-title h3,
#editPatientModal .modal-title p {
    color: #111827;
}

.patient-profiles-page #editPatientModal .modal-content {
    border-radius: 18px;
    border: 1px solid #d7e2ef;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}

.patient-profiles-page #editPatientModal .modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.patient-profiles-page #editPatientModal .modal-header {
    position: relative;
    overflow: hidden;
}

.patient-profiles-page #editPatientModal .modal-header::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
}

.patient-profiles-page #editPatientModal .modal-icon {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.patient-profiles-page #editPatientModal .modal-title h3 {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.patient-profiles-page #editPatientModal .modal-title p {
    color: #526277;
    font-size: 0.95rem;
}

.patient-profiles-page #editPatientModal .form-sections {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 22px;
    padding: 24px;
    background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
}

.patient-edit-banner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid #d7e6f7;
    background: linear-gradient(135deg, #eef6ff 0%, #f8fbff 100%);
}

.patient-edit-banner-label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #335b88;
}

.patient-edit-banner-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #1f3653;
}

.patient-edit-banner-note {
    max-width: 320px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #5b6b7f;
}

.patient-profiles-page #editPatientModal .form-section {
    display: block;
    overflow: visible;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.patient-profiles-page #editPatientModal .form-section:hover {
    border-color: #c6d4e4;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.patient-profiles-page #editPatientModal .section-header {
    align-items: flex-start;
    gap: 0;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #dde6f0;
}

.patient-profiles-page #editPatientModal .section-header i {
    display: none !important;
}

.section-heading-copy {
    min-width: 0;
}

.section-heading-copy h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #24384f;
}

.section-heading-copy p {
    margin: 4px 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #617287;
}

.patient-profiles-page #editPatientModal .form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 18px;
}

.patient-profiles-page #editPatientModal .form-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #34465b;
}

.patient-profiles-page #editPatientModal .form-label i {
    display: none !important;
}

.patient-profiles-page #editPatientModal .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.patient-profiles-page #editPatientModal .input-wrapper {
    display: flex;
    align-items: center;
    min-height: 50px;
    background: #fcfdff;
    border: 1px solid #cfd9e5;
    border-radius: 12px;
    overflow: visible;
}

.patient-profiles-page #editPatientModal .input-wrapper .input-icon {
    display: none !important;
}

.patient-profiles-page #editPatientModal .form-input,
.patient-profiles-page #editPatientModal .form-select,
.patient-profiles-page #editPatientModal .form-textarea {
    min-height: 50px;
    padding: 13px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1f2937;
    box-shadow: none;
}

.patient-profiles-page #editPatientModal .form-textarea {
    min-height: 110px;
}

.patient-profiles-page #editPatientModal .form-input::placeholder,
.patient-profiles-page #editPatientModal .form-textarea::placeholder {
    color: #93a1b2;
}

.patient-profiles-page #editPatientModal .form-input:focus,
.patient-profiles-page #editPatientModal .form-select:focus,
.patient-profiles-page #editPatientModal .form-textarea:focus {
    border-color: #7aa2da;
    box-shadow: none;
    background: transparent;
}

.patient-profiles-page #editPatientModal .input-wrapper:focus-within {
    border-color: #7aa2da;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    background: #ffffff;
}

.patient-profiles-page #editPatientModal .form-actions {
    padding: 20px 24px 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-top: 1px solid #dde6f0;
}

.patient-profiles-page #editPatientModal .form-actions .btn-secondary {
    background: #f2f5f8;
    border: 1px solid #d5dde6;
    color: #415266;
}

.patient-profiles-page #editPatientModal .form-actions .btn-secondary:hover {
    background: #e9eef5;
    border-color: #c4cfdb;
}

.patient-profiles-page #editPatientModal .form-actions .btn-primary {
    background: linear-gradient(135deg, #4f79be, #5d7fd1);
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(79, 121, 190, 0.24);
}

.patient-profiles-page #editPatientModal .form-actions .btn-primary:hover {
    background: linear-gradient(135deg, #436cad, #5476c4);
}

.patient-profiles-page #addPatientModal {
    padding: clamp(16px, 3vh, 28px);
    box-sizing: border-box;
}

.patient-profiles-page #addPatientModal .modal-content.patient-edit-modal,
.patient-profiles-page #editPatientModal .modal-content,
.patient-profiles-page #viewPatientModal .modal-content {
    width: min(1080px, calc(100vw - 64px));
    max-width: 1080px;
}

.patient-profiles-page #addPatientModal .modal-content.patient-edit-modal {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid #d7e2ef;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}

.patient-profiles-page #addPatientModal .modal-header {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.patient-profiles-page #addPatientModal .modal-header::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0) 70%);
    pointer-events: none;
}

.patient-profiles-page #addPatientModal .modal-icon {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.patient-profiles-page #addPatientModal .modal-title h3 {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.patient-profiles-page #addPatientModal .modal-title p {
    color: #526277;
    font-size: 0.95rem;
}

.patient-profiles-page #addPatientModal .modal-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.patient-profiles-page #viewPatientModal .modal-content {
    max-width: 980px;
    border-radius: 18px;
    border: 1px solid #d7e2ef;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}

.patient-profiles-page #addPatientModal .form-sections,
.patient-profiles-page #editPatientModal .form-sections {
    padding: 28px 30px;
    gap: 24px;
}

.patient-profiles-page #addPatientModal .form-sections {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
    scrollbar-gutter: stable;
}

.patient-profiles-page #addPatientModal .form-sections::after {
    content: "";
    display: block;
    height: 4px;
    flex-shrink: 0;
}

.patient-profiles-page #addPatientModal .form-section,
.patient-profiles-page #editPatientModal .form-section {
    padding: 24px 24px 20px;
}

.patient-profiles-page #addPatientModal .form-section {
    display: block;
    overflow: visible;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.patient-profiles-page #addPatientModal .form-section:hover {
    border-color: #c6d4e4;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.patient-profiles-page #addPatientModal .section-header {
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #dde6f0;
}

.patient-profiles-page #addPatientModal .section-header i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 10px 18px rgba(79, 70, 229, 0.16);
    flex-shrink: 0;
}

.patient-profiles-page #addPatientModal .section-header h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #24384f;
}

.patient-profiles-page #addPatientModal .form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 18px;
}

.patient-profiles-page #addPatientModal .form-row,
.patient-profiles-page #editPatientModal .form-row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

.patient-profiles-page #addPatientModal .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #34465b;
}

.patient-profiles-page #addPatientModal .form-label i {
    color: #64748b;
    font-size: 0.82rem;
}

.patient-profiles-page #addPatientModal .input-wrapper {
    display: flex;
    align-items: center;
    min-height: 52px;
    background: #fcfdff;
    border: 1px solid #cfd9e5;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.patient-profiles-page #addPatientModal .input-wrapper .input-icon {
    display: none !important;
}

.patient-profiles-page #addPatientModal .form-input,
.patient-profiles-page #addPatientModal .form-select,
.patient-profiles-page #addPatientModal .form-textarea {
    min-height: 52px;
    padding: 13px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #1f2937;
    box-shadow: none;
}

.patient-profiles-page #addPatientModal .form-textarea {
    min-height: 112px;
}

.patient-profiles-page #addPatientModal .form-input::placeholder,
.patient-profiles-page #addPatientModal .form-textarea::placeholder {
    color: #93a1b2;
}

.patient-profiles-page #addPatientModal .form-input:focus,
.patient-profiles-page #addPatientModal .form-select:focus,
.patient-profiles-page #addPatientModal .form-textarea:focus {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

.patient-profiles-page #addPatientModal .input-wrapper:focus-within {
    border-color: #7aa2da;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    background: #ffffff;
}

.patient-profiles-page #addPatientModal .form-actions {
    flex-shrink: 0;
    padding: 18px 24px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #f8fbff 100%);
    border-top: 1px solid #dde6f0;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.05);
}

.patient-profiles-page #addPatientModal .form-actions .btn-secondary {
    background: #f2f5f8;
    border: 1px solid #d5dde6;
    color: #415266;
}

.patient-profiles-page #addPatientModal .form-actions .btn-secondary:hover {
    background: #e9eef5;
    border-color: #c4cfdb;
}

.patient-profiles-page #addPatientModal .form-actions .btn-primary {
    background: linear-gradient(135deg, #4f79be, #5d7fd1);
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(79, 121, 190, 0.24);
}

.patient-profiles-page #addPatientModal .form-actions .btn-primary:hover {
    background: linear-gradient(135deg, #436cad, #5476c4);
}

.patient-profiles-page #viewPatientModal .modal-header {
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    border-bottom: 1px solid #dbe5f1;
}

.patient-profiles-page #viewPatientModal .modal-title h3,
.patient-profiles-page #viewPatientModal .modal-title p {
    color: #111827;
}

.patient-profiles-page #viewPatientModal .modal-icon {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.patient-profiles-page #viewPatientModal .modal-body {
    padding: 26px 28px 22px;
    background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
}

.patient-profiles-page #viewPatientModal .modal-actions {
    padding: 18px 28px 24px;
    border-top: 1px solid #dde6f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.patient-profiles-page #viewPatientModal .modal-actions .btn {
    min-width: 120px;
}

.patient-profiles-page #viewPatientModal .patient-chart-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    margin-bottom: 18px;
}

.patient-profiles-page #viewPatientModal .patient-chart-banner-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f4c81;
}

.patient-profiles-page #viewPatientModal .patient-chart-banner-id {
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
}

.patient-profiles-page #viewPatientModal .patient-details-grid {
    display: grid;
    gap: 18px;
}

.patient-profiles-page #viewPatientModal .patient-details-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.patient-profiles-page #viewPatientModal .detail-card {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    border: 1px solid #d7e0ea;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.patient-profiles-page #viewPatientModal .detail-card h4 {
    margin: 0 0 14px;
    color: #0f4c81;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.patient-profiles-page #viewPatientModal .detail-item {
    display: grid;
    grid-template-columns: minmax(140px, 170px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid #dbe5ef;
}

.patient-profiles-page #viewPatientModal .detail-item:last-child {
    border-bottom: none;
}

.patient-profiles-page #viewPatientModal .detail-item label {
    font-weight: 700;
    color: #475569;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.patient-profiles-page #viewPatientModal .detail-item span {
    color: #0f172a;
    text-align: left;
    font-weight: 600;
    line-height: 1.5;
    min-width: 0;
}

.patient-profiles-page #viewPatientModal .detail-card.address-card {
    grid-column: span 2;
}

.patient-profiles-page #viewPatientModal .detail-item.address-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 0 2px;
}

.patient-profiles-page #viewPatientModal .detail-item.address-item span {
    color: #1f2937;
    white-space: pre-line;
    word-break: break-word;
}

.patient-profiles-page #viewPatientModal .detail-item .status-badge {
    min-width: 108px;
    display: inline-flex;
    justify-content: center;
}

@media (max-width: 1024px) {
    .patient-profiles-page #addPatientModal .form-row,
    .patient-profiles-page #editPatientModal .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .patient-profiles-page #addPatientModal .modal-content.patient-edit-modal,
    .patient-profiles-page #editPatientModal .modal-content,
    .patient-profiles-page #viewPatientModal .modal-content {
        width: calc(100% - 24px);
    }

    .patient-profiles-page #addPatientModal {
        padding: 12px;
    }

    .patient-profiles-page #addPatientModal .modal-content.patient-edit-modal {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .patient-profiles-page #addPatientModal .form-sections,
    .patient-profiles-page #editPatientModal .form-sections,
    .patient-profiles-page #viewPatientModal .modal-body,
    .patient-profiles-page #viewPatientModal .modal-actions {
        padding-left: 20px;
        padding-right: 20px;
    }

    .patient-profiles-page #addPatientModal .form-row,
    .patient-profiles-page #editPatientModal .form-row,
    .patient-profiles-page #viewPatientModal .patient-details-grid.two-col {
        grid-template-columns: 1fr !important;
    }

    .patient-profiles-page #viewPatientModal .detail-card.address-card {
        grid-column: span 1;
    }

    .patient-profiles-page #viewPatientModal .detail-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .patient-profiles-page #addPatientModal .modal-header {
        padding: 18px 20px 16px;
    }

    .patient-profiles-page #addPatientModal .modal-title h3 {
        font-size: 1.5rem;
    }

    .patient-profiles-page #addPatientModal .form-sections {
        padding: 18px 18px 14px;
        gap: 18px;
    }

    .patient-profiles-page #addPatientModal .form-section {
        padding: 18px 18px 14px;
    }

    .patient-profiles-page #addPatientModal .form-actions,
    .patient-profiles-page #addPatientModal .form-actions-left,
    .patient-profiles-page #addPatientModal .form-actions-right {
        flex-direction: column;
        align-items: stretch;
    }

    .patient-profiles-page #addPatientModal .form-actions {
        padding: 16px 18px 18px;
    }

    .patient-profiles-page #addPatientModal .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Edit Medication modal: match Add New Medication header background */
#editMedicationModal .modal-header {
    background: #f9fafb;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
}

#editMedicationModal .modal-header h3,
#editMedicationModal .modal-header h3 i {
    color: #111827;
}

#editMedicationModal .close {
    color: #6b7280;
}

#editMedicationModal .close:hover {
    color: #374151;
}



[id*="edit"][id*="Modal"] .close,
[id*="Edit"][id*="Modal"] .close {
    color: #6b7280;
    opacity: 0.9;
    font-size: 28px;
}

[id*="edit"][id*="Modal"] .close:hover,
[id*="Edit"][id*="Modal"] .close:hover {
    opacity: 1;
    color: black;
}

[id*="edit"][id*="Modal"] .modal-body,
[id*="Edit"][id*="Modal"] .modal-body {
    padding: 30px;
    background: #f9fafb;
}

[id*="edit"][id*="Modal"] .form-group,
[id*="Edit"][id*="Modal"] .form-group {
    margin-bottom: 20px;
}

[id*="edit"][id*="Modal"] .form-label,
[id*="Edit"][id*="Modal"] .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

[id*="edit"][id*="Modal"] .form-label i,
[id*="Edit"][id*="Modal"] .form-label i {
    color: #667eea;
    font-size: 14px;
    width: 16px;
}

[id*="edit"][id*="Modal"] .input-wrapper,
[id*="Edit"][id*="Modal"] .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.2s ease;
}

[id*="edit"][id*="Modal"] .input-wrapper:hover,
[id*="Edit"][id*="Modal"] .input-wrapper:hover {
    border-color: #cbd5e1;
}

[id*="edit"][id*="Modal"] .form-input,
[id*="edit"][id*="Modal"] .form-select,
[id*="edit"][id*="Modal"] .form-textarea,
[id*="Edit"][id*="Modal"] .form-input,
[id*="Edit"][id*="Modal"] .form-select,
[id*="Edit"][id*="Modal"] .form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1f2937;
    border-radius: 10px;
    transition: all 0.2s ease;
}

[id*="edit"][id*="Modal"] .form-input:focus,
[id*="edit"][id*="Modal"] .form-select:focus,
[id*="edit"][id*="Modal"] .form-textarea:focus,
[id*="Edit"][id*="Modal"] .form-input:focus,
[id*="Edit"][id*="Modal"] .form-select:focus,
[id*="Edit"][id*="Modal"] .form-textarea:focus {
    outline: none;
}

[id*="edit"][id*="Modal"] .input-wrapper:focus-within,
[id*="Edit"][id*="Modal"] .input-wrapper:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

[id*="edit"][id*="Modal"] .form-input[readonly],
[id*="Edit"][id*="Modal"] .form-input[readonly] {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

[id*="edit"][id*="Modal"] .form-textarea,
[id*="Edit"][id*="Modal"] .form-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

[id*="edit"][id*="Modal"] .form-row,
[id*="Edit"][id*="Modal"] .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

[id*="edit"][id*="Modal"] .modal-footer,
[id*="Edit"][id*="Modal"] .modal-footer {
    padding: 20px 30px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

[id*="edit"][id*="Modal"] .btn,
[id*="Edit"][id*="Modal"] .btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

[id*="edit"][id*="Modal"] .btn-secondary,
[id*="Edit"][id*="Modal"] .btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

[id*="edit"][id*="Modal"] .btn-secondary:hover,
[id*="Edit"][id*="Modal"] .btn-secondary:hover {
    background: #e5e7eb;
}

[id*="edit"][id*="Modal"] .btn-primary,
[id*="Edit"][id*="Modal"] .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

[id*="edit"][id*="Modal"] .btn-primary:hover,
[id*="Edit"][id*="Modal"] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Responsive Design for Edit Modals */
@media (max-width: 768px) {
    [id*="edit"][id*="Modal"] .form-row,
    [id*="Edit"][id*="Modal"] .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    [id*="edit"][id*="Modal"] .modal-body,
    [id*="Edit"][id*="Modal"] .modal-body {
        padding: 20px;
    }

    [id*="edit"][id*="Modal"] .modal-header,
    [id*="Edit"][id*="Modal"] .modal-header {
        padding: 20px;
    }

    [id*="edit"][id*="Modal"] .modal-footer,
    [id*="Edit"][id*="Modal"] .modal-footer {
        padding: 16px 20px;
        flex-direction: column-reverse;
    }

    [id*="edit"][id*="Modal"] .btn,
    [id*="Edit"][id*="Modal"] .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Password eye toggle sizing and input alignment */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrapper .form-input {
    width: 100%;
    height: 40px;
    padding-right: 36px; /* room for eye icon */
}
.input-wrapper .icon-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
}
.input-wrapper .icon-btn i {
    font-size: 13px; /* smaller eye */
}
.input-wrapper .icon-btn:hover { color: #374151; }

/* Match focus styling with other inputs */
.input-wrapper .form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* User Profile sizing adjustments */
.profile-modal{ 
    max-width: 600px !important; 
    width: 90% !important; 
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.profile-modal .modal-header {
    flex-shrink: 0;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}
.profile-modal .modal-header h3 {
    font-size: 20px;
    margin: 0;
    color: #1f2937;
}
.profile-modal .modal-body {
    max-height: calc(85vh - 140px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 20px !important;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    color: #1f2937;
}
.profile-modal .profile-section {
    margin-bottom: 16px;
    gap: 16px;
}
.profile-modal .profile-avatar-section {
    flex-shrink: 0;
}
.profile-modal .profile-avatar-section .discord-profile-avatar {
    width: 100px;
    height: 100px;
}
.profile-modal .profile-status {
    font-size: 13px;
    margin-top: 10px;
    color: #1f2937;
}
.profile-modal .profile-status .status-text {
    color: #1f2937;
}
.profile-modal .profile-info {
    flex: 1;
}
.profile-modal .profile-info .form-row{ 
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    gap:14px; 
}
.profile-modal .form-group {
    margin-bottom: 14px;
}
.profile-modal .form-group label {
    font-size: 14px;
    margin-bottom: 8px;
    color: #374151;
    font-weight: 500;
}
.profile-modal .form-group .required {
    color: #ef4444;
}
.profile-modal .input-wrapper {
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}
.profile-modal .input-wrapper .input-icon {
    font-size: 15px;
    color: #6b7280;
}
.profile-modal .form-input {
    font-size: 15px;
    padding: 10px 14px;
    background: transparent;
    color: #1f2937;
    border: none;
}
.profile-modal .form-input::placeholder {
    color: #9ca3af;
}
.profile-modal .readonly-input {
    background: #f3f4f6;
    color: #6b7280;
}
.profile-modal .profile-actions {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    margin-top: auto;
    gap: 12px;
    background: #ffffff;
}
.profile-modal .profile-actions .btn {
    padding: 12px 20px;
    font-size: 15px;
}

@media (max-width: 768px){ 
    .profile-modal .profile-info .form-row{ 
        grid-template-columns: 1fr; 
    }
    .profile-modal {
        max-width: 95% !important;
        width: 95% !important;
    }
}

/* Medical Theme Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #132f5f 0%, #10274e 58%, #0d1a30 100%);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(191, 219, 254, 0.24);
    box-shadow: 6px 0 22px rgba(12, 39, 74, 0.28);
    z-index: 1000;
    overflow-y: auto;
    overflow-x: visible;
    transition: left 0.25s ease, width 0.25s ease;
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 10%, rgba(56, 189, 248, 0.18), transparent 28%),
        radial-gradient(circle at 84% 88%, rgba(37, 99, 235, 0.14), transparent 34%);
    pointer-events: none;
    z-index: 0;
}

.sidebar-header .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.sidebar-header .logo i {
    font-size: 20px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Custom Heartbeat Logo for Sidebar */
.sidebar .heartbeat-logo {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar .heart {
    position: relative;
    width: 16px;
    height: 14px;
    background: white;
    border-radius: 8px 8px 0 0;
    transform: rotate(-45deg);
    animation: heartbeat 1.5s ease-in-out infinite;
}

.sidebar .heart:before,
.sidebar .heart:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 14px;
    background: white;
    border-radius: 8px 8px 0 0;
}

.sidebar .heart:before {
    top: -7px;
    left: 0;
    transform: rotate(90deg);
}

.sidebar .heart:after {
    top: 0;
    left: 7px;
    transform: rotate(90deg);
}

.sidebar .ecg-line {
    position: absolute;
    top: 50%;
    left: -6px;
    right: -6px;
    height: 2px;
    background: white;
    transform: translateY(-50%);
    z-index: 2;
}

.sidebar .ecg-line:before {
    content: '';
    position: absolute;
    top: -2px;
    left: 2px;
    width: 2px;
    height: 6px;
    background: white;
}

.sidebar .ecg-line:after {
    content: '';
    position: absolute;
    top: -4px;
    left: 5px;
    width: 2px;
    height: 10px;
    background: white;
}

@keyframes heartbeat {
    0% { transform: rotate(-45deg) scale(1); }
    25% { transform: rotate(-45deg) scale(1.1); }
    50% { transform: rotate(-45deg) scale(1); }
    75% { transform: rotate(-45deg) scale(1.05); }
    100% { transform: rotate(-45deg) scale(1); }
}

.sidebar-nav {
    position: relative;
    z-index: 1;
    padding: 8px 12px 14px;
}

.nav-section {
    margin-bottom: 10px;
}

.nav-section h3 {
    margin: 0 0 6px;
    padding: 0 9px;
    color: rgba(191, 219, 254, 0.92);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nav-item {
    margin: 0;
    border-radius: 12px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 12px;
    color: #e8f2ff;
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.22s ease;
    border-radius: 11px;
    margin-right: 0;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}
.nav-link::before {
    content: none;
    display: none;
}

.nav-link:hover {
    background: linear-gradient(135deg, rgba(148, 197, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(191, 226, 255, 0.24);
    color: white;
    transform: translateX(2px);
    box-shadow: 0 8px 14px rgba(9, 31, 58, 0.22);
}

.nav-item.active .nav-link {
    background: linear-gradient(135deg, rgba(148, 197, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(191, 219, 254, 0.34);
    color: white;
    font-weight: 600;
    box-shadow: 0 8px 16px rgba(12, 39, 74, 0.18);
    position: relative;
}

.nav-item.active .nav-link::after {
    content: '';
    position: absolute;
    left: -2px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #cfe7ff 100%);
}

.nav-link i {
    font-size: 14px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #b9dbff;
    border-radius: 7px;
}

.logo.big-logo .alzcare-text {
    font-size: 1.72rem;
    letter-spacing: -0.03em;
}

.sidebar-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 2px;
}

.sidebar-meta-label {
    color: #f8fbff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sidebar-meta-copy {
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px 0 32px 0;
    padding: 0 16px;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: #f3f4f6;
    color: #374151;
}

.pagination-btn.active {
    background: #667eea;
    color: #ffffff;
    font-weight: 600;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #9ca3af;
    font-size: 14px;
}

/* Modal Actions Styling */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    margin-top: 0;
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.modal-actions .btn {
    margin: 0;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.modal-actions .btn:hover {
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Search and Filter Section Styling */
.search-filter-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.search-container {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: center;
}

.search-filter-section .search-box {
    position: relative !important;
    width: fit-content;
    flex: 0 0 auto;
    max-width: 100%;
}

.search-filter-section .search-input {
    width: 100%;
    min-width: 320px;
    max-width: 360px;
    padding-right: 52px;
    padding-top: 13px;
    padding-bottom: 13px;
    min-width: 0;
}

.search-filter-section .search-clear {
    position: absolute !important;
    top: 50% !important;
    right: 70px !important;
    transform: translateY(-50%) !important;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    z-index: 1;
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-container {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.filter-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.patient-profiles-page .search-filter-section {
    padding: 20px;
}

.patient-profiles-page .search-container {
    flex-wrap: nowrap;
    gap: 16px;
}

.patient-profiles-page .search-filter-section .search-box {
    flex: 1 1 560px;
    width: auto;
    max-width: 680px;
}

.patient-profiles-page .search-filter-section .search-input {
    width: 100%;
    min-width: 420px;
    max-width: none;
    height: 48px;
    padding: 0 48px 0 46px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 48px;
}

.patient-profiles-page .search-filter-section .search-input::placeholder {
    color: #94a3b8;
}

.patient-profiles-page .search-filter-section .search-icon {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.patient-profiles-page .search-filter-section .search-clear {
    right: 12px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .search-container {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        min-width: auto;
    }

    .patient-profiles-page .search-container {
        flex-wrap: wrap;
    }

    .patient-profiles-page .search-filter-section .search-box,
    .patient-profiles-page .search-filter-section .search-input {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .filter-container {
        justify-content: space-between;
    }
}

.medical-dashboard {
    background: #ffffff;
    min-height: 100vh;
}

.health-monitoring-page .medical-dashboard .container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Analytics: match page width and card layout with Patient Profiles */
.analytics-page .medical-dashboard .container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.analytics-page .stat-trend {
    display: none;
}

.medical-stats-grid,
.medication-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.medical-stat-card,
.medication-stat-card {
    background: var(--app-surface);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--app-border);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.medical-stat-card:hover,
.medication-stat-card:hover {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: var(--shadow-md);
}

.medical-stats-grid .stat-header,
.medication-stats-grid .stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    order: 1;
}

.medical-stats-grid .stat-icon,
.medication-stats-grid .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.medical-stats-grid .stat-icon i,
.medication-stats-grid .stat-icon i {
    font-size: 20px;
    line-height: 1;
}

.stat-icon.primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.stat-icon.critical { background: linear-gradient(135deg, #ef4444, #dc2626); }
.stat-icon.warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-icon.success { background: linear-gradient(135deg, #10b981, #059669); }

/* Keep stat icons visually consistent (blue) across Patient Profiles, Health Monitoring, and Medication Tracker top cards */
.medical-stats-grid .stat-icon,
.medication-stats-grid .stat-icon,
.medical-stats-grid .stat-icon.primary,
.medical-stats-grid .stat-icon.success,
.medical-stats-grid .stat-icon.warning,
.medical-stats-grid .stat-icon.critical,
.medication-stats-grid .stat-icon.primary,
.medication-stats-grid .stat-icon.success,
.medication-stats-grid .stat-icon.warning,
.medication-stats-grid .stat-icon.critical {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}


.stat-trend {
    display: none;
}

.stat-trend.positive { color: #10b981; }
.stat-trend.negative { color: #ef4444; }
.stat-trend.neutral { color: #6b7280; }

/* Match User Accounts card layout */
.health-monitoring-page .stat-trend,
.medication-tracker-page .stat-trend {
    display: none;
}

.medical-stats-grid .stat-value,
.medication-stats-grid .stat-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--app-text);
    line-height: 1;
    margin-bottom: 4px;
    order: 3;
}

.medical-stats-grid .stat-label,
.medication-stats-grid .stat-label {
    font-size: 12px;
    color: var(--app-text-muted);
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    order: 2;
}

.patient-profiles-page .medical-stats-grid .stat-label,
.health-monitoring-page .medical-stats-grid .stat-label,
.medication-tracker-page .medication-stats-grid .stat-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.medical-table-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.table-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
}

.table-title {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.table-subtitle {
    font-size: 0.875rem;
}

.medical-table {
    width: 100%;
    border-collapse: collapse;
}

.medical-table th {
    background: #f8fafc;
    color: #374151;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
}

.medical-table th:last-child {
    text-align: center;
    min-width: 150px;
}


.medical-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.medical-table td:last-child {
    text-align: center;
    white-space: nowrap;
}


.medical-table td:last-child .action-buttons {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.medical-table td:last-child .action-menu {
    margin: 0 auto;
}

.medical-table tbody tr:hover {
    background: #f8fafc;
}

.patient-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.patient-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.patient-details h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.125rem 0;
}

.patient-details p {
    font-size: 0.625rem;
    color: #6b7280;
    margin: 0;
}

.vital-sign {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.vital-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
}

.vital-value.warning {
    color: #b45309;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vital-unit {
    font-size: 0.625rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.normal {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #86efac;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
}

.status-badge.elevated {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fcd34d;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.15);
}

.status-badge.critical {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #fca5a5;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15);
}

.btn-medical {
    padding: 0;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-medical.primary {
    background-color: #3b82f6;
    color: white;
}

.btn-medical.primary:hover {
    background-color: #2563eb;
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-medical.secondary {
    background-color: #6b7280;
    color: white;
}

.btn-medical.secondary:hover {
    background-color: #4b5563;
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.search-filter-bar {
    background: white;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.last-updated-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

.quick-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.quick-filter-pill {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.quick-filter-pill.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.followup-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    margin-bottom: 20px;
}

.followup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.followup-header h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.followup-header p {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.followup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.followup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.followup-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}

.followup-meta {
    font-size: 12px;
    color: #6b7280;
}

.followup-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.followup-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.followup-tag.warning {
    background: #fef3c7;
    color: #92400e;
}

.followup-empty {
    padding: 12px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}

.health-monitoring-shell {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.health-monitoring-page .health-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
    gap: 20px;
    background: #ffffff;
    border: 1px solid #d7dee7;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.health-monitoring-page .dashboard-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.health-monitoring-page .health-hero-copy h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.16;
    color: #0f172a;
    font-weight: 700;
}

.health-monitoring-page .health-hero-copy p {
    margin: 0;
    max-width: 720px;
    color: #526277;
    font-size: 15px;
    line-height: 1.6;
}

.health-monitoring-page .health-hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.health-monitoring-page .health-meta-card {
    background: #f8fafc;
    border: 1px solid #d7dee7;
    border-radius: 12px;
    padding: 16px;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    box-shadow: none;
}

.health-monitoring-page .health-meta-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.health-monitoring-page .health-meta-card strong {
    font-size: 1.12rem;
    line-height: 1.35;
    color: #0f172a;
}

.health-monitoring-page .stat-link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.health-monitoring-page .health-ops-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.health-monitoring-page .health-priority-card,
.health-monitoring-page .health-chart-card {
    background: #ffffff;
    border: 1px solid #d7dee7;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.health-monitoring-page .health-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.health-monitoring-page .health-section-heading h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.health-monitoring-page .health-section-heading p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.health-monitoring-page .priority-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.health-monitoring-page .priority-metric {
    border-radius: 12px;
    border: 1px solid #dce3ec;
    padding: 14px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.health-monitoring-page .priority-metric strong {
    font-size: 1.55rem;
    line-height: 1;
    color: #0f172a;
}

.health-monitoring-page .priority-metric-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.health-monitoring-page .priority-metric small {
    color: #6b7d96;
    line-height: 1.45;
}

.health-monitoring-page .priority-metric.danger { border-left: 4px solid #dc2626; }
.health-monitoring-page .priority-metric.warning { border-left: 4px solid #d97706; }
.health-monitoring-page .priority-metric.info { border-left: 4px solid #2563eb; }

.health-monitoring-page .health-chart-layout {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 190px);
    gap: 18px;
    align-items: center;
}

.health-monitoring-page .health-chart-canvas {
    position: relative;
    min-height: 220px;
}

.health-monitoring-page .health-chart-canvas-wide {
    min-height: 250px;
}

.health-monitoring-page .health-status-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.health-monitoring-page .status-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #dce3ec;
    min-width: 0;
}

.health-monitoring-page .status-legend-item > div {
    min-width: 0;
    flex: 1;
}

.health-monitoring-page .status-legend-item strong {
    display: block;
    font-size: 1rem;
    color: #102449;
    line-height: 1.2;
}

.health-monitoring-page .status-legend-item small {
    color: #64748b;
    display: block;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}

.health-monitoring-page .status-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.health-monitoring-page .status-legend-item.normal .status-legend-dot { background: #22c55e; }
.health-monitoring-page .status-legend-item.elevated .status-legend-dot { background: #f59e0b; }
.health-monitoring-page .status-legend-item.critical .status-legend-dot { background: #ef4444; }

@media (max-width: 1100px) {
    .health-monitoring-page .health-chart-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .health-monitoring-page .health-status-legend {
        width: 100%;
        max-width: 360px;
    }
}

.health-monitoring-page .followup-action {
    border: 1px solid #d7dee7;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    cursor: pointer;
}

.health-monitoring-page .health-toolbar {
    justify-content: space-between;
}

.health-monitoring-page .health-search-field {
    position: relative;
    flex: 1 1 320px;
}

.health-monitoring-page .health-search-field i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    z-index: 1;
}

.health-monitoring-page .health-search-field .search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
}

.health-monitoring-page .health-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.health-monitoring-page .medical-stats-grid {
    margin-bottom: 24px;
}

.health-monitoring-page .medical-stat-card {
    min-height: 0;
}

.health-monitoring-page .medical-stats-grid .stat-link {
    margin-top: 4px;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.health-monitoring-page .medical-stats-grid .stat-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.health-monitoring-page .health-table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.health-monitoring-page .health-table-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    color: #61758f;
    font-size: 0.88rem;
}

.health-monitoring-page .health-table-summary strong {
    color: #12264a;
    font-size: 1rem;
}

.health-monitoring-page .health-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 12px;
}

.health-monitoring-page .medical-table {
    min-width: 920px;
}

.health-monitoring-page .medical-table-container {
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    border: 1px solid #dbe5f0;
    overflow: visible;
}

.health-monitoring-page .health-table-header {
    padding: 1.25rem 1.5rem;
}

.health-monitoring-page .medical-table th,
.health-monitoring-page .medical-table td {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.health-monitoring-page .medical-table th:last-child,
.health-monitoring-page .medical-table td:last-child {
    width: 96px;
    min-width: 96px;
    overflow: visible;
    position: relative;
}

.health-monitoring-page .medical-table td:last-child {
    z-index: 3;
}

.health-monitoring-page .medical-table tbody tr {
    position: relative;
}

.health-monitoring-page .action-menu {
    z-index: 4;
}

.health-monitoring-page .action-menu-panel {
    top: 50%;
    right: calc(100% + 12px);
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    border-radius: 12px;
    min-width: 180px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}

.health-monitoring-page .action-menu-panel::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%) rotate(45deg);
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
}

.health-monitoring-page .action-menu-panel button {
    position: relative;
    z-index: 1;
}

.health-monitoring-page .action-menu-panel button i {
    width: 16px;
    text-align: center;
}

.health-monitoring-page .js-coordinates-link {
    color: inherit;
    text-decoration: underline;
}

.health-monitoring-page .medication-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.health-monitoring-page .medication-pill.taken {
    background: #dcfce7;
    color: #166534;
}

.health-monitoring-page .medication-pill.missed {
    background: #ffedd5;
    color: #c2410c;
}

.health-monitoring-page #healthDetailsModal .modal-content,
.health-monitoring-page #patientProfileModal .modal-content,
.health-monitoring-page #healthHistoryModal .modal-content,
.health-monitoring-page #editHealthModal .modal-content {
    width: min(1080px, calc(100vw - 64px));
    max-width: 1080px;
    border-radius: 20px;
    overflow: hidden;
}

.health-monitoring-page #healthDetailsModal .modal-content,
.health-monitoring-page #patientProfileModal .modal-content,
.health-monitoring-page #healthHistoryModal .modal-content {
    max-width: 980px;
}

.health-monitoring-page .health-modal-panel {
    border: 1px solid #dbe7f5;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
}

.health-monitoring-page .health-modal-panel .modal-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    border-bottom: 1px solid #dbe7f5;
}

.health-monitoring-page .health-modal-panel .modal-title p {
    margin: 4px 0 0;
    font-size: 0.92rem;
    color: #64748b;
}

.health-monitoring-page .health-modal-panel .modal-body {
    padding: 28px 30px 24px;
    background: #fcfdff;
}

.health-monitoring-page .health-modal-panel .modal-actions,
.health-monitoring-page .health-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 30px 24px;
    border-top: 1px solid #e5edf6;
    background: #ffffff;
}

.health-monitoring-page .health-modal-actions .btn,
.health-monitoring-page .health-modal-panel .modal-actions .btn {
    min-width: 140px;
}

.health-monitoring-page #editHealthModal .modal-body,
.health-monitoring-page .health-edit-body {
    max-height: 70vh;
    overflow-y: auto;
}

.health-monitoring-page .history-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.health-monitoring-page .health-history-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px 28px 28px;
    max-height: 70vh;
    overflow: hidden;
}

.health-monitoring-page .history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.health-monitoring-page .history-filter-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.health-monitoring-page .history-filter-btn {
    border: 1px solid #dbe7f5;
    background: #ffffff;
    color: #334155;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.health-monitoring-page .history-filter-btn.active,
.health-monitoring-page .history-filter-btn:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
}

.health-monitoring-page .history-summary-chip {
    background: #eef4ff;
    color: #1d4ed8;
    border: 1px solid #dbe7f5;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
}

.health-monitoring-page .history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}

.health-monitoring-page .history-table-shell {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.health-monitoring-page .history-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.health-monitoring-page .history-table thead th {
    position: sticky;
    top: 0;
    background: #f8fbff;
    color: #334155;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.health-monitoring-page .history-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
    color: #1f2937;
    font-size: 14px;
}

.health-monitoring-page .history-table tbody tr:last-child td {
    border-bottom: none;
}

.health-monitoring-page .history-table-row-coordinate {
    background: #fcfdff;
}

.health-monitoring-page .history-table-row-bpm {
    background: #fbfffd;
}

.health-monitoring-page .history-table-row-temperature {
    background: #fffdfb;
}

.health-monitoring-page .history-table-time {
    white-space: nowrap;
    color: #475569;
    font-weight: 600;
}

.health-monitoring-page .history-table-value {
    font-size: 14px;
}

.health-monitoring-page .history-table-details {
    color: #475569;
}

.health-monitoring-page .history-table-muted {
    color: #94a3b8;
    font-style: italic;
}

.health-monitoring-page .history-table tbody tr.is-empty td,
.health-monitoring-page .history-table tbody tr.is-loading td {
    text-align: center;
    padding: 28px 16px;
    color: #64748b;
    font-weight: 600;
}

.health-monitoring-page .history-entry {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.health-monitoring-page .history-entry-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 18px;
}

.health-monitoring-page .history-entry-bpm .history-entry-icon {
    background: #ecfdf5;
    color: #059669;
}

.health-monitoring-page .history-entry-temperature .history-entry-icon {
    background: #fff7ed;
    color: #ea580c;
}

.health-monitoring-page .history-entry-main {
    min-width: 0;
}

.health-monitoring-page .history-entry-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.health-monitoring-page .history-entry-type {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.health-monitoring-page .history-entry-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.health-monitoring-page .history-entry-details {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.health-monitoring-page .history-entry-meta {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    align-self: center;
}

.health-monitoring-page .history-empty-state {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border: 1px dashed #dbe7f5;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    color: #64748b;
    text-align: center;
    padding: 20px;
}

.health-monitoring-page .modal-header h3 {
    color: #102449;
}

.health-monitoring-page .health-edit-form {
    display: flex;
    flex-direction: column;
}

.health-monitoring-page .health-edit-form .form-sections,
.health-monitoring-page .health-edit-body form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.health-monitoring-page .health-edit-banner {
    margin-bottom: 4px;
}

.health-monitoring-page .health-edit-form .form-row {
    margin-bottom: 0;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}

.health-monitoring-page .health-edit-form .form-group {
    margin-bottom: 0;
}

.health-monitoring-page .health-edit-form .input-wrapper {
    position: relative;
}

.health-monitoring-page .health-edit-form .input-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #8aa0ba;
    pointer-events: none;
}

.health-monitoring-page .health-edit-form textarea + .input-icon {
    top: 18px;
    transform: none;
}

.health-monitoring-page .health-edit-form .form-input,
.health-monitoring-page .health-edit-form .form-select,
.health-monitoring-page .health-edit-form .form-textarea {
    padding-right: 44px;
}

.health-monitoring-page .health-edit-form .form-textarea {
    min-height: 112px;
}

.health-monitoring-page .health-edit-body {
    padding: 28px 30px 24px;
}

.health-monitoring-page .health-details-modal #healthDetailsContent,
.health-monitoring-page #patientProfileContent {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.health-monitoring-page .health-record-sheet {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.health-monitoring-page .health-record-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
    border: 1px solid #dbeafe;
}

.health-monitoring-page .health-record-kicker {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5f7697;
}

.health-monitoring-page .health-record-banner h4 {
    margin: 0;
    font-size: 1.35rem;
    color: #12264a;
}

.health-monitoring-page .health-record-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.health-monitoring-page .health-record-card,
.health-monitoring-page .health-form-section {
    background: #ffffff;
    border: 1px solid #dde6f2;
    border-radius: 16px;
    padding: 20px;
}

.health-monitoring-page .health-record-card h5 {
    margin: 0 0 14px;
    font-size: 1rem;
    color: #12264a;
}

.health-monitoring-page .health-record-item {
    display: grid;
    grid-template-columns: minmax(140px, 170px) minmax(0, 1fr);
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid #edf2f7;
}

.health-monitoring-page .health-record-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.health-monitoring-page .health-record-item span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #68809f;
}

.health-monitoring-page .health-record-item strong {
    text-align: left;
    color: #102449;
    line-height: 1.5;
    min-width: 0;
}

.health-monitoring-page .health-record-note {
    margin: 0;
    color: #53657e;
    line-height: 1.65;
}

.health-monitoring-page .health-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.health-monitoring-page .health-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
}

.health-monitoring-page .health-chip.muted {
    background: #f1f5f9;
    color: #475569;
}

@media (max-width: 1024px) {
    .health-monitoring-page #editHealthModal .modal-content,
    .health-monitoring-page #healthDetailsModal .modal-content,
    .health-monitoring-page #patientProfileModal .modal-content {
        width: min(980px, calc(100vw - 48px));
    }

    .health-monitoring-page .health-edit-form .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .health-monitoring-page .health-table-wrapper {
        padding-bottom: 8px;
    }

    .health-monitoring-page .action-menu-panel {
        top: calc(100% + 6px);
        right: 0;
        left: auto;
        bottom: auto;
        transform: none;
    }

    .health-monitoring-page .action-menu-panel::after {
        top: -6px;
        right: 18px;
        transform: rotate(45deg);
    }

    .health-monitoring-page #editHealthModal .modal-content,
    .health-monitoring-page #healthDetailsModal .modal-content,
    .health-monitoring-page #patientProfileModal .modal-content,
    .health-monitoring-page #healthHistoryModal .modal-content {
        width: calc(100% - 24px);
    }

    .health-monitoring-page .health-modal-panel .modal-body,
    .health-monitoring-page .health-edit-body,
    .health-monitoring-page .health-history-body,
    .health-monitoring-page .health-modal-panel .modal-actions,
    .health-monitoring-page .health-modal-actions {
        padding-left: 20px;
        padding-right: 20px;
    }

    .health-monitoring-page .health-edit-form .form-row,
    .health-monitoring-page .health-record-grid,
    .health-monitoring-page .history-entry {
        grid-template-columns: 1fr !important;
    }

    .health-monitoring-page .health-record-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .health-monitoring-page .history-entry-meta {
        white-space: normal;
    }
}

.health-monitoring-page #editHealthModal input[type="number"] {
    padding-right: 12px !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.health-monitoring-page #editHealthModal input[type="number"]::-webkit-inner-spin-button,
.health-monitoring-page #editHealthModal input[type="number"]::-webkit-outer-spin-button {
    margin-right: 4px;
    opacity: 1;
    width: 16px;
    height: 20px;
}

/* Removed duplicate search-input styles - using main definition */

.filter-select {
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
}

/* Medication Tracker Dashboard */
.medication-dashboard {
    background: #ffffff;
    min-height: 100vh;
}

/* Medication Tracker Page Styles (scoped) */
@keyframes medFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.medication-tracker-page .med-tracker {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.medication-tracker-page .med-metric-card,
.medication-tracker-page .med-tabs,
.medication-tracker-page .med-panel-card,
.medication-tracker-page .med-list-item,
.medication-tracker-page .med-timeline-item {
    opacity: 0;
    animation: medFadeInUp 0.45s ease forwards;
}

.medication-tracker-page .med-metric-card:nth-child(1) { animation-delay: 0.04s; }
.medication-tracker-page .med-metric-card:nth-child(2) { animation-delay: 0.08s; }
.medication-tracker-page .med-metric-card:nth-child(3) { animation-delay: 0.12s; }
.medication-tracker-page .med-metric-card:nth-child(4) { animation-delay: 0.16s; }
.medication-tracker-page .med-tabs { animation-delay: 0.2s; }
.medication-tracker-page .med-panel-card { animation-delay: 0.24s; }
.medication-tracker-page .med-list-item { animation-delay: 0.28s; }

.medication-tracker-page .med-timeline-item:nth-child(1) { animation-delay: 0.06s; }
.medication-tracker-page .med-timeline-item:nth-child(2) { animation-delay: 0.1s; }
.medication-tracker-page .med-timeline-item:nth-child(3) { animation-delay: 0.14s; }
.medication-tracker-page .med-timeline-item:nth-child(4) { animation-delay: 0.18s; }
.medication-tracker-page .med-timeline-item:nth-child(n+5) { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
    .medication-tracker-page .med-metric-card,
    .medication-tracker-page .med-tabs,
    .medication-tracker-page .med-panel-card,
    .medication-tracker-page .med-list-item,
    .medication-tracker-page .med-timeline-item {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

.medication-tracker-page .med-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.medication-tracker-page .med-metric-card {
    background: var(--app-surface);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.medication-tracker-page .med-metric-card:hover {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.medication-tracker-page .med-metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.medication-tracker-page .med-metric-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.medication-tracker-page .med-metric-value {
    font-size: 36px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 4px;
}

.medication-tracker-page .med-metric-subtext {
    font-size: 13px;
    color: #9ca3af;
}

.medication-tracker-page .med-tabs {
    display: flex;
    gap: 12px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 16px;
    overflow-x: auto;
}

.medication-tracker-page .med-tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    align-items: center;
}

.medication-tracker-page .med-tab-btn:hover {
    color: #2563eb;
}

.medication-tracker-page .med-tab-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.medication-tracker-page .med-tab-content {
    display: none;
}

.medication-tracker-page .med-tab-content.active {
    display: block;
}

.medication-tracker-page .med-calendar,
.medication-tracker-page .med-timeline,
.medication-tracker-page .med-chart-container {
    padding: 0;
}

.medication-tracker-page .med-panel-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--app-border);
}

.medication-tracker-page .med-panel-card .card-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--app-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.medication-tracker-page .med-panel-card .card-body {
    padding: 16px;
}

.medication-tracker-page .med-calendar-nav {
    display: flex;
    gap: 12px;
}

.medication-tracker-page .med-calendar-nav button {
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
    color: #1f2937;
}

.medication-tracker-page .med-calendar-nav button:hover {
    background: #f3f4f6;
    border-color: #2563eb;
    color: #2563eb;
}

.medication-tracker-page .med-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.medication-tracker-page .med-calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--app-border);
}

.medication-tracker-page .med-calendar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.medication-tracker-page .med-calendar-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.medication-tracker-page .med-filter-select {
    padding: 8px 12px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--app-surface);
    color: var(--app-text);
    min-width: 160px;
}

.medication-tracker-page .med-day-header {
    text-align: center;
    font-weight: 700;
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
    padding: 12px 0;
}

.medication-tracker-page .med-calendar-day {
    aspect-ratio: 1;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    color: #1f2937;
    position: relative;
}

.medication-tracker-page .med-calendar-day.other-month {
    opacity: 0.4;
}

.medication-tracker-page .med-calendar-day.has-events::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #2563eb;
    position: absolute;
    bottom: 6px;
    right: 6px;
}

.medication-tracker-page .med-calendar-day-panel {
    margin-top: 16px;
}

.medication-tracker-page .med-day-selected {
    font-size: 12px;
    color: var(--app-text-muted);
    font-weight: 600;
}

.medication-tracker-page .med-day-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.medication-tracker-page .med-day-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface);
}

.medication-tracker-page .med-day-time {
    font-weight: 700;
    color: #2563eb;
    min-width: 64px;
    font-size: 13px;
}

.medication-tracker-page .med-day-details {
    flex: 1;
}

.medication-tracker-page .med-day-title {
    font-weight: 700;
    color: var(--app-text);
    margin-bottom: 4px;
}

.medication-tracker-page .med-day-meta {
    font-size: 12px;
    color: var(--app-text-muted);
    margin-bottom: 6px;
}

.medication-tracker-page .med-confirmation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
}

.medication-tracker-page .med-day-empty {
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed var(--app-border);
    background: #f8fafc;
    font-size: 13px;
    color: var(--app-text-muted);
    text-align: center;
}

.medication-tracker-page .med-calendar-day:hover {
    border-color: #2563eb;
    background: #f0f7ff;
}

.medication-tracker-page .med-calendar-day.today {
    border-color: #2563eb;
    background: #dbeafe;
    color: #1e40af;
}

.medication-tracker-page .med-calendar-day.selected {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}

.medication-tracker-page .med-timeline {
    background: var(--app-surface);
    border-radius: 8px;
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-sm);
}

.medication-tracker-page .med-timeline-item {
    display: flex;
    gap: 20px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 14px;
    transition: all 0.2s;
    align-items: center;
}

.medication-tracker-page .med-timeline-item:hover {
    border-color: #2563eb;
    background: #f0f7ff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.medication-tracker-page .med-timeline-time {
    min-width: 100px;
    font-weight: 800;
    color: #2563eb;
    font-size: 18px;
}

.medication-tracker-page .med-timeline-content {
    flex: 1;
}

.medication-tracker-page .med-timeline-med-name {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
    margin-bottom: 6px;
}

.medication-tracker-page .med-timeline-meta {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}

.medication-tracker-page .med-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
}

.medication-tracker-page .med-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.medication-tracker-page .med-status-badge.taken {
    background: #d1fae5;
    color: #065f46;
}

.medication-tracker-page .med-status-badge.missed {
    background: #fee2e2;
    color: #991b1b;
}

.medication-tracker-page .med-timeline-btn {
    padding: 8px 16px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.medication-tracker-page .med-timeline-btn:hover {
    background: #1d4ed8;
}

.medication-tracker-page .med-timeline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.medication-tracker-page .med-timeline-btn.med-timeline-btn-secondary {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.medication-tracker-page .med-timeline-btn.med-timeline-btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.medication-tracker-page .med-list-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.medication-tracker-page .med-list-item {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

.medication-tracker-page .med-list-item:hover {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: var(--shadow-md);
}

.medication-tracker-page .med-list-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.medication-tracker-page .med-list-info {
    flex: 1;
    min-width: 0;
}

.medication-tracker-page .med-list-name {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
    margin-bottom: 6px;
}

.medication-tracker-page .med-list-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #6b7280;
}

.medication-tracker-page .med-list-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.medication-tracker-page .med-list-actions button {
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.medication-tracker-page .med-list-actions button:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}

.medication-tracker-page .med-list-status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.medication-tracker-page .med-list-status-text {
    font-size: 12px;
    color: #b45309;
    font-weight: 600;
}

.medication-tracker-page .med-adherence-badge {
    text-align: center;
    min-width: 70px;
    flex-shrink: 0;
}

.medication-tracker-page .med-adherence-value {
    font-weight: 800;
    color: #2563eb;
    font-size: 18px;
}

.medication-tracker-page .med-adherence-label {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    font-weight: 600;
}

.medication-tracker-page .med-side-effects {
    margin-top: 12px;
}

.medication-tracker-page .med-side-effects-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.medication-tracker-page .med-side-effect-pill {
    background: #fee2e2;
    color: #991b1b;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.medication-tracker-page .med-chart-container {
    background: var(--app-surface);
    border-radius: 8px;
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.medication-tracker-page .med-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.medication-tracker-page .med-modal-overlay.active {
    display: flex;
}

.medication-tracker-page .med-modal {
    background: white;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-lg);
}

.medication-tracker-page .med-modal-header {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.medication-tracker-page .med-modal-title {
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
}

.medication-tracker-page .med-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s;
}

.medication-tracker-page .med-modal-close:hover {
    color: #1f2937;
}

.medication-tracker-page .med-modal-body {
    padding: 24px;
}

.medication-tracker-page .med-detail-section {
    margin-bottom: 24px;
}

.medication-tracker-page .med-detail-title {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    font-size: 12px;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.5px;
}

.medication-tracker-page .med-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
}

.medication-tracker-page .med-detail-label {
    color: #6b7280;
    font-weight: 500;
}

.medication-tracker-page .med-detail-value {
    color: #1f2937;
    font-weight: 600;
}

.medication-tracker-page .med-refill-warning {
    background: #fef3c7;
    border-left: 4px solid #fcd34d;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.medication-tracker-page .med-refill-icon {
    color: #d97706;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.medication-tracker-page .med-refill-text {
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .medication-tracker-page .med-tracker {
        gap: 14px;
    }

    .medication-tracker-page .med-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .medication-tracker-page .med-metric-card {
        padding: 16px;
    }

    .medication-tracker-page .med-metric-value {
        font-size: 28px;
    }

    .medication-tracker-page .med-list-item {
        flex-wrap: wrap;
        gap: 12px;
    }

    .medication-tracker-page .med-list-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .medication-tracker-page .med-timeline-item {
        flex-wrap: wrap;
    }

    .medication-tracker-page .med-calendar-day {
        font-size: 12px;
    }

    .medication-tracker-page .med-calendar-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .medication-tracker-page .med-filter-select {
        width: 100%;
    }
}

.medication-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.medication-stat-card {
    background: var(--app-surface);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--app-border);
    transition: all 0.2s ease;
}

.medication-stat-card:hover {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: var(--shadow-md);
}

.medication-table-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0f2fe;
    overflow: visible;
}

.medication-table-container .action-menu-panel {
    z-index: 50;
}

.medication-table {
    width: 100%;
    border-collapse: collapse;
}

.medication-table th {
    background: #f0f9ff;
    color: #374151;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 2px solid #e0f2fe;
}

.medication-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.medication-table th:nth-child(3),
.medication-table td:nth-child(3) {
    width: 100px;
}

.medication-table tbody tr:hover {
    background: #f0f9ff;
}

.medication-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.medication-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.medication-type {
    font-size: 0.625rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dosage-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dosage-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.frequency-info {
    font-size: 0.75rem;
    color: #6b7280;
}

.next-dose {
    font-size: 0.75rem;
    color: #1f2937;
    font-weight: 500;
}

.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.taken {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.missed {
    background: #fee2e2;
    color: #991b1b;
}

.adherence-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.adherence-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.adherence-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
}

.btn-medical.success {
    background-color: #10b981;
    color: white;
}

.btn-medical.success:hover {
    background-color: #059669;
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Analytics Dashboard */
.analytics-dashboard {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    min-height: 100vh;
}

.analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.analytics-summary-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #dcfce7;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.analytics-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.analytics-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #059669, #047857);
}

.analytics-summary-card.warning::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.analytics-summary-card.danger::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.analytics-summary-card.info::before {
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

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

.summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: white;
}

.summary-icon.primary { background: linear-gradient(135deg, #059669, #047857); }
.summary-icon.warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.summary-icon.danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
.summary-icon.info { background: linear-gradient(135deg, #0ea5e9, #0284c7); }

.summary-trend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.summary-trend.positive { color: #059669; }
.summary-trend.negative { color: #ef4444; }
.summary-trend.neutral { color: #6b7280; }

.summary-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.summary-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-container {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #dcfce7;
}

.chart-header {
    margin-bottom: 1.5rem;
}

.chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.chart-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
}

.chart-canvas {
    height: 300px;
    width: 100%;
}

.export-controls {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #dcfce7;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.date-range-selector {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.date-range-selector select {
    padding: 0.75rem 1rem;
    border: 2px solid #dcfce7;
    border-radius: 8px;
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
}

.export-buttons {
    display: flex;
    gap: 0.75rem;
}

.btn-export {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export.primary {
    background: #059669;
    color: white;
}

.btn-export.primary:hover {
    background: #047857;
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
}

.btn-export.secondary {
    background: #6b7280;
    color: white;
}

.btn-export.secondary:hover {
    background: #4b5563;
    /* transform: translateY(-1px); - Removed to prevent button movement on hover */
}

.performance-metrics {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #dcfce7;
    margin-bottom: 2rem;
}

.metrics-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.metrics-grid .metric-item {
    text-align: center;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    min-width: 0;
    overflow: visible;
}

.metrics-grid .metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0.5rem;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    word-wrap: break-word;
    line-height: 1.2;
}

.metrics-grid .metric-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    word-wrap: break-word;
    line-height: 1.4;
}

.btn-action.warning {
    background: #f59e0b;
    color: #ffffff;
}

.btn-action.warning:hover {
    background: #d97706;
}

.form-select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background-color: white;
}

.chart-container {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    position: relative;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

/* Compact header buttons */
.btn-compact { 
    padding: 8px 12px; 
    font-size: 14px; 
    line-height: 1.2; 
}

/* User table column sizing and text overflow */
#usersTable { 
    table-layout: fixed; 
    width: 100%; 
}

#usersTable .users-col-select { width: 4%; }
#usersTable .users-col-id { width: 10%; }
#usersTable .users-col-name { width: 16%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#usersTable .users-col-email { width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#usersTable .users-col-role { width: 10%; }
#usersTable .users-col-activation { width: 12%; }
#usersTable .users-col-device { width: 12%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#usersTable .users-col-lastlogin { width: 12%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#usersTable .users-col-status { width: 10%; }
#usersTable .users-col-action { width: 8%; text-align: center; }

#usersTable .users-col-action .action-menu {
    margin: 0 auto;
}

.user-accounts-page #usersTable .users-col-action {
    position: relative;
    z-index: 5;
}

.user-accounts-page #usersTable .users-col-action .action-menu {
    z-index: 10001;
}

.user-accounts-page #usersTable .action-menu-panel {
    z-index: 10002;
}

#usersTable .caregiver-only {
    display: none;
}

#usersTable.show-caregiver-cols .caregiver-only {
    display: table-cell;
}

.user-summary-cards .summary-card {
    align-items: center;
}

.role-filter-pills {
    margin: 8px 0 16px;
}

.role-filter-pills .quick-filter-pill span {
    margin-left: 6px;
    color: inherit;
    font-weight: 600;
}

.bulk-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.bulk-actions-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
}

.bulk-select {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
}

.bulk-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bulk-count {
    font-weight: 600;
}

.info-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-icon {
    font-size: 2.5rem;
    margin-right: 16px;
    opacity: 0.8;
}

.info-content h4 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
}

.info-content p {
    margin: 4px 0 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.gap-2 { 
    gap: 0.5rem; 
}

.gap-3 { 
    gap: 1rem; 
}

.d-flex { 
    display: flex; 
}

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

/* GPS Tracking Page Styles */
.form-select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background-color: white;
}

.gps-patient-name {
    color: #6b7280;
}

.gps-coordinates {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

.gps-coordinate-link {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: #2563eb;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

.gps-coordinate-link:hover {
    color: #1d4ed8;
}

.btn-action-history {
    width: auto !important;
    min-width: 132px;
    height: 36px !important;
    padding: 0 14px !important;
    gap: 8px;
    border-radius: 10px !important;
    border: 1px solid #bfdbfe !important;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

.btn-action-history span {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.btn-action-history:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

.gps-page .admin-page-intro h1 {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.gps-page .admin-page-intro p {
    max-width: 72ch;
    font-size: 15px;
    line-height: 1.65;
}

.gps-page .content-card {
    overflow: hidden;
    border: 1px solid #dbe4f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.gps-page .card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5eef8;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.gps-page .card-header h2,
.gps-page .card-header h3 {
    font-size: 18px;
    line-height: 1.25;
    margin: 0;
}

.gps-page .gps-live-section {
    margin: 18px 22px 16px;
    padding: 20px 22px;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 72%);
}

.gps-page .gps-live-section-header h3 {
    font-size: 20px;
    line-height: 1.2;
}

.gps-page .gps-live-section-header p {
    font-size: 14px;
    line-height: 1.6;
    max-width: 68ch;
}

.gps-page .gps-live-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
}

.gps-page .gps-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #0f3f69;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.gps-page .gps-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.14);
}

.gps-page .gps-live-source {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.gps-page .gps-live-card {
    margin-top: 16px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #dbeafe;
}

.gps-page .gps-live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
}

.gps-page .gps-live-stat {
    min-width: 0;
}

.gps-page .gps-live-stat strong {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    line-height: 1.35;
    color: #0f172a;
    word-break: break-word;
}

.gps-page .gps-live-stat small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    word-break: break-word;
}

.gps-page .gps-live-actions {
    align-items: flex-end;
    justify-content: flex-end;
}

.gps-page .gps-live-actions .btn {
    min-height: 44px;
}

.gps-page .gps-toolbar {
    margin: 0 22px;
    padding: 16px 18px;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.gps-page .gps-toolbar-left,
.gps-page .gps-toolbar-right {
    gap: 12px;
}

.gps-page .form-select {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 14px;
    border-color: #cbd5e1;
    font-size: 14px;
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.gps-page .gps-search .form-input {
    min-width: 280px;
    min-height: 44px;
    padding-left: 38px;
    border-radius: 14px;
    font-size: 14px;
}

.gps-page .gps-toolbar-summary {
    margin: 12px 22px 0;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gps-page .gps-toolbar-summary-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gps-page .gps-toolbar-summary-text,
.gps-page .gps-toolbar-summary-right {
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.gps-page .gps-status-filters {
    margin: 12px 22px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gps-page .gps-filter-chip {
    appearance: none;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gps-page .gps-filter-chip:hover {
    transform: translateY(-1px);
    border-color: #93c5fd;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.gps-page .gps-filter-chip.active {
    background: #0f3f69;
    border-color: #0f3f69;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 63, 105, 0.2);
}

.gps-page .gps-history-intro {
    margin: 18px 22px 14px;
}

.gps-page .gps-history-intro h3 {
    font-size: 18px;
    line-height: 1.25;
}

.gps-page .gps-history-intro p {
    font-size: 14px;
    line-height: 1.6;
}

.gps-page .table-container {
    margin: 0 22px 22px;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.gps-page .data-table th {
    font-size: 11px;
    letter-spacing: 0.09em;
}

.gps-page .data-table td {
    font-size: 14px;
    line-height: 1.55;
    padding: 16px 18px;
    vertical-align: middle;
}

.gps-page .gps-status-row {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.gps-page .gps-status-row.status-warning {
    background: rgba(253, 230, 138, 0.12);
}

.gps-page .gps-status-row.status-critical {
    background: rgba(254, 226, 226, 0.18);
}

.gps-page .gps-status-row.gps-row-active {
    background: #eff6ff !important;
    box-shadow: inset 4px 0 0 #2563eb;
}

.gps-page .gps-status-row.is-filtered-out {
    display: none !important;
}

.gps-page .gps-table-empty {
    padding: 42px 24px;
    font-size: 14px;
}

.gps-page .btn-action-history {
    min-width: 136px;
    min-height: 40px;
    font-size: 13px;
}

.gps-page .gps-history-modal {
    width: min(1080px, calc(100vw - 32px)) !important;
    max-width: 1080px !important;
    border-radius: 24px !important;
    overflow: hidden;
}

.gps-page .gps-history-modal .modal-header {
    padding: 18px 22px;
}

.gps-page .modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gps-page .gps-history-modal .modal-body {
    padding: 24px 26px 28px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 28%);
}

.gps-page .gps-history-summary {
    margin-bottom: 18px;
}

.gps-page .gps-history-summary-copy h4 {
    font-size: 24px;
    line-height: 1.15;
}

.gps-page .gps-history-summary-copy p {
    font-size: 14px;
}

.gps-page .gps-history-summary-grid {
    gap: 14px;
}

.gps-page .gps-history-stat strong {
    font-size: 15px;
    line-height: 1.4;
    word-break: break-word;
}

.gps-page .gps-history-table-header h4 {
    font-size: 18px;
}

.gps-page .gps-history-table-header p {
    font-size: 14px;
}

.gps-page .gps-history-table th,
.gps-page .gps-history-table td {
    padding: 16px 18px;
    font-size: 14px;
}

.gps-page .gps-history-loading,
.gps-page .gps-history-inline-error {
    margin: 18px 22px 0;
    font-size: 14px;
}

.gps-page .gps-history-empty {
    margin-top: 18px;
}

.gps-page .gps-coordinate-link {
    line-height: 1.45;
}

.gps-page .gps-map-container {
    height: 560px;
    margin: 0 22px 22px;
    border-radius: 18px;
    border: 1px solid #dbe4f0;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.gps-page #gpsMap {
    min-height: 460px;
}

.gps-history-modal {
    width: min(1080px, calc(100vw - 32px)) !important;
    max-width: 1080px !important;
    border-radius: 24px !important;
    overflow: hidden;
}

.gps-history-modal .modal-body {
    padding: 24px 26px 28px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 28%);
}

.gps-history-summary {
    display: grid;
    gap: 20px;
    padding: 22px;
    margin-bottom: 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0f3f69 0%, #13669f 100%);
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(15, 63, 105, 0.22);
}

.gps-history-summary-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gps-history-summary-badge {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 20px;
}

.gps-history-summary-copy h4 {
    margin: 2px 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
}

.gps-history-summary-copy p,
.gps-history-eyebrow {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

.gps-history-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gps-history-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.gps-history-stat {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gps-history-stat strong {
    font-size: 15px;
    color: #ffffff;
}

.gps-history-stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.gps-history-coordinate {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}

.gps-history-coordinate:hover {
    color: #dbeafe;
}

.gps-history-table-shell {
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.gps-history-table-header {
    padding: 20px 22px 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.gps-history-table-header h4 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #0f172a;
}

.gps-history-table-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.gps-history-filter {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gps-history-filter label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.gps-history-table-wrap {
    overflow-x: auto;
}

.gps-history-loading,
.gps-history-inline-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    margin: 18px 22px 0;
    border-radius: 14px;
    font-size: 14px;
}

.gps-history-loading {
    background: #eff6ff;
    color: #1d4ed8;
}

.gps-history-inline-error {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.gps-history-table {
    width: 100%;
    border-collapse: collapse;
}

.gps-history-table th,
.gps-history-table td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
}

.gps-history-table th {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gps-history-table td {
    font-size: 14px;
    color: #1e293b;
}

.gps-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.btn-history-map {
    min-width: 126px;
}

.gps-history-empty {
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.gps-history-empty i {
    font-size: 30px;
    color: #2563eb;
    margin-bottom: 14px;
}

.gps-history-empty h4 {
    margin: 0 0 8px;
    color: #0f172a;
}

.gps-history-empty p {
    margin: 0;
    color: #64748b;
}

@media (max-width: 980px) {
    .gps-page .gps-toolbar {
        margin: 0 16px;
    }

    .gps-page .gps-toolbar-summary,
    .gps-page .gps-status-filters,
    .gps-page .gps-history-intro,
    .gps-page .table-container,
    .gps-page .gps-live-section,
    .gps-page .gps-map-container {
        margin-left: 16px;
        margin-right: 16px;
    }

    .gps-page .gps-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gps-page .gps-map-container {
        height: 480px;
    }
}

@media (max-width: 720px) {
    .gps-page .admin-page-intro h1 {
        font-size: 28px;
    }

    .gps-page .gps-search .form-input {
        min-width: 100%;
    }

    .gps-page .gps-toolbar,
    .gps-page .gps-toolbar-summary,
    .gps-page .gps-status-filters,
    .gps-page .gps-history-intro,
    .gps-page .table-container,
    .gps-page .gps-live-section,
    .gps-page .gps-map-container {
        margin-left: 12px;
        margin-right: 12px;
    }

    .gps-page .gps-toolbar {
        padding: 14px;
    }

    .gps-page .gps-toolbar-left,
    .gps-page .gps-toolbar-right {
        width: 100%;
    }

    .gps-page .gps-live-section,
    .gps-page .gps-live-card {
        border-radius: 18px;
    }

    .gps-page .gps-live-grid {
        grid-template-columns: 1fr;
    }

    .gps-page .gps-live-actions {
        align-items: stretch;
    }

    .gps-page .gps-history-summary {
        padding: 18px;
        border-radius: 18px;
    }

    .gps-page .gps-history-summary-grid {
        grid-template-columns: 1fr;
    }

    .gps-page .gps-history-table th,
    .gps-page .gps-history-table td {
        padding: 13px 12px;
        font-size: 13px;
    }

    .gps-page .btn-action-history,
    .gps-page .btn-history-map {
        min-width: 116px;
        padding: 0 12px !important;
    }
}

.alert-activity-modal {
    width: min(760px, calc(100vw - 32px));
}

.alert-audit-layout {
    display: grid;
    gap: 18px;
}

.alert-audit-card {
    padding: 20px 22px;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.alert-audit-card h4 {
    margin: 0 0 14px;
    font-size: 17px;
    color: #0f172a;
}

.alert-audit-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.alert-audit-details-header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.alert-audit-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.alert-audit-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.alert-audit-meta-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.alert-audit-meta-value {
    font-size: 15px;
    line-height: 1.5;
    color: #1e293b;
    font-weight: 600;
    word-break: break-word;
}

.alert-audit-pre {
    margin: 0;
    padding: 16px 18px;
    min-height: 180px;
    max-height: 320px;
    overflow: auto;
    border-radius: 16px;
    border: 1px solid #d7e3f0;
    background: #0f172a;
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 980px) {
    .gps-history-modal {
        width: calc(100vw - 24px) !important;
    }

    .gps-history-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gps-history-modal .modal-body {
        padding: 18px 16px 20px;
    }

    .alert-activity-modal {
        width: calc(100vw - 20px);
    }

    .alert-audit-card {
        padding: 16px;
        border-radius: 16px;
    }

    .alert-audit-meta-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .alert-audit-pre {
        min-height: 150px;
        max-height: 260px;
        padding: 14px;
        font-size: 12px;
    }

    .gps-history-summary {
        padding: 18px;
        border-radius: 18px;
    }

    .gps-history-summary-main {
        align-items: flex-start;
    }

    .gps-history-summary-grid {
        grid-template-columns: 1fr;
    }

    .gps-history-table th,
    .gps-history-table td {
        padding: 13px 12px;
        font-size: 13px;
    }

    .gps-history-table-header {
        align-items: stretch;
    }

    .gps-history-filter {
        min-width: 100%;
    }

    .btn-history-map,
    .btn-action-history {
        min-width: 116px;
        padding: 0 12px !important;
    }
}

.custom-marker {
    background: transparent;
    border: none;
}

.gps-marker-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gps-marker-icon.normal {
    background-color: #22c55e;
}

.gps-marker-icon.warning {
    background-color: #f59e0b;
}

.gps-marker-icon.critical {
    background-color: #ef4444;
}

#gpsMap {
    z-index: 1;
}

.gps-header-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gps-header-controls .filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.gps-header-controls .btn-primary {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .gps-header-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .gps-header-controls .filter-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .gps-header-controls .filter-group select,
    .gps-header-controls .filter-group input {
        flex: 1;
        min-width: 120px;
    }

    .gps-header-controls .btn-primary {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .gps-header-controls .filter-group {
        flex-direction: column;
    }

    .gps-header-controls .filter-group select,
    .gps-header-controls .filter-group input,
    .gps-header-controls .filter-group button {
        width: 100%;
    }
}

/* System Settings Page Styles */
#system-settings .tabs { 
    display:flex; 
    gap:8px; 
    padding:12px 16px; 
    border-bottom:1px solid #e5e7eb; 
    flex-wrap:wrap; 
}

#system-settings .tab-btn { 
    padding:8px 12px; 
    border:1px solid #d7dee7; 
    border-radius:999px; 
    background:#ffffff; 
    color:#334155; 
    cursor:pointer; 
    font-weight:600; 
    transition: all 0.2s ease;
}

#system-settings .tab-btn.active { 
    background:#0f172a; 
    color:#fff;
    border-color:#0f172a; 
}

#system-settings .tab-panel { 
    display:none; 
    padding:16px; 
}

#system-settings .tab-panel.active { 
    display:block; 
}

#system-settings .form-grid { 
    display:grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap:12px; 
}

#system-settings .form-grid label { 
    display:flex; 
    flex-direction:column; 
    gap:6px; 
    font-weight:600; 
    color:#1f2937; 
}

#system-settings .form-input, 
#system-settings .form-select { 
    padding:10px 12px; 
    border:2px solid #e5e7eb; 
    border-radius:10px; 
    font-size:14px; 
    background:#ffffff; 
    transition: all 0.2s ease;
}

#system-settings .form-input:focus, 
#system-settings .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Medical accents */
#system-settings .content-card { 
    border:1px solid #d7dee7; 
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); 
}

#system-settings .card-header { 
    background: #f8fafc; 
    border-bottom:1px solid #e5e7eb; 
}

#system-settings .card-header h2 { 
    color:#0f172a; 
}

#system-settings .form-grid label::after { 
    content:''; 
    height:2px; 
    background:#94a3b8; 
    width:0; 
    transition:width .2s; 
}

#system-settings .form-grid label:focus-within::after { 
    width:100%; 
}

.system-settings-page .settings-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.system-settings-page .settings-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid #d7dee7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.system-settings-page .settings-hero-copy,
.system-settings-page .settings-hero-meta {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.system-settings-page .settings-hero-copy {
    padding: 0;
}

.system-settings-page .settings-hero-copy h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.16;
    color: #0f172a;
    font-weight: 700;
}

.system-settings-page .page-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.system-settings-page .settings-hero-copy p {
    margin: 0;
    color: #526277;
    font-size: 15px;
    line-height: 1.6;
    max-width: 680px;
}

.system-settings-page .settings-hero-meta {
    display: grid;
    gap: 12px;
    padding: 0;
}

.system-settings-page .settings-hero-stat {
    background: #f8fafc;
    border: 1px solid #d7dee7;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.system-settings-page .settings-hero-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.system-settings-page .settings-hero-stat strong {
    font-size: 17px;
    color: #0f172a;
}

.system-settings-page .settings-toolbar-card {
    padding: 18px 20px;
    border: 1px solid #d7dee7;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.system-settings-page .settings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.system-settings-page .settings-toolbar-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.system-settings-page .settings-toolbar-copy strong {
    color: #0f172a;
    font-size: 15px;
}

.system-settings-page .settings-toolbar-copy span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.system-settings-page .settings-toolbar-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.system-settings-page .settings-tab-list {
    padding: 12px 0 0;
    border-bottom: none;
    background: transparent;
    box-shadow: none;
    border: none;
    gap: 10px;
}

.system-settings-page #system-settings .tab-btn {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 11px 14px;
    border-radius: 999px;
    box-shadow: none;
}

.system-settings-page #system-settings .tab-btn.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: none;
}

.system-settings-page #system-settings .tab-panel {
    background: #ffffff;
    border: 1px solid #d7dee7;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    padding: 22px;
}

.system-settings-page #system-settings .form-grid {
    gap: 16px;
}

.system-settings-page #system-settings .form-grid label {
    font-size: 13px;
    letter-spacing: 0.02em;
}

.system-settings-page #system-settings .form-textarea {
    min-height: 112px;
    resize: vertical;
}

.system-settings-page .settings-inline-info {
    margin-top: 6px;
}

.system-settings-page .settings-inline-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.system-settings-page .settings-inline-info-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.system-settings-page .settings-inline-info-item span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.system-settings-page .settings-inline-info-item strong {
    font-size: 16px;
    color: #0f172a;
    line-height: 1.4;
}

.system-settings-page .settings-inline-info-item .status-ok {
    color: #059669;
}

/* Global responsive refinements */
@media (max-width: 1024px) {
    .medical-stats-grid,
    .medication-stats-grid,
    .analytics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .medical-stats-grid .stat-icon,
    .medication-stats-grid .stat-icon {
        width: 44px;
        height: 44px;
    }

    .medical-stats-grid .stat-value,
    .medication-stats-grid .stat-value {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    /* Cards/grid */
    .medical-stats-grid,
    .medication-stats-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .medical-stat-card,
    .medication-stat-card {
        padding: 14px;
        border-radius: 8px;
    }

    .medical-stats-grid .stat-icon,
    .medication-stats-grid .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .medical-stats-grid .stat-icon i,
    .medication-stats-grid .stat-icon i {
        font-size: 17px;
    }

    .medical-stats-grid .stat-value,
    .medication-stats-grid .stat-value {
        font-size: 28px;
    }

    .medical-stats-grid .stat-label,
    .medication-stats-grid .stat-label {
        font-size: 11px;
        letter-spacing: 0.6px;
        margin-bottom: 6px;
    }

    .admin-page-intro {
        padding: 18px 18px;
        margin-bottom: 16px;
    }

    .admin-page-intro h1 {
        font-size: 24px;
    }

    .admin-page-intro p {
        font-size: 14px;
    }

    .content-card .card-header .card-actions,
    .card-header .d-flex {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Header controls */
    .card-actions .d-flex {
        flex-wrap: wrap;
    }

    /* Tables */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table {
        min-width: 640px;
    }

    .header {
        padding: 12px 16px;
        gap: 12px;
        min-height: auto;
    }

    .header-copy .header-badge,
    .header-copy .header-subtitle {
        margin-left: 0;
    }

    .header-subtitle {
        display: none;
    }

    .header h1 {
        font-size: 20px;
        padding-left: 14px;
    }

    /* Action buttons stack on small screens */
    .action-buttons {
        flex-wrap: wrap;
        gap: 6px;
    }
    .action-buttons .btn-action {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* Forms */
    .form-row { 
        display: grid; 
        grid-template-columns: 1fr; 
        gap: 12px; 
    }
    .form-input, .form-select, .form-textarea {
        font-size: 16px;
    }

    /* Modals */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 16px;
    }
}

@media (max-width: 480px) {
    .card-header h2 { font-size: 18px; }
    .btn { min-height: 44px; }
}

/* Phase 5-6: Thread Actions and Performance Optimizations */
.thread-actions-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.thread-actions-group button {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.thread-actions-group button.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.thread-actions-group button:hover {
    background: #dbeafe;
    border-color: #bfdbfe;
}

.thread-actions-group button.active:hover {
    background: #2563eb;
    border-color: #1d4ed8;
}

/* Modal header flex layout for thread actions */
.modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header h3 {
    margin-right: auto;
}

/* Performance: Smooth transitions */
.message-list {
    transition: opacity 0.2s ease;
}

/* Thread search highlight */
.thread-highlight {
    background: #fde68a;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 500;
}

/* Operational Insights */
.insight-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin: 20px 0 28px;
}

.insight-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.insight-card {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.insight-card .card-header h3 {
    color: #0f172a;
}

.insight-card .btn-link {
    color: #2563eb;
}

.insight-card .card-header.compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 6px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.insight-card .card-header h3 {
    font-size: 16px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.insight-card .btn-link {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    font-weight: 600;
}

.insight-card .btn-link:hover {
    text-decoration: underline;
}

.gps-list,
.care-list,
.comms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gps-list li,
.care-list li,
.comms-list li {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.gps-list li,
.care-list li,
.comms-list li {
    background: #f8fafc;
    border-color: #e5e7eb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.gps-top-row,
.care-top-row,
.comms-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}

.gps-patient,
.care-patient {
    font-weight: 600;
    font-size: 14px;
}

.gps-patient,
.care-patient,
.care-list p {
    color: #0f172a;
}

.gps-status {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: capitalize;
}

.gps-status.status-safe-zone { background: rgba(16,185,129,.15); color: #34d399; }
.gps-status.status-near-boundary { background: rgba(251,191,36,.15); color: #facc15; }
.gps-status.status-outside-zone { background: rgba(248,113,113,.15); color: #f87171; }
.gps-status.status-unknown { background: rgba(148,163,184,.2); color: #94a3b8; }

.gps-status.status-safe-zone {
    background: #dcfce7;
    color: #15803d;
}

.gps-status.status-near-boundary {
    background: #fef3c7;
    color: #b45309;
}

.gps-status.status-outside-zone {
    background: #fee2e2;
    color: #dc2626;
}

.gps-status.status-unknown {
    background: #e2e8f0;
    color: #475569;
}

/* Shared Dashboard Summary Card System */
.medical-stat-card,
.medication-stat-card,
.summary-card,
.patient-insight-card,
.health-stat-card,
.metric-card,
.analytics-summary-card,
.hero-metric-card,
.medication-tracker-page .med-metric-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.medical-stat-card:hover,
.medication-stat-card:hover,
.summary-card:hover,
.patient-insight-card:hover,
.health-stat-card:hover,
.metric-card:hover,
.analytics-summary-card:hover,
.hero-metric-card:hover,
.medication-tracker-page .med-metric-card:hover {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
    transform: none;
}

.medical-stat-card,
.medication-stat-card,
.summary-card,
.patient-insight-card,
.analytics-summary-card,
.hero-metric-card,
.medication-tracker-page .med-metric-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.metric-card::before,
.analytics-summary-card::before {
    display: none;
}

.medical-stats-grid .stat-header,
.medication-stats-grid .stat-header,
.summary-card .summary-header,
.health-stat-card .stat-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
}

.medical-stats-grid .stat-icon,
.medication-stats-grid .stat-icon,
.summary-card .summary-icon,
.patient-insight-icon,
.health-stat-card .stat-icon,
.hero-metric-card .summary-icon,
.medication-tracker-page .med-metric-icon,
.metric-card .metric-icon,
.analytics-summary-card .summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    margin: 0;
    font-size: 18px;
}

.medical-stats-grid .stat-icon i,
.medication-stats-grid .stat-icon i,
.summary-card .summary-icon i,
.patient-insight-icon i,
.health-stat-card .stat-icon i,
.medication-tracker-page .med-metric-icon i,
.analytics-summary-card .summary-icon i {
    font-size: 16px;
}

.medical-stats-grid .stat-value,
.medication-stats-grid .stat-value,
.summary-card strong,
.patient-insight-value,
.health-stat-card .stat-content h3,
.metric-value,
.analytics-summary-card .summary-value,
.hero-metric-card strong,
.medication-tracker-page .med-metric-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    margin: 0;
}

.medical-stats-grid .stat-label,
.medication-stats-grid .stat-label,
.summary-card .summary-label,
.patient-insight-label,
.health-stat-card .stat-content p,
.metric-label,
.analytics-summary-card .summary-label,
.hero-metric-card .hero-metric-label,
.medication-tracker-page .med-metric-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0;
}

.summary-card .summary-content,
.patient-insight-copy,
.health-stat-card .stat-content,
.hero-metric-card,
.analytics-summary-card .summary-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.summary-card .summary-content small,
.analytics-summary-card small,
.hero-metric-card small {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.medical-stats-grid .stat-trend,
.medication-stats-grid .stat-trend,
.summary-card .summary-trend {
    display: none;
}

.patient-insight-card {
    gap: 12px;
}

.hero-metric-card {
    min-height: 100%;
    justify-content: flex-start;
}

/* Shared card icon color mapping */
.medical-stats-grid .stat-icon.primary,
.medication-stats-grid .stat-icon.primary,
.summary-icon.primary,
.patient-insight-icon.primary,
.health-stat-card .stat-icon.primary,
.metric-card .metric-icon.primary,
.analytics-summary-card .summary-icon.primary,
.hero-metric-card .summary-icon.primary,
.medication-tracker-page .med-metric-icon.primary,
.medical-stats-grid .stat-icon.info,
.medication-stats-grid .stat-icon.info,
.summary-icon.info,
.patient-insight-icon.info,
.health-stat-card .stat-icon.info,
.metric-card .metric-icon.info,
.analytics-summary-card .summary-icon.info,
.hero-metric-card .summary-icon.info,
.medication-tracker-page .med-metric-icon.info {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.medical-stats-grid .stat-icon.success,
.medication-stats-grid .stat-icon.success,
.summary-icon.success,
.patient-insight-icon.success,
.health-stat-card .stat-icon.success,
.metric-card .metric-icon.success,
.analytics-summary-card .summary-icon.success,
.hero-metric-card .summary-icon.success,
.medication-tracker-page .med-metric-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.medical-stats-grid .stat-icon.warning,
.medication-stats-grid .stat-icon.warning,
.summary-icon.warning,
.patient-insight-icon.warning,
.health-stat-card .stat-icon.warning,
.metric-card .metric-icon.warning,
.analytics-summary-card .summary-icon.warning,
.hero-metric-card .summary-icon.warning,
.medication-tracker-page .med-metric-icon.warning,
.summary-icon.alert,
.patient-insight-icon.alert,
.health-stat-card .stat-icon.alert,
.metric-card .metric-icon.alert,
.hero-metric-card .summary-icon.alert {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.medical-stats-grid .stat-icon.critical,
.medication-stats-grid .stat-icon.critical,
.summary-icon.critical,
.patient-insight-icon.critical,
.health-stat-card .stat-icon.critical,
.metric-card .metric-icon.critical,
.analytics-summary-card .summary-icon.critical,
.hero-metric-card .summary-icon.critical,
.medication-tracker-page .med-metric-icon.critical,
.summary-icon.danger,
.patient-insight-icon.danger,
.health-stat-card .stat-icon.danger,
.metric-card .metric-icon.danger,
.analytics-summary-card .summary-icon.danger,
.hero-metric-card .summary-icon.danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.dashboard-home-page .dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
    gap: 22px;
    margin-bottom: 22px;
}

.dashboard-home-page .dashboard-stat-card {
    text-decoration: none;
    color: inherit;
    min-height: 150px;
    padding: 22px;
    gap: 14px;
    justify-content: flex-start;
}

.dashboard-home-page .dashboard-stat-card .stat-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 2px;
}

.dashboard-home-page .dashboard-stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    margin: 0;
    font-size: 18px;
}

.dashboard-home-page .dashboard-stat-card .stat-icon i {
    font-size: 16px;
}

.dashboard-home-page .dashboard-stat-card .stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    margin-bottom: 0;
}

.dashboard-home-page .dashboard-stat-card .stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    line-height: 1.35;
}

.dashboard-home-page .dashboard-stat-card .stat-meta {
    margin-top: 2px;
    max-width: 26ch;
}

.dashboard-home-page .dashboard-stat-card .stat-meta {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.dashboard-home-page .dashboard-stat-card .stat-icon.primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.dashboard-home-page .dashboard-stat-card .stat-icon.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.dashboard-home-page .dashboard-stat-card .stat-icon.warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.dashboard-home-page .dashboard-stat-card .stat-icon.critical {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.dashboard-toolbar-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.dashboard-toolbar-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-toolbar-copy strong {
    font-size: 15px;
    color: #111827;
}

.dashboard-toolbar-copy span,
.dashboard-card-caption {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.dashboard-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-notice {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
}

.dashboard-grid-rich {
    gap: 18px;
}

.dashboard-chart-panel {
    position: relative;
    min-height: 280px;
}

.chart-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    background: rgba(248, 250, 252, 0.92);
    border-radius: 12px;
}

.dashboard-list,
.dashboard-device-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-list-item,
.device-health-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
}

.dashboard-list-copy,
.device-health-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-list-copy strong,
.device-health-copy strong {
    font-size: 14px;
    color: #111827;
}

.dashboard-list-copy span,
.device-health-copy span {
    font-size: 12px;
    color: #64748b;
}

.dashboard-list-meta,
.device-health-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.device-health-badges {
    min-width: 180px;
}

.device-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.device-status-pill.ok {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.device-status-pill.warn {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.dashboard-empty-state {
    padding: 20px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.activity-item-link {
    text-decoration: none;
    color: inherit;
}

.activity-item-link:hover .activity-description,
.activity-item-link:hover .activity-title {
    color: inherit;
}

.btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

@media (max-width: 900px) {
    .dashboard-toolbar-card,
    .dashboard-list-item,
    .device-health-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-toolbar-actions,
    .dashboard-list-meta,
    .device-health-badges {
        width: 100%;
        align-items: flex-start;
    }

    .dashboard-toolbar-actions {
        flex-wrap: wrap;
    }
}

/* Alert Form Styles */
.edit-alert-form,
.add-alert-form {
    display: grid;
    gap: 16px;
}

.checkbox-group {
    display: grid;
    gap: 8px;
}

.add-alert-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.add-alert-form .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.add-alert-form .form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.add-alert-form .text-muted {
    color: #6b7280;
    font-size: 12px;
    display: block;
    margin-top: 4px;
}

.add-alert-form .required {
    color: #ef4444;
}

.gps-meta,
.care-meta,
.comms-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #94a3b8;
    flex-wrap: wrap;
}

.gps-meta,
.care-meta,
.comms-meta,
.care-list p,
.med-rate-label,
.med-progress > div {
    color: #64748b;
}

.gps-meta i,
.care-meta i,
.comms-meta i {
    margin-right: 4px;
}

.gps-meta i,
.care-meta i,
.comms-meta i {
    color: #94a3b8;
}

.med-rate {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.med-rate-value {
    font-size: 32px;
    font-weight: 700;
    color: #34d399;
}

.med-rate-value {
    color: #0f766e;
}

.med-progress > div {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-top: 6px;
}

.med-progress > div span:last-child {
    color: #0f172a;
    font-weight: 600;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 999px;
    margin-bottom: 6px;
}

.progress-bar {
    background: #cbd5e1;
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #34d399, #10b981);
}

.progress-bar.missed span {
    background: linear-gradient(90deg, #f87171, #ef4444);
}

.care-priority {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: capitalize;
}

.care-priority.priority-critical { background: rgba(239,68,68,.15); color: #ef4444; }
.care-priority.priority-high { background: rgba(251,191,36,.15); color: #facc15; }
.care-priority.priority-medium { background: rgba(96,165,250,.15); color: #60a5fa; }
.care-priority.priority-low { background: rgba(34,197,94,.15); color: #34d399; }

.care-priority.priority-critical {
    background: #fee2e2;
    color: #dc2626;
}

.care-priority.priority-high {
    background: #fef3c7;
    color: #b45309;
}

.care-priority.priority-medium {
    background: #dbeafe;
    color: #2563eb;
}

.care-priority.priority-low {
    background: #dcfce7;
    color: #15803d;
}

.care-status {
    font-weight: 600;
    font-size: 12px;
    text-transform: capitalize;
}

.care-status.status-open { color: #facc15; }
.care-status.status-pending { color: #60a5fa; }
.care-status.status-completed { color: #34d399; }

.care-status.status-open {
    color: #b45309;
}

.care-status.status-pending {
    color: #2563eb;
}

.care-status.status-completed {
    color: #15803d;
}

.comms-channel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #38bdf8;
}

.comms-subject {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: #e2e8f0;
}

.comms-subject {
    color: #0f172a;
}

.comms-time {
    font-size: 12px;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .insight-widgets {
        grid-template-columns: 1fr;
    }
}

/* ===== COMPREHENSIVE CARD & CONTENT STYLING (Unified Design System) ===== */

/* Card Base - Universal styling for all card components */
.card, .content-card, .card-body, .widget, .dashboard-card, .alert-card, .info-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.card:hover, .content-card:hover, .widget:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(37, 99, 235, 0.3);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border);
}

.card-header h3, .card-header h4 {
    margin: 0;
    color: var(--app-text);
    font-weight: 600;
}

.card-body {
    padding: 16px 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.header h1, .page-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--app-text);
    margin: 0;
    letter-spacing: -0.025em;
}

.sidebar-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e8f2ff;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    margin: 0 4px;
    border-radius: 0 6px 6px 0;
}

.sidebar-item:hover, .sidebar-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 100%);
    border-left-color: #bfdbfe;
}

.sidebar-item i {
    font-size: 18px;
    flex-shrink: 0;
    color: #b9dbff;
}

.sidebar-item span {
    font-size: 13px;
    font-weight: 500;
}

/* Status badges & pills */
.badge, .status-badge, .pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
}

.badge-primary {
    background: rgba(37, 99, 235, 0.15);
    color: var(--app-accent-dark);
}

.badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #991b1b;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #92400e;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--app-text-muted);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--app-text);
    font-size: 18px;
    margin: 12px 0;
}

.empty-state p {
    font-size: 14px;
    margin-bottom: 12px;
}

.loading-state,
.error-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
    padding: 20px;
    border-radius: 14px;
    border: 1px dashed #dbe4f0;
    background: #f8fbff;
    color: var(--app-text-muted);
}

.error-state {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.sync-status-chip,
.med-sync-banner-chip,
.gps-live-chip,
.last-updated-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #dbe4f0;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.sync-status-chip.live,
.med-sync-banner-chip.live,
.gps-live-chip {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.28);
    color: #065f46;
}

.sync-status-chip.local,
.med-sync-banner-chip.local {
    background: #f8fafc;
    color: #475569;
}

.sync-dot,
.med-sync-dot,
.gps-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
    flex-shrink: 0;
}

.med-sync-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.med-sync-banner-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--app-text-muted);
    font-size: 13px;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(37, 99, 235, 0.2);
    border-top: 2px solid var(--app-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Dividers */
.divider {
    height: 1px;
    background: var(--app-border);
    margin: 12px 0;
}

.divider-vertical {
    width: 1px;
    height: 24px;
    background: var(--app-border);
    display: inline-block;
    margin: 0 12px;
}

/* Typography Enhancement */
.text-muted {
    color: var(--app-text-muted) !important;
}

.text-primary {
    color: var(--app-accent) !important;
}

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

.text-danger {
    color: var(--app-error) !important;
}

.text-warning {
    color: var(--app-warning) !important;
}

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

.text-right {
    text-align: right !important;
}

/* Shared admin page intro */
.admin-page-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 22px 24px;
    margin-bottom: 20px;
    border: 1px solid #d7dee7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.admin-page-intro .page-eyebrow {
    display: inline-block;
    width: fit-content;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-page-intro h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.16;
    color: #0f172a;
    font-weight: 700;
}

.admin-page-intro p {
    margin: 0;
    max-width: 68ch;
    color: #526277;
    font-size: 15px;
    line-height: 1.6;
}

/* Analytics Workspace */
.analytics-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.analytics-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: stretch;
}

.analytics-hero-copy,
.analytics-hero-meta {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbe6f3;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.analytics-hero-copy {
    padding: 26px 28px;
}

.analytics-hero-copy h1 {
    margin: 10px 0 10px;
    font-size: 34px;
    line-height: 1.1;
    color: #0f172a;
}

.analytics-hero-copy p {
    margin: 0;
    max-width: 680px;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}

.analytics-hero-meta {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.analytics-hero-stat {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.analytics-hero-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.analytics-hero-stat strong {
    font-size: 18px;
    color: #0f172a;
    font-weight: 700;
}

.analytics-toolbar-card {
    padding: 18px 20px;
}

.analytics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.analytics-range-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.analytics-range-pill {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.analytics-range-pill:hover,
.analytics-range-pill.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.analytics-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.analytics-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.analytics-select-wrap span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.analytics-summary-grid-live {
    margin-bottom: 0;
}

.analytics-stat-note {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.analytics-brief-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.analytics-brief-card {
    min-height: 100%;
    gap: 8px;
}

.analytics-brief-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.analytics-brief-value {
    font-size: 28px;
    line-height: 1.05;
    color: #0f172a;
}

.analytics-brief-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #475569;
}

.analytics-brief-card.tone-critical {
    border-color: rgba(239, 68, 68, 0.22);
}

.analytics-brief-card.tone-info {
    border-color: rgba(37, 99, 235, 0.2);
}

.analytics-brief-card.tone-success {
    border-color: rgba(16, 185, 129, 0.22);
}

.analytics-workspace-grid {
    gap: 20px;
    margin-bottom: 0;
}

.analytics-chart-card {
    padding: 18px;
}

.analytics-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.analytics-card-copy h2 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #0f172a;
}

.analytics-card-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #64748b;
}

.analytics-card-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.analytics-chart-controls {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.analytics-chart-toggle {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.analytics-chart-toggle.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.analytics-chart-frame {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: none;
}

.analytics-chart-frame.chart-container {
    min-height: 320px;
}

.analytics-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 20px;
}

.analytics-performance-card,
.analytics-highlights-card {
    padding: 18px;
}

.analytics-metrics-grid {
    gap: 14px;
}

.analytics-page .analytics-metrics-grid .metric-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    min-height: 168px;
    overflow: hidden;
}

.analytics-page .analytics-metrics-grid .metric-value,
.analytics-page .analytics-metrics-grid .metric-label,
.analytics-page .analytics-metrics-grid .analytics-metric-note {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.analytics-page .analytics-metrics-grid .metric-value {
    font-size: 26px;
    line-height: 1.05;
    margin-bottom: 0;
}

.analytics-page .analytics-metrics-grid .metric-label {
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.08em;
}

.analytics-metric-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #64748b;
}

.analytics-highlights-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analytics-highlight-item {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.analytics-highlight-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.analytics-highlight-value {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.analytics-highlight-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #475569;
}

/* Utility Classes for Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }

.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 12px !important; }
.pt-4 { padding-top: 16px !important; }

.pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 12px !important; }
.pb-4 { padding-bottom: 16px !important; }

.inline-block {
    display: inline-block !important;
}

.flex-1 {
    flex: 1 !important;
}

.flex-grow {
    flex-grow: 1 !important;
}

/* Header account menu and profile settings refinement */
.header-right .user-dropdown-content {
    width: 320px;
    padding: 0;
    border: 1px solid #d7dee7;
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.header-right .user-dropdown-header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.header-right .user-dropdown-header > i,
.header-right .dropdown-profile-image {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #334155;
    font-size: 24px;
    object-fit: cover;
}

.user-dropdown-identity {
    min-width: 0;
}

.header-right .user-dropdown-name,
.header-right .user-dropdown-email {
    text-align: left;
}

.header-right .user-dropdown-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.header-right .user-dropdown-email {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.user-role-badge,
.user-session-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.user-role-badge {
    background: #0f172a;
    color: #ffffff;
}

.user-session-badge {
    background: #dcfce7;
    color: #166534;
}

.user-session-badge i {
    font-size: 7px;
}

.user-dropdown-section-label {
    padding: 12px 16px 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.header-right .user-dropdown-item {
    margin: 0 8px;
    padding: 10px;
    border-radius: 10px;
    color: #334155;
}

.header-right .user-dropdown-item i {
    width: 20px;
    color: #64748b;
}

.header-right .user-dropdown-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.header-right .user-dropdown-item.danger {
    margin-bottom: 8px;
    color: #b91c1c;
}

.header-right .user-dropdown-item.danger i {
    color: #dc2626;
}

.header-right .user-dropdown-item.danger:hover {
    background: #fef2f2;
    color: #991b1b;
}

/* Keep shared header action panels above cards, tables, and page containers */
.header {
    z-index: 120 !important;
    overflow: visible !important;
}

.header-left,
.header-right,
.header-right > *,
.header-right .notification-dropdown,
.header-right .message-dropdown,
.header-right .quick-actions-dropdown,
.header-right .user-dropdown {
    overflow: visible !important;
}

.notification-dropdown .notification-content,
.message-dropdown .message-content,
.search-dropdown .search-content,
.quick-actions-dropdown .quick-actions-content,
.header-right .user-dropdown-content,
.user-dropdown-content {
    z-index: 5100 !important;
}

.user-session-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 16px 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    font-size: 12px;
}

.user-session-meta span {
    color: #64748b;
}

.user-session-meta strong {
    color: #0f172a;
}

.modal-subtitle {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
}

.admin-profile-modal,
.admin-settings-modal {
    border-radius: 16px;
    border: 1px solid #d7dee7;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

.admin-profile-modal {
    width: min(1180px, calc(100vw - 72px));
    max-width: 1180px;
}

.admin-settings-modal {
    width: min(1040px, calc(100vw - 72px));
    max-width: 1040px;
}

.admin-profile-modal .modal-header,
.admin-settings-modal .modal-header {
    align-items: flex-start;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.admin-profile-modal .modal-body,
.admin-settings-modal .modal-body {
    background: #f8fafc;
}

.admin-profile-modal .profile-section {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: flex-start;
}

.admin-profile-modal .profile-avatar-section,
.admin-profile-modal .profile-info {
    padding: 22px;
    border: 1px solid #d7dee7;
    border-radius: 14px;
    background: #ffffff;
}

.admin-profile-modal .profile-info {
    width: 100%;
}

.admin-profile-modal .profile-info .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.admin-profile-modal .profile-info .form-group {
    gap: 8px;
    margin-bottom: 0;
}

.admin-profile-modal .profile-info label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #334155;
}

.admin-profile-modal .profile-info .input-wrapper {
    min-height: 46px;
}

.admin-profile-modal .profile-info input,
.admin-profile-modal .profile-info select {
    height: 46px;
    min-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
    border-radius: 9px;
}

.admin-profile-modal .profile-info .input-icon {
    font-size: 13px;
}

.admin-profile-modal .discord-profile-avatar {
    width: 104px !important;
    height: 104px !important;
    margin: 0 auto 12px;
    border: 1px solid #d7dee7 !important;
    border-radius: 18px !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
}

.admin-profile-modal .discord-profile-avatar:hover {
    transform: none !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

.admin-profile-modal .discord-profile-avatar img,
.admin-profile-modal .discord-profile-avatar .default-avatar-placeholder {
    border-radius: 16px;
}

.admin-profile-modal .discord-profile-avatar .default-avatar-placeholder {
    background: #e2e8f0 !important;
    color: #334155 !important;
    font-size: 36px !important;
}

.admin-profile-modal .discord-avatar-overlay {
    border-radius: 16px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: none !important;
}

.admin-profile-modal .discord-avatar-border {
    display: none !important;
}

.admin-profile-modal .discord-change-avatar-btn {
    padding: 7px 12px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

.profile-avatar-reset {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

.admin-profile-modal .profile-status {
    justify-content: center;
    margin: 0 0 12px;
}

.profile-account-card,
.settings-info-card,
.settings-note {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.profile-account-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
}

.profile-account-card span,
.profile-account-card small,
.settings-info-card span,
.settings-note {
    color: #64748b;
    font-size: 12px;
}

.profile-account-card strong,
.settings-info-card strong {
    color: #0f172a;
    font-size: 15px;
}

.profile-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.profile-section-heading span {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.profile-section-heading small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    line-height: 1.4;
    font-size: 12px;
    max-width: 520px;
}

.profile-section-heading::after {
    content: 'Editable';
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-profile-modal .profile-actions,
.admin-settings-modal .settings-actions {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    margin: 24px -22px -22px;
    padding: 16px 22px 0;
}

.admin-settings-modal .settings-tabs {
    display: flex;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.admin-settings-modal .settings-tabs .tab-btn {
    border: 1px solid #d7dee7;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    padding: 9px 13px;
    box-shadow: none;
}

.admin-settings-modal .settings-tabs .tab-btn.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.admin-settings-modal .settings-content {
    margin-top: 16px;
}

.admin-settings-modal .settings-tab {
    border: 1px solid #d7dee7;
    border-radius: 14px;
    background: #ffffff;
    padding: 18px;
}

.admin-settings-modal .settings-tab h4 {
    margin: 0 0 16px;
    color: #0f172a;
    font-size: 16px;
}

.modal.show .modal-content.settings-modal.admin-settings-modal,
.modal-content.settings-modal.admin-settings-modal {
    width: min(1040px, calc(100vw - 72px)) !important;
    max-width: 1040px !important;
    min-width: min(860px, calc(100vw - 72px)) !important;
    max-height: 88vh !important;
}

.modal-content.settings-modal.admin-settings-modal .modal-header {
    padding: 18px 22px !important;
}

.modal-content.settings-modal.admin-settings-modal .modal-body {
    max-height: calc(88vh - 96px) !important;
    padding: 24px !important;
    overflow-y: auto !important;
}

.modal-content.settings-modal.admin-settings-modal .settings-tabs {
    gap: 10px !important;
    margin-bottom: 18px;
}

.modal-content.settings-modal.admin-settings-modal .settings-tabs .tab-btn {
    min-height: 40px;
    padding: 0 16px !important;
    font-size: 13px;
    font-weight: 800;
}

.modal-content.settings-modal.admin-settings-modal .settings-content {
    margin-top: 0 !important;
}

.modal-content.settings-modal.admin-settings-modal .settings-tab {
    padding: 24px !important;
}

.modal-content.settings-modal.admin-settings-modal .settings-tab h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 16px !important;
    line-height: 1.35;
}

.modal-content.settings-modal.admin-settings-modal .settings-tab h4 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eef2ff;
    color: #2563eb;
    font-size: 15px;
}

.modal-content.settings-modal.admin-settings-modal .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 20px !important;
    margin-bottom: 20px;
}

.modal-content.settings-modal.admin-settings-modal .form-group {
    margin-bottom: 18px;
}

.modal-content.settings-modal.admin-settings-modal .form-group label {
    margin-bottom: 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.modal-content.settings-modal.admin-settings-modal .input-wrapper {
    min-height: 48px;
    padding: 0 14px !important;
    border: 1px solid #d7dee7;
    border-radius: 10px;
    background: #ffffff;
}

.modal-content.settings-modal.admin-settings-modal .input-wrapper select,
.modal-content.settings-modal.admin-settings-modal .input-wrapper input {
    height: 48px;
    min-height: 48px;
    font-size: 13px;
}

.modal-content.settings-modal.admin-settings-modal .input-wrapper .input-icon {
    color: #64748b;
    font-size: 13px;
}

.modal-content.settings-modal.admin-settings-modal .settings-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.modal-content.settings-modal.admin-settings-modal .settings-info-card {
    min-height: 78px;
    justify-content: center;
    padding: 16px;
}

.modal-content.settings-modal.admin-settings-modal .notification-settings {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 16px;
}

.modal-content.settings-modal.admin-settings-modal .checkbox-label {
    min-height: 96px;
    gap: 12px;
    padding: 16px !important;
}

.modal-content.settings-modal.admin-settings-modal .checkbox-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.modal-content.settings-modal.admin-settings-modal .checkbox-description {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.modal-content.settings-modal.admin-settings-modal #securityTab .form-group:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 0;
    padding-top: 4px;
}

.modal-content.settings-modal.admin-settings-modal #securityTab .form-group:last-child .btn {
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

.modal-content.settings-modal.admin-settings-modal .settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 24px -24px -24px !important;
    padding: 16px 24px 0 !important;
}

.modal-content.settings-modal.admin-settings-modal .settings-actions .btn {
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .modal.show .modal-content.settings-modal.admin-settings-modal,
    .modal-content.settings-modal.admin-settings-modal {
        width: calc(100vw - 40px) !important;
        min-width: 0 !important;
    }

    .modal-content.settings-modal.admin-settings-modal .form-row,
    .modal-content.settings-modal.admin-settings-modal .notification-settings {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

.settings-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.settings-info-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}

.settings-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
}

.admin-settings-modal .notification-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-settings-modal .notification-settings .form-group {
    margin: 0;
}

.admin-settings-modal .checkbox-label {
    min-height: 82px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

@media (max-width: 768px) {
    .header-right .user-dropdown-content {
        width: min(320px, calc(100vw - 24px));
    }

    .admin-profile-modal .profile-section,
    .admin-profile-modal .profile-info .form-row,
    .settings-info-grid,
    .admin-settings-modal .notification-settings {
        grid-template-columns: 1fr;
    }

    .admin-settings-modal .settings-tabs {
        flex-wrap: wrap;
    }
}

/* Strong profile modal sizing override: replaces older compact .profile-modal rules */
.modal.show .modal-content.profile-modal.admin-profile-modal,
.modal-content.profile-modal.admin-profile-modal {
    width: min(1120px, calc(100vw - 80px)) !important;
    max-width: 1120px !important;
    min-width: min(960px, calc(100vw - 80px)) !important;
    max-height: 88vh !important;
}

.modal-content.profile-modal.admin-profile-modal .modal-body {
    max-height: calc(88vh - 96px) !important;
    padding: 24px !important;
}

.modal-content.profile-modal.admin-profile-modal .modal-header {
    padding: 18px 22px !important;
}

.modal-content.profile-modal.admin-profile-modal .modal-body > .profile-section:first-child {
    display: grid !important;
    grid-template-columns: 240px minmax(680px, 1fr) !important;
    gap: 32px !important;
}

.modal-content.profile-modal.admin-profile-modal .profile-info {
    min-width: 0 !important;
    padding: 24px !important;
}

.modal-content.profile-modal.admin-profile-modal .profile-info .form-row {
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.modal-content.profile-modal.admin-profile-modal .profile-section-heading {
    display: block !important;
    position: relative;
    padding-right: 92px;
}

.modal-content.profile-modal.admin-profile-modal .profile-section-heading small {
    max-width: 620px !important;
}

.modal-content.profile-modal.admin-profile-modal .profile-section-heading::after {
    position: absolute;
    top: 0;
    right: 0;
}

.modal-content.profile-modal.admin-profile-modal .input-wrapper {
    padding: 0 14px !important;
}

.modal-content.profile-modal.admin-profile-modal .profile-info input,
.modal-content.profile-modal.admin-profile-modal .profile-info select {
    height: 48px !important;
    min-height: 48px !important;
}

.modal-content.profile-modal.admin-profile-modal .modal-body > .profile-section:nth-of-type(2) {
    display: block !important;
    margin-top: 24px !important;
    padding: 0 !important;
    border-top: 0 !important;
}

.modal-content.profile-modal.admin-profile-modal .modal-body > .profile-section:nth-of-type(2) .profile-info {
    width: 100% !important;
    padding: 24px !important;
}

.modal-content.profile-modal.admin-profile-modal .profile-info > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
    color: #0f172a !important;
    font-size: 16px !important;
    line-height: 1.35;
    font-weight: 800;
}

.modal-content.profile-modal.admin-profile-modal .profile-info > h3 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    border-radius: 10px;
    background: #eef2ff;
    color: #2563eb !important;
    font-size: 15px;
}

.modal-content.profile-modal.admin-profile-modal .profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-content.profile-modal.admin-profile-modal .profile-actions .btn {
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

.modal-content.profile-modal.admin-profile-modal .readonly-input {
    color: #475569 !important;
    background: #f8fafc !important;
}

@media (max-width: 1100px) {
    .modal.show .modal-content.profile-modal.admin-profile-modal,
    .modal-content.profile-modal.admin-profile-modal {
        width: calc(100vw - 40px) !important;
        min-width: 0 !important;
    }

    .modal-content.profile-modal.admin-profile-modal .modal-body > .profile-section:first-child {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }

    .modal-content.profile-modal.admin-profile-modal .profile-info .form-row {
        grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .modal-content.profile-modal.admin-profile-modal .modal-body > .profile-section:first-child,
    .modal-content.profile-modal.admin-profile-modal .profile-info .form-row {
        grid-template-columns: 1fr !important;
    }

    .modal-content.profile-modal.admin-profile-modal .profile-section-heading {
        padding-right: 0;
    }

    .modal-content.profile-modal.admin-profile-modal .profile-section-heading::after {
        position: static;
        margin-top: 10px;
        width: fit-content;
    }

    .modal-content.profile-modal.admin-profile-modal .profile-actions {
        align-items: stretch !important;
        flex-direction: column;
    }

    .modal-content.profile-modal.admin-profile-modal .profile-actions .btn {
        width: 100%;
    }

    .modal-content.settings-modal.admin-settings-modal .form-row,
    .modal-content.settings-modal.admin-settings-modal .settings-info-grid,
    .modal-content.settings-modal.admin-settings-modal .notification-settings {
        grid-template-columns: 1fr !important;
    }

    .modal-content.settings-modal.admin-settings-modal .settings-actions,
    .modal-content.settings-modal.admin-settings-modal #securityTab .form-group:last-child {
        align-items: stretch;
        flex-direction: column;
    }

    .modal-content.settings-modal.admin-settings-modal .settings-actions .btn,
    .modal-content.settings-modal.admin-settings-modal #securityTab .form-group:last-child .btn {
        width: 100%;
    }
}

/* Security-only profile settings modal */
.modal-content.settings-modal.admin-settings-modal .security-only-settings {
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.modal-content.settings-modal.admin-settings-modal #securityTab {
    display: block;
    padding: 24px !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.modal-content.settings-modal.admin-settings-modal .security-section-card {
    padding: 22px;
    border: 1px solid #d7dee7;
    border-radius: 14px;
    background: #ffffff;
    margin-top: 18px;
}

.modal-content.settings-modal.admin-settings-modal .security-section-card:first-of-type {
    margin-top: 0;
}

.modal-content.settings-modal.admin-settings-modal .security-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-content.settings-modal.admin-settings-modal .security-section-heading span {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.modal-content.settings-modal.admin-settings-modal .security-section-heading small {
    display: block;
    max-width: 560px;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.modal-content.settings-modal.admin-settings-modal .security-section-card > .form-group {
    margin-bottom: 18px !important;
}

.modal-content.settings-modal.admin-settings-modal .security-section-card > .form-group:last-child {
    margin-bottom: 0 !important;
}

.modal-content.settings-modal.admin-settings-modal .security-section-card .input-wrapper {
    min-height: 48px;
    padding: 0 14px !important;
    border: 1px solid #d7dee7;
    border-radius: 10px;
    background: #ffffff;
}

.modal-content.settings-modal.admin-settings-modal .security-section-card input {
    height: 48px;
    min-height: 48px;
    font-size: 13px;
}

.modal-content.settings-modal.admin-settings-modal .settings-note.warning {
    border-color: #fbbf24;
    background: #fffbeb;
    color: #92400e;
}

.modal-content.settings-modal.admin-settings-modal .security-section-card .profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 18px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #e5e7eb;
    background: transparent;
}

.modal-content.settings-modal.admin-settings-modal .security-section-card .btn {
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

.modal-content.settings-modal.admin-settings-modal .settings-actions {
    justify-content: flex-end;
    position: static !important;
    background: #ffffff !important;
}

@media (max-width: 768px) {
    .modal-content.settings-modal.admin-settings-modal .security-section-heading,
    .modal-content.settings-modal.admin-settings-modal .security-section-card .profile-actions {
        flex-direction: column;
        align-items: stretch !important;
    }

    .modal-content.settings-modal.admin-settings-modal .security-section-card .btn {
        width: 100%;
    }
}

/* End of Comprehensive Card & Modal Styling */

/* ===== UI/UX System Refresh ===== */
:root {
    --ui-bg: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fbff;
    --ui-border: #dce6f2;
    --ui-border-strong: #c7d7ea;
    --ui-text: #10233f;
    --ui-text-muted: #5f738d;
    --ui-accent: #2563eb;
    --ui-accent-soft: #dbeafe;
    --ui-success-soft: #dcfce7;
    --ui-warning-soft: #fef3c7;
    --ui-danger-soft: #fee2e2;
    --ui-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.05);
    --ui-shadow-md: 0 18px 40px rgba(15, 23, 42, 0.08);
    --ui-radius-lg: 18px;
    --ui-radius-md: 14px;
    --ui-radius-sm: 12px;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ui-text);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.05), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, var(--ui-bg) 100%);
}

body::before {
    opacity: 0.18;
}

.dashboard-container {
    min-height: 100vh;
    background: transparent;
}

.header {
    position: sticky;
    top: 0;
    z-index: 90;
    padding: 18px 22px;
    border: 1px solid rgba(220, 230, 242, 0.86);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    box-shadow: var(--ui-shadow-sm);
}

.header h1,
.card-header h2,
.card-header h3,
.content-card h2,
.content-card h3,
.dashboard-card h3 {
    color: var(--ui-text);
    letter-spacing: -0.02em;
}

.header p,
.card-header p,
.card-actions p,
.dashboard-card-caption,
.stat-meta,
.table-subtitle,
.results-toolbar p,
.dashboard-empty-state,
.chart-empty-state,
.empty-state p,
.table-empty-state,
.sidebar-meta-copy {
    color: var(--ui-text-muted);
}

.content-card,
.dashboard-card,
.summary-card,
.medical-stat-card,
.health-stat-card,
.alerts-summary-card,
.dashboard-toolbar-card,
.search-filter-section,
.table-container,
.welcome-section,
.results-toolbar {
    border: 1px solid rgba(220, 230, 242, 0.9);
    box-shadow: var(--ui-shadow-sm);
}

.content-card,
.dashboard-card,
.dashboard-toolbar-card,
.search-filter-section,
.welcome-section {
    background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%);
    border-radius: var(--ui-radius-lg);
}

.content-card,
.dashboard-card {
    overflow: hidden;
}

.content-card:hover,
.dashboard-card:hover,
.medical-stat-card:hover,
.health-stat-card:hover,
.summary-card:hover {
    box-shadow: var(--ui-shadow-md);
}

.card-header {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #ebf1f7;
}

.card-title-group p,
.results-toolbar p,
.welcome-content p {
    max-width: 70ch;
    line-height: 1.6;
}

.welcome-section {
    padding: 24px 26px;
}

.welcome-section .stat-item {
    padding: 14px 16px;
    border: 1px solid #e3edf7;
    border-radius: 14px;
    background: var(--ui-surface-soft);
}

.dashboard-toolbar-card,
.results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
}

.results-chip,
.quick-filter-pill,
.portal-access-pill,
.portal-visual-badge {
    border-radius: 999px;
}

.quick-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quick-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #d8e6f4;
    background: #ffffff;
    color: var(--ui-text-muted);
    font-weight: 700;
    transition: all 0.2s ease;
}

.quick-filter-pill:hover,
.quick-filter-pill.active {
    color: var(--ui-accent);
    border-color: #b8d1f5;
    background: #f4f9ff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

.search-filter-section,
.search-container {
    gap: 14px;
}

.search-filter-section {
    padding: 16px 18px;
}

.search-box,
.filter-container,
.patient-layout-toolbar,
.results-toolbar,
.dashboard-toolbar-actions,
.card-actions {
    gap: 12px;
}

.form-input,
.form-select,
.form-textarea,
.search-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {
    border-radius: 14px;
    border: 1px solid var(--ui-border);
    background: #ffffff;
    color: var(--ui-text);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.search-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
}

.btn {
    min-height: 42px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1e7ff5 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1d74e2 100%);
}

.btn-secondary {
    color: var(--ui-accent);
    border-color: #c9dcfb;
    background: #f8fbff;
}

.btn-secondary:hover {
    background: #eef5ff;
}

.btn-success {
    background: #10b981;
    color: #ffffff;
}

.btn-success:hover {
    background: #059669;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.18);
}

.btn-warning {
    background: #f59e0b;
    color: #ffffff;
}

.btn-warning:hover {
    background: #d97706;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.18);
}

.btn-danger {
    background: #dc2626;
    color: #ffffff;
}

.btn-danger:hover {
    background: #b91c1c;
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.18);
}

.btn-info {
    background: #06b6d4;
    color: #ffffff;
}

.btn-info:hover {
    background: #0891b2;
    box-shadow: 0 10px 20px rgba(6, 182, 212, 0.18);
}

.alert,
.dashboard-notice,
.portal-security-note {
    border-radius: 14px;
}

.alert {
    border: 1px solid transparent;
}

.alert-info,
.dashboard-notice {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.summary-card,
.medical-stat-card,
.health-stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 18px;
}

.medical-stat-card,
.health-stat-card,
.summary-card {
    padding: 18px;
}

.stat-value,
.metric-value,
.summary-content strong {
    color: var(--ui-text);
    letter-spacing: -0.03em;
}

.status-badge,
.badge,
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.status-badge.status-active,
.status-badge.status-success,
.status-badge.status-normal,
.badge.success {
    background: var(--ui-success-soft);
    color: #15803d;
    border-color: #bbf7d0;
}

.status-badge.status-warning,
.status-badge.elevated,
.badge.warning {
    background: var(--ui-warning-soft);
    color: #b45309;
    border-color: #fde68a;
}

.status-badge.status-danger,
.status-badge.status-critical,
.status-badge.critical,
.badge.danger {
    background: var(--ui-danger-soft);
    color: #b91c1c;
    border-color: #fecaca;
}

.status-badge.status-info,
.badge.info {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
}

.table-container {
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
}

.data-table,
.medical-table,
.medication-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead th,
.medical-table thead th,
.medication-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
    color: #59718d;
    border-bottom: 1px solid #dce7f2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.data-table tbody tr,
.medical-table tbody tr,
.medication-table tbody tr {
    background: #ffffff;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.data-table tbody tr:nth-child(even),
.medical-table tbody tr:nth-child(even),
.medication-table tbody tr:nth-child(even) {
    background: #fbfdff;
}

.data-table tbody tr:hover,
.medical-table tbody tr:hover,
.medication-table tbody tr:hover {
    background: #f4f9ff;
}

.data-table td,
.medical-table td,
.medication-table td {
    border-bottom: 1px solid #edf3f8;
    color: #1e2f47;
    vertical-align: middle;
}

.table-empty-state,
.dashboard-empty-state,
.chart-empty-state,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px 24px;
    text-align: center;
    color: var(--ui-text-muted);
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
    border: 1px dashed #d9e6f3;
    border-radius: 16px;
}

.empty-state i,
.table-empty-state .empty-icon {
    color: #7aaef5;
}

.activity-item,
.dashboard-list-item,
.notification-item {
    border-radius: 14px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.activity-item:hover,
.dashboard-list-item:hover,
.notification-item:hover {
    background: #f6faff;
}

.modal {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
    overflow-x: hidden;
}

.modal.show {
    display: flex !important;
}

body.modal-open {
    overflow: hidden;
}

.modal-content {
    width: min(600px, calc(100vw - 32px));
    max-width: 600px;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    border: 1px solid rgba(220, 230, 242, 0.92);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.modal-content.modal-compact {
    width: min(520px, calc(100vw - 32px));
}

.modal-header {
    padding: 20px 22px;
    border-bottom: 1px solid #ebf1f7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-body,
.form-sections {
    scrollbar-width: thin;
}

.modal-body {
    padding: 24px;
    color: #374151;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-actions,
.form-actions {
    border-top: 1px solid #ebf1f7;
    background: #fbfdff;
}

.modal-content .input-wrapper,
.modal-content .medical-input-group {
    border-radius: 14px;
    border: 1px solid #d8e3ef;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
}

.modal-content .input-wrapper:focus-within,
.modal-content .medical-input-group:focus-within {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.modal-content .input-wrapper input,
.modal-content .input-wrapper select,
.modal-content .input-wrapper textarea,
.modal-content .medical-input-group input {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    min-height: 46px;
    padding: 0 14px 0 0;
}

.modal-content .input-wrapper .input-icon,
.modal-content .medical-input-group .medical-icon {
    border-right: 0;
    background: transparent;
}

.modal-content .btn {
    min-height: 44px;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modal-content .btn:hover {
    transform: translateY(-1px);
}

.modal-content .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.modal-content .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    border-color: #1d4ed8;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
}

.modal-content .btn-secondary {
    background: #ffffff;
    border-color: #d7dee7;
    color: #334155;
}

.modal-content .btn-secondary:hover {
    background: #f8fbff;
    border-color: #b9c9db;
    color: #0f172a;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.modal-content .modal-footer .btn,
.modal-content .settings-actions .btn,
.modal-content .profile-actions .btn {
    min-width: 112px;
}

.action-menu .btn-action,
.btn-action {
    border-radius: 10px;
}

/* Patient Profiles action panel must overlap the table/card surface */
.patient-profiles-page .content-card,
.patient-profiles-page .table-container,
.patient-profiles-page .patient-table-wrapper,
.patient-profiles-page #patientsTable,
.patient-profiles-page #patientsTable thead,
.patient-profiles-page #patientsTable tbody,
.patient-profiles-page #patientsTable tr,
.patient-profiles-page #patientsTable td,
.patient-profiles-page #patientsTable th {
    overflow: visible !important;
}

.patient-profiles-page .table-container {
    position: relative;
}

.patient-profiles-page .action-menu {
    position: relative;
    z-index: 10001;
}

.patient-profiles-page .action-menu.menu-open {
    z-index: 10005;
}

/* Navigation Page UI Cleanup */
.dashboard-home-page,
.patient-profiles-page,
.health-monitoring-page,
.medication-tracker-page,
.gps-page,
.devices-page,
.alerts-page,
.user-accounts-page,
.analytics-page,
.system-settings-page {
    --nav-page-max-width: 1440px;
    --nav-page-section-gap: 22px;
}

.dashboard-home-page .medical-stat-card,
.patient-profiles-page .medical-stat-card,
.health-monitoring-page .medical-stat-card,
.gps-page .medical-stat-card,
.user-accounts-page .medical-stat-card,
.alerts-page .alerts-summary-card,
.analytics-page .medical-stat-card,
.medication-tracker-page .med-metric-card {
    min-height: 172px;
}

.dashboard-home-page .card-header,
.patient-profiles-page .card-header,
.health-monitoring-page .card-header,
.medication-tracker-page .card-header,
.gps-page .card-header,
.devices-page .card-header,
.alerts-page .card-header,
.user-accounts-page .card-header,
.analytics-page .card-header,
.system-settings-page .card-header,
.dashboard-home-page .dashboard-toolbar-card,
.alerts-page .results-toolbar,
.user-accounts-page .patient-layout-toolbar,
.analytics-page .analytics-toolbar,
.system-settings-page .settings-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-home-page .card-header h2,
.dashboard-home-page .card-header h3,
.patient-profiles-page .card-header h2,
.patient-profiles-page .card-header h3,
.health-monitoring-page .card-header h2,
.health-monitoring-page .card-header h3,
.medication-tracker-page .card-header h2,
.medication-tracker-page .card-header h3,
.gps-page .card-header h2,
.gps-page .card-header h3,
.devices-page .card-header h2,
.devices-page .card-header h3,
.alerts-page .card-header h2,
.alerts-page .card-header h3,
.user-accounts-page .card-header h2,
.user-accounts-page .card-header h3,
.analytics-page .card-header h2,
.analytics-page .card-header h3,
.system-settings-page .card-header h2,
.system-settings-page .card-header h3 {
    white-space: normal;
    line-height: 1.3;
}

.dashboard-home-page .card-title-group,
.patient-profiles-page .card-title-group,
.health-monitoring-page .card-title-group,
.medication-tracker-page .card-title-group,
.gps-page .card-title-group,
.devices-page .card-title-group,
.alerts-page .card-title-group,
.user-accounts-page .card-title-group,
.analytics-page .analytics-card-copy,
.analytics-page .analytics-hero-copy,
.system-settings-page .settings-hero-copy {
    min-width: 0;
    flex: 1 1 320px;
}

.dashboard-home-page .card-actions,
.patient-profiles-page .card-actions,
.health-monitoring-page .card-actions,
.medication-tracker-page .card-actions,
.gps-page .card-actions,
.devices-page .card-actions,
.alerts-page .card-actions,
.user-accounts-page .card-actions,
.analytics-page .analytics-toolbar-actions,
.analytics-page .analytics-chart-controls,
.system-settings-page .settings-toolbar-actions,
.patient-profiles-page .filter-container,
.user-accounts-page .filter-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.patient-profiles-page .search-container,
.user-accounts-page .search-container,
.alerts-page .alerts-history-filters,
.alerts-page .card-actions,
.analytics-page .analytics-toolbar,
.dashboard-home-page .dashboard-toolbar-card,
.user-accounts-page .patient-layout-toolbar,
.system-settings-page .settings-toolbar {
    gap: 14px;
}

.patient-profiles-page .search-box,
.user-accounts-page .search-box {
    flex: 1 1 420px;
    min-width: min(100%, 300px);
}

.patient-profiles-page .filter-container,
.user-accounts-page .filter-container {
    flex: 1 1 320px;
}

.dashboard-home-page .card-actions .form-input,
.dashboard-home-page .card-actions .form-select,
.patient-profiles-page .card-actions .form-input,
.patient-profiles-page .card-actions .form-select,
.health-monitoring-page .card-actions .form-input,
.health-monitoring-page .card-actions .form-select,
.medication-tracker-page .card-actions .form-input,
.medication-tracker-page .card-actions .form-select,
.gps-page .card-actions .form-input,
.gps-page .card-actions .form-select,
.devices-page .card-actions .form-input,
.devices-page .card-actions .form-select,
.alerts-page .card-actions .form-input,
.alerts-page .card-actions .form-select,
.user-accounts-page .card-actions .form-input,
.user-accounts-page .card-actions .form-select,
.analytics-page .analytics-toolbar-actions .filter-select,
.system-settings-page .settings-toolbar-actions .form-input,
.system-settings-page .settings-toolbar-actions .form-select {
    min-width: 170px;
    max-width: 260px;
}

.dashboard-home-page .table-container,
.patient-profiles-page .table-container,
.health-monitoring-page .table-container,
.medication-tracker-page .table-container,
.gps-page .table-container,
.devices-page .table-container,
.alerts-page .table-container,
.user-accounts-page .table-container,
.analytics-page .table-container,
.system-settings-page .table-container {
    border-radius: 18px;
}

.dashboard-home-page .results-toolbar,
.alerts-page .results-toolbar,
.user-accounts-page .patient-layout-toolbar,
.analytics-page .analytics-toolbar-card,
.system-settings-page .settings-toolbar-card {
    padding: 18px 20px;
}

.analytics-page .analytics-shell {
    max-width: var(--nav-page-max-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.health-monitoring-page .health-monitoring-shell,
.medication-tracker-page .med-tracker,
.gps-page .main-content > .medical-stats-grid,
.devices-page .device-registry-card,
.alerts-page .alerts-command-center,
.user-accounts-page .main-content > .medical-stats-grid,
.system-settings-page .settings-shell {
    width: 100%;
}

.dashboard-home-page .card-header > :first-child,
.patient-profiles-page .card-header > :first-child,
.health-monitoring-page .card-header > :first-child,
.medication-tracker-page .card-header > :first-child,
.gps-page .card-header > :first-child,
.devices-page .card-header > :first-child,
.alerts-page .card-header > :first-child,
.user-accounts-page .card-header > :first-child,
.analytics-page .card-header > :first-child,
.system-settings-page .card-header > :first-child,
.patient-profiles-page .patient-results-meta,
.user-accounts-page .patient-results-meta,
.alerts-page .results-toolbar p,
.analytics-page .analytics-toolbar-copy,
.system-settings-page .settings-toolbar-copy {
    flex: 1 1 280px;
    min-width: 0;
}

.dashboard-home-page .card-actions,
.patient-profiles-page .card-actions,
.health-monitoring-page .card-actions,
.medication-tracker-page .card-actions,
.gps-page .card-actions,
.devices-page .card-actions,
.alerts-page .card-actions,
.user-accounts-page .card-actions,
.analytics-page .analytics-toolbar-actions,
.analytics-page .analytics-chart-controls,
.system-settings-page .settings-toolbar-actions,
.patient-profiles-page .filter-container,
.user-accounts-page .filter-container,
.patient-profiles-page .patient-view-toggle,
.user-accounts-page .user-table-tools,
.alerts-page .alerts-history-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-home-page .card-actions,
.patient-profiles-page .card-actions,
.health-monitoring-page .card-actions,
.medication-tracker-page .card-actions,
.gps-page .card-actions,
.devices-page .card-actions,
.alerts-page .card-actions,
.user-accounts-page .card-actions,
.analytics-page .analytics-toolbar-actions,
.analytics-page .analytics-chart-controls,
.system-settings-page .settings-toolbar-actions,
.patient-profiles-page .filter-container,
.user-accounts-page .filter-container,
.alerts-page .alerts-history-filters {
    justify-content: flex-end;
}

.patient-profiles-page .search-container,
.user-accounts-page .search-container,
.analytics-page .analytics-toolbar,
.system-settings-page .settings-toolbar {
    align-items: center;
}

.patient-profiles-page .search-box,
.user-accounts-page .search-box {
    flex: 1 1 360px;
    min-width: min(100%, 320px);
}

.patient-profiles-page .filter-container,
.user-accounts-page .filter-container {
    flex: 1 1 360px;
}

.patient-profiles-page .patient-layout-toolbar,
.user-accounts-page .patient-layout-toolbar,
.alerts-page .results-toolbar,
.analytics-page .analytics-toolbar-card,
.system-settings-page .settings-toolbar-card {
    border: 1px solid #dbe8f5;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.dashboard-home-page .table-container,
.patient-profiles-page .table-container,
.health-monitoring-page .medical-table-container,
.medication-tracker-page .medication-table-container,
.gps-page .table-container,
.devices-page .table-container,
.alerts-page .table-container,
.user-accounts-page .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.patient-profiles-page .table-container .data-table,
.user-accounts-page .table-container .data-table,
.gps-page .table-container .data-table,
.devices-page .table-container .data-table,
.alerts-page .table-container .data-table {
    width: 100%;
}

.alerts-page .alerts-rule-col {
    min-width: 220px;
}

.system-settings-page .settings-grid-span-full {
    grid-column: 1 / -1;
}

.system-settings-page .settings-action-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.system-settings-page .settings-action-row .btn {
    min-width: 180px;
}

.dashboard-home-page .dashboard-card .card-actions,
.devices-page .device-registry-meta,
.medication-tracker-page .med-calendar-nav,
.medication-tracker-page .med-calendar-tools,
.analytics-page .analytics-toolbar-actions,
.user-accounts-page .user-table-tools {
    margin-left: auto;
}

.dashboard-home-page .dashboard-card-caption {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 36px;
    text-align: right;
}

.patient-profiles-page .patient-layout-toolbar,
.user-accounts-page .patient-layout-toolbar,
.devices-page .device-registry-header,
.analytics-page .analytics-toolbar {
    align-items: center;
}

.devices-page .device-registry-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1 1 360px;
    min-width: 0;
}

.devices-page .device-registry-heading {
    min-width: 0;
}

.devices-page .device-registry-heading p {
    max-width: 64ch;
}

.medication-tracker-page .med-tabs,
.system-settings-page .settings-tab-list {
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.medication-tracker-page .med-tabs::-webkit-scrollbar,
.system-settings-page .settings-tab-list::-webkit-scrollbar {
    height: 8px;
}

.medication-tracker-page .med-calendar-controls {
    align-items: flex-start;
    gap: 16px;
}

.medication-tracker-page .med-calendar-filters {
    flex: 1 1 420px;
}

.medication-tracker-page .med-calendar-tools,
.medication-tracker-page .med-calendar-nav {
    justify-content: flex-end;
}

.analytics-page .analytics-range-group {
    flex: 1 1 420px;
    min-width: 0;
}

.analytics-page .analytics-toolbar-actions {
    flex: 0 1 auto;
}

.gps-page .gps-map-container {
    overflow: hidden;
}

.gps-page .gps-map-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: min(360px, 100%);
    padding: 6px 10px;
    border: 1px solid #d6e3f3;
    border-radius: 999px;
    background: #ffffff;
}

.gps-page .gps-map-search .form-input {
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    background: transparent;
}

.gps-page .gps-map-search i {
    color: #64748b;
}

.gps-page .gps-map-layers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gps-page .gps-map-layers .btn-compact.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.gps-page .gps-popup {
    display: grid;
    gap: 4px;
    min-width: 220px;
}

.gps-page .gps-popup strong {
    color: #0f172a;
    font-size: 15px;
}

.gps-page .gps-popup-address {
    color: #475569;
    font-size: 13px;
    line-height: 1.4;
}

.gps-page .gps-popup-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.health-monitoring-page .followup-header {
    flex-wrap: wrap;
}

.health-monitoring-page .js-coordinates-link {
    text-underline-offset: 0.16em;
}

@media (max-width: 1200px) {
    .dashboard-home-page .main-content,
    .patient-profiles-page .main-content,
    .health-monitoring-page .main-content,
    .medication-tracker-page .main-content,
    .gps-page .main-content,
    .devices-page .main-content,
    .alerts-page .main-content,
    .user-accounts-page .main-content,
    .analytics-page .main-content,
    .system-settings-page .main-content {
        padding: 20px 22px 30px;
    }

    .analytics-page .analytics-hero,
    .health-monitoring-page .health-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .dashboard-home-page .medical-stats-grid,
    .patient-profiles-page .medical-stats-grid,
    .health-monitoring-page .medical-stats-grid,
    .gps-page .medical-stats-grid,
    .user-accounts-page .medical-stats-grid,
    .alerts-page .alerts-summary-grid,
    .analytics-page .analytics-summary-grid-live,
    .medication-tracker-page .med-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-home-page .card-actions,
    .patient-profiles-page .card-actions,
    .health-monitoring-page .card-actions,
    .medication-tracker-page .card-actions,
    .gps-page .card-actions,
    .devices-page .card-actions,
    .alerts-page .card-actions,
    .user-accounts-page .card-actions,
    .analytics-page .analytics-toolbar-actions,
    .analytics-page .analytics-chart-controls,
    .system-settings-page .settings-toolbar-actions,
    .patient-profiles-page .filter-container,
    .user-accounts-page .filter-container {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .dashboard-home-page .main-content,
    .patient-profiles-page .main-content,
    .health-monitoring-page .main-content,
    .medication-tracker-page .main-content,
    .gps-page .main-content,
    .devices-page .main-content,
    .alerts-page .main-content,
    .user-accounts-page .main-content,
    .analytics-page .main-content,
    .system-settings-page .main-content {
        padding: 16px 16px 26px;
    }

    .dashboard-home-page .main-content > * + *,
    .patient-profiles-page .main-content > * + *,
    .health-monitoring-page .main-content > * + *,
    .medication-tracker-page .main-content > * + *,
    .gps-page .main-content > * + *,
    .devices-page .main-content > * + *,
    .alerts-page .main-content > * + *,
    .user-accounts-page .main-content > * + *,
    .analytics-page .main-content > * + *,
    .system-settings-page .main-content > * + * {
        margin-top: 18px;
    }

    .dashboard-home-page .card-header,
    .patient-profiles-page .card-header,
    .health-monitoring-page .card-header,
    .medication-tracker-page .card-header,
    .gps-page .card-header,
    .devices-page .card-header,
    .alerts-page .card-header,
    .user-accounts-page .card-header,
    .analytics-page .card-header,
    .system-settings-page .card-header,
    .dashboard-home-page .dashboard-toolbar-card,
    .alerts-page .results-toolbar,
    .user-accounts-page .patient-layout-toolbar,
    .analytics-page .analytics-toolbar,
    .system-settings-page .settings-toolbar,
    .patient-profiles-page .search-container,
    .user-accounts-page .search-container {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-home-page .card-actions,
    .patient-profiles-page .card-actions,
    .health-monitoring-page .card-actions,
    .medication-tracker-page .card-actions,
    .gps-page .card-actions,
    .devices-page .card-actions,
    .alerts-page .card-actions,
    .user-accounts-page .card-actions,
    .analytics-page .analytics-toolbar-actions,
    .analytics-page .analytics-chart-controls,
    .system-settings-page .settings-toolbar-actions,
    .patient-profiles-page .filter-container,
    .user-accounts-page .filter-container,
    .alerts-page .alerts-history-filters {
        width: 100%;
        justify-content: stretch;
    }

    .dashboard-home-page .card-actions > *,
    .patient-profiles-page .card-actions > *,
    .health-monitoring-page .card-actions > *,
    .medication-tracker-page .card-actions > *,
    .gps-page .card-actions > *,
    .devices-page .card-actions > *,
    .alerts-page .card-actions > *,
    .user-accounts-page .card-actions > *,
    .analytics-page .analytics-toolbar-actions > *,
    .analytics-page .analytics-chart-controls > *,
    .system-settings-page .settings-toolbar-actions > *,
    .patient-profiles-page .filter-container > *,
    .user-accounts-page .filter-container > *,
    .alerts-page .alerts-history-filters > * {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }

    .patient-profiles-page .search-box,
    .user-accounts-page .search-box {
        min-width: 0;
    }

    .system-settings-page .settings-action-row .btn {
        min-width: 0;
    }

    .dashboard-home-page .dashboard-card-caption {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 560px) {
    .dashboard-home-page .medical-stats-grid,
    .patient-profiles-page .medical-stats-grid,
    .health-monitoring-page .medical-stats-grid,
    .gps-page .medical-stats-grid,
    .user-accounts-page .medical-stats-grid,
    .alerts-page .alerts-summary-grid,
    .analytics-page .analytics-summary-grid-live,
    .medication-tracker-page .med-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.loading-skeleton,
.skeleton {
    position: relative;
    overflow: hidden;
    background: #e8eef6;
}

.loading-skeleton::after,
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: ui-skeleton 1.4s ease infinite;
}

@keyframes ui-skeleton {
    100% { transform: translateX(100%); }
}

.gps-live-section {
    margin: 0 0 18px;
    padding: 20px 22px;
    border: 1px solid #dbe8f5;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
}

.gps-live-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.gps-live-section-header h3,
.gps-history-intro h3 {
    margin: 0;
    color: var(--ui-text);
    font-size: 20px;
}

.gps-live-section-header p,
.gps-history-intro p {
    margin: 6px 0 0;
    color: var(--ui-text-muted);
}

.gps-live-card {
    border: 1px solid rgba(191, 219, 254, 0.95);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.gps-live-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.gps-live-stat,
.gps-live-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.gps-live-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f7c9b;
}

.gps-live-stat strong {
    color: var(--ui-text);
    font-size: 18px;
    line-height: 1.35;
}

.gps-live-stat small {
    color: var(--ui-text-muted);
    font-size: 13px;
}

.gps-live-actions {
    align-items: flex-end;
}

.gps-history-intro {
    margin: 0 0 16px;
}

.gps-table-empty-row td {
    padding: 20px;
}

.gps-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    padding: 24px;
    text-align: center;
    color: var(--ui-text-muted);
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
    border: 1px dashed #d9e6f3;
    border-radius: 18px;
}

.gps-table-empty i {
    color: #7aaef5;
    font-size: 24px;
}

@media (max-width: 1100px) {
    .gps-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .gps-live-section,
    .gps-live-card {
        border-radius: 16px;
    }

    .gps-live-section-header {
        flex-direction: column;
    }

    .gps-live-grid {
        grid-template-columns: 1fr;
    }

    .gps-live-actions {
        align-items: stretch;
    }
}

.devices-page .table-badge-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.devices-page .content-card,
.devices-page .table-container,
.devices-page #devicesTable,
.devices-page #devicesTable tbody,
.devices-page #devicesTable tr,
.devices-page #devicesTable td {
    overflow: visible;
}

.devices-page #devicesTable th:last-child,
.devices-page #devicesTable td:last-child {
    text-align: center;
    min-width: 120px;
}

.devices-page #devicesTable td:last-child .action-menu {
    margin: 0 auto;
}

.devices-page .action-menu > .btn-action {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #ffffff;
    color: #64748b;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: all 0.2s ease;
}

.devices-page .action-menu > .btn-action:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.devices-page .action-menu.menu-open > .btn-action {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.devices-page .action-menu-panel {
    min-width: 190px;
}

.devices-page .action-menu-panel button i {
    width: 14px;
}

.devices-page .device-qr-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
}

.devices-page .device-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    padding: 0;
    pointer-events: none;
}

.devices-page .device-qr-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

.devices-page .device-qr-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Two-factor authentication settings */
.two-factor-section-card {
    border-color: rgba(37, 99, 235, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.two-factor-status-grid {
    margin-top: 12px;
}

.two-factor-status-note {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.94rem;
    line-height: 1.55;
}

.two-factor-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.two-factor-disable-form {
    margin-top: 16px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #dbeafe;
    background: #ffffff;
}

.two-factor-disable-form.is-disabled {
    opacity: 0.7;
}

.two-factor-disable-form .form-row {
    margin-bottom: 0;
}

.two-factor-disable-hint {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.two-factor-modal {
    max-width: 960px;
    width: min(960px, calc(100vw - 48px));
}

.two-factor-setup-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

.two-factor-setup-qr,
.two-factor-setup-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.two-factor-qr-frame {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid #dbeafe;
    background: radial-gradient(circle at top, #f8fbff 0%, #eff6ff 100%);
}

.two-factor-qr-frame img {
    width: 280px;
    height: 280px;
    object-fit: contain;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.two-factor-qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    min-height: 280px;
}

.two-factor-qr-code canvas,
.two-factor-qr-code img {
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.two-factor-qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #5b7ba4;
    text-align: center;
}

.two-factor-qr-placeholder i {
    font-size: 44px;
    color: #60a5fa;
}

.two-factor-manual-entry {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
}

.two-factor-manual-entry span,
.two-factor-backup-header span,
.two-factor-setup-step span {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.two-factor-manual-entry strong {
    word-break: break-all;
    color: #0f172a;
    font-size: 0.95rem;
}

.two-factor-setup-step {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.two-factor-setup-step p {
    margin: 8px 0 0;
    color: #334155;
    line-height: 1.6;
}

.two-factor-backup-card {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
}

.two-factor-backup-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.two-factor-backup-header small {
    color: #64748b;
    line-height: 1.5;
}

.two-factor-backup-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.two-factor-backup-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #bfdbfe;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 700;
}

.two-factor-backup-empty {
    color: #64748b;
}

.two-factor-modal-footer {
    justify-content: space-between;
}

@media (max-width: 900px) {
    .two-factor-setup-grid {
        grid-template-columns: 1fr;
    }

    .two-factor-qr-frame {
        min-height: 280px;
    }
}

@media (max-width: 640px) {
    .two-factor-modal {
        width: min(100vw - 24px, 960px);
    }

    .two-factor-action-row,
    .two-factor-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Final modal overlay and header-modal polish */
body.modal-open {
    overflow: hidden;
}

.modal {
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 5000;
}

.modal-content {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.modal-content.settings-modal.admin-settings-modal,
.modal-content.profile-modal.admin-profile-modal,
.modal-content.two-factor-modal {
    border-radius: 24px;
    border: 1px solid rgba(219, 228, 239, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.18);
}

.modal-content.settings-modal.admin-settings-modal .modal-header,
.modal-content.profile-modal.admin-profile-modal .modal-header,
.modal-content.two-factor-modal .modal-header {
    padding: 22px 24px;
    align-items: flex-start;
    border-bottom: 1px solid #e8eef6;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.modal-content.settings-modal.admin-settings-modal .modal-header h3,
.modal-content.profile-modal.admin-profile-modal .modal-header h3,
.modal-content.two-factor-modal .modal-header h3 {
    margin: 0;
    color: #334155;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.modal-content.settings-modal.admin-settings-modal .modal-subtitle,
.modal-content.profile-modal.admin-profile-modal .modal-subtitle,
.modal-content.two-factor-modal .modal-subtitle {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.modal-content.settings-modal.admin-settings-modal .close,
.modal-content.profile-modal.admin-profile-modal .close,
.modal-content.two-factor-modal .close {
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid #d8e3ef;
    background: #ffffff;
    color: #475569;
    font-size: 20px;
}

.modal-content.settings-modal.admin-settings-modal .close:hover,
.modal-content.profile-modal.admin-profile-modal .close:hover,
.modal-content.two-factor-modal .close:hover {
    background: #f8fbff;
    border-color: #c7d5e6;
    color: #0f172a;
}

.modal-content.settings-modal.admin-settings-modal .modal-body,
.modal-content.profile-modal.admin-profile-modal .modal-body,
.modal-content.two-factor-modal .modal-body {
    padding: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fafdff 100%);
}

.modal-content.settings-modal.admin-settings-modal .security-section-card,
.modal-content.settings-modal.admin-settings-modal .settings-info-card,
.modal-content.profile-modal.admin-profile-modal .profile-info,
.modal-content.profile-modal.admin-profile-modal .profile-account-card {
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.modal-content.settings-modal.admin-settings-modal .security-section-card {
    padding: 22px;
}

.modal-content.settings-modal.admin-settings-modal .security-section-heading,
.modal-content.profile-modal.admin-profile-modal .profile-section-heading {
    border-bottom-color: #e8eef6;
}

.modal-content.settings-modal.admin-settings-modal .input-wrapper,
.modal-content.profile-modal.admin-profile-modal .input-wrapper,
.modal-content.two-factor-modal .input-wrapper {
    min-height: 50px;
    border: 1px solid #d8e3ef;
    border-radius: 14px;
    background: #ffffff;
}

.modal-content.settings-modal.admin-settings-modal .input-wrapper:focus-within,
.modal-content.profile-modal.admin-profile-modal .input-wrapper:focus-within,
.modal-content.two-factor-modal .input-wrapper:focus-within {
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.modal-content.settings-modal.admin-settings-modal .input-wrapper input,
.modal-content.settings-modal.admin-settings-modal .input-wrapper select,
.modal-content.settings-modal.admin-settings-modal .input-wrapper textarea,
.modal-content.profile-modal.admin-profile-modal .input-wrapper input,
.modal-content.profile-modal.admin-profile-modal .input-wrapper select,
.modal-content.profile-modal.admin-profile-modal .input-wrapper textarea,
.modal-content.two-factor-modal .input-wrapper input,
.modal-content.two-factor-modal .input-wrapper select,
.modal-content.two-factor-modal .input-wrapper textarea {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.modal-content.settings-modal.admin-settings-modal .btn,
.modal-content.profile-modal.admin-profile-modal .btn,
.modal-content.two-factor-modal .btn {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 800;
    padding: 10px 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modal-content.settings-modal.admin-settings-modal .btn:hover,
.modal-content.profile-modal.admin-profile-modal .btn:hover,
.modal-content.two-factor-modal .btn:hover {
    transform: translateY(-1px);
}

.modal-content.settings-modal.admin-settings-modal .btn-primary,
.modal-content.profile-modal.admin-profile-modal .btn-primary,
.modal-content.two-factor-modal .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.modal-content.settings-modal.admin-settings-modal .btn-primary:hover,
.modal-content.profile-modal.admin-profile-modal .btn-primary:hover,
.modal-content.two-factor-modal .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    border-color: #1d4ed8;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
}

.modal-content.settings-modal.admin-settings-modal .btn-secondary,
.modal-content.profile-modal.admin-profile-modal .btn-secondary,
.modal-content.two-factor-modal .btn-secondary {
    background: #f8fbff;
    border-color: #bfd5ee;
    color: #1d4ed8;
}

.modal-content.settings-modal.admin-settings-modal .btn-secondary:hover,
.modal-content.profile-modal.admin-profile-modal .btn-secondary:hover,
.modal-content.two-factor-modal .btn-secondary:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
}

.modal-content.settings-modal.admin-settings-modal .modal-footer .btn,
.modal-content.settings-modal.admin-settings-modal .settings-actions .btn,
.modal-content.profile-modal.admin-profile-modal .modal-footer .btn,
.modal-content.profile-modal.admin-profile-modal .profile-actions .btn,
.modal-content.two-factor-modal .modal-footer .btn {
    min-width: 112px;
}

/* Shared modal close button styling */
.modal .close,
.modal .modal-close,
.modal [data-modal-close],
.modal .close-modal-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #d8e3ef !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    appearance: none !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.modal .close:hover,
.modal .modal-close:hover,
.modal [data-modal-close]:hover,
.modal .close-modal-btn:hover {
    background: #f8fbff !important;
    border-color: #c7d5e6 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

.modal .close:focus-visible,
.modal .modal-close:focus-visible,
.modal [data-modal-close]:focus-visible,
.modal .close-modal-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.18) !important;
    outline-offset: 2px !important;
}

.modal .close i,
.modal .modal-close i,
.modal [data-modal-close] i,
.modal .close-modal-btn i {
    pointer-events: none;
    font-size: 18px;
    line-height: 1;
}

/* Global dashboard consistency */
.dashboard-home-page .medical-stats-grid,
.patient-profiles-page .medical-stats-grid,
.health-monitoring-page .medical-stats-grid,
.gps-page .medical-stats-grid,
.devices-page .medical-stats-grid,
.user-accounts-page .medical-stats-grid,
.medication-tracker-page .medication-stats-grid {
    gap: 16px;
}

.dashboard-home-page .medical-stat-card,
.patient-profiles-page .medical-stat-card,
.health-monitoring-page .medical-stat-card,
.gps-page .medical-stat-card,
.devices-page .medical-stat-card,
.user-accounts-page .medical-stat-card,
.medication-tracker-page .med-metric-card {
    min-height: 172px;
    padding: 16px;
    border-radius: 18px;
}

.medical-stats-grid .stat-header,
.medication-stats-grid .stat-header {
    margin-bottom: 10px;
}

.medical-stats-grid .stat-icon,
.medication-stats-grid .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 20px;
}

.medical-stats-grid .stat-icon i,
.medication-stats-grid .stat-icon i {
    font-size: 18px;
}

.medical-stats-grid .stat-label,
.medication-stats-grid .stat-label {
    font-size: 12px;
    letter-spacing: 0.06em;
}

.status-badge,
.badge,
.pill,
.medication-tracker-page .med-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.status-badge.status-active,
.status-badge.status-success,
.status-badge.status-normal,
.status-badge.status-online,
.status-badge.status-taken,
.status-badge.safe-zone,
.status-badge.live,
.badge.success,
.medication-tracker-page .med-status-badge.taken,
.medication-tracker-page .med-status-badge.success {
    background: var(--ui-success-soft);
    color: #15803d;
    border-color: #bbf7d0;
}

.status-badge.status-warning,
.status-badge.elevated,
.status-badge.pending,
.status-badge.status-pending,
.status-badge.near-boundary,
.badge.warning,
.medication-tracker-page .med-status-badge.pending {
    background: var(--ui-warning-soft);
    color: #b45309;
    border-color: #fde68a;
}

.status-badge.status-danger,
.status-badge.status-critical,
.status-badge.critical,
.status-badge.status-missed,
.status-badge.status-offline,
.status-badge.status-inactive,
.status-badge.outside-zone,
.badge.danger,
.medication-tracker-page .med-status-badge.missed {
    background: var(--ui-danger-soft);
    color: #b91c1c;
    border-color: #fecaca;
}

.status-badge.status-info,
.status-badge.info,
.badge.info,
.status-badge.status-fresh,
.status-badge.status-neutral,
.medication-tracker-page .med-status-badge.info {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
}

.modal-footer,
.form-actions,
.table-actions,
.action-buttons,
.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger {
    min-height: 40px;
    border-radius: 10px;
    font-weight: 600;
}

.patient-profiles-page .action-menu > .btn-action,
.devices-page .action-menu > .btn-action,
.alerts-page .action-menu > .btn-action,
.medication-tracker-page .action-menu > .btn-action {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.patient-profiles-page .action-menu-panel button,
.devices-page .action-menu-panel button,
.alerts-page .action-menu-panel button,
.medication-tracker-page .action-menu-panel button {
    min-height: 40px;
    padding: 10px 12px;
    font-size: 14px;
}

.patient-profiles-page .status-badge.status-active,
.patient-profiles-page .status-badge.status-connected,
.devices-page .status-badge.status-active,
.devices-page .status-badge.status-activated,
.devices-page .status-badge.status-online,
.alerts-page .status-badge.status-open,
.alerts-page .status-badge.status-resolved,
.medication-tracker-page .status-badge.status-pending,
.medication-tracker-page .status-badge.status-taken,
.medication-tracker-page .status-badge.status-missed {
    min-height: 28px;
}

.devices-page .status-badge.status-available,
.devices-page .status-badge.status-inactive {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.alerts-page .status-badge.status-open,
.alerts-page .status-badge.status-critical {
    background: var(--ui-danger-soft);
    color: #b91c1c;
    border-color: #fecaca;
}

.alerts-page .status-badge.status-resolved {
    background: var(--ui-success-soft);
    color: #15803d;
    border-color: #bbf7d0;
}

.patient-profiles-page .status-badge.status-active,
.patient-profiles-page .status-badge.status-admitted,
.devices-page .status-badge.status-active,
.devices-page .status-badge.status-activated,
.medication-tracker-page .status-badge.status-taken {
    background: var(--ui-success-soft);
    color: #15803d;
    border-color: #bbf7d0;
}

.patient-profiles-page .status-badge.status-inactive,
.devices-page .status-badge.status-disabled,
.medication-tracker-page .status-badge.status-missed {
    background: var(--ui-danger-soft);
    color: #b91c1c;
    border-color: #fecaca;
}