/* ========================================
   Yalow Web — Hospital App Design System
   Based on Admin site.css + brand-guide.md + design-system.md
   Topbar-only layout (no sidebar) to maximize bed grid space
   ======================================== */

/* ========================================
   Design Tokens
   ======================================== */

:root {
    /* === Primary Colors (Yalow brand blue — anchored at #265A8F from logo Y/leaf) === */
    --color-primary-50:  #F4F7F9;
    --color-primary-100: #E7EDF2;
    --color-primary-200: #C0D3E6;
    --color-primary-300: #94B4D5;
    --color-primary-400: #5593D2;
    --color-primary-500: #3174B9;
    --color-primary-600: #29629D;
    --color-primary-700: #265A8F;
    --color-primary-800: #193C60;
    --color-primary-900: #14283C;
    --color-primary-950: #0C1926;

    /* === Secondary Colors (Blue — matches "Shift" in logo) === */
    --color-secondary-50:  #EFF6FF;
    --color-secondary-100: #DBEAFE;
    --color-secondary-200: #BFDBFE;
    --color-secondary-300: #93C5FD;
    --color-secondary-400: #60A5FA;
    --color-secondary-500: #3B82F6;
    --color-secondary-600: #2563EB;
    --color-secondary-700: #1D4ED8;

    /* === Accent Colors (Orange — clock in logo) === */
    --color-accent-50:  #FFF7ED;
    --color-accent-100: #FFEDD5;
    --color-accent-300: #FDBA74;
    --color-accent-500: #F97316;
    --color-accent-600: #EA580C;

    /* === Semantic Colors === */
    --color-success-50:  #F0FDF4;
    --color-success-100: #DCFCE7;
    --color-success-500: #22C55E;
    --color-success-600: #16A34A;
    --color-success-700: #15803D;

    --color-warning-50:  #FEFCE8;
    --color-warning-100: #FEF9C3;
    --color-warning-500: #EAB308;
    --color-warning-600: #CA8A04;
    --color-warning-700: #A16207;

    --color-error-50:  #FEF2F2;
    --color-error-100: #FEE2E2;
    --color-error-500: #EF4444;
    --color-error-600: #DC2626;
    --color-error-700: #B91C1C;

    --color-info-50:  #F0F9FF;
    --color-info-100: #E0F2FE;
    --color-info-500: #0EA5E9;
    --color-info-600: #0284C7;

    /* === Neutral Colors (Slate) === */
    --color-neutral-50:  #F8FAFC;
    --color-neutral-100: #F1F5F9;
    --color-neutral-200: #E2E8F0;
    --color-neutral-300: #CBD5E1;
    --color-neutral-400: #94A3B8;
    --color-neutral-500: #64748B;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1E293B;
    --color-neutral-900: #0F172A;

    /* === Spacing (base 4px) === */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* === Border Radius === */
    --radius-sm:  0.25rem;
    --radius-md:  0.375rem;
    --radius-lg:  0.5rem;
    --radius-xl:  0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* === Shadows === */
    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* === Transitions === */
    --transition-fast:   150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow:   300ms ease;

    /* === Layout === */
    --topbar-height: 56px;
}

/* ========================================
   Base Styles
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-50);
    margin: 0;
    padding: 0;
}

h1:focus { outline: none; }

/* ========================================
   Typography
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--color-neutral-900);
    margin-bottom: var(--space-4);
    line-height: 1.3;
}

h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.125rem; }

.text-muted { color: var(--color-neutral-500) !important; }
.text-small { font-size: 0.875rem; }
.text-caption { font-size: 0.75rem; color: var(--color-neutral-500); }

/* Clinical data font */
.font-mono, .data-value {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ========================================
   Links
   ======================================== */

a, .btn-link {
    color: var(--color-primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover, .btn-link:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 0.9375rem;
    line-height: 1.5;
    cursor: pointer;
    font-family: inherit;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    color: #fff;
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}

.btn-primary i {
    color: #fff;
    opacity: 1;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-700);
    border-color: var(--color-primary-700);
}

.btn-outline-secondary {
    color: var(--color-neutral-600);
    border-color: var(--color-neutral-300);
    background-color: transparent;
}

.btn-outline-secondary:hover:not(:disabled) {
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-100);
    border-color: var(--color-neutral-400);
}

.btn-danger {
    background-color: var(--color-error-600);
    border-color: var(--color-error-600);
    color: #fff;
}

.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: 0.875rem;
}

.btn:focus,
.btn:active:focus,
.form-control:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary-400);
    outline: none;
}

.w-100 { width: 100%; }
.mt-3 { margin-top: var(--space-3); }
.mb-3 { margin-bottom: var(--space-3); }

/* ========================================
   Forms
   ======================================== */

.form-label {
    font-weight: 500;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-2);
    display: block;
    font-size: 0.875rem;
}

.form-control {
    width: 100%;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-neutral-900);
    background-color: #fff;
}

.form-control:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
    outline: none;
}

.form-control::placeholder {
    color: var(--color-neutral-400);
}

.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--color-success-500);
}

.invalid {
    outline: none;
    border-color: var(--color-error-500);
}

.validation-message {
    color: var(--color-error-600);
    font-size: 0.875rem;
    margin-top: var(--space-1);
}

/* ========================================
   Badges
   ======================================== */

.badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.badge-neutral {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
}

/* ========================================
   Alerts
   ======================================== */

.alert {
    border-radius: var(--radius-md);
    border: none;
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
}

.alert-danger {
    background-color: var(--color-error-50);
    color: var(--color-error-700);
    border-left: 4px solid var(--color-error-500);
}

.alert-success {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
    border-left: 4px solid var(--color-success-500);
}

/* ========================================
   Top Bar (no sidebar — topbar-only layout)
   ======================================== */

.app-layout {
    min-height: 100vh;
}

.top-bar {
    background-color: #fff;
    border-bottom: 1px solid var(--color-neutral-200);
    padding: 0 var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-height);
    box-shadow: var(--shadow-sm);
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* User menu */
.user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-3);
    margin-left: var(--space-2);
    border-left: 1px solid var(--color-neutral-200);
}

.user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.user-menu .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--color-neutral-500);
    background: transparent;
    border-color: transparent;
}

.user-menu .btn:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-800);
    border-color: transparent;
}

.user-menu .btn i {
    font-size: 1.25rem;
    line-height: 1;
}

/* ── Topbar Pendencies Badge ──────────── */

.topbar-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: transparent;
    color: var(--color-neutral-600);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.topbar-link:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.topbar-link:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.topbar-link i {
    font-size: 1.35rem;
    line-height: 1;
}

.topbar-pendencies {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    color: var(--color-error-600);
    font-size: 1.25rem;
    transition: all var(--transition-fast);
    text-decoration: none;
    animation: pendency-pulse 2s ease-in-out infinite;
}

.topbar-pendencies:hover {
    background-color: var(--color-error-50);
    text-decoration: none;
    color: var(--color-error-700);
}

.topbar-pendencies__count {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background-color: var(--color-error-600);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

@keyframes pendency-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ── Topbar Brand & Hospital ─────────── */

.topbar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.topbar-brand:hover {
    text-decoration: none;
    opacity: 0.9;
}

.topbar-brand-img {
    height: 34px;
    width: auto;
    display: block;
}

.topbar-hospital {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    font-weight: 500;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   Page Header
   ======================================== */

.page-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.page-header h1 {
    margin-bottom: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-header .page-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-2);
}

/* Content area */
.content {
    padding: var(--space-4) var(--space-6);
    flex: 1;
}

/* ========================================
   Loading States
   ======================================== */

.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner--lg {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   Empty State
   ======================================== */

.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-neutral-500);
}

.empty-state-icon {
    font-size: 3.5rem;
    margin-bottom: var(--space-4);
    opacity: 0.4;
    color: var(--color-primary-400);
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-2);
}

/* ========================================
   Login Page
   ======================================== */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-900) 60%, var(--color-neutral-900) 100%);
    padding: var(--space-4);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-8);
}

.login-logo {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-logo-img {
    max-width: 100%;
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto var(--space-2);
}

.login-logo p {
    color: var(--color-neutral-500);
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Brand text */
.brand-yalow {
    color: var(--color-primary-600);
}

/* ========================================
   Minimal Layout (login, public pages)
   ======================================== */

.minimal-layout {
    min-height: 100vh;
}

/* ========================================
   Dashboard
   ======================================== */

.dashboard {
    max-width: 1600px;
    margin: 0 auto;
}

.dashboard-header {
    margin-bottom: var(--space-6);
}

/* ── Real-time Connection Indicator ────── */

.realtime-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    font-weight: 500;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.realtime-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.realtime-indicator--connected {
    color: var(--color-success-700);
    background-color: var(--color-success-50);
}

.realtime-indicator--connected .realtime-dot {
    background-color: var(--color-success-500);
}

.realtime-indicator--connecting {
    color: var(--color-warning-700);
    background-color: var(--color-warning-50);
}

.realtime-indicator--connecting .realtime-dot {
    background-color: var(--color-warning-500);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.realtime-indicator--disconnected {
    color: var(--color-error-700);
    background-color: var(--color-error-50);
}

.realtime-indicator--disconnected .realtime-dot {
    background-color: var(--color-error-500);
}

/* ── Stats Bar ─────────────────────────── */

.stats-bar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
}

.stat-pill__value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
}

.stat-pill__label {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    font-weight: 500;
}

.stat-pill--total .stat-pill__value { color: var(--color-neutral-800); }
.stat-pill--occupied .stat-pill__value { color: var(--color-secondary-600); }
.stat-pill--fresh .stat-pill__value { color: var(--color-success-600); }
.stat-pill--warning .stat-pill__value { color: var(--color-warning-600); }
.stat-pill--stale .stat-pill__value { color: var(--color-error-600); }
.stat-pill--free .stat-pill__value { color: var(--color-neutral-400); }

/* ── Search & Filter Bar ──────────────── */

.search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

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

.search-bar__input-wrap > i {
    position: absolute;
    left: var(--space-3);
    color: var(--color-neutral-400);
    font-size: 1.125rem;
    pointer-events: none;
}

.search-bar__input {
    width: 100%;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--color-neutral-900);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-bar__input:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
    outline: none;
}

