/* ══════════════════════════════════════════════════
   RideOps Theme — Design System
   ══════════════════════════════════════════════════ */

/* ── Section 1: CSS Custom Properties ── */
:root {
  /* RideOps Platform Defaults */
  --color-primary:        #4682B4;
  --color-primary-dark:   #36648B;
  --color-primary-light:  #B0C4DE;
  --color-primary-rgb:    70, 130, 180;
  --color-accent:         #D2B48C;
  --color-accent-dark:    #C4A067;
  --color-primary-subtle: #EEF3F8;
  --color-secondary:      #D2B48C;
  --color-secondary-rgb:  210, 180, 140;
  --color-secondary-text: #4B3A2A;

  /* Sidebar — overridable per campus theme */
  --color-sidebar-bg:     #1E2B3A;
  --color-sidebar-text:   #94A3B8;
  --color-sidebar-active: #4682B4;
  --color-sidebar-hover:  rgba(255,255,255,0.06);
  --color-sidebar-border: rgba(255,255,255,0.08);

  /* Surfaces */
  --color-page-bg:        #F8FAFB;
  --color-header-bg:      #EEF3F8;
  --color-surface:        #FFFFFF;
  --color-surface-dim:    #F3F4F6;
  --color-surface-hover:  #F9FAFB;
  --color-border:         #E5E7EB;
  --color-border-light:   #F3F4F6;

  /* Text */
  --color-text:           #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted:     #9CA3AF;

  /* Status — semantic, universal, NEVER overridden by tenant */
  --status-pending:       #94A3B8;
  --status-approved:      #3B82F6;
  --status-scheduled:     #6366F1;
  --status-on-the-way:    #F59E0B;
  --status-grace:         #06B6D4;
  --status-completed:     #10B981;
  --status-no-show:       #EF4444;
  --status-denied:        #EF4444;
  --status-cancelled:     #6B7280;
  --color-warning:        #FBBF24;
  --color-warning-dark:   #F97316;

  /* Layout */
  --sidebar-width:        220px;
  --sidebar-collapsed:    56px;
  --header-height:        56px;
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-pill:          9999px;
  --shadow-sm:            0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:            0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:            0 8px 32px rgba(0,0,0,0.12);
}

/* ── Section 2: Base styles ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--color-page-bg);
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* ── Section 3: CRITICAL — Panel visibility ── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.sub-panel { display: none; }
.sub-panel.active { display: block; }

/* ── Section 4: Status badges ── */
.status-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; text-transform: lowercase; }
.status-badge--pending { background: var(--status-pending); }
.status-badge--approved { background: var(--status-approved); }
.status-badge--scheduled { background: var(--status-scheduled); }
.status-badge--on_the_way, .status-badge--driver_on_the_way { background: var(--status-on-the-way); }
.status-badge--grace, .status-badge--driver_arrived_grace { background: var(--status-grace); }
.status-badge--completed { background: var(--status-completed); }
.status-badge--no_show { background: var(--status-no-show); }
.status-badge--denied { background: var(--status-denied); }
.status-badge--cancelled { background: var(--status-cancelled); }

/* ── Section 5: Shell layout ── */
.ro-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; transition: grid-template-columns 0.2s ease; }
.ro-shell.collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; }

/* ── Section 6: Sidebar ── */
.ro-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--color-sidebar-bg); color: var(--color-sidebar-text); display: flex; flex-direction: column; z-index: 50; overflow-y: auto; transition: width 0.2s ease; }
.ro-shell.collapsed .ro-sidebar { width: var(--sidebar-collapsed); }
.ro-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--color-sidebar-border); }
.ro-brand-icon { width: 32px; height: 32px; background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.ro-brand-text { overflow: hidden; white-space: nowrap; }
.ro-brand-text span { display: block; }
.ro-shell.collapsed .ro-brand-text { display: none; }
.ro-sidebar-toggle { background: none; border: none; color: var(--color-sidebar-text); cursor: pointer; margin-left: auto; padding: 4px; }
.ro-shell.collapsed .ro-sidebar-toggle i { transform: rotate(180deg); }
.ro-shell.collapsed .ro-sidebar-brand { padding: 12px 0; justify-content: center; gap: 0; }
.ro-shell.collapsed .ro-sidebar-toggle { display: none; }
.ro-shell.collapsed .ro-brand-icon { cursor: pointer; }
.ro-nav { flex: 1; padding: 8px 0; }
.ro-nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: var(--radius-sm); margin: 2px 8px; color: var(--color-sidebar-text); cursor: pointer; transition: background 0.15s, color 0.15s; font-size: 13px; font-weight: 500; background: transparent; border: none; width: calc(100% - 16px); text-align: left; }
.ro-nav-item:hover { background: var(--color-sidebar-hover); color: #E2E8F0; }
.ro-nav-item.active { background: var(--color-sidebar-active-bg, rgba(var(--color-primary-rgb),0.15)); color: var(--color-secondary, #fff); }
.ro-nav-item i { font-size: 18px; flex-shrink: 0; width: 20px; text-align: center; }
.ro-shell.collapsed .ro-nav-label { display: none; }
.ro-shell.collapsed .ro-nav-item { justify-content: center; padding: 8px; margin: 2px 4px; }
.ro-sidebar-footer { padding: 4px 0; border-top: 1px solid var(--color-sidebar-border); }
.ro-sidebar-footer-row { display: flex; align-items: center; justify-content: space-between; }
.ro-sidebar-footer-row .ro-nav-item { flex: 1; min-width: 0; margin: 2px 8px; }
.ro-sidebar-footer-actions { display: flex; gap: 2px; padding: 0 8px 0 0; flex-shrink: 0; }
.ro-sidebar-footer-actions button { background: none; border: none; color: var(--color-sidebar-text); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); font-size: 16px; }
.ro-sidebar-footer-actions button:hover { background: var(--color-sidebar-hover); color: #E2E8F0; }
.ro-shell.collapsed .ro-sidebar-footer-row { flex-direction: column; align-items: center; }
.ro-shell.collapsed .ro-sidebar-footer-row .ro-nav-item { margin: 2px 4px; width: auto; flex: none; }
.ro-shell.collapsed .ro-sidebar-footer-actions { flex-direction: column; align-items: center; padding: 0; }

/* ── Section 7: Content area ── */
.ro-main { grid-column: 2; min-height: 100vh; display: flex; flex-direction: column; }
.ro-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--color-border); background: var(--color-header-bg); position: sticky; top: 0; z-index: 10; }
.ro-header-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--color-primary-dark, var(--color-primary)); }
.ro-content { flex: 1; overflow-y: auto; padding-top: 24px; }

