/* ============================================================
   Design Tokens — Single source of truth
   Load this before all other stylesheets.
   ============================================================ */

:root {
    /* ─── Brand / Primary (Indigo) ─── */
    --color-primary:            #4f46e5;
    --color-primary-dark:       #4338ca;
    --color-primary-darker:     #3730a3;
    --color-primary-light:      #eef2ff;
    --color-primary-border:     #c7d2fe;
    --color-primary-rgb:        79, 70, 229;

    /* ─── Semantic: Success ─── */
    --color-success:            #10b981;
    --color-success-dark:       #059669;
    --color-success-light:      #ecfdf5;
    --color-success-border:     #a7f3d0;
    --color-success-text:       #065f46;

    /* ─── Semantic: Danger ─── */
    --color-danger:             #ef4444;
    --color-danger-dark:        #dc2626;
    --color-danger-light:       #fef2f2;
    --color-danger-border:      #fecaca;
    --color-danger-text:        #991b1b;

    /* ─── Semantic: Warning ─── */
    --color-warning:            #f59e0b;
    --color-warning-dark:       #d97706;
    --color-warning-light:      #fffbeb;
    --color-warning-border:     #fde68a;
    --color-warning-text:       #92400e;

    /* ─── Neutrals (Slate scale) ─── */
    --color-slate-900:          #0f172a;
    --color-slate-800:          #1e293b;
    --color-slate-700:          #334155;
    --color-slate-600:          #475569;
    --color-slate-500:          #64748b;
    --color-slate-400:          #94a3b8;
    --color-slate-300:          #cbd5e1;
    --color-slate-200:          #e2e8f0;
    --color-slate-100:          #f1f5f9;
    --color-slate-50:           #f8fafc;

    /* ─── Semantic Surface Aliases ─── */
    --color-text-primary:       var(--color-slate-900);
    --color-text-secondary:     var(--color-slate-600);
    --color-text-muted:         var(--color-slate-500);
    --color-text-light:         var(--color-slate-400);
    --color-text-inverse:       #ffffff;

    --color-bg-page:            var(--color-slate-100);
    --color-bg-card:            #ffffff;
    --color-bg-input:           var(--color-slate-50);
    --color-bg-input-alt:       var(--color-slate-100);
    --color-bg-table-header:    var(--color-slate-800);
    --color-bg-table-stripe:    var(--color-slate-50);
    --color-bg-table-hover:     var(--color-primary-light);

    --color-border:             var(--color-slate-200);
    --color-border-alt:         var(--color-slate-300);
    --color-navbar-border:      rgba(255, 255, 255, 0.08);

    /* ─── Button Colors ─── */
    --color-btn-neutral:        var(--color-slate-800);
    --color-btn-neutral-hover:  var(--color-slate-700);
    --color-btn-primary:        var(--color-primary);
    --color-btn-primary-hover:  var(--color-primary-dark);
    --color-btn-success:        var(--color-success);
    --color-btn-success-hover:  var(--color-success-dark);
    --color-btn-danger:         var(--color-danger);
    --color-btn-danger-hover:   var(--color-danger-dark);

    /* ─── Feedback ─── */
    --color-focus-ring:         var(--color-primary);
    --color-error:              var(--color-danger);
    --color-error-bg:           var(--color-danger-light);
    --color-error-border:       var(--color-danger-border);
    --color-error-text:         var(--color-danger-text);
    --color-success-bg:         var(--color-success-light);

    /* ─── Spacing Scale (4px base) ─── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-navbar-offset: 80px;

    /* ─── Border Radius ─── */
    --radius-sm:     4px;
    --radius-md:     6px;
    --radius-lg:     10px;
    --radius-xl:     16px;
    --radius-2xl:    24px;
    --radius-pill:   9999px;
    --radius-circle: 50%;

    /* ─── Shadows (refined elevation scale) ─── */
    --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl:       0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-table:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-dropdown: 0 10px 20px rgba(0, 0, 0, 0.10), 0 3px 6px rgba(0, 0, 0, 0.07);
    --shadow-fab:      0 4px 12px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.12);

    /* ─── Typography ─── */
    --font-family-base: 'Inter', 'Noto Sans SC', system-ui, -apple-system, Arial, sans-serif;
    --font-size-xs:     0.75rem;
    --font-size-sm:     0.875rem;
    --font-size-base:   1rem;
    --font-size-lg:     1.125rem;
    --font-size-xl:     1.25rem;
    --font-size-2xl:    1.5rem;
    --line-height-base: 1.6;

    /* ─── Transitions ─── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.35s ease;
}

/* ============================================================
   Global Reset — defined once here, not repeated per file
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family-base);
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* ============================================================
   Utility: Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background-color: var(--color-btn-primary); color: #fff; }
.btn-primary:hover { background-color: var(--color-btn-primary-hover); box-shadow: var(--shadow-md); }

.btn-success { background-color: var(--color-btn-success); color: #fff; }
.btn-success:hover { background-color: var(--color-btn-success-hover); box-shadow: var(--shadow-md); }

.btn-danger { background-color: var(--color-btn-danger); color: #fff; }
.btn-danger:hover { background-color: var(--color-btn-danger-hover); box-shadow: var(--shadow-md); }

.btn-neutral { background-color: var(--color-btn-neutral); color: #fff; }
.btn-neutral:hover { background-color: var(--color-btn-neutral-hover); box-shadow: var(--shadow-md); }

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

.btn:disabled,
button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: var(--radius-circle);
    animation: btn-spin 0.6s linear infinite;
}

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

/* ============================================================
   Utility: Alerts
   ============================================================ */
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.5;
}