.search-bar__input::placeholder {
    color: var(--color-neutral-400);
}

.search-bar__clear {
    position: absolute;
    right: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-400);
    font-size: 1rem;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
}

.search-bar__clear:hover {
    color: var(--color-neutral-700);
    background-color: var(--color-neutral-100);
}

.search-bar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Use --space-10 for search icon offset */
:root { --space-10: 2.5rem; }

/* ── Pendencies Panel ─────────────────── */

.pendencies-panel {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-xl);
}

.pendencies-panel__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-error-700);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.pendencies-panel__title i {
    font-size: 1.25rem;
}

.pendencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

.pendency-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    overflow: hidden;
}

.pendency-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
}

.pendency-card__header i {
    font-size: 1rem;
}

.pendency-card__count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

.pendency-card--stale .pendency-card__header {
    background-color: var(--color-error-50);
    color: var(--color-error-700);
    border-bottom: 2px solid var(--color-error-200);
}

.pendency-card--handoff .pendency-card__header {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    border-bottom: 2px solid var(--color-warning-200);
}

.pendency-card--warning .pendency-card__header {
    background-color: var(--color-accent-50);
    color: var(--color-accent-600);
    border-bottom: 2px solid var(--color-accent-300);
}

.pendency-card__body {
    padding: var(--space-2) var(--space-3);
}

.pendency-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.pendency-item:hover {
    background-color: var(--color-neutral-50);
}

.pendency-item + .pendency-item {
    border-top: 1px solid var(--color-neutral-100);
}

@media (max-width: 767.98px) {
    .pendencies-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Specialty Sections ────────────────── */

.specialty-section {
    margin-bottom: var(--space-8);
}

.specialty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-neutral-200);
}

.specialty-title .badge {
    font-size: 0.6875rem;
}

/* ── Pendencies Panel (collapsible) ──────── */

.pendencies-panel {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    overflow: hidden;
}

.pendencies-panel--open {
    border-color: var(--color-warning-300);
}

.pendencies-panel__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: none;
    background: var(--color-warning-50);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-warning-800);
    transition: background-color 0.15s;
}

.pendencies-panel__toggle:hover {
    background: var(--color-warning-100);
}

.pendencies-panel__toggle-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.pendencies-panel__toggle-left i {
    font-size: 1.125rem;
    color: var(--color-warning-600);
}

.pendencies-panel__content {
    padding: var(--spacing-3) var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.pendencies-group__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-2);
}

.pendencies-group__title i {
    font-size: 1rem;
}

.pendencies-group__title--critical {
    color: var(--color-error-600);
}

.pendencies-group__title--warning {
    color: var(--color-warning-700);
}

.pendencies-group__title--handoff {
    color: var(--color-primary-600);
}

.pendencies-group__title--alert {
    color: var(--color-error-700);
}

.pendencies-group__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.pendency-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    border: 1px solid;
}

.pendency-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.pendency-chip__code {
    font-weight: 600;
    font-family: var(--font-mono);
}

.pendency-chip__detail {
    font-size: 0.75rem;
    opacity: 0.7;
}

.pendency-chip--critical {
    background-color: var(--color-error-50);
    border-color: var(--color-error-200);
    color: var(--color-error-700);
}

.pendency-chip--warning {
    background-color: var(--color-warning-50);
    border-color: var(--color-warning-200);
    color: var(--color-warning-700);
}

.pendency-chip--handoff {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-200);
    color: var(--color-primary-700);
}

.pendency-chip--alert {
    background-color: var(--color-error-50);
    border-color: var(--color-error-200);
    color: var(--color-error-700);
}

.pendencies-group__more {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
    align-self: center;
    padding: 4px 8px;
}

/* ── Bed Grid (responsive) ─────────────── */

.bed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

/* ========================================
   Bed Card (Heatmap — freshness-based)
   ======================================== */

.bed-card {
    background: #fff;
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    transition: all var(--transition-fast);
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 120px;
}

.bed-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ── Freshness States ──────────────────── */

/* Fresh (<6h) — green */
.bed-card--fresh {
    border-color: var(--color-success-500);
    background: linear-gradient(135deg, #fff 0%, var(--color-success-50) 100%);
}

.bed-card--fresh .bed-card__freshness-dot {
    background-color: var(--color-success-500);
}

/* Warning (6-12h) — yellow */
.bed-card--warning {
    border-color: var(--color-warning-500);
    background: linear-gradient(135deg, #fff 0%, var(--color-warning-50) 100%);
}

.bed-card--warning .bed-card__freshness-dot {
    background-color: var(--color-warning-500);
}

/* Stale (>12h) — red pulsing */
.bed-card--stale {
    border-color: var(--color-error-500);
    background: linear-gradient(135deg, #fff 0%, var(--color-error-50) 100%);
}

.bed-card--stale .bed-card__freshness-dot {
    background-color: var(--color-error-500);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

/* Free — gray dashed */
.bed-card--free {
    border-color: var(--color-neutral-200);
    border-style: dashed;
    background-color: var(--color-neutral-50);
}

.bed-card--free .bed-card__freshness-dot {
    background-color: var(--color-neutral-300);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* ── Card Internal Structure ───────────── */

.bed-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bed-card__code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-neutral-900);
}

.bed-card__freshness-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.bed-card__alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-error-700);
    background-color: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-full);
    padding: 1px 6px;
    line-height: 1;
}

.bed-card__alert-badge i {
    font-size: 0.75rem;
}

.bed-card__patient {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bed-card__patient-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bed-card__mrn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--color-neutral-400);
}

.bed-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    font-size: 0.6875rem;
    color: var(--color-neutral-500);
}

.bed-card__days,
.bed-card__age,
.bed-card__update {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.bed-card__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--color-neutral-300);
    font-size: 0.8125rem;
    gap: var(--space-1);
}

.bed-card__empty i {
    font-size: 1.5rem;
}

/* ========================================
   Risk Badges
   ======================================== */

.risk-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.risk-badge--unstable {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-error-600);
}

.risk-badge--observation {
    background-color: rgba(234, 179, 8, 0.1);
    color: var(--color-warning-700);
}

.risk-badge--stable {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--color-success-700);
}

/* ========================================
   Loading Screen (WASM bootstrap)
   ======================================== */

.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-900) 60%, var(--color-neutral-900) 100%);
}

.loading-screen__brand {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-8);
}

.loading-screen__brand-img {
    max-width: 240px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: brightness(0) invert(1);
}

.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
}

.loading-progress circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--color-primary-300);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    text-align: center;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-top: var(--space-3);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Carregando");
}

/* ========================================
   Blazor Specific
   ======================================== */

.blazor-error-boundary {
    background: var(--color-error-600);
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
    border-radius: var(--radius-md);
    margin: var(--space-4);
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro."
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ========================================
   Responsive Design
   ======================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .bed-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .content {
        padding: var(--space-3);
    }

    .top-bar {
        padding: 0 var(--space-3);
    }

    .bed-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .stats-bar {
        gap: var(--space-2);
    }

    .stat-pill {
        padding: var(--space-1) var(--space-2);
    }

    .stat-pill__value {
        font-size: 1rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .page-header .page-actions {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .content {
        padding: var(--space-2);
    }

    .user-name {
        display: none;
    }

    .bed-card {
        padding: var(--space-2);
        min-height: 100px;
    }

    .bed-card__code {
        font-size: 0.875rem;
    }
}

/* ========================================
   Bed Card — Clickable (occupied beds)
   ======================================== */

.bed-card--clickable {
    cursor: pointer;
}

.bed-card--clickable:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* ========================================
   Bed Detail Page
   ======================================== */

/* ── Alerts Page ─────────────────────── */

.alerts-page {
    padding: var(--spacing-6);
    max-width: 800px;
    margin: 0 auto;
}

.alerts-page__total-badge {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-error-700);
    background-color: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-full);
    padding: 4px 14px;
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.alerts-card {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.alerts-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.alerts-card__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

.alerts-card__code {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    color: var(--color-neutral-900);
}

.alerts-card__separator {
    color: var(--color-neutral-300);
}

.alerts-card__patient {
    flex: 1;
    font-size: 0.875rem;
    color: var(--color-neutral-600);
}

.alerts-card__badge {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--color-error-500);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.alerts-card__items {
    padding: var(--spacing-1) 0;
}

.alerts-card__alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
}

.alerts-card__alert + .alerts-card__alert {
    border-top: 1px solid var(--color-neutral-100);
}

.alerts-card__alert i {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.alerts-card__alert--critical i { color: var(--color-error-500); }
.alerts-card__alert--warning i { color: var(--color-warning-500); }

.alerts-card__alert-label {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-800);
}

.alerts-card__alert-type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-400);
    min-width: 70px;
}