/* ── Section 8: KPI cards ── */
.kpi-bar { display: flex; gap: 12px; padding: 0; flex-wrap: wrap; }
.kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 16px; min-width: 100px; text-align: center; flex: 1; }
.kpi-card--primary { border-top: 3px solid var(--color-primary); }
.kpi-card--pending { border-top: 3px solid var(--status-pending); }
.kpi-card--progress { border-top: 3px solid var(--status-on-the-way); }
.kpi-card--completed { border-top: 3px solid var(--status-completed); }
.kpi-card__value { font-size: 28px; font-weight: 800; }
.kpi-card__label { font-size: 11px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* ── Section 9: Strip / inline row ── */
.strip-list { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.strip-row { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--color-border-light); font-size: 13px; cursor: pointer; transition: background 0.1s; }
.strip-row:hover { background: var(--color-surface-hover); }
.strip-row:last-child { border-bottom: none; }
.strip-row__actions { margin-left: auto; display: flex; gap: 6px; }

/* ── Section 10: Table ── */
.ro-table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.ro-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ro-table thead { background: var(--color-primary); }
.ro-table th { padding: 10px 12px; text-align: left; font-weight: 600; color: var(--color-secondary, #fff); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.ro-table td { padding: 10px 12px; }
.ro-table--sm th { padding: 6px 10px; font-size: 10px; }
.ro-table--sm td { padding: 6px 10px; font-size: 12px; }
.ro-table tbody tr { border-bottom: 1px solid var(--color-border-light); transition: background 0.1s; }
.ro-table tbody tr:hover { background: var(--color-surface-hover); cursor: pointer; }

/* ── Section 11: Buttons ── */
.ro-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; line-height: 1.4; font-family: inherit; }
.ro-btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.ro-btn--primary:hover { background: var(--color-primary-dark); }
.ro-btn--outline { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.ro-btn--outline:hover { background: var(--color-surface-hover); }
.ro-btn--danger { background: transparent; color: var(--status-no-show); border-color: var(--status-no-show); }
.ro-btn--danger:hover { background: rgba(239,68,68,0.05); }
.ro-btn--success { background: var(--status-completed); color: #fff; border-color: var(--status-completed); }
.ro-btn--success:hover { opacity: 0.9; }
.ro-btn--sm { padding: 4px 10px; font-size: 11px; }
.ro-btn--xs { padding: 2px 8px; font-size: 11px; }
.ro-btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.ro-btn--ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }
.ro-btn--lg { padding: 12px 24px; font-size: 14px; }
.ro-btn--full { width: 100%; justify-content: center; }
.ro-btn--action { height: 56px; font-size: 16px; font-weight: 700; border-radius: 10px; }
.ro-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Section 12: Drawer ── */
.ro-drawer { position: fixed; top: 0; right: -400px; bottom: 0; width: 400px; background: var(--color-surface); box-shadow: var(--shadow-lg); z-index: 100; transition: right 0.25s ease; overflow-y: auto; padding: 24px; }
.ro-drawer.open { right: 0; }
.ro-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.ro-drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* ── Section 13: Toast ── */
.ro-toast { position: fixed; bottom: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.ro-toast-item { background: var(--color-surface); border-radius: var(--radius-md); padding: 10px 16px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 8px; animation: toast-in 0.3s ease; }
.ro-toast-item--success { border-left: 4px solid var(--status-completed); }
.ro-toast-item--error { border-left: 4px solid var(--status-no-show); }
.ro-toast-item--info { border-left: 4px solid var(--color-primary); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Section 14: Modal ── */
.ro-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 150; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.ro-modal-overlay.open { opacity: 1; pointer-events: auto; }
.ro-modal { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; max-width: 420px; width: 90%; box-shadow: var(--shadow-lg); }
.ro-modal__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ro-modal__body { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 20px; line-height: 1.6; }
.ro-modal__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Section 15: Section headings ── */
.ro-section { padding: 0 24px 24px; }
.ro-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ro-section__title { font-size: 16px; font-weight: 700; color: var(--color-text); }
.ro-section__subtitle { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* ── Section 16: Tabs ── */
.ro-tabs { display: flex; border-bottom: 2px solid var(--color-border); padding: 0 24px; background: var(--color-surface); }
.ro-tab { padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-family: inherit; }
.ro-tab:hover { color: var(--color-text); }
.ro-tab.active { color: var(--color-primary); font-weight: 700; border-bottom-color: var(--color-primary); }

/* ── Section 17: Time grid ── */
.time-grid { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; background: var(--color-surface); position: relative; }
.time-grid__header { display: grid; border-bottom: 1px solid var(--color-border); }
.time-grid__time-label { padding: 8px; text-align: center; color: var(--color-text-muted); font-size: 11px; font-weight: 600; border-right: 1px solid rgba(var(--color-secondary-rgb, 210,180,140), 0.35); }
.time-grid__row { display: grid; border-bottom: 1px solid var(--color-border-light); min-height: 48px; position: relative; isolation: isolate; }
.time-grid__row:last-child { border-bottom: none; }
.time-grid__row--tardy { background: rgba(239, 68, 68, 0.05); }
.time-grid__row--tardy .time-grid__driver-dot { background: var(--status-no-show); }
.time-grid__row--tardy .time-grid__shift-band { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); }
.time-grid__driver { padding: 8px; font-weight: 700; color: var(--color-text); border-right: 1px solid var(--color-border); display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.time-grid__driver-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.time-grid__driver-dot--online { background: var(--status-completed); }
.time-grid__driver-dot--offline { background: var(--color-text-muted); }
.time-grid__shift-band { position: absolute; top: 4px; bottom: 4px; border-radius: var(--radius-sm); background: rgba(var(--color-secondary-rgb, 210,180,140), 0.18); border: 1px solid rgba(var(--color-secondary-rgb, 210,180,140), 0.45); z-index: 1; pointer-events: none; }
.time-grid__ride-strip { position: absolute; border-radius: 4px; padding: 3px 8px; font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 28px; display: flex; align-items: center; cursor: pointer; top: 50%; transform: translateY(-50%); transition: opacity 0.15s; z-index: 2; }
.time-grid__ride-strip:hover { opacity: 0.85; }
.time-grid__ride-strip[draggable="true"] { cursor: grab; }
.time-grid__ride-strip[draggable="true"]:active { cursor: grabbing; }
.time-grid__ride-strip--dragging { opacity: 0.35; outline: 2px dashed var(--color-primary); outline-offset: 1px; }
.time-grid__row--drop-ready { background: rgba(16, 185, 129, 0.04); }
.time-grid__row--drop-hover { background: rgba(16, 185, 129, 0.12); box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.4); }
.time-grid__separator { grid-column: 1 / -1; padding: 6px 16px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); border-bottom: 1px dashed var(--color-border); text-transform: uppercase; letter-spacing: 0.5px; }
.time-grid__now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #EA4335; z-index: 10; pointer-events: none; }
.time-grid__now-line::before { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; background: #EA4335; border-radius: 50%; }

/* ── Tardiness indicators ── */
.tardy-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; background: rgba(239, 68, 68, 0.1); color: var(--status-no-show); white-space: nowrap; margin-left: 4px; }
.tardy-badge i { font-size: 11px; }
.tardy-badge--warning { background: rgba(245, 158, 11, 0.1); color: var(--status-on-the-way); }
.kpi-card--tardy { border-top: 3px solid var(--status-no-show); }
.punctuality-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.punctuality-dot--good { background: var(--status-completed); }
.punctuality-dot--warning { background: var(--status-on-the-way); }
.punctuality-dot--poor { background: var(--status-no-show); }

/* ── Section 18: Bottom tab bar (mobile) ── */
.ro-bottom-tabs { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--color-surface); border-top: 1px solid var(--color-border); display: flex; z-index: 50; }
.ro-bottom-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--color-text-muted); background: none; border: none; cursor: pointer; font-family: inherit; }
.ro-bottom-tab.active { color: var(--color-primary); }
.ro-bottom-tab i { font-size: 20px; }

/* ── Section 19: Grace timer ── */
.grace-timer { display: flex; flex-direction: column; align-items: center; padding: 32px; }
.grace-timer__circle { width: 160px; height: 160px; position: relative; }
.grace-timer__circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.grace-timer__circle circle.bg { fill: none; stroke: var(--color-border); stroke-width: 8; }
.grace-timer__circle circle.progress { fill: none; stroke: var(--status-grace); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.grace-timer__time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; color: var(--color-text); }
.grace-timer__label { font-size: 14px; color: var(--color-text-secondary); margin-top: 16px; text-align: center; }

/* ── Section 20: Form inputs ── */
.ro-input, .ro-select { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--color-surface); color: var(--color-text); transition: border-color 0.15s; }
.ro-input:focus, .ro-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1); }
.ro-input::placeholder { color: var(--color-text-muted); }
.ro-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; }