.alert-success {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}

.alert-error {
    background-color: var(--color-danger-light);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}

/* ============================================================
   Utility: Badges
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge-success {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.badge-danger {
    background-color: var(--color-danger-light);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

.badge-neutral {
    background-color: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-200);
}

.badge-primary {
    background-color: var(--color-primary-light);
    color: var(--color-primary-darker);
    border: 1px solid var(--color-primary-border);
}

.badge-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    flex: none;
}

/* ============================================================
   Utility: Status tags (multi-dimension schedule status)
   One tag renders as a full .badge; multiple tags render as
   colour dots only (identical row footprint), expanding to the
   full badge list on hover/focus. See partials/status-tags.
   ============================================================ */
.status-tags {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    cursor: default;
}

.tag-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.tag-dot-primary { background: var(--color-primary); }
.tag-dot-warning { background: var(--color-warning); }
.tag-dot-success { background: var(--color-success); }
.tag-dot-danger  { background: var(--color-danger); }
.tag-dot-neutral { background: var(--color-slate-400); }

.status-tags .tag-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    white-space: nowrap;
    z-index: 60;
}

.status-tags:hover .tag-popover,
.status-tags:focus .tag-popover {
    display: inline-flex;
}

/* ============================================================
   Utility: Avatar chips (deterministic colour per name/initial)
   ============================================================ */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    flex: none;
    line-height: 1;
}

.avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }
.avatar-md { width: 34px; height: 34px; font-size: 12.5px; }

.avatar-1 { background: #f59e0b; } .avatar-2 { background: #ec4899; }
.avatar-3 { background: #10b981; } .avatar-4 { background: #8b5cf6; }
.avatar-5 { background: #3b82f6; } .avatar-6 { background: #ef4444; }
.avatar-7 { background: #14b8a6; } .avatar-8 { background: #a855f7; }
.avatar-9 { background: #6366f1; } .avatar-0 { background: #0891b2; }

/* ============================================================
   Utility: Icon buttons (compact action buttons for tables)
   ============================================================ */
.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    font-size: var(--font-size-sm);
}

.icon-btn:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary-border);
}

.icon-btn-danger:hover {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}

/* ============================================================
   Utility: Stat cards (summary strips on list pages)
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    width: 100%;
}

.stat-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-xs);
}

.stat-card .stat-lbl {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.stat-card .stat-val {
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.stat-card .stat-val.positive { color: var(--color-success-dark); }
.stat-card .stat-val.negative { color: var(--color-danger); }