.alerts-card__alert-time {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}

.alerts-card__alert--critical .alerts-card__alert-time { color: var(--color-error-600); }
.alerts-card__alert--warning .alerts-card__alert-time { color: var(--color-warning-600); }

/* Keep alert-item classes for BedDetail banner */
.alert-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.alert-item:last-child { border-bottom: none; }
.alert-item i { font-size: 1rem; flex-shrink: 0; }
.alert-item--critical { color: var(--color-error-700); }
.alert-item--critical i { color: var(--color-error-500); }
.alert-item--warning { color: var(--color-warning-700); }
.alert-item--warning i { color: var(--color-warning-500); }
.alert-item__label { flex: 1; font-weight: 500; }
.alert-item__elapsed { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-neutral-500); }

/* ── Bed Detail ────────────────────── */

.bed-detail {
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Two-column grid layout ───────────── */

.detail-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

.detail-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Detail Header ────────────────────── */

.detail-header {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.detail-header__nav {
    margin-bottom: var(--space-3);
}

.detail-header__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.detail-header__bed-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-primary-700);
}

.detail-header__patient-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-neutral-900);
}

.detail-header__meta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--color-neutral-500);
}

.detail-header__meta span {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.detail-header__meta i {
    font-size: 1rem;
}

/* ── Bed Alerts Banner ────────────────── */

.bed-alerts-banner {
    background-color: var(--color-error-50);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.bed-alerts-banner__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-error-700);
    font-size: 0.875rem;
    margin-bottom: var(--space-2);
}

.bed-alerts-banner__header i {
    font-size: 1.125rem;
}

.bed-alerts-banner__list {
    display: flex;
    flex-direction: column;
}

/* ── Kangaroo Care ────────────────────── */

.kc-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-primary-700);
}

.kc-summary__total {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.kc-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.kc-item:last-child { border-bottom: none; }

.kc-item__participant {
    font-weight: 500;
    flex: 1;
}

.kc-item__duration {
    color: var(--color-neutral-500);
    font-size: 0.75rem;
}

/* ── Breast Milk ─────────────────────── */

.milk-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: 0.8125rem;
}

.milk-summary__item {
    color: var(--color-neutral-600);
}

.milk-type-chip {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
}

.milk-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.milk-item:last-child { border-bottom: none; }

.milk-item__volume {
    color: var(--color-neutral-500);
    font-size: 0.75rem;
}

/* ── Legal Guardian ───────────────────── */

.guardian-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.875rem;
}

.guardian-info__name {
    font-size: 0.9375rem;
    margin-bottom: var(--space-1);
}

.guardian-info__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-neutral-600);
}

.guardian-info__item i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
}

/* ── Conduct Templates ───────────────── */

.template-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.template-chip {
    display: inline-flex;
    flex-direction: column;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    max-width: 200px;
}

.template-chip:hover {
    border-color: var(--color-primary-400);
    background-color: var(--color-primary-50);
}

.template-chip__category {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-400);
}

.template-chip__title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Devices & Antibiotics ───────────── */

.device-item,
.atb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-neutral-100);
}

.device-item:last-child,
.atb-item:last-child { border-bottom: none; }

.device-item--alerted,
.atb-item--alerted {
    background-color: var(--color-error-50);
    margin: 0 calc(var(--space-2) * -1);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    border-radius: var(--radius-sm);
}

.device-item__type,
.atb-item__name {
    font-weight: 600;
    flex: 1;
}

.device-item__name {
    color: var(--color-neutral-500);
    font-size: 0.75rem;
}

.device-item__days,
.atb-item__days {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

.btn-xs {
    padding: 2px 6px;
    font-size: 0.75rem;
    line-height: 1;
}

/* ── Detail Sections ──────────────────── */

.detail-section {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.detail-section__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-neutral-100);
}

.detail-section__title i {
    color: var(--color-primary-600);
    font-size: 1.125rem;
}

/* Scrollable sections — contain long lists without page scroll */
.detail-section--scrollable .detail-section__body {
    max-height: 420px;
    overflow-y: auto;
    padding-right: var(--space-1);
}

/* Subtle scrollbar */
.detail-section__body::-webkit-scrollbar {
    width: 4px;
}

.detail-section__body::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-300);
    border-radius: var(--radius-full);
}

.summary-text {
    color: var(--color-neutral-800);
    line-height: 1.7;
    margin-bottom: var(--space-2);
    white-space: pre-wrap;
}

/* ── Timeline (Daily Log Entries) ─────── */

.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.timeline__item {
    display: grid;
    grid-template-columns: 48px 16px 1fr;
    gap: var(--space-2);
    align-items: start;
}

.timeline__time {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    text-align: right;
    padding-top: 2px;
}

.timeline__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-400);
    margin-top: 6px;
    justify-self: center;
}

.timeline__dot--vitalsigns { background-color: var(--color-error-500); }
.timeline__dot--medication { background-color: var(--color-secondary-500); }
.timeline__dot--procedure { background-color: var(--color-accent-500); }
.timeline__dot--conduct { background-color: var(--color-primary-500); }
.timeline__dot--observation { background-color: var(--color-neutral-400); }
.timeline__dot--intercurrence { background-color: var(--color-warning-500); }

.timeline__content {
    min-width: 0;
}

.timeline__title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.timeline__type-icon {
    font-size: 0.875rem;
}

.timeline__description {
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    margin-top: 2px;
    margin-bottom: 0;
    line-height: 1.5;
}

/* ── Timeline entry action buttons (hover-reveal) ── */

.timeline__actions {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.timeline__item:hover .timeline__actions {
    opacity: 1;
}

.timeline__action-btn {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--color-neutral-400);
    font-size: 0.8125rem;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.timeline__action-btn:hover {
    color: var(--color-primary-600);
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-200);
}

.timeline__action-btn--danger:hover {
    color: var(--color-error-600);
    background-color: var(--color-error-50);
    border-color: var(--color-error-200);
}

/* Mobile: always show action buttons (no hover) */
@media (max-width: 767.98px) {
    .timeline__actions {
        opacity: 1;
    }
}

/* ── Exam List ────────────────────────── */

.exam-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.exam-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-neutral-50);
    flex-wrap: wrap;
}

.exam-item__name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-neutral-800);
    flex: 1;
    min-width: 120px;
}

.exam-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.exam-item__result {
    width: 100%;
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    padding-top: var(--space-1);
}

.exam-status {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
}

.exam-status--requested {
    background-color: var(--color-warning-100);
    color: var(--color-warning-700);
}

.exam-status--collected {
    background-color: var(--color-info-100);
    color: var(--color-info-600);
}

.exam-status--resulted {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
}

/* ── Handoff List ─────────────────────── */

.handoff-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.handoff-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-neutral-50);
    flex-wrap: wrap;
}

.handoff-item__time {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    min-width: 90px;
}

.handoff-item__info {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    flex: 1;
    min-width: 150px;
}

.handoff-item__info i {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
}

.handoff-status {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
}

.handoff-status--draft {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
}

.handoff-status--signed {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
}

.handoff-status--acknowledged {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}

/* ========================================
   Responsive — Bed Detail
   ======================================== */

/* Tablet: collapse to single column */
@media (max-width: 991.98px) {
    .detail-columns {
        grid-template-columns: 1fr;
    }

    .detail-section--scrollable .detail-section__body {
        max-height: none;
    }
}

@media (max-width: 767.98px) {
    .detail-header {
        padding: var(--space-3);
    }

    .detail-section {
        padding: var(--space-3);
    }

    .detail-header__title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .detail-header__meta {
        flex-direction: column;
        gap: var(--space-1);
    }

    .timeline__item {
        grid-template-columns: 40px 12px 1fr;
    }

    .exam-item,
    .handoff-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
}

/* ========================================
   Inline Forms (CRUD actions on Bed Detail)
   ======================================== */

.inline-form {
    border-top: 1px solid var(--color-neutral-200);
    padding-top: var(--space-3);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.inline-form__row {
    display: flex;
    gap: var(--space-3);
}

.inline-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inline-form__field--half {
    flex: 1;
    min-width: 0;
}

.inline-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

.inline-form__error {
    font-size: 0.875rem;
    color: var(--color-error-600);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-error-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-error-500);
}

/* Section title action buttons — pushed to the right */
.detail-section__actions {
    margin-left: auto;
}

/* ========================================
   Modal Dialog (compact, for CRUD actions)
   ======================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: modal-fade-in var(--transition-fast);
}

.modal-dialog {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modal-slide-up var(--transition-normal);
}

.modal-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-neutral-200);
}

.modal-dialog__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-neutral-900);
    margin: 0;
}

.modal-dialog__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-400);
    font-size: 1.25rem;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog__close:hover {
    color: var(--color-neutral-700);
    background-color: var(--color-neutral-100);
}

.modal-dialog__body {
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.modal-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--color-neutral-200);
}

/* Error message inside modal */
.modal-error {
    font-size: 0.875rem;
    color: var(--color-error-600);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-error-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-error-500);
}

.modal-warning {
    font-size: 0.875rem;
    color: var(--color-warning-700);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-warning-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-warning-500);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.modal-warning i {
    flex-shrink: 0;
    margin-top: 2px;
}