/* ── Section 20b: Custom checkboxes ── */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  vertical-align: middle;
}
input[type="checkbox"]:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.08);
}
input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Section 21: Empty state ── */
.ro-empty { text-align: center; padding: 48px 24px; color: var(--color-text-muted); }
.ro-empty i { font-size: 40px; margin-bottom: 12px; display: block; }
.ro-empty__title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--color-text-secondary); }
.ro-empty__message { font-size: 12px; }

/* ── Section 22: Utility classes ── */
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.hidden { display: none !important; }

/* ── Section 23: Filter pills ── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 24px; align-items: center; }
.filter-pill { padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.filter-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-pill.active { background: var(--color-primary); color: var(--color-secondary, #fff); border-color: var(--color-primary); }

/* ── Section 24: Step indicator (booking flow) ── */
.step-indicator { display: flex; justify-content: center; gap: 8px; padding: 16px; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: background 0.2s; }
.step-dot.active { background: var(--color-primary); }
.step-dot.completed { background: var(--status-completed); }

/* ── Section 25: Employee bar ── */
.employee-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.emp-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: 12px; transition: box-shadow 0.15s; }
.emp-chip.active { border-color: var(--color-secondary, var(--status-completed)); box-shadow: inset 0 0 0 1px var(--color-secondary, var(--status-completed)); background: rgba(var(--color-secondary-rgb, 210,180,140), 0.08); }
.emp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); flex-shrink: 0; }
.emp-dot.active { background: var(--status-completed); }
.emp-name { font-weight: 600; cursor: pointer; }
.emp-name:hover { text-decoration: underline; }
.emp-status-label { font-size: 11px; color: var(--color-text-muted); }
.emp-status-label.clocked-in { color: var(--status-completed); }
.emp-status-label.clocked-out { color: var(--color-text-muted); }
.emp-action-btn { padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); margin-left: auto; }
.emp-action-btn.clock-in { border-color: var(--color-primary); color: var(--color-primary); }
.emp-action-btn.clock-out { border-color: var(--status-no-show); color: var(--status-no-show); }
.emp-action-btn:hover { opacity: 0.8; }

/* ── Section 26: Vehicle cards ── */
.vehicles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.vehicle-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: border-color 0.15s; }
.vehicle-card:hover { border-color: var(--color-primary); }
.vehicle-card.maintenance-overdue { border-color: var(--status-on-the-way); }
.vehicle-card.vehicle-retired { opacity: 0.6; }
.vehicle-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.vehicle-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.maintenance-alert { font-size: 11px; color: var(--status-on-the-way); font-weight: 600; margin-top: 6px; padding: 4px 8px; background: rgba(245,158,11,0.08); border-radius: var(--radius-sm); }
.retired-badge { font-size: 10px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-text-muted); color: #fff; font-weight: 600; }
.vehicle-section-divider { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; padding: 4px 0; }
.vehicle-section-divider::before, .vehicle-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.vehicle-section-divider span { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.maint-timeline { list-style: none; padding: 0; margin: 0; }
.maint-timeline__item { padding: 12px 0; border-bottom: 1px solid var(--color-border-light); }
.maint-timeline__item:last-child { border-bottom: none; }
.maint-timeline__date { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.maint-timeline__notes { font-size: 13px; margin-top: 4px; }
.maint-timeline__meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ── Section 27: Bar chart ── */
.bar-chart { display: flex; flex-direction: column; gap: 6px; }
.bar-chart-row { display: flex; align-items: center; gap: 8px; }
.bar-chart-label { width: 60px; font-size: 11px; color: var(--color-text-secondary); text-align: right; flex-shrink: 0; }
.bar-chart-track { flex: 1; height: 20px; background: var(--color-border-light); border-radius: var(--radius-sm); overflow: hidden; }
.bar-chart-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-sm); transition: width 0.3s ease; }
.bar-chart-fill.gold { background: var(--color-accent-dark); }
.bar-chart-fill.green { background: var(--status-completed); }
.bar-chart-fill.red { background: var(--status-no-show); }
.bar-chart-fill.orange { background: var(--status-on-the-way); }
.bar-chart-count { width: 40px; font-size: 11px; font-weight: 700; color: var(--color-text); }
.bar-chart-row:hover { background: var(--color-surface-hover); border-radius: var(--radius-sm); cursor: default; }
.chart-ylabel { writing-mode: vertical-lr; transform: rotate(180deg); font-size: 11px; color: var(--color-text-muted); padding-right: 8px; display: flex; align-items: center; }

