/* ============================================================
   BloodBridge Design System — CSS Custom Properties
   ============================================================ */

:root {
    /* ── Brand Colors ── */
    --red-primary: #C0392B;
    --red-dark: #96281B;
    --red-light: #F5B7B1;
    --teal-primary: #1A7A8A;
    --teal-dark: #145F6E;
    --teal-light: #D1F2EB;
    --navy: #1B2A4A;
    --navy-light: #243656;

    /* ── Status Colors ── */
    --green: #27AE60;
    --amber: #F39C12;
    --red-badge: #E74C3C;
    --grey-status: #95A5A6;

    /* ── Neutrals ── */
    --white: #FFFFFF;
    --grey-50: #F8F9FA;
    --grey-100: #F1F3F5;
    --grey-300: #DEE2E6;
    --grey-600: #6C757D;
    --grey-900: #212529;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
    --shadow-glow-red: 0 0 20px rgba(192,57,43,0.3);
    --shadow-glow-teal: 0 0 20px rgba(26,122,138,0.3);

    /* ── Motion ── */
    --ease-out: cubic-bezier(0.16,1,0.3,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    --ease-bounce: cubic-bezier(0.34,1.56,0.64,1); /* Bouncy hover */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ── Typography ── */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Outfit', 'Inter', sans-serif;

    /* ── Font Sizes ── */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* ── Font Weights ── */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ── Spacing ── */
    --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;
    --space-16: 4rem;

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

    /* ── Layout ── */
    --sidebar-width: 220px;
    --content-max-width: 1200px;
    --header-height: 60px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--grey-900);
    background: var(--grey-50);
    overflow-x: hidden;
    min-height: 100vh;
}

h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:var(--font-bold); line-height:1.25; color:var(--grey-900); }
h1 { font-size:var(--text-4xl); }
h2 { font-size:var(--text-2xl); }
h3 { font-size:var(--text-xl); }
h4 { font-size:var(--text-lg); }

p { color:var(--grey-600); line-height:1.7; }

a { color:var(--teal-primary); text-decoration:none; transition:color var(--duration-fast) var(--ease-out); }
a:hover { color:var(--teal-dark); }

img { max-width:100%; height:auto; display:block; }

button {
    font-family:var(--font-body);
    font-size:var(--text-base);
    cursor:pointer;
    border:none;
    outline:none;
    background:none;
    transition:all var(--duration-base) var(--ease-bounce);
}

input, select, textarea {
    font-family:var(--font-body);
    font-size:var(--text-base);
    border:1.5px solid var(--grey-300);
    border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);
    background:var(--white);
    color:var(--grey-900);
    outline:none;
    width:100%;
    transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

input:focus, select:focus, textarea:focus {
    border-color:var(--teal-primary);
    box-shadow:0 2px 8px rgba(26,122,138,0.15);
}

input::placeholder, textarea::placeholder { color:var(--grey-600); opacity:0.6; }

select {
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C757D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:36px;
}

textarea { resize:vertical; min-height:80px; }
ul, ol { list-style:none; }

/* ── App Shell ── */
#app-shell { display:flex; min-height:100vh; position:relative; }
#app-shell.has-sidebar .app-main { margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); }
#app-shell.no-sidebar .sidebar { display:none; }
#app-shell.no-sidebar .app-main { margin-left:0; width:100%; }
.app-main { flex:1; min-height:100vh; position:relative; overflow-x:hidden; }

/* ── Utility ── */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.text-center { text-align:center; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:var(--space-2); }
.gap-3 { gap:var(--space-3); }
.gap-4 { gap:var(--space-4); }
.gap-6 { gap:var(--space-6); }
.w-full { width:100%; }
.relative { position:relative; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--grey-300); border-radius:var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background:var(--grey-600); }
* { scrollbar-width:thin; scrollbar-color:var(--grey-300) transparent; }

/* ============================================================
   Dark Mode
   ============================================================ */
body.dark-mode {
    --grey-50: #0f1117;
    --grey-100: #181a20;
    --grey-300: #2a2d35;
    --grey-600: #9ca3af;
    --grey-900: #f1f3f5;
    --white: #1a1d24;
    --navy: #0d1117;
    --navy-light: #161b22;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);

    color: #f1f3f5;
    background: #0f1117;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #f1f3f5;
}

body.dark-mode p {
    color: #9ca3af;
}

body.dark-mode a {
    color: #3ecfcf;
}
body.dark-mode a:hover {
    color: #5ee6e6;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: #1a1d24;
    border-color: #2a2d35;
    color: #f1f3f5;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #1A7A8A;
    box-shadow: 0 2px 8px rgba(26,122,138,0.25);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #6b7280;
}

/* Sidebar */
body.dark-mode .sidebar {
    background: #12151a;
    border-color: #1e2028;
}