.schedule-suggestion {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-primary-700, #1d4ed8);
    background-color: var(--color-primary-50, #eff6ff);
    border: 1px solid var(--color-primary-200, #bfdbfe);
    border-radius: var(--radius-md, 0.375rem);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.schedule-suggestion i {
    flex-shrink: 0;
    font-size: 1rem;
}

/* Form field groups inside modal */
.modal-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.modal-row {
    display: flex;
    gap: var(--space-3);
}

.modal-row > .modal-field {
    flex: 1;
    min-width: 0;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive: stack modal fields on mobile */
@media (max-width: 767.98px) {
    .modal-dialog {
        max-width: none;
        margin: var(--space-2);
    }

    .modal-row {
        flex-direction: column;
    }

    .modal-dialog__header,
    .modal-dialog__body,
    .modal-dialog__footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* ========================================
   Handoff Page
   ======================================== */

.handoff-page {
    max-width: 900px;
    margin: 0 auto;
}

/* ── I-PASS Form (Draft editable) ──────── */

.ipass-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ipass-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ── I-PASS Read-only (Signed/Acknowledged) ── */

.ipass-readonly {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ipass-readonly__field {
    border-left: 3px solid var(--color-primary-200);
    padding-left: var(--space-3);
}

.ipass-readonly__label {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-1);
}

.ipass-readonly__value {
    color: var(--color-neutral-800);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* ── Severity Selector (3 cards) ────────── */

.severity-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.severity-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-neutral-500);
    background: #fff;
}

.severity-option i {
    font-size: 1.5rem;
}

.severity-option:hover {
    border-color: var(--color-neutral-400);
    background-color: var(--color-neutral-50);
}

/* Critical / Instável */
.severity-option--critical.severity-option--selected {
    border-color: var(--color-error-500);
    background-color: var(--color-error-50);
    color: var(--color-error-700);
}

/* Watch / Observação */
.severity-option--watch.severity-option--selected {
    border-color: var(--color-warning-500);
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
}

/* Stable / Estável */
.severity-option--stable.severity-option--selected {
    border-color: var(--color-success-500);
    background-color: var(--color-success-50);
    color: var(--color-success-700);
}

/* ── Completeness Bar ──────────────────── */

.completeness-bar {
    height: 6px;
    background-color: var(--color-neutral-200);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.completeness-bar__fill {
    height: 100%;
    background-color: var(--color-primary-500);
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

/* ── Addenda List ──────────────────────── */

.addenda-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.addendum-item {
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-neutral-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent-300);
}

.addendum-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    margin-bottom: var(--space-1);
}

.addendum-item__content {
    font-size: 0.875rem;
    color: var(--color-neutral-700);
    margin: 0;
    line-height: 1.5;
}

/* ── Mother Data + Serology ───────────── */

.mother-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mother-info__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: 0.875rem;
}

.mother-info__complications {
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
    padding: var(--space-2) var(--space-3);
    background: var(--color-neutral-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-warning-300);
}

.serology-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.serology-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    transition: all var(--transition-fast);
}

.serology-chip--neg { background-color: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-200); }
.serology-chip--pos { background-color: var(--color-error-50); color: var(--color-error-700); border-color: var(--color-error-200); }
.serology-chip--nt  { background-color: var(--color-neutral-100); color: var(--color-neutral-500); border-color: var(--color-neutral-200); }
.serology-chip--ind { background-color: var(--color-warning-50); color: var(--color-warning-700); border-color: var(--color-warning-200); }

.serology-chip--selected { box-shadow: 0 0 0 2px var(--color-primary-400); }

.serology-chip__label { font-weight: 500; }
.serology-chip__status { font-weight: 700; }

.serology-edit-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.serology-edit-row + .serology-edit-row {
    border-top: 1px solid var(--color-neutral-100);
}

.serology-edit-row__label {
    font-size: 0.8125rem;
    font-weight: 500;
    min-width: 90px;
    color: var(--color-neutral-700);
}

.serology-edit-row__options {
    display: flex;
    gap: var(--space-1);
}

/* ── Neonatal Info + Weight Chart ──────── */

.neonatal-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-neutral-600);
}

.neonatal-info__item strong {
    color: var(--color-neutral-800);
}

.weight-chart {
    background: var(--color-neutral-50);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.weight-chart__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.weight-chart__grid {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    padding-top: var(--space-2);
}

.weight-chart__bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.weight-chart__bar {
    width: 100%;
    max-width: 32px;
    background-color: var(--color-primary-400);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height var(--transition-normal);
}

.weight-chart__bar--loss {
    background-color: var(--color-error-400);
}

.weight-chart__value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    color: var(--color-neutral-500);
    margin-top: 2px;
    white-space: nowrap;
}

.weight-chart__label {
    font-size: 0.5625rem;
    color: var(--color-neutral-400);
}

@media (max-width: 575.98px) {
    .weight-chart__value { display: none; }
}

/* ── Entry Type Selector (chips grid) ──── */

.entry-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.entry-type-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.8125rem;
    background: #fff;
    color: var(--color-neutral-600);
}

.entry-type-chip:hover {
    border-color: var(--color-neutral-400);
    background-color: var(--color-neutral-50);
}

.entry-type-chip__icon {
    font-size: 0.875rem;
}

.entry-type-chip--selected {
    font-weight: 600;
}

.entry-type-chip--vitalsigns.entry-type-chip--selected   { border-color: var(--color-error-400); background-color: var(--color-error-50); color: var(--color-error-700); }
.entry-type-chip--medication.entry-type-chip--selected    { border-color: var(--color-secondary-400); background-color: var(--color-secondary-50); color: var(--color-secondary-700); }
.entry-type-chip--procedure.entry-type-chip--selected     { border-color: var(--color-accent-500); background-color: var(--color-accent-50); color: var(--color-accent-600); }
.entry-type-chip--conduct.entry-type-chip--selected       { border-color: var(--color-primary-400); background-color: var(--color-primary-50); color: var(--color-primary-700); }
.entry-type-chip--observation.entry-type-chip--selected   { border-color: var(--color-neutral-400); background-color: var(--color-neutral-100); color: var(--color-neutral-700); }
.entry-type-chip--intercurrence.entry-type-chip--selected { border-color: var(--color-warning-400); background-color: var(--color-warning-50); color: var(--color-warning-700); }
.entry-type-chip--other.entry-type-chip--selected         { border-color: var(--color-neutral-400); background-color: var(--color-neutral-100); color: var(--color-neutral-700); }

/* ── Receiver Selector (Handoff Sign) ──── */

.receiver-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-height: 240px;
    overflow-y: auto;
    padding: var(--space-1) 0;
}

.receiver-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--color-neutral-200);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: #fff;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.receiver-chip:hover {
    border-color: var(--color-primary-300);
    background-color: var(--color-primary-50);
}

.receiver-chip--selected {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    font-weight: 600;
}

.receiver-chip__avatar {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background-color: var(--color-neutral-200);
    color: var(--color-neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.625rem;
    flex-shrink: 0;
}

.receiver-chip--selected .receiver-chip__avatar {
    background-color: var(--color-primary-500);
    color: #fff;
}

.receiver-chip__name {
    color: var(--color-neutral-800);
}

.receiver-chip--selected .receiver-chip__name {
    color: var(--color-primary-700);
}

.receiver-chip__check {
    color: var(--color-primary-600);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ========================================
   Stepper (multi-step flows)
   ======================================== */

.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-6);
}

.stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    position: relative;
    z-index: 1;
}

.stepper__circle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--transition-normal);
    flex-shrink: 0;
}

.stepper__step--completed .stepper__circle {
    background-color: var(--color-success-500);
    color: #fff;
}

.stepper__step--active .stepper__circle {
    background-color: var(--color-primary-600);
    color: #fff;
    box-shadow: 0 0 0 4px var(--color-primary-100);
}

.stepper__step--pending .stepper__circle {
    background-color: var(--color-neutral-200);
    color: var(--color-neutral-500);
}

.stepper__label {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.stepper__step--completed .stepper__label { color: var(--color-success-700); }
.stepper__step--active .stepper__label { color: var(--color-primary-700); font-weight: 600; }
.stepper__step--pending .stepper__label { color: var(--color-neutral-400); }

.stepper__line {
    width: 60px;
    height: 2px;
    flex-shrink: 0;
    margin-bottom: var(--space-4);
}

.stepper__line--filled { background-color: var(--color-success-500); }
.stepper__line--empty { background-color: var(--color-neutral-200); }

@media (max-width: 575.98px) {
    .stepper__line { width: 30px; }
    .stepper__circle { width: 30px; height: 30px; font-size: 0.75rem; }
    .stepper__label { font-size: 0.625rem; }
}

/* ========================================
   Toast Notifications
   ======================================== */

.toast {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    animation: toast-slide-in var(--transition-normal);
    max-width: 400px;
}

.toast--success {
    background-color: var(--color-success-600);
    color: #fff;
}

.toast--error {
    background-color: var(--color-error-600);
    color: #fff;
}

.toast i {
    font-size: 1.125rem;
    flex-shrink: 0;
}

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    .toast {
        left: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
        max-width: none;
    }
}

/* ICU Monitor mode (large screens, fullscreen) */
@media (min-width: 1536px) {
    .bed-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    .dashboard {
        max-width: none;
        padding: 0 var(--space-4);
    }
}

/* ── Monitor UTI Mode ─────────────────── */

.dashboard--monitor {
    max-width: none;
    padding: 0 var(--space-4);
    background: var(--color-neutral-900);
    min-height: 100vh;
}