/* ── Section 28: Hotspot list ── */
.hotspot-list { display: flex; flex-direction: column; gap: 6px; }
.hotspot-item { display: flex; align-items: center; gap: 8px; }
.hotspot-rank { width: 28px; font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-align: center; flex-shrink: 0; }
.hotspot-name { width: 200px; font-size: 12px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.hotspot-bar { flex: 1; height: 16px; background: var(--color-border-light); border-radius: var(--radius-sm); overflow: hidden; }
.hotspot-bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-sm); transition: width 0.3s ease; }
.hotspot-bar-fill.darkgold { background: var(--color-accent-dark); }
.hotspot-bar-fill.gold { background: var(--color-accent); }
.hotspot-count { width: 40px; font-size: 11px; font-weight: 700; color: var(--color-text); text-align: right; }
.hotspot-item:hover { background: var(--color-surface-hover); border-radius: var(--radius-sm); cursor: default; }

/* Chart tooltip */
.chart-tooltip {
  position: fixed;
  padding: 6px 10px;
  background: var(--color-sidebar-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: var(--shadow-md);
}
.chart-tooltip.visible { opacity: 1; }

/* ── Section 29: Milestones ── */
.milestone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.milestone-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; }
.milestone-name { font-size: 14px; font-weight: 700; }
.milestone-count { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.milestone-badges { display: flex; gap: 3px; flex-wrap: nowrap; margin-top: 6px; overflow-x: auto; }
.milestone-badge { font-size: 10px; padding: 1px 5px; border-radius: var(--radius-pill); background: var(--color-border-light); color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.milestone-badge.earned { background: var(--color-accent); color: var(--color-text); }
.progress-bar-track { height: 6px; background: var(--color-border-light); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width 0.6s ease-out; }
.progress-label { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

/* ── Section 30: History items ── */
.history-date-header { font-size: 13px; font-weight: 700; color: var(--color-text); padding: 12px 0 6px; border-bottom: 1px solid var(--color-border-light); margin-bottom: 6px; }
.history-group-summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.history-group-count { background: var(--color-primary-subtle); color: var(--color-primary); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); }
.history-group-toggle { background: none; border: none; color: var(--color-primary); font-size: 11px; font-weight: 600; cursor: pointer; padding: 2px 6px; }
.history-group-toggle:hover { text-decoration: underline; }
.history-group-rides { display: none; padding-left: 16px; }
.history-group-rides.expanded { display: block; }

/* ── Section 31: Contact pills ── */
.contact-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; transition: all 0.15s; cursor: pointer; }
.contact-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.contact-pill .icon { font-size: 13px; }
.contact-row { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.contact-inline { display: inline-flex; gap: 6px; margin-left: 8px; }

/* ── Section 32: Loader ── */
.loader { display: flex; flex-direction: column; align-items: center; padding: 32px; gap: 12px; }
.loader-spinner { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loader-text { font-size: 13px; color: var(--color-text-muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Section 33: Alert ── */
.alert { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; background: rgba(239,68,68,0.08); color: var(--status-no-show); margin-top: 4px; }
.admin-warning-banner { padding: 6px 10px; border-radius: var(--radius-sm); font-size: 11px; background: rgba(245,158,11,0.1); color: var(--status-on-the-way); margin-bottom: 6px; }

/* ── Section 34: Clickable names ── */
.clickable-name { cursor: pointer; font-weight: 600; }
.clickable-name:hover { text-decoration: underline; color: var(--color-primary); }

/* ── Section 35: Ride helpers ── */
.ride-hint { font-size: 11px; color: var(--status-on-the-way); font-weight: 600; margin-top: 2px; }
.ride-actions-compact { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.ride-needs-action { border-left: 3px solid var(--status-on-the-way); }
.ride-assigned { border-left: 3px solid var(--status-scheduled); }
.ride-in-transit { border-left: 3px solid var(--status-grace); }
.ride-driver-prominent { color: var(--color-primary); font-weight: 700; }
.ride-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* ── Section 36: Kebab menu ── */
.kebab-menu-wrapper { position: relative; display: inline-block; }
.kebab-btn { background: none; border: none; cursor: pointer; padding: 4px; color: var(--color-text-muted); border-radius: var(--radius-sm); }
.kebab-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.kebab-dropdown { position: absolute; right: 0; top: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 160px; z-index: 60; display: none; overflow: hidden; }
.kebab-dropdown.open { display: block; }
.kebab-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 12px; font-family: inherit; color: var(--color-text); }
.kebab-dropdown button:hover { background: var(--color-surface-hover); }
.kebab-dropdown .delete-option { color: var(--status-no-show); }
.kebab-dropdown .delete-option:hover { background: rgba(239,68,68,0.05); }

/* ── Section 37: Schedule grid ── */
.day-schedule { display: flex; flex-direction: column; }
.schedule-row { display: flex; border-bottom: 1px solid var(--color-border-light); min-height: 32px; }
.schedule-row .time-label { width: 60px; font-size: 11px; color: var(--color-text-muted); padding: 6px 8px; flex-shrink: 0; text-align: right; }
.schedule-row .slots { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px; align-items: center; }
.schedule-slot { padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; }
.schedule-slot.shift { background: var(--color-primary-subtle); color: var(--color-primary-dark); }
.schedule-slot.ride { background: rgba(245,158,11,0.1); color: var(--status-on-the-way); }
.schedule-legend { display: flex; gap: 16px; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-muted); }
.legend-color { width: 12px; height: 12px; border-radius: 3px; }
.legend-color.shift { background: var(--color-primary-subtle); border: 1px solid var(--color-primary); }
.legend-color.ride { background: rgba(245,158,11,0.1); border: 1px solid var(--status-on-the-way); }
.grid-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.grid-table th, .grid-table td { border: 1px solid var(--color-border); padding: 4px 6px; text-align: center; }
.grid-table th { background: var(--color-surface-hover); font-weight: 600; font-size: 11px; color: var(--color-text-secondary); }
.grid-table td { vertical-align: top; }
.grid-table .time-col { width: 60px; font-size: 11px; color: var(--color-text-muted); }
.cell-stack { display: flex; flex-direction: column; gap: 2px; }
.weekly-table-wrapper { overflow-x: auto; }
.ride-chip { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 2px 6px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; margin: 1px 0; }
.ride-chip.status-pending { background: rgba(148,163,184,0.15); color: var(--status-pending); }
.ride-chip.status-approved { background: rgba(59,130,246,0.1); color: var(--status-approved); }
.ride-chip.status-scheduled { background: rgba(99,102,241,0.1); color: var(--status-scheduled); }
.ride-chip.status-driver_on_the_way { background: rgba(245,158,11,0.1); color: var(--status-on-the-way); }
.ride-chip.status-driver_arrived_grace { background: rgba(6,182,212,0.1); color: var(--status-grace); }
.ride-chip.status-completed { background: rgba(16,185,129,0.1); color: var(--status-completed); }
.ride-chip.status-no_show { background: rgba(239,68,68,0.1); color: var(--status-no-show); }
.ride-chip .time { font-size: 9px; color: var(--color-text-muted); }

/* ── Section 38: Shift popover + context menu ── */
.shift-popover {
  position: fixed;
  width: 300px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 160;
  animation: popover-in 0.15s ease;
}
@keyframes popover-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.shift-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--color-border-light);
}
.shift-popover__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.shift-popover__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px;
  font-size: 16px;
  line-height: 1;
}
.shift-popover__close:hover { color: var(--color-text); }
.shift-popover__body {
  padding: 10px 14px;
}
.shift-popover__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.shift-popover__row i {
  font-size: 15px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.shift-popover__notes-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 8px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shift-popover__notes {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
  color: var(--color-text);
  background: var(--color-surface);
}
.shift-popover__notes:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
}
.shift-popover__footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--color-border-light);
}
.shift-popover__btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.shift-popover__btn--danger {
  background: none;
  color: var(--status-no-show);
}
.shift-popover__btn--danger:hover {
  background: rgba(239, 68, 68, 0.08);
}
.shift-popover__btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.shift-popover__btn--primary:hover {
  background: var(--color-primary-dark);
}