body.dark-mode .sidebar-nav-item {
    color: #9ca3af;
}

body.dark-mode .sidebar-nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: #f1f3f5;
}

body.dark-mode .sidebar-nav-item.active {
    background: rgba(192,57,43,0.15);
    color: #e74c3c;
}

body.dark-mode .sidebar-logo .logo-text {
    color: #f1f3f5;
}

/* Top bar */
body.dark-mode .dash-topbar {
    background: #12151a;
    border-bottom-color: #1e2028;
}

body.dark-mode .dash-topbar-title {
    color: #f1f3f5;
}

body.dark-mode .dash-user-chip {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .dash-user-name {
    color: #f1f3f5;
}

body.dark-mode .date-display {
    color: #9ca3af;
}

/* Cards & Panels */
body.dark-mode .profile-banner {
    background: linear-gradient(135deg, #1a0a07 0%, #0d1117 100%) !important;
    color: #f1f3f5 !important;
}

body.dark-mode .profile-banner-name,
body.dark-mode .profile-banner-id,
body.dark-mode .profile-banner-details,
body.dark-mode .profile-banner-details .detail-item,
body.dark-mode .profile-banner-icon svg {
    color: #f1f3f5 !important;
}

body.dark-mode .inv-card {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .inv-card:hover {
    border-color: #3a3d45;
}

body.dark-mode .inv-card-group {
    color: #f1f3f5;
}

body.dark-mode .inv-card-units {
    color: #f1f3f5;
}

body.dark-mode .inv-card-label {
    color: #6b7280;
}

body.dark-mode .inv-card.critical {
    border-color: rgba(231,76,60,0.3);
    background: rgba(231,76,60,0.06);
}

body.dark-mode .inv-card.low-stock {
    border-color: rgba(243,156,18,0.3);
    background: rgba(243,156,18,0.06);
}

body.dark-mode .inv-card.sufficient {
    border-color: rgba(39,174,96,0.3);
    background: rgba(39,174,96,0.06);
}

/* Notifications */
body.dark-mode .notifications-panel {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .notif-item {
    border-bottom-color: #2a2d35;
}

body.dark-mode .notif-title {
    color: #f1f3f5;
}

body.dark-mode .notif-desc {
    color: #9ca3af;
}

/* Settings */
body.dark-mode .settings-section {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .settings-row {
    border-bottom-color: #2a2d35;
}

body.dark-mode .settings-row-label {
    color: #f1f3f5;
}

body.dark-mode .settings-row-desc {
    color: #9ca3af;
}

body.dark-mode .settings-title {
    color: #f1f3f5;
}

body.dark-mode .danger-zone {
    background: rgba(231,76,60,0.06);
    border-color: rgba(231,76,60,0.2);
}

/* Approvals */
body.dark-mode .approval-card {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .approval-code {
    color: #f1f3f5;
}

body.dark-mode .approval-hospital {
    color: #9ca3af;
}

body.dark-mode .tab-page-title {
    color: #f1f3f5;
}

body.dark-mode .tab-page-subtitle {
    color: #6b7280;
}

body.dark-mode .filter-pill {
    background: #1a1d24;
    border-color: #2a2d35;
    color: #9ca3af;
}

body.dark-mode .filter-pill.active {
    background: rgba(192,57,43,0.15);
    border-color: rgba(192,57,43,0.4);
    color: #e74c3c;
}

/* Footer */
body.dark-mode .bb-footer {
    background: #12151a;
    border-top-color: #1e2028;
    color: #6b7280;
}

body.dark-mode .bb-footer a {
    color: #9ca3af;
}

/* Quick Stats */
body.dark-mode .quick-stats {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .stat-card {
    background: #12151a;
}

body.dark-mode .stat-card-value {
    color: #f1f3f5;
}

body.dark-mode .stat-card-label {
    color: #6b7280;
}

/* Modal */
body.dark-mode .modal-content {
    background: #1a1d24;
    color: #f1f3f5;
}

/* Toast */
body.dark-mode .toast {
    background: #1a1d24;
    border-color: #2a2d35;
    color: #f1f3f5;
}

/* Misc panels */
body.dark-mode .recent-requests {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .recent-req-item {
    border-bottom-color: #2a2d35;
}

body.dark-mode .recent-req-bank {
    color: #9ca3af;
}

body.dark-mode .inventory-section {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .inventory-title {
    color: #f1f3f5;
}

body.dark-mode .inventory-subtitle {
    color: #6b7280;
}

body.dark-mode .chart-section {
    background: #1a1d24;
    border-color: #2a2d35;
}

/* Buttons */
body.dark-mode .btn-outline {
    border-color: #2a2d35;
    color: #9ca3af;
}

body.dark-mode .btn-outline:hover {
    background: rgba(255,255,255,0.05);
    border-color: #3a3d45;
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-thumb { background: #2a2d35; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #3a3d45; }

/* Demand card (hospital) */
body.dark-mode .demand-card {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .demand-card-title {
    color: #f1f3f5;
}

/* Illustration text */
body.dark-mode .illus-text {
    color: #6b7280;
}

/* Edit input in inventory */
body.dark-mode .inv-card-edit-input {
    background: #12151a;
    border-color: #3a3d45;
    color: #f1f3f5;
}

/* Alerts section (donor) */
body.dark-mode .alerts-section,
body.dark-mode .impact-section,
body.dark-mode .nearby-section,
body.dark-mode .eligibility-card {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .alert-card {
    background: #12151a;
    border-color: #2a2d35;
}

body.dark-mode .alert-card-title {
    color: #f1f3f5;
}

body.dark-mode .alert-card-desc {
    color: #c9d1d9;
}

body.dark-mode .alert-card-time {
    color: #9ca3af;
}

/* Donor welcome */
body.dark-mode .donor-welcome {
    background: linear-gradient(135deg, #1a0a07 0%, #0d1117 100%) !important;
    color: #f1f3f5 !important;
}

/* Map fallback */
body.dark-mode .map-fallback {
    background: #12151a;
    border-color: #2a2d35;
}

/* ── Hospital-specific dark mode ── */

/* Hospital main area */
body.dark-mode .hospital-main {
    background: #0d1117;
}

/* Registration form card */
body.dark-mode .reg-form-card {
    background: #1a1d24;
    box-shadow: none;
    border: 1px solid #2a2d35;
}

body.dark-mode .reg-form-header h2 {
    color: #f1f3f5;
}

body.dark-mode .reg-form-header p {
    color: #6b7280;
}

/* Dropdown panel */
body.dark-mode .dropdown-panel {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .dropdown-panel.open {
    border-color: #2a2d35;
}

body.dark-mode .dropdown-panel .dropdown-item {
    color: #f1f3f5;
    border-bottom-color: #2a2d35;
}

body.dark-mode .dropdown-panel .dropdown-item:hover {
    background: #12151a;
}

/* Entity list (hospital/blood bank list) */
body.dark-mode .entity-row {
    background: #1a1d24;
    color: #f1f3f5;
    border-color: #2a2d35;
}

body.dark-mode .entity-row-icon svg {
    color: #3ecfcf;
}

body.dark-mode .entity-row:hover {
    background: #12151a;
    border-color: #3a3d45;
}

body.dark-mode .entity-row-name {
    color: #f1f3f5;
}

body.dark-mode .entity-row-address {
    color: #6b7280;
}

/* Hospital dashboard layout */
body.dark-mode .hosp-dashboard {
    background: transparent;
}

/* Demand card */
body.dark-mode .demand-card-subtitle {
    color: #6b7280;
}

body.dark-mode .demand-row select,
body.dark-mode .demand-row input {
    background: #12151a;
    border-color: #2a2d35;
    color: #f1f3f5;
}

body.dark-mode .demand-row select option {
    background: #1a1d24;
    color: #f1f3f5;
}

/* Settings sections */
body.dark-mode .settings-section {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .settings-title {
    color: #f1f3f5;
}

body.dark-mode .settings-row {
    border-bottom-color: #2a2d35;
}

body.dark-mode .settings-row-label {
    color: #f1f3f5;
}

body.dark-mode .settings-row-desc {
    color: #6b7280;
}

body.dark-mode .danger-zone {
    background: rgba(231,76,60,0.05);
    border-color: rgba(231,76,60,0.15);
}

/* History cards */
body.dark-mode .history-card {
    background: #1a1d24;
    border-color: #2a2d35;
}

body.dark-mode .history-card:hover {
    background: #1e2128;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode .history-card-bg {
    background: rgba(192,57,43,0.15);
}

body.dark-mode .history-card-code {
    color: #f1f3f5;
}

body.dark-mode .history-card-meta {
    color: #6b7280;
}

/* Tab page */
body.dark-mode .tab-page-header span {
    color: #6b7280;
}

/* Recent requests in sidebar */
body.dark-mode .recent-req-item {
    border-bottom-color: #2a2d35;
    color: #f1f3f5;
}

body.dark-mode .recent-requests-header a {
    color: var(--teal-primary);
}

body.dark-mode .recent-requests-header h4 {
    color: #f1f3f5;
}

body.dark-mode .quick-stats-title {
    color: #f1f3f5;
}

body.dark-mode .stat-card {
    background: #12151a;
    border-color: #2a2d35;
}

/* Empty state */
body.dark-mode .empty-state h3 {
    color: #f1f3f5;
}

body.dark-mode .empty-state p {
    color: #6b7280;
}

/* Form elements in dark mode */
body.dark-mode .form-label {
    color: #f1f3f5;
}

body.dark-mode .form-error {
    color: var(--red-badge);
}