.dashboard--monitor .dashboard-header {
    margin-bottom: var(--space-3);
}

.dashboard--monitor .page-header h1 {
    color: #fff;
    font-size: 1.5rem;
}

.dashboard--monitor .page-header {
    padding-top: var(--space-3);
}

.dashboard--monitor .realtime-indicator {
    font-size: 0.875rem;
}

.dashboard--monitor .stats-bar {
    justify-content: center;
}

.dashboard--monitor .stat-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.dashboard--monitor .stat-pill__label {
    color: rgba(255, 255, 255, 0.6);
}

.dashboard--monitor .stat-pill__value {
    font-size: 1.5rem;
}

.dashboard--monitor .stat-pill--total .stat-pill__value { color: #fff; }
.dashboard--monitor .stat-pill--occupied .stat-pill__value { color: var(--color-secondary-300); }
.dashboard--monitor .stat-pill--fresh .stat-pill__value { color: var(--color-success-400); }
.dashboard--monitor .stat-pill--warning .stat-pill__value { color: var(--color-warning-400); }
.dashboard--monitor .stat-pill--stale .stat-pill__value { color: var(--color-error-400); }
.dashboard--monitor .stat-pill--free .stat-pill__value { color: rgba(255, 255, 255, 0.4); }

.dashboard--monitor .bed-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.dashboard--monitor .bed-card {
    border-width: 3px;
    min-height: 140px;
}

.dashboard--monitor .bed-card--empty {
    opacity: 0.4;
}

.monitor-clock {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    justify-content: flex-end;
    padding: var(--space-1) 0;
}

/* Hide topbar in fullscreen + monitor mode */
:fullscreen .top-bar,
:-webkit-full-screen .top-bar {
    display: none;
}

:fullscreen .main-content-topbar,
:-webkit-full-screen .main-content-topbar {
    min-height: 100vh;
}

/* ========================================
   Notification Bell & Dropdown (US-12)
   ======================================== */

.notif-bell {
    position: relative;
}

.notif-bell__trigger {
    position: relative;
}

.notif-bell__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--color-error-500);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-neutral-200);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notif-dropdown__backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.notif-dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-neutral-100);
}

.notif-dropdown__title {
    font-weight: 600;
    font-size: 0.875rem;
}

.notif-dropdown__mark-all {
    background: none;
    border: none;
    color: var(--color-primary-600);
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 500;
}

.notif-dropdown__mark-all:hover {
    text-decoration: underline;
}

.notif-dropdown__list {
    overflow-y: auto;
    flex: 1;
}

.notif-dropdown__empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-neutral-400);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.notif-dropdown__empty i {
    font-size: 2rem;
}

.notif-dropdown__footer {
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-neutral-100);
    text-align: center;
}

.notif-dropdown__see-all {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary-600);
    text-decoration: none;
}

.notif-dropdown__see-all:hover {
    text-decoration: underline;
}

/* ── Notification Item (shared: dropdown + page) ── */

.notif-item,
.notif-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.notif-item:hover,
.notif-list-item:hover {
    background: var(--color-neutral-50);
}

.notif-item--unread,
.notif-list-item--unread {
    background: var(--color-primary-50);
}

.notif-item--unread:hover,
.notif-list-item--unread:hover {
    background: #dbeafe;
}

.notif-item__icon,
.notif-list-item__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.notif-item__icon--handoff { background: var(--color-primary-100); color: var(--color-primary-700); }
.notif-item__icon--alert { background: #fff3cd; color: #856404; }
.notif-item__icon--exam { background: var(--color-secondary-100); color: var(--color-secondary-700); }
.notif-item__icon--critical { background: var(--color-error-100); color: var(--color-error-700); }
.notif-item__icon--swap { background: #e0e7ff; color: #3730a3; }
.notif-item__icon--schedule { background: var(--color-success-100); color: var(--color-success-700); }
.notif-item__icon--system { background: var(--color-neutral-100); color: var(--color-neutral-600); }

.notif-item__content,
.notif-list-item__body {
    flex: 1;
    min-width: 0;
}

.notif-item__title,
.notif-list-item__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item__message,
.notif-list-item__message {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item__time,
.notif-list-item__time {
    font-size: 0.6875rem;
    color: var(--color-neutral-400);
    margin-top: 2px;
}

.notif-item__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-primary-500);
    flex-shrink: 0;
    margin-top: 6px;
}

/* ── Notifications Page ───────────────── */

.notifications-page {
    max-width: 720px;
    margin: 0 auto;
}

.notif-filters {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.notif-list {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.notif-list-item {
    border-bottom: 1px solid var(--color-neutral-100);
}

.notif-list-item:last-child {
    border-bottom: none;
}

.notif-list-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Mobile responsive ────────────────── */

@media (max-width: 575.98px) {
    .notif-dropdown {
        width: calc(100vw - 2rem);
        right: -1rem;
    }
}

/* ========================================
   Pendencies Page (US-11)
   ======================================== */

.pendencies-page {
    max-width: 960px;
    margin: 0 auto;
}

.pendency-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.pendency-summary__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
}

.pendency-summary__chip--critical {
    background-color: var(--color-error-50);
    color: var(--color-error-700);
}

.pendency-summary__chip--alert {
    background-color: #fff3cd;
    color: #856404;
}

.pendency-summary__chip--handoff {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.pendency-summary__chip--warning {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
}

/* ── Sections ─────────────────────────── */

.pendency-section {
    margin-bottom: var(--space-6);
}

.pendency-section__title {
    font-size: 0.9375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-neutral-100);
}

.pendency-section__title--critical {
    color: var(--color-error-600);
    border-bottom-color: var(--color-error-200);
}

.pendency-section__title--handoff {
    color: var(--color-primary-600);
    border-bottom-color: var(--color-primary-200);
}

.pendency-section__title--alert {
    color: #856404;
    border-bottom-color: #ffc107;
}

.pendency-section__title--warning {
    color: var(--color-warning-600);
    border-bottom-color: var(--color-warning-200);
}

/* ── Cards grid ───────────────────────── */

.pendency-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

.pendency-card {
    background: #fff;
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pendency-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.pendency-card--critical {
    border-color: var(--color-error-300);
    border-left-width: 4px;
    border-left-color: var(--color-error-500);
}

.pendency-card--handoff {
    border-color: var(--color-primary-200);
    border-left-width: 4px;
    border-left-color: var(--color-primary-500);
}

.pendency-card--alert {
    border-color: #ffc107;
    border-left-width: 4px;
    border-left-color: #ffc107;
}

.pendency-card--warning {
    border-color: var(--color-warning-200);
    border-left-width: 4px;
    border-left-color: var(--color-warning-500);
}

.pendency-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.pendency-card__code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.9375rem;
}

.pendency-card__risk {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.risk--critical {
    background-color: var(--color-error-50);
    color: var(--color-error-700);
}

.risk--observation {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
}

.risk--stable {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
}

.pendency-card__badge {
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--color-neutral-100);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.pendency-card__patient {
    font-size: 0.8125rem;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pendency-card__detail {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pendency-card__alerts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-2);
}

.pendency-alert {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: var(--radius-md);
}

.pendency-alert--warning {
    background: #fff3cd;
    color: #856404;
}

.pendency-alert--critical {
    background: var(--color-error-50);
    color: var(--color-error-700);
}

.pendency-alert__time {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.6875rem;
}

/* ── Mobile responsive ────────────────── */

@media (max-width: 575.98px) {
    .pendency-cards {
        grid-template-columns: 1fr;
    }

    .pendency-summary {
        gap: var(--space-1);
    }

    .pendency-summary__chip {
        font-size: 0.75rem;
        padding: var(--space-1) var(--space-2);
    }
}

/* ── Percentile Badge ────────────────── */

.percentile-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.percentile-badge--sga {
    background-color: var(--color-error-50);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-200);
}

.percentile-badge--aga {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-200);
}

.percentile-badge--lga {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    border: 1px solid var(--color-warning-200);
}

/* ── Dose Calculator ─────────────────── */

.dose-calc {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dose-calc__input {
    max-width: 200px;
}

.dose-calc__search {
    margin-bottom: var(--space-1);
}

.dose-calc__list {
    max-height: 400px;
    overflow-y: auto;
}

.dose-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-neutral-100);
    font-size: 0.8125rem;
}

.dose-item:last-child { border-bottom: none; }

.dose-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.dose-item__name {
    font-weight: 600;
}

.dose-item__category {
    font-size: 0.6875rem;
    color: var(--color-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dose-item__range {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
}

.dose-item__notes {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
    margin-top: 2px;
}

/* ========================================
   Schedule Page
   ======================================== */

/* ── Page wrapper ────────────────────── */

.schedule-page {
    padding: var(--space-4) var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ── Header ──────────────────────────── */

.schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.schedule-header__left {
    flex: 0 0 auto;
}

.schedule-header__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-neutral-900);
}

.schedule-header__center {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.schedule-month-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    min-width: 180px;
    text-align: center;
    text-transform: capitalize;
}

.schedule-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Icon button ─────────────────────── */

.btn-icon {
    background: none;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-neutral-600);
    transition: all var(--transition-fast);
    padding: 0;
}

.btn-icon:hover {
    background-color: var(--color-neutral-100);
    border-color: var(--color-neutral-400);
    color: var(--color-neutral-800);
}

/* ── Ghost button ────────────────────── */