/* Context menu */
.shift-context-menu {
  position: fixed;
  min-width: 170px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 170;
  padding: 4px 0;
  animation: popover-in 0.1s ease;
}
.shift-context-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.shift-context-menu__item:hover {
  background: var(--color-surface-hover);
}
.shift-context-menu__item i {
  font-size: 15px;
  color: var(--color-text-muted);
}
.shift-context-menu__item--danger {
  color: var(--status-no-show);
}
.shift-context-menu__item--danger i {
  color: var(--status-no-show);
}
.shift-context-menu__item--danger:hover {
  background: rgba(239, 68, 68, 0.06);
}

/* ── Section 39: Semester / Wrapped ── */
.semester-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.semester-period h4 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.semester-stat { display: inline-flex; flex-direction: column; margin-right: 20px; margin-bottom: 8px; }
.semester-stat .stat-value { font-size: 24px; font-weight: 800; color: var(--color-text); }
.semester-stat .stat-label { font-size: 11px; color: var(--color-text-muted); }
.ro-wrapped { padding: 16px; background: var(--color-primary-subtle); border-radius: var(--radius-md); }

/* ── Section 40: Status legend (analytics) ── */

/* ── Section 41: KPI analytics colors ── */
.kpi-card--good { border-top: 3px solid var(--status-completed); }
.kpi-card--warning { border-top: 3px solid var(--status-on-the-way); }
.kpi-card--danger { border-top: 3px solid var(--status-no-show); }
.kpi-card--neutral { border-top: 3px solid var(--color-border); }
.kpi-value { font-size: 22px; font-weight: 800; }
.kpi-label { font-size: 11px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* ── Section 42: Drawer internal sections ── */
.drawer-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.drawer-section { margin-bottom: 20px; }
.drawer-section-title { font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.drawer-field { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--color-border-light); font-size: 13px; }
.drawer-field-label { color: var(--color-text-muted); }
.drawer-field-value { font-weight: 600; }
.drawer-divider { border: none; border-top: 1px solid var(--color-border); margin: 16px 0; }
.drawer-danger-zone { padding: 12px; border: 1px solid var(--status-no-show); border-radius: var(--radius-md); background: rgba(239,68,68,0.03); }
.drawer-noshows-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 16px; }
.drawer-noshows-banner.noshows-clear { background: rgba(16,185,129,0.08); }
.drawer-noshows-banner.noshows-warn { background: rgba(245,158,11,0.08); }
.drawer-noshows-banner.noshows-critical { background: rgba(239,68,68,0.08); }
.drawer-noshows-count { font-size: 24px; font-weight: 800; }
.drawer-noshows-label { font-size: 12px; color: var(--color-text-secondary); }

/* ── Section 43: Drawer form inputs ── */
.drawer-section label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
.drawer-section input, .drawer-section select, .drawer-section textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; margin-top: 4px; }
.drawer-section input:focus, .drawer-section select:focus, .drawer-section textarea:focus { outline: none; border-color: var(--color-primary); }

/* ── Section 44: Profile ── */
.profile-block { margin-bottom: 16px; }
.profile-block strong { font-size: 16px; }

/* ── Section 45: Role badges ── */
.role-badge { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.role-badge.role-office { background: rgba(99,102,241,0.1); color: var(--status-scheduled); }
.role-badge.role-driver { background: rgba(16,185,129,0.1); color: var(--status-completed); }
.role-badge.role-rider { background: rgba(59,130,246,0.1); color: var(--status-approved); }

/* ── Section 46: Admin user table helpers ── */
.admin-name-primary { font-weight: 600; }
.admin-name-secondary { font-size: 11px; color: var(--color-text-muted); }
.admin-chevron { font-size: 16px; color: var(--color-text-muted); }

/* ── Section 47: Email status ── */
.email-status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.email-status-badge.active { background: rgba(16,185,129,0.1); color: var(--status-completed); }
.email-status-badge.inactive { background: rgba(245,158,11,0.1); color: var(--status-on-the-way); }

/* ── Section 48: Form grid ── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.field-group { display: flex; flex-direction: column; }

/* ── Section 49: Reassign select ── */
.reassign-select { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12px; font-family: inherit; background: var(--color-surface); }

/* ── Section 50: Modal overlay (legacy compat) ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 150; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-overlay.hiding { opacity: 0; pointer-events: none; }
.modal-box { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; max-width: 420px; width: 90%; box-shadow: var(--shadow-lg); }
.modal-box h3, .modal-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.modal-box p, .modal-message { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 16px; line-height: 1.6; }
.modal-box label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
.modal-box input, .modal-box select, .modal-box textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; margin-top: 4px; }
.modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus { outline: none; border-color: var(--color-primary); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── Section 51: Legacy button compat ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; line-height: 1.4; font-family: inherit; background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn:hover { background: var(--color-surface-hover); }
.btn.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn.primary:hover { background: var(--color-primary-dark); }
.btn.secondary { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn.danger { background: transparent; color: var(--status-no-show); border-color: var(--status-no-show); }
.btn.danger:hover { background: rgba(239,68,68,0.05); }
.btn.success { background: var(--status-completed); color: #fff; border-color: var(--status-completed); }
.btn.success:hover { opacity: 0.9; }
.btn.small { padding: 4px 10px; font-size: 11px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Section 52: Legacy status tag ── */
.status-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.status-tag.pending { background: var(--status-pending); }
.status-tag.approved { background: var(--status-approved); }
.status-tag.scheduled { background: var(--status-scheduled); }
.status-tag.driver_on_the_way { background: var(--status-on-the-way); }
.status-tag.driver_arrived_grace { background: var(--status-grace); }
.status-tag.completed { background: var(--status-completed); }
.status-tag.no_show { background: var(--status-no-show); }
.status-tag.denied { background: var(--status-denied); }
.status-tag.cancelled { background: var(--status-cancelled); }

/* ── Section 53: Legacy layout helpers ── */
.flex-row { display: flex; align-items: center; }
.small-text { font-size: 12px; color: var(--color-text-muted); }
.item { padding: 10px 16px; border-bottom: 1px solid var(--color-border-light); font-size: 13px; position: relative; }
.item:last-child { border-bottom: none; }
.item .kebab-menu-wrapper { position: absolute; top: 10px; right: 16px; }
.driver-card { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--color-border-light); cursor: pointer; transition: background 0.1s; }
.driver-card:hover { background: var(--color-surface-hover); }
.driver-card.selected { background: var(--color-primary-subtle); }
.driver-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.driver-status-dot.active { background: var(--status-completed); }
.driver-status-dot.inactive { background: var(--color-text-muted); }
.driver-card-name { font-weight: 600; cursor: pointer; }
.driver-card-info { font-size: 12px; color: var(--color-text-secondary); }