.btn-ghost {
    color: var(--color-neutral-600);
    background-color: transparent;
    border-color: var(--color-neutral-300);
}

.btn-ghost:hover {
    background-color: var(--color-neutral-100);
    border-color: var(--color-neutral-400);
    color: var(--color-neutral-800);
}

/* ── Feedback banner ─────────────────── */

.schedule-feedback {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
}

.schedule-feedback--success {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-100);
}

.schedule-feedback--error {
    background-color: var(--color-error-50);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-100);
}

.schedule-feedback__close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-fast);
}

.schedule-feedback__close:hover {
    opacity: 1;
}

/* ── Loading state ───────────────────── */

.schedule-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-neutral-500);
    font-size: 0.9375rem;
    padding: var(--space-8);
    justify-content: center;
}

/* ── Calendar wrapper ────────────────── */

.schedule-calendar-wrapper {
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* ── Weekday header ──────────────────── */

.schedule-weekday-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

.schedule-weekday {
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500);
    text-align: center;
}

.schedule-weekday--weekend {
    color: var(--color-neutral-400);
}

/* ── Calendar grid ───────────────────── */

.schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--color-neutral-200);
}

/* ── Day cell ────────────────────────── */

.schedule-day {
    background: #fff;
    padding: var(--space-2);
    min-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.schedule-day--empty {
    background-color: var(--color-neutral-50);
    min-height: 110px;
}

.schedule-day--weekend {
    background-color: var(--color-neutral-50);
}

.schedule-day--holiday {
    background-color: var(--color-error-50);
}

.schedule-day--today {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

/* ── Day number ──────────────────────── */

.schedule-day__number {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-neutral-600);
    line-height: 1.2;
    margin-bottom: 2px;
}

.schedule-day__number--today {
    color: var(--color-primary-600);
    font-weight: 700;
}

/* ── Holiday label ───────────────────── */

.schedule-day__holiday {
    font-size: 0.625rem;
    color: var(--color-error-600);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

/* ── Shift pill ──────────────────────── */

.shift-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: default;
    min-height: 20px;
    pointer-events: none;
}

.shift-pill__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.shift-pill__count {
    font-size: 0.625rem;
    opacity: 0.9;
    margin-left: 4px;
    white-space: nowrap;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.shift-pill__count--under {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    padding: 0 3px;
}

/* ── Empty state ─────────────────────── */

.schedule-empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-neutral-400);
}

.schedule-empty-state i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: var(--space-3);
}

.schedule-empty-state p {
    margin: 0 0 var(--space-1);
    font-size: 0.9375rem;
}

/* ── Professional Hours Panel ────────── */

.hours-panel {
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.hours-panel__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-100);
    background-color: var(--color-neutral-50);
}

.hours-panel__header h3 {
    margin-bottom: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-neutral-800);
}

.hours-panel__table-wrapper {
    overflow-x: auto;
}

/* ── Hours table ─────────────────────── */

.hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.hours-table thead th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
    border-bottom: 1px solid var(--color-neutral-200);
    white-space: nowrap;
}

.hours-table tbody tr {
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background-color var(--transition-fast);
}

.hours-table tbody tr:last-child {
    border-bottom: none;
}

.hours-table tbody tr:hover {
    background-color: var(--color-neutral-50);
}

.hours-table td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-neutral-700);
}

.hours-table__name {
    font-weight: 500;
    color: var(--color-neutral-900);
    white-space: nowrap;
}

.hours-table__num {
    text-align: center;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.hours-table__num--over {
    color: var(--color-error-600);
    font-weight: 600;
}

.hours-table__num--under {
    color: var(--color-warning-600);
    font-weight: 600;
}

.hours-table__bar {
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Hours progress bar ──────────────── */

.hours-bar-track {
    flex: 1;
    height: 8px;
    background-color: var(--color-neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.hours-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.hours-bar--ok {
    background-color: var(--color-success-500);
}

.hours-bar--under {
    background-color: var(--color-warning-500);
}

.hours-bar--over {
    background-color: var(--color-error-500);
}

.hours-bar-pct {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--color-neutral-500);
    min-width: 36px;
    text-align: right;
}

/* ── Responsive ──────────────────────── */

@media (max-width: 768px) {
    .schedule-page {
        padding: var(--space-3) var(--space-3);
    }

    .schedule-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-header__right {
        width: 100%;
    }

    .schedule-day {
        min-height: 70px;
        padding: var(--space-1);
    }

    .schedule-month-label {
        min-width: 140px;
        font-size: 1rem;
    }

    .shift-pill {
        font-size: 0.5625rem;
        padding: 1px 4px;
    }
}

@media (max-width: 480px) {
    .schedule-weekday {
        padding: var(--space-1);
        font-size: 0.625rem;
    }

    .schedule-day {
        min-height: 55px;
        padding: 2px;
    }

    .schedule-day__number {
        font-size: 0.6875rem;
    }
}

/* ========================================
   My Schedule Page
   ======================================== */

.my-schedule-page {
    padding: var(--space-4) var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
}

.my-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

.my-schedule-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 1024px) {
    .my-schedule-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Header ─────────────────────────────── */

.my-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    gap: var(--space-3);
}

.my-schedule-header__left {
    flex: 1;
}

.my-schedule-header__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-neutral-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.my-schedule-header__center {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.my-schedule-header__right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.my-schedule-month-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    min-width: 160px;
    text-align: center;
    text-transform: capitalize;
}

/* ── Feedback bar ────────────────────────── */

.my-schedule-feedback {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: 0.9375rem;
}

.my-schedule-feedback--success {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-100);
}

.my-schedule-feedback--error {
    background-color: var(--color-error-50);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-100);
}

.my-schedule-feedback__close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    display: flex;
    align-items: center;
}

.my-schedule-feedback__close:hover { opacity: 1; }

/* ── Loading ─────────────────────────────── */

.my-schedule-loading {
    text-align: center;
    padding: var(--space-12);
    color: var(--color-neutral-400);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

/* ── Section ─────────────────────────────── */

.my-schedule-section {
    background-color: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.my-schedule-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-100);
    background-color: var(--color-neutral-50);
}

.my-schedule-section__header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Empty state ─────────────────────────── */

.my-schedule-empty {
    text-align: center;
    padding: var(--space-10) var(--space-6);
    color: var(--color-neutral-400);
}

.my-schedule-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: var(--space-3);
}

.my-schedule-empty p {
    margin: 0;
    font-size: 0.9375rem;
}

.my-schedule-empty--sm {
    padding: var(--space-6) var(--space-4);
}

.my-schedule-empty--sm i {
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
}

/* ── My Shift Cards ──────────────────────── */

.my-shift-list {
    display: flex;
    flex-direction: column;
}

.my-shift-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background-color var(--transition-fast);
}

.my-shift-card:last-child {
    border-bottom: none;
}

.my-shift-card:hover {
    background-color: var(--color-neutral-50);
}

.my-shift-card--today {
    background-color: var(--color-primary-50);
    border-left: 3px solid var(--color-primary-500);
}

.my-shift-card--past {
    opacity: 0.55;
}

.my-shift-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    text-align: center;
}

.my-shift-card__day-num {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    line-height: 1.1;
}

.my-shift-card__day-name {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.my-shift-card__info {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.my-shift-card__time {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.my-shift-card__badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.my-shift-card__badge--holiday {
    background-color: var(--color-accent-100);
    color: var(--color-accent-600);
}

.my-shift-card__badge--weekend {
    background-color: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

.my-shift-card__status {
    flex-shrink: 0;
}

/* ── Shift type pill ─────────────────────── */

.shift-type-pill {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    color: #fff;
    white-space: nowrap;
}

/* ── Status badges ───────────────────────── */

.status-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.status-badge--assigned,
.status-badge--open,
.status-badge--pending {
    background-color: var(--color-warning-100);
    color: var(--color-warning-700);
}

.status-badge--confirmed,
.status-badge--approved,
.status-badge--accepted,
.status-badge--completed {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
}

.status-badge--cancelled,
.status-badge--rejected,
.status-badge--denied {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-500);
}

/* ── Commitment items ────────────────────── */

.commitment-list {
    display: flex;
    flex-direction: column;
}

.commitment-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background-color var(--transition-fast);
}

.commitment-item:last-child {
    border-bottom: none;
}

.commitment-item:hover {
    background-color: var(--color-neutral-50);
}

.commitment-item--revoked {
    opacity: 0.5;
}

.commitment-item--revoked .commitment-item__desc {
    text-decoration: line-through;
}

.commitment-item__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    text-align: center;
}

.commitment-item__day {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-neutral-800);
    line-height: 1.1;
}

.commitment-item__month {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-neutral-400);
    text-transform: uppercase;
}

.commitment-item__body {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.commitment-item__desc {
    font-size: 0.9375rem;
    color: var(--color-neutral-700);
}

.commitment-item__time {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.commitment-item__revoke {
    flex-shrink: 0;
    color: var(--color-neutral-400);
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.commitment-item__revoke:hover {
    color: var(--color-error-600);
    background-color: var(--color-error-50);
}

.commitment-item__revoked-tag {
    font-size: 0.75rem;
    color: var(--color-neutral-400);
    font-style: italic;
    flex-shrink: 0;
}

/* ── Commitment type chips ───────────────── */

.commitment-type-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.commitment-type-chip--personal {
    background-color: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

.commitment-type-chip--medical {
    background-color: var(--color-error-100);
    color: var(--color-error-700);
}

.commitment-type-chip--academic {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}

.commitment-type-chip--other {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
}

/* ── Commitment alert (pending declaration) ─ */

.commitment-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background-color: var(--color-warning-50);
    border: 1px solid var(--color-warning-200);
    border-left: 4px solid var(--color-warning-500);
    border-radius: var(--radius-md);
}

.commitment-alert__text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-warning-800);
}

.commitment-alert__text i {
    font-size: 1.125rem;
    color: var(--color-warning-600);
    flex-shrink: 0;
}

.commitment-alert__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .commitment-alert {
        flex-direction: column;
        align-items: stretch;
    }

    .commitment-alert__actions {
        justify-content: flex-end;
    }
}

/* ── Swap items ──────────────────────────── */

.swap-list {
    display: flex;
    flex-direction: column;
}

.swap-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background-color var(--transition-fast);
}

.swap-item:last-child {
    border-bottom: none;
}

.swap-item:hover {
    background-color: var(--color-neutral-50);
}

.swap-item__info {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.swap-item__date {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    white-space: nowrap;
}

.swap-item__shift {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
}

.swap-item__reason {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swap-item__accepted {
    font-size: 0.8125rem;
    color: var(--color-success-600);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.swap-item__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.swap-type-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.swap-type-chip--openoffer {
    background-color: var(--color-accent-100);
    color: var(--color-accent-600);
}

.swap-type-chip--directswap {
    background-color: var(--color-secondary-100);
    color: var(--color-secondary-700);
}

.swap-type-chip--giveaway {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}

.swap-status-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.swap-status-badge--pending,
.swap-status-badge--open {
    background-color: var(--color-warning-100);
    color: var(--color-warning-700);
}

.swap-status-badge--accepted,
.swap-status-badge--completed {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
}

.swap-status-badge--cancelled,
.swap-status-badge--rejected {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-500);
}

/* ── Open offer cards ────────────────────── */

.offer-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
}

.offer-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.offer-card:hover {
    border-color: var(--color-primary-400);
    box-shadow: var(--shadow-sm);
}

.offer-card__shift {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 160px;
}

.offer-card__date {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    white-space: nowrap;
}

.offer-card__meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.offer-card__requester {
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.offer-card__reason {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    font-style: italic;
}

.offer-card__action {
    flex-shrink: 0;
}

/* ── Leave items ─────────────────────────── */

.leave-list {
    display: flex;
    flex-direction: column;
}

.leave-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background-color var(--transition-fast);
}

.leave-item:last-child {
    border-bottom: none;
}

.leave-item:hover {
    background-color: var(--color-neutral-50);
}

.leave-item__info {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.leave-item__dates {
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.leave-item__reason {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    font-style: italic;
}

.leave-item__status {
    flex-shrink: 0;
}

.leave-type-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.leave-type-chip--vacation {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}

.leave-type-chip--sickleave {
    background-color: var(--color-error-100);
    color: var(--color-error-700);
}

.leave-type-chip--maternityleave {
    background-color: var(--color-accent-100);
    color: var(--color-accent-600);
}

.leave-type-chip--other {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
}

.leave-status-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.leave-status-badge--pending {
    background-color: var(--color-warning-100);
    color: var(--color-warning-700);
}

.leave-status-badge--approved {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
}

.leave-status-badge--denied {
    background-color: var(--color-error-100);
    color: var(--color-error-700);
}

/* ── Modals ──────────────────────────────── */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
}

.modal-dialog {
    background-color: #fff;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog--sm {
    max-width: 480px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-200);
}

.modal-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal-close {
    color: var(--color-neutral-400);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.modal-close:hover {
    color: var(--color-neutral-700);
    background-color: var(--color-neutral-100);
}

.modal-body {
    padding: var(--space-5);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-neutral-200);
    background-color: var(--color-neutral-50);
}

.modal-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-error-50);
    color: var(--color-error-700);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* ── Form helpers ────────────────────────── */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-group--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-control--textarea {
    min-height: 80px;
    resize: vertical;
}

/* ── Type chip selector ──────────────────── */

.type-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.type-chip {
    font-size: 0.875rem;
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-neutral-300);
    background-color: #fff;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.type-chip:hover {
    border-color: var(--color-primary-400);
    color: var(--color-primary-600);
}

.type-chip--selected {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}

.type-chip--selected:hover {
    background-color: var(--color-primary-700);
    border-color: var(--color-primary-700);
    color: #fff;
}

/* ── Toggle switch ───────────────────────── */

.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-switch__track {
    width: 44px;
    height: 24px;
    background-color: var(--color-neutral-300);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-normal);
    position: relative;
    display: block;
}

.toggle-switch__track::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background-color: #fff;
    top: 3px;
    left: 3px;
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch__track {
    background-color: var(--color-primary-600);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch__track::after {
    transform: translateX(20px);
}

/* ── btn-ghost / btn-icon (missing utility) ── */

.btn-ghost {
    color: var(--color-neutral-600);
    background-color: transparent;
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-800);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-full);
    background: none;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-icon:hover:not(:disabled) {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

/* ── Secondary button missing variant ────── */

.btn-secondary {
    color: var(--color-neutral-700);
    background-color: var(--color-neutral-100);
    border-color: var(--color-neutral-200);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-neutral-200);
    border-color: var(--color-neutral-300);
    color: var(--color-neutral-900);
}

/* ── Responsive: My Schedule ─────────────── */

@media (max-width: 768px) {
    .my-schedule-page {
        padding: var(--space-3) var(--space-3);
    }

    .my-schedule-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-shift-card {
        padding: var(--space-3) var(--space-3);
        gap: var(--space-3);
    }

    .commitment-item {
        padding: var(--space-3) var(--space-3);
    }

    .swap-item,
    .leave-item {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-3) var(--space-3);
    }

    .swap-item__right,
    .leave-item__status {
        align-self: flex-start;
    }

    .offer-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .offer-card__shift {
        min-width: unset;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .my-schedule-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* ── Schedule Slot People (click to expand) ── */

.shift-pill-wrap {
    position: relative;
}

.shift-pill {
    cursor: pointer;
}

.shift-pill__people {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
}

.shift-pill__person {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    line-height: 1.3;
}

.shift-pill__person--doctor {
    background-color: var(--color-primary-100);
    color: var(--color-primary-800);
}

.shift-pill__person--nurse {
    background-color: var(--color-success-100);
    color: var(--color-success-800);
}

/* ── Schedule Slot Detail (expanded) ──── */

.shift-pill__detail {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    margin-top: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.shift-pill__time {
    font-size: 0.625rem;
    color: var(--color-neutral-400);
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: var(--space-1);
}

.shift-pill__person-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    padding: 2px 0;
}

.shift-pill__person-row + .shift-pill__person-row {
    border-top: 1px solid var(--color-neutral-100);
}

.shift-pill__person {
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.shift-pill__swap-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.shift-pill__swap-btn:hover {
    border-color: var(--color-primary-400);
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.shift-pill__swap-btn--offer {
    border-color: var(--color-warning-300);
    color: var(--color-warning-700);
}

.shift-pill__swap-btn--offer:hover {
    background: var(--color-warning-50);
    border-color: var(--color-warning-500);
}

.swap-item__invited {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--color-primary-600);
    font-weight: 500;
}

.swap-item__invited i {
    font-size: 0.875rem;
}

/* ── Schedule Header Filter ─────────────── */

.schedule-header__filter {
    display: flex;
    align-items: center;
    min-width: 200px;
}

.schedule-header__filter .form-select {
    font-size: 0.8125rem;
    padding: 4px 8px;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    color: var(--color-neutral-700);
    background-color: #fff;
    cursor: pointer;
}

.schedule-header__filter .form-select:focus {
    border-color: var(--color-primary-400);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

/* ── View Toggle ────────────────────────── */

.schedule-view-toggle {
    display: flex;
    gap: var(--space-2);
}

/* ── Filter Highlight / Dim ─────────────── */

.shift-pill__person--highlighted {
    background-color: var(--color-primary-200) !important;
    color: var(--color-primary-900) !important;
    outline: 2px solid var(--color-primary-400);
    outline-offset: 1px;
    font-weight: 700 !important;
}

.shift-pill__person--dimmed {
    opacity: 0.35;
}

.shift-pill__person-row--dimmed {
    opacity: 0.35;
}

/* ── Admin Add/Remove Buttons ───────────── */

.shift-pill__add-row {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px dashed var(--color-neutral-200);
}

.shift-pill__add-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px dashed var(--color-primary-300);
    border-radius: var(--radius-sm);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

.shift-pill__add-btn:hover {
    background: var(--color-primary-100);
    border-color: var(--color-primary-500);
    color: var(--color-primary-800);
}

.shift-pill__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-neutral-400);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
    font-size: 0.625rem;
}

.shift-pill__remove-btn:hover {
    border-color: var(--color-error-400);
    color: var(--color-error-600);
    background: var(--color-error-50);
}

/* ── Assign Modal List ──────────────────── */

.assign-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 300px;
    overflow-y: auto;
}

.assign-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
    font-size: 0.875rem;
}

.assign-list__item:hover {
    border-color: var(--color-primary-400);
    background: var(--color-primary-50);
}

.assign-list__name {
    flex: 1;
    font-weight: 500;
    color: var(--color-neutral-800);
}

.assign-list__role {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
}