/* ── Section 54: Toast compat (old utils.js) ── */
.toast { position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; z-index: 200; transition: bottom 0.3s ease; box-shadow: var(--shadow-md); max-width: 400px; }
.toast.show { bottom: 24px; }
.toast-success { background: var(--status-completed); color: #fff; }
.toast-error { background: var(--status-no-show); color: #fff; }
.toast-warning { background: var(--status-on-the-way); color: #fff; }
.toast-info { background: var(--color-primary); color: #fff; }

/* ── Section 55: Empty state (old utils.js) ── */
.empty-state { text-align: center; padding: 32px; color: var(--color-text-muted); }
.empty-icon { font-size: 40px; margin-bottom: 8px; }
.empty-title { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin: 0 0 4px; }
.empty-message { font-size: 12px; margin: 0 0 12px; }

/* ── Section 56: Responsive — Tier 2 (tablet: 481–767px) ── */
@media (max-width: 767px) {
  /* Force sidebar to icon-only mode */
  .ro-shell {
    grid-template-columns: var(--sidebar-collapsed) 1fr;
  }
  .ro-sidebar {
    width: var(--sidebar-collapsed);
  }
  .ro-nav-label { display: none; }
  .ro-brand-text { display: none; }
  .ro-sidebar-toggle { display: none; }
  .ro-nav-item { justify-content: center; padding: 8px; margin: 2px 4px; }
  .ro-shell.collapsed .ro-sidebar,
  .ro-shell:not(.collapsed) .ro-sidebar {
    width: var(--sidebar-collapsed);
  }

  /* KPI bar wraps 2x2 */
  .kpi-bar { flex-wrap: wrap; }
  .kpi-card { min-width: calc(50% - 16px); flex: 1 1 calc(50% - 16px); }

  /* Tables scroll horizontally */
  .ro-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Header adjusts */
  .ro-header { padding: 0 12px; }
  .ro-header-title { font-size: 14px; }

  /* Section padding tightens */
  .ro-section { padding: 0 12px 16px; }
  .filter-bar { padding: 12px; }

  /* Dispatch grid scrolls horizontally */
  .time-grid { overflow-x: auto; }

  /* Drawer goes full-width */
  .ro-drawer { width: 100%; right: -100%; }
}

/* ── Notification Bell & Items ── */

.notif-bell {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 20px;
  color: var(--color-text-secondary);
  transition: color 0.15s;
}
.notif-bell:hover { color: var(--color-text); }

.notif-badge {
  position: absolute;
  top: 0;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--status-no-show, #EF4444);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: none;
}
.notif-badge.visible { display: block; }

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg-subtle, rgba(0,0,0,0.02)); }

.notif-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-muted, #F3F4F6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}

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

.notif-item__title {
  font-size: 13px;
  color: var(--color-text);
  margin: 0 0 2px;
}

.notif-item__body {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item__time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.notif-item--unread .notif-item__title { font-weight: 700; }
.notif-item--unread .notif-item__icon { background: var(--color-primary-bg, #EFF6FF); color: var(--color-primary); }

.notif-item--read { opacity: 0.65; }

.notif-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ══════════════════════════════════════════════════
   Tardiness Analytics — Enhanced Charts
   ══════════════════════════════════════════════════ */

/* ── KPI Ring Gauge ── */
.kpi-ring {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}
.kpi-ring__inner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

/* ── Tardiness 2-col grid ── */
.tardiness-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .tardiness-grid { grid-template-columns: 1fr; }
}

/* ── Donut Chart (CSS conic-gradient) ── */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
}
@media (max-width: 560px) {
  .donut-wrap { flex-direction: column; align-items: flex-start; }
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: default;
  transition: background 0.15s;
}
.donut-legend-item:hover {
  background: var(--color-surface-hover);
}
.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-legend-label {
  font-size: 12px;
  color: var(--color-text);
  flex: 1;
}
.donut-legend-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}
.donut-legend-pct {
  font-size: 11px;
  color: var(--color-text-muted);
  width: 36px;
  text-align: right;
}

/* ── SVG Area Chart ── */
.area-chart-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
}
.area-chart-wrap svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.area-chart-wrap .area-fill {
  transition: opacity 0.15s;
}
.area-chart-wrap .area-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.area-chart-wrap .area-dot {
  transition: r 0.15s, opacity 0.15s;
  cursor: default;
}
.area-chart-wrap .grid-line {
  stroke: var(--color-border-light);
  stroke-width: 1;
}
.area-chart-wrap .axis-label {
  font-size: 10px;
  fill: var(--color-text-muted);
  font-family: inherit;
}
.area-chart-wrap .crosshair {
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 3,3;
  opacity: 0;
  transition: opacity 0.1s;
}
.area-chart-wrap:hover .crosshair {
  opacity: 1;
}

/* ── Column Chart ── */
.col-chart-wrap { position: relative; width: 100%; }
.col-chart-wrap svg { display: block; width: 100%; }
.col-bar { transition: opacity 0.15s; cursor: default; }
.col-bar:hover { opacity: 0.8; }

/* ── Stacked Bar ── */
.stacked-bar__track { display: flex; height: 28px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-border-light); }
.stacked-bar__seg { transition: opacity 0.15s, filter 0.15s; cursor: default; min-width: 2px; }
.stacked-bar__seg:hover { filter: brightness(1.1); }
.stacked-bar__track:hover .stacked-bar__seg:not(:hover) { opacity: 0.5; }
.stacked-bar__legend { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.stacked-bar__legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: default; padding: 3px 6px; border-radius: var(--radius-sm); transition: background 0.15s; }
.stacked-bar__legend-item:hover { background: var(--color-surface-hover); }
.stacked-bar__legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.stacked-bar__legend-value { font-weight: 600; }
.stacked-bar__legend-pct { font-size: 11px; color: var(--color-text-muted); }