.assign-list__item i {
    color: var(--color-primary-500);
    font-size: 1rem;
}

/* ── Grid View (Professional x Day) ─────── */

.schedule-grid-view {
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.schedule-grid-view__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-neutral-100);
    background-color: var(--color-neutral-50);
}

.schedule-grid-view__header h3 {
    margin-bottom: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-neutral-800);
}

.grid-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.grid-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.grid-table thead th {
    padding: var(--space-2) var(--space-1);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    border-bottom: 2px solid var(--color-neutral-200);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--color-neutral-50);
    z-index: 1;
}

.grid-table__name-col {
    text-align: left !important;
    position: sticky;
    left: 0;
    z-index: 2 !important;
    background: var(--color-neutral-50) !important;
    min-width: 140px;
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
    border-right: 2px solid var(--color-neutral-200);
}

.grid-table__day-col {
    min-width: 44px;
}

.grid-table tbody tr {
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background-color 0.15s;
}

.grid-table tbody tr:hover {
    background-color: var(--color-neutral-50);
}

.grid-table__name-cell {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    padding: var(--space-2) var(--space-3);
    font-weight: 500;
    color: var(--color-neutral-800);
    white-space: nowrap;
    border-right: 2px solid var(--color-neutral-200);
}

.grid-table tbody tr:hover .grid-table__name-cell {
    background: var(--color-neutral-50);
}

.grid-table__day-cell {
    padding: var(--space-1);
    text-align: center;
    vertical-align: middle;
}

.grid-cell--weekend {
    background-color: var(--color-neutral-50) !important;
}

.grid-cell-pill {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    color: #fff;
    white-space: nowrap;
    line-height: 1.4;
}

.grid-row--highlighted {
    background-color: var(--color-primary-50) !important;
}

.grid-row--highlighted .grid-table__name-cell {
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary-800);
    font-weight: 700;
}

.grid-row--dimmed {
    opacity: 0.4;
}

/* ── Grid View Responsive ───────────────── */

@media (max-width: 768px) {
    .schedule-header__filter {
        width: 100%;
        min-width: unset;
    }

    .schedule-view-toggle {
        width: 100%;
        justify-content: center;
    }

    .grid-table__name-col,
    .grid-table__name-cell {
        min-width: 100px;
    }

    .grid-table__day-col {
        min-width: 36px;
    }

    .grid-cell-pill {
        font-size: 0.5rem;
        padding: 0 2px;
    }
}

/* ══════════════════════════════════════════
   WEEK VIEW
   ══════════════════════════════════════════ */

.schedule-week-wrapper {
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* ── Week header ──────────────────────── */

.week-header {
    display: grid;
    grid-template-columns: 64px repeat(7, 1fr);
    background-color: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
}

.week-header__gutter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-400);
}

.week-header__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2) var(--space-1);
    cursor: pointer;
    transition: background-color 0.15s;
    gap: 2px;
}

.week-header__day:hover {
    background-color: var(--color-primary-50);
}

.week-header__day--weekend {
    color: var(--color-neutral-400);
}

.week-header__day--today {
    background-color: var(--color-primary-50);
}

.week-header__dow {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: inherit;
}

.week-header__num {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-neutral-700);
}

.week-header__num--today {
    background-color: var(--color-primary-600);
    color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.week-header__holiday {
    color: var(--color-error-500);
    font-size: 0.625rem;
}

/* ── Week body (time rows) ─────────────── */

.week-body {
    display: flex;
    flex-direction: column;
}

.week-row {
    display: grid;
    grid-template-columns: 64px repeat(7, 1fr);
    min-height: 100px;
    border-bottom: 1px solid var(--color-neutral-100);
}

.week-row:last-child {
    border-bottom: none;
}

.week-time-gutter {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--space-2);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-400);
    border-right: 1px solid var(--color-neutral-200);
    background-color: var(--color-neutral-50);
}

.week-cell {
    padding: var(--space-1);
    border-right: 1px solid var(--color-neutral-100);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 100px;
}

.week-cell:last-child {
    border-right: none;
}

.week-cell--weekend {
    background-color: var(--color-neutral-50);
}

.week-cell--holiday {
    background-color: var(--color-error-50);
}

.week-cell--today {
    background-color: var(--color-primary-50);
}

/* ── Week slot (shift block) ──────────── */

.week-slot {
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    color: #fff;
    font-size: 0.6875rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    overflow: hidden;
}

.week-slot__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

.week-slot__name {
    font-weight: 700;
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-slot__count {
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.25);
    white-space: nowrap;
}

.week-slot__count--ok {
    background: rgba(255,255,255,0.35);
}

.week-slot__count--under {
    background: rgba(255,0,0,0.3);
}

.week-slot__time {
    font-size: 0.5625rem;
    opacity: 0.85;
}

.week-slot__person {
    font-size: 0.5625rem;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-slot__person--highlighted {
    opacity: 1;
    font-weight: 700;
    text-decoration: underline;
}

.week-slot__person--dimmed {
    opacity: 0.35;
}

.week-slot__add {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(255,255,255,0.3);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    font-size: 0.625rem;
    padding: 1px 4px;
    line-height: 1;
    transition: background 0.15s;
}

.week-slot__add:hover {
    background: rgba(255,255,255,0.5);
}

/* ══════════════════════════════════════════
   DAY VIEW
   ══════════════════════════════════════════ */

.schedule-day-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.day-view-header {
    padding: var(--space-3) 0;
}

.day-view-header__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-neutral-800);
    text-transform: capitalize;
    margin: 0;
}

.day-view-header__holiday {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-error-600);
    background-color: var(--color-error-50);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.day-view-header__weekend {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-neutral-500);
    background-color: var(--color-neutral-100);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* ── Day view empty state ─────────────── */

.day-view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--color-neutral-400);
}

.day-view-empty i {
    font-size: 3rem;
}

/* ── Day slots list ───────────────────── */

.day-view-slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.day-slot {
    display: flex;
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-neutral-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
}

.day-slot:hover {
    box-shadow: var(--shadow-md);
}

.day-slot__color-bar {
    width: 5px;
    flex-shrink: 0;
}

.day-slot__content {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.day-slot__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.day-slot__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.day-slot__name {
    font-size: 1rem;
    font-weight: 700;
}

.day-slot__badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.day-slot__badge--ok {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
}

.day-slot__badge--under {
    background-color: var(--color-error-100);
    color: var(--color-error-700);
}

.day-slot__time {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
}

.day-slot__duration {
    color: var(--color-neutral-400);
}

/* ── Day slot team ────────────────────── */

.day-slot__team {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.day-slot__person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--color-neutral-50);
    border-radius: var(--radius-lg);
    transition: background-color 0.15s;
}

.day-slot__person:hover {
    background: var(--color-neutral-100);
}

.day-slot__person--me {
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
}

.day-slot__person--me:hover {
    background: var(--color-primary-100);
}

.day-slot__person--highlighted {
    background: var(--color-primary-100);
    outline: 2px solid var(--color-primary-400);
    outline-offset: -1px;
}

.day-slot__person--dimmed {
    opacity: 0.35;
}

.day-slot__person-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-neutral-700);
}

.day-slot__person-info i {
    font-size: 1.25rem;
    color: var(--color-neutral-400);
}

.day-slot__person-name {
    font-weight: 500;
}

.day-slot__me-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-600);
    background: var(--color-primary-100);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-1);
}

.day-slot__person-actions {
    display: flex;
    gap: var(--space-1);
}

.day-slot__empty-team {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    color: var(--color-neutral-400);
    font-size: 0.8125rem;
    font-style: italic;
}

.day-slot__add-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--color-primary-300);
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    justify-content: center;
}

.day-slot__add-btn:hover {
    background: var(--color-primary-100);
    border-color: var(--color-primary-400);
}

/* ── Week/Day Responsive ───────────────── */

@media (max-width: 768px) {
    .week-header {
        grid-template-columns: 48px repeat(7, 1fr);
    }

    .week-row {
        grid-template-columns: 48px repeat(7, 1fr);
        min-height: 80px;
    }

    .week-time-gutter {
        font-size: 0.625rem;
    }

    .week-slot__name {
        font-size: 0.5625rem;
    }

    .week-slot__person {
        display: none;
    }

    .week-header__num {
        font-size: 1rem;
    }

    .week-header__num--today {
        width: 26px;
        height: 26px;
    }

    .day-slot__content {
        padding: var(--space-2) var(--space-3);
    }

    .day-slot__title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .day-slot__person {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .day-slot__person-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── Feedback Modal ──────────────────────── */

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.feedback-page-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    margin: 0;
}

.feedback-page-name i {
    font-size: 1rem;
}

.feedback-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-1);
    display: block;
}

.feedback-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.feedback-stars {
    display: flex;
    gap: var(--space-2);
}

.feedback-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    font-size: 1.75rem;
    color: var(--color-neutral-300);
    transition: color 0.15s, transform 0.15s;
}

.feedback-star:hover {
    transform: scale(1.15);
}

.feedback-star--active {
    color: var(--color-warning-500);
}

.feedback-star:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.feedback-rating-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary-600);
}

.feedback-message textarea {
    resize: vertical;
    min-height: 60px;
    font-size: 0.8125rem;
}

.feedback-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-error-600);
}

.feedback-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) 0;
    text-align: center;
}

.feedback-success i {
    font-size: 3rem;
    color: var(--color-success-500);
}

.feedback-success p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-neutral-700);
    margin: 0;
}