/* ── SVG Donut ── */
.donut-svg-wrap { position: relative; width: 160px; height: 160px; flex-shrink: 0; }
.donut-svg-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-seg { transition: opacity 0.15s; cursor: default; }
.donut-seg:hover { opacity: 0.7; }

/* ── Delta Badges ── */
.delta { font-size: 12px; font-weight: 600; margin-left: 6px; }
.delta--up { color: var(--status-completed); }
.delta--down { color: var(--status-no-show); }
.delta i { font-size: 12px; margin-right: 2px; }

/* ── Wrapped 2×2 Grid ── */
.wrapped-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .wrapped-grid { grid-template-columns: 1fr; } }
.wrapped-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; text-align: center; }
.wrapped-card__icon { font-size: 24px; color: var(--color-primary); margin-bottom: 6px; }
.wrapped-card__value { font-size: 24px; font-weight: 800; color: var(--color-text); }
.wrapped-card__label { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Milestone icon ── */
.milestone-badge i { font-size: 13px; vertical-align: -1px; }

/* ── Analytics Date Bar ── */
.analytics-date-bar {
  padding: 8px 24px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface);
}

/* ── Analytics Card Grid ── */
.analytics-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 24px 24px;
}
.analytics-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.analytics-card--wide { grid-column: 1 / -1; }
.analytics-card--kpi {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.analytics-card__header {
  background: var(--color-primary);
  color: var(--color-secondary);
  padding: 10px 16px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.analytics-card__header h4,
.analytics-card__title {
  color: inherit;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.analytics-card__title i { margin-right: 4px; color: inherit; opacity: 0.8; }
.analytics-card__header .csv-export-icon { color: var(--color-secondary); opacity: 0.7; background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1; transition: opacity 0.15s; }
.analytics-card__header .csv-export-icon:hover { opacity: 1; }
.csv-export-icon { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1; transition: color 0.15s, background 0.15s; }
.csv-export-icon:hover { color: var(--color-primary); background: rgba(var(--color-primary-rgb),0.08); }
.analytics-card__body { padding: 12px 16px 16px; }
@media (max-width: 768px) {
  .analytics-card-grid { grid-template-columns: 1fr; }
  .analytics-card--wide { grid-column: 1; }
  .analytics-date-bar { padding: 8px 12px; }
}

/* ── Widget Dashboard System ── */
.widget-toolbar-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
}
.widget-toolbar-bar #widget-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 24px 24px;
}

.widget-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.widget-card--large { grid-column: 1 / -1; }
.widget-card--medium { /* default, spans 1 column */ }
.widget-card--small { /* compact single column */ }
.widget-card--small .widget-card__header { padding: 6px 12px; font-size: 12px; }
.widget-card--small .widget-card__body { padding: 8px 12px 12px; }
.widget-card--small .widget-card__title { font-size: 12px; }
.widget-card--small .widget-card__title i { font-size: 13px; }

.widget-card__header {
  background: var(--color-primary);
  color: var(--color-secondary);
  padding: 10px 16px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.widget-card__title {
  color: inherit;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}
.widget-card__title i { margin-right: 4px; color: inherit; opacity: 0.8; }
.widget-card__body { padding: 12px 16px 16px; }

/* Drag handle and action buttons — hidden by default, shown in edit mode */
.widget-card__drag-handle {
  display: none;
  cursor: grab;
  color: inherit;
  opacity: 0.6;
  font-size: 16px;
  padding: 0 2px;
}
.widget-card__drag-handle:active { cursor: grabbing; }

.widget-card__actions {
  display: none;
  align-items: center;
  gap: 4px;
}
.widget-action {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: opacity 0.15s;
}
.widget-action:hover { opacity: 1; }

/* Edit mode: show controls */
.widget-grid--editing .widget-card__drag-handle,
.widget-grid--editing .widget-card__actions {
  display: flex;
}
.widget-grid--editing .widget-card {
  box-shadow: 0 0 0 1px var(--color-primary-light);
}

/* SortableJS ghost/drag states */
.sortable-ghost {
  opacity: 0.4;
  background: var(--color-primary-subtle);
}
.sortable-drag {
  box-shadow: var(--shadow-lg);
}

/* Widget Library Items */
.widget-library-group__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  padding: 12px 0 6px;
}
.widget-library-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: var(--color-surface);
  transition: border-color 0.15s;
}
.widget-library-item:hover {
  border-color: var(--color-primary-light);
}
.widget-library-item__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-size: 16px;
  flex-shrink: 0;
}
.widget-library-item__info { flex: 1; min-width: 0; }
.widget-library-item__name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.widget-library-item__desc { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.3; }
.widget-library-item__size {
  display: inline-block;
  font-size: 10px;
  color: var(--color-text-muted);
  background: var(--color-surface-dim, #f0f0f0);
  padding: 1px 6px;
  border-radius: var(--radius-pill, 999px);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.widget-library-item__add { flex-shrink: 0; align-self: center; }

@media (max-width: 768px) {
  .widget-grid { grid-template-columns: 1fr; padding: 0 12px 16px; }
  .widget-card--large { grid-column: 1; }
  .widget-toolbar-bar { padding: 8px 12px; }
}
@media print {
  .widget-toolbar-bar { display: none !important; }
  .widget-card { break-inside: avoid; page-break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
}

/* ── OD Matrix ── */
.od-matrix { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 11px; }
.od-matrix th { padding: 4px 6px; font-weight: 600; color: var(--color-text-secondary); font-size: 10px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-matrix .od-row-header { text-align: right; padding-right: 8px; font-weight: 600; color: var(--color-text-secondary); font-size: 10px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-matrix .od-cell { text-align: center; padding: 6px 4px; border-radius: 3px; font-weight: 600; cursor: default; transition: outline 0.15s, transform 0.15s; min-width: 32px; }
.od-matrix .od-cell:hover { outline: 2px solid var(--color-primary); transform: scale(1.05); z-index: 1; position: relative; }
.od-matrix .od-cell--empty { color: var(--color-text-muted); font-weight: 400; }
.od-matrix-note { font-size: 10px; color: var(--color-text-muted); margin-top: 8px; text-align: right; }

/* ── Enhanced Driver Table ── */
.ontime-bar-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ontime-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-border-light);
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}
.ontime-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ontime-bar-label {
  font-size: 12px;
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}

/* ── Section 26: Profile Cards ── */

.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.profile-card--compact {
  padding: 8px;
  gap: 10px;
}

.profile-card--hero {
  flex-direction: column;
  text-align: center;
  padding: 24px;
  gap: 8px;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--color-primary);
}

.profile-avatar--lg {
  width: 72px;
  height: 72px;
  font-size: 24px;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}

.profile-detail {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.profile-bio {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0;
}

.avatar-option {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  background: var(--color-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.avatar-option:hover {
  border-color: var(--color-border);
  transform: scale(1.05);
}

.avatar-option.selected {
  border-color: var(--color-primary);
}

.avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  width: 100%;
  margin-top: 8px;
}

.avatar-upload-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Table Toolbar (bottom bar with filter/export/add) ── */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-top: 1px solid var(--color-border-light); }
.table-toolbar__count { font-size: 12px; color: var(--color-text-muted); }
.table-toolbar__actions { display: flex; align-items: center; gap: 4px; }
.table-toolbar__btn { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 16px; transition: color 0.15s, background 0.15s; }
.table-toolbar__btn:hover { color: var(--color-primary); background: rgba(var(--color-primary-rgb),0.08); }
.table-toolbar__btn--add { color: var(--color-primary); }
.table-toolbar__btn--active { color: var(--color-primary); background: rgba(var(--color-primary-rgb),0.1); }
.role-filter-dropdown { position: absolute; bottom: 100%; right: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 4px 0; min-width: 120px; z-index: 50; }
.role-filter-dropdown button { display: block; width: 100%; text-align: left; padding: 6px 14px; background: none; border: none; font-size: 13px; color: var(--color-text); cursor: pointer; font-family: inherit; }
.role-filter-dropdown button:hover { background: var(--color-bg-hover); }
.role-filter-dropdown button.selected { color: var(--color-primary); font-weight: 600; }

/* ── FullCalendar Tenant Theming ── */

/* Nav buttons: week / day / today / prev arrow / next arrow */
.fc .fc-button-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary-dark, #36648B) !important;
  color: var(--color-secondary, #fff) !important;
  font-weight: 600 !important;
}
.fc .fc-button-primary:hover {
  background-color: var(--color-primary-dark, #36648B) !important;
  border-color: var(--color-primary-dark, #36648B) !important;
  color: var(--color-secondary, #fff) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--color-primary-dark, #36648B) !important;
  color: var(--color-secondary, #fff) !important;
}

/* Column headers (DOW M/DD): secondary background, secondary-text for contrast */
.fc .fc-col-header-cell {
  background: var(--color-secondary, #D2B48C) !important;
}
.fc .fc-col-header-cell-cushion {
  color: var(--color-secondary-text, var(--color-primary)) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  text-decoration: none !important;
}
.fc .fc-col-header-cell-cushion:hover {
  color: var(--color-secondary-text, var(--color-primary)) !important;
  text-decoration: none !important;
}

/* Today column: subtle secondary tint */
.fc .fc-day-today {
  background: rgba(var(--color-secondary-rgb, 210,180,140), 0.07) !important;
}

/* Toolbar title */
.fc .fc-toolbar-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}

/* Event chips: primary bg, secondary text */
.fc-event {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary-dark, #36648B) !important;
}
.fc-event .fc-event-title,
.fc-event .fc-event-time {
  color: var(--color-secondary, #fff) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* Column slot borders: subtle secondary tint */
.fc .fc-timegrid-col {
  border-color: rgba(var(--color-secondary-rgb, 210,180,140), 0.2) !important;
}

/* ── Quill Rich Text Editor ── */
.ql-toolbar.ql-snow {
  border-color: var(--color-border) !important;
  background: var(--color-surface-hover);
  font-family: inherit !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.ql-container.ql-snow {
  border-color: var(--color-border) !important;
  font-family: inherit !important;
  font-size: 14px !important;
}
.ql-editor { min-height: 280px; line-height: 1.8; }
.ql-editor p, .ql-editor li { line-height: 1.8; }
.ql-editor h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.ql-toolbar .ql-stroke { stroke: var(--color-text-secondary) !important; }
.ql-toolbar .ql-fill  { fill: var(--color-text-secondary) !important; }
.ql-toolbar button:hover .ql-stroke { stroke: var(--color-primary) !important; }
.ql-toolbar button.ql-active .ql-stroke { stroke: var(--color-primary) !important; }
.ql-toolbar button.ql-active .ql-fill  { fill: var(--color-primary) !important; }
.ql-snow .ql-picker-label { color: var(--color-text-secondary) !important; }

/* ── View Toggle ── */
.ro-view-toggle__btn {
  background: var(--color-surface);
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px;
  transition: all 0.15s;
}
.ro-view-toggle__btn:hover { color: var(--color-text); }
.ro-view-toggle__btn.active {
  background: var(--color-primary);
  color: #fff;
}

/* ── Analytics Quick-Select ── */
.analytics-quick-select {
  display: flex;
  gap: 4px;
}
.analytics-quick-select button.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ── Sortable table styles ── */
.ro-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.ro-table th[data-sort]:hover {
  color: var(--color-primary);
}

/* ── Analytics Skeleton Loading ── */
.analytics-skeleton {
  background: var(--color-surface-dim, #f3f4f6);
  border-radius: 8px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.analytics-skeleton__bar {
  background: var(--color-border);
  border-radius: 4px;
  height: 16px;
  margin: 8px 0;
}
.analytics-skeleton__bar--short { width: 40%; }
.analytics-skeleton__bar--medium { width: 65%; }
.analytics-skeleton__bar--long { width: 85%; }
.analytics-skeleton__bar--full { width: 100%; }

/* ── Sortable table header indicators ── */
.ro-table th.sortable-header {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.ro-table th.sortable-header:hover {
  color: var(--color-primary);
}
.ro-table th.sortable-header::after {
  content: '\2195';
  margin-left: 4px;
  opacity: 0.3;
  font-size: 10px;
}
.ro-table th.sortable-header[data-sort-dir="asc"]::after {
  content: '\2191';
  opacity: 0.8;
}
.ro-table th.sortable-header[data-sort-dir="desc"]::after {
  content: '\2193';
  opacity: 0.8;
}
.ro-table th.sortable-header[data-sort-dir] {
  color: var(--color-primary);
}

/* ── Analytics Print Styles ── */
@media print {
  .ro-sidebar, .demo-banner, .ro-header, .ro-nav-item,
  .analytics-date-bar, .analytics-quick-select,
  .ro-tabs, .ro-btn { display: none !important; }
  .tab-panel, .sub-panel { display: block !important; }
  .analytics-card { break-inside: avoid; page-break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
  main, .ro-main { margin: 0 !important; padding: 0 !important; }
  .ro-shell { display: block !important; }
}