:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --primary: #1d4ed8;
  --primary-2: #dbeafe;
  --success: #047857;
  --success-bg: #d1fae5;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --shadow: 0 10px 30px rgba(15, 23, 42, .07);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: #0f172a; color: white; padding: 22px 16px; display: flex; flex-direction: column; }
.brand { display:flex; align-items:center; gap:12px; padding: 4px 8px 24px; }
.brand-mark { width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,#3b82f6,#1d4ed8); display:grid; place-items:center; font-weight:800; letter-spacing:-.04em; }
.brand-name { font-weight: 700; }
.brand-sub { color:#94a3b8; font-size:12px; margin-top:2px; }
.nav-list { display:grid; gap:7px; }
.nav-item { width:100%; border:0; background:transparent; color:#cbd5e1; padding:12px 14px; border-radius:12px; text-align:left; display:flex; align-items:center; gap:10px; font-weight:600; }
.nav-item:hover, .nav-item.active { background:#1e293b; color:#fff; }
.sidebar-footer { margin-top:auto; padding:12px 8px; }
.privacy-note { color:#94a3b8; font-size:11px; line-height:1.5; }
.privacy-note strong { color:#cbd5e1; }

.main { min-width:0; padding: 0 28px 80px; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar h1 { margin:0 0 3px; font-size:26px; letter-spacing:-.03em; }
.topbar-actions { display:flex; gap:10px; }
.btn { border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:12px; padding:10px 14px; font-weight:700; }
.btn:hover { filter:brightness(.98); }
.btn.primary { background:var(--primary); border-color:var(--primary); color:white; }
.btn.ghost { background:var(--surface); }
.btn.small { padding:8px 11px; font-size:13px; }
.btn.danger { background:var(--danger-bg); color:var(--danger); border-color:#fecaca; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.view { display:none; }
.active-view { display:block; }

.day-toolbar { padding:16px 18px; display:flex; align-items:end; justify-content:space-between; gap:16px; }
.date-control { display:grid; gap:6px; }
.date-control label { font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.date-control input, input, select, textarea { border:1px solid var(--border); background:white; border-radius:11px; padding:10px 12px; color:var(--ink); outline:none; }
input:focus, select:focus, textarea:focus { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.status-wrap { display:flex; align-items:center; gap:10px; }
.status-pill { font-size:12px; font-weight:800; padding:7px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.status-pill.draft { background:#e2e8f0; color:#475569; }
.status-pill.published { background:var(--primary-2); color:#1e40af; }
.status-pill.finalized { background:var(--success-bg); color:var(--success); }

.stats-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin:14px 0; }
.stat-card { padding:16px; }
.stat-label { color:var(--muted); font-size:12px; font-weight:700; }
.stat-value { font-size:27px; font-weight:800; margin-top:7px; letter-spacing:-.04em; }
.stat-sub { font-size:11px; color:var(--muted); margin-top:3px; }

.attention { padding:16px 18px; margin-bottom:14px; }
.attention-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.attention-head h3 { margin:0; font-size:15px; }
.attention-badge { font-size:12px; background:var(--warn-bg); color:var(--warn); border-radius:999px; padding:5px 9px; font-weight:800; }
.attention-list { display:flex; gap:8px; flex-wrap:wrap; }
.attention-item { border:1px solid #fde68a; background:#fffbeb; border-radius:11px; padding:8px 10px; font-size:12px; font-weight:700; }
.attention-empty { color:var(--success); font-weight:700; font-size:13px; }

.toolbar-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.segmented { display:inline-flex; background:#e9eef5; border-radius:12px; padding:4px; }
.seg { border:0; background:transparent; color:#475569; padding:8px 11px; border-radius:9px; font-weight:700; font-size:13px; }
.seg.active { background:white; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.08); }
.search-wrap input { min-width:260px; }
.route-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.route-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:15px; box-shadow:0 4px 15px rgba(15,23,42,.04); min-height:132px; display:flex; flex-direction:column; transition:.18s ease; }
.route-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.route-card.open { border-color:#fecaca; background:#fffdfd; }
.route-card.attention { border-color:#fde68a; }
.route-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.route-number { font-weight:800; font-size:17px; letter-spacing:-.02em; }
.route-state { font-size:11px; font-weight:800; color:var(--success); background:var(--success-bg); padding:5px 7px; border-radius:999px; }
.route-state.open { color:var(--danger); background:var(--danger-bg); }
.route-driver { margin-top:20px; font-weight:700; font-size:14px; }
.route-meta { color:var(--muted); font-size:11px; margin-top:4px; }
.route-actions { margin-top:auto; display:flex; gap:8px; padding-top:12px; }
.route-action { flex:1; border:1px solid var(--border); background:white; border-radius:9px; padding:8px; font-weight:700; font-size:12px; }
.route-action.primary { color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff; }

.section-toolbar { padding:18px; display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.section-toolbar h2 { margin:0 0 5px; font-size:20px; }
.section-toolbar p { margin:0; font-size:13px; }
.table-card { overflow:hidden; }
.table-toolbar { padding:14px; display:flex; gap:10px; border-bottom:1px solid var(--border); }
.table-toolbar input { flex:1; }
.table-scroll { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:820px; }
th, td { padding:13px 14px; border-bottom:1px solid var(--border); text-align:left; font-size:13px; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; background:#f8fafc; }
.employee-name { font-weight:700; }
.employee-sub { color:var(--muted); font-size:11px; margin-top:2px; }
.disposition { display:inline-flex; align-items:center; border-radius:999px; padding:5px 8px; font-size:11px; font-weight:800; }
.disposition.available { color:var(--success); background:var(--success-bg); }
.disposition.unavailable { color:var(--danger); background:var(--danger-bg); }
.icon-btn { border:1px solid var(--border); background:white; border-radius:9px; padding:7px 10px; font-weight:700; }

.archive-list { display:grid; gap:12px; }
.archive-card { padding:17px; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.archive-card h3 { margin:0 0 4px; font-size:15px; }
.archive-meta { font-size:12px; color:var(--muted); }
.archive-stats { display:flex; gap:15px; margin-top:10px; flex-wrap:wrap; }
.archive-stat { font-size:12px; font-weight:700; }
.empty-card { padding:28px; text-align:center; color:var(--muted); }

.settings-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; }
.settings-card { padding:18px; }
.settings-card:nth-child(3) { grid-column:1 / -1; }
.settings-card h2 { margin:0 0 5px; font-size:18px; }
.settings-card p { margin:0 0 14px; font-size:12px; }
.inline-form { display:flex; gap:8px; }
.inline-form input { flex:1; }
.chip-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.route-chip { display:flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:999px; padding:6px 9px; background:#f8fafc; font-size:12px; font-weight:700; }
.route-chip button { border:0; background:transparent; color:#94a3b8; padding:0; }
.legend-list { display:grid; gap:8px; }
.legend-row { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); padding:9px 0; font-size:12px; }
.legend-row:last-child { border:0; }
.legend-row strong { font-size:13px; }
.control-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.control-list div { border:1px solid var(--border); border-radius:13px; padding:13px; }
.control-list strong { display:block; font-size:13px; margin-bottom:5px; }
.control-list span { font-size:11px; color:var(--muted); line-height:1.45; }

.sheet-backdrop, .modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.44); z-index:50; }
.sheet { position:fixed; z-index:60; right:0; top:0; bottom:0; width:min(460px, 100%); background:white; box-shadow:-20px 0 50px rgba(15,23,42,.18); padding:22px; overflow:auto; }
.sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.sheet-head h2 { margin:0 0 3px; font-size:20px; }
.close-btn { border:0; background:#f1f5f9; width:36px; height:36px; border-radius:50%; font-size:18px; }
.driver-search { width:100%; margin-bottom:12px; }
.driver-list { display:grid; gap:8px; }
.driver-option { border:1px solid var(--border); background:white; border-radius:12px; padding:12px; text-align:left; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.driver-option:hover { border-color:#93c5fd; background:#f8fbff; }
.driver-option strong { display:block; font-size:13px; }
.driver-option span { color:var(--muted); font-size:11px; }
.driver-option.disabled { opacity:.55; cursor:not-allowed; }
.sheet-current { background:#f8fafc; border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:12px; }

.modal { position:fixed; z-index:70; left:50%; top:50%; transform:translate(-50%,-50%); width:min(620px, calc(100% - 28px)); max-height:90vh; overflow:auto; background:white; border-radius:20px; box-shadow:0 30px 80px rgba(15,23,42,.25); padding:20px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.modal-head h2 { margin:0; font-size:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-field { display:grid; gap:6px; }
.form-field.full { grid-column:1/-1; }
.form-field label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:800; }
.modal-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; }
.modal-actions-right { display:flex; gap:8px; }

.toast { position:fixed; z-index:100; bottom:24px; left:50%; transform:translateX(-50%); background:#0f172a; color:white; border-radius:11px; padding:10px 14px; font-size:13px; font-weight:700; box-shadow:var(--shadow); }
.mobile-nav { display:none; }

.share-view { min-height:100vh; background:#f8fafc; padding:24px; }
.share-wrap { max-width:980px; margin:0 auto; }
.share-header { background:#0f172a; color:white; border-radius:20px; padding:22px; margin-bottom:14px; }
.share-header h1 { margin:0 0 5px; font-size:24px; }
.share-header p { margin:0; color:#cbd5e1; font-size:12px; }
.share-route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.share-route { background:white; border:1px solid var(--border); border-radius:14px; padding:13px; }
.share-route strong { display:block; font-size:13px; margin-bottom:5px; }
.share-route span { color:var(--muted); font-size:12px; }
.share-footer { margin-top:18px; color:var(--muted); font-size:11px; text-align:center; }

@media (max-width: 1180px) {
  .route-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .control-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 880px) {
  .app-shell { display:block; }
  .sidebar { display:none; }
  .main { padding:0 16px 92px; }
  .topbar { height:78px; }
  .topbar h1 { font-size:22px; }
  .route-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-grid .stat-card:first-child { grid-column:span 2; }
  .toolbar-row { align-items:stretch; flex-direction:column; }
  .search-wrap input { min-width:0; width:100%; }
  .settings-grid { grid-template-columns:1fr; }
  .settings-card:nth-child(3) { grid-column:auto; }
  .mobile-nav { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--border); padding:8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right)); }
  .mobile-nav-item { border:0; background:transparent; color:var(--muted); padding:9px 5px; border-radius:9px; font-size:12px; font-weight:800; }
  .mobile-nav-item.active { color:var(--primary); background:#eff6ff; }
  .share-route-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .main { padding-left:12px; padding-right:12px; }
  .topbar-actions .btn.ghost { display:none; }
  .day-toolbar { align-items:stretch; flex-direction:column; }
  .status-wrap { justify-content:space-between; }
  .route-grid { grid-template-columns:1fr; }
  .route-card { min-height:120px; }
  .stats-grid { gap:8px; }
  .stat-card { padding:13px; }
  .stat-value { font-size:24px; }
  .segmented { width:100%; overflow:auto; }
  .seg { flex:1; }
  .section-toolbar { align-items:stretch; flex-direction:column; }
  .table-toolbar { flex-direction:column; }
  .form-grid { grid-template-columns:1fr; }
  .form-field.full { grid-column:auto; }
  .control-list { grid-template-columns:1fr; }
  .share-view { padding:12px; }
  .share-route-grid { grid-template-columns:1fr; }
}

/* v2 catalog, sorting and pagination additions */
.sort-header { border:0; background:transparent; color:inherit; padding:0; text-transform:inherit; letter-spacing:inherit; font-weight:inherit; cursor:pointer; white-space:nowrap; }
.sort-header:hover, .sort-header.active { color:var(--primary); }
.table-pagination { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--border); background:#fff; }
.pagination-summary, .page-label { color:var(--muted); font-size:12px; font-weight:600; }
.pagination-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pagination-controls label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:800; }
.pagination-controls select { padding:8px 9px; }
.btn:disabled { opacity:.48; cursor:not-allowed; }
.empty-table { padding:28px; text-align:center; color:var(--muted); }
.settings-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.settings-card-head p { margin-bottom:0; }
.catalog-list { display:grid; gap:2px; }
.catalog-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.catalog-row:last-child { border-bottom:0; }
.catalog-row strong { display:block; font-size:13px; }
.catalog-row .muted { font-size:11px; margin-top:3px; }
.catalog-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.danger-text { color:var(--danger); }
.locked-label { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.small-modal { width:min(500px, calc(100% - 28px)); }
.saas-card { grid-column:1 / -1; }
.micro-label { font-size:11px; }
.current-meta { font-size:11px; margin-top:3px; }

@media (max-width: 880px) {
  .saas-card { grid-column:auto; }
}
@media (max-width: 640px) {
  .table-pagination { align-items:stretch; flex-direction:column; }
  .pagination-controls { justify-content:space-between; }
  .settings-card-head { align-items:stretch; flex-direction:column; }
}
@media (min-width: 881px) {
  .settings-card:nth-child(3) { grid-column:auto; }
}

/* Supabase live application additions */
.loading-view { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--bg); }
.loading-card { display:grid; justify-items:center; gap:10px; color:var(--muted); }
.loading-card strong { color:var(--ink); font-size:18px; }
.brand-mark.large { width:54px; height:54px; border-radius:17px; color:white; font-size:18px; }
.auth-view { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 20% 10%, #dbeafe 0, transparent 33%), var(--bg); }
.auth-shell { width:min(470px,100%); display:grid; gap:20px; }
.auth-brand { display:flex; align-items:center; gap:14px; }
.auth-brand h1 { margin:0 0 4px; font-size:25px; letter-spacing:-.03em; }
.auth-brand p { margin:0; color:var(--muted); font-size:13px; }
.auth-card { padding:22px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; background:#eef2f7; border-radius:12px; padding:4px; margin-bottom:18px; }
.auth-tab { border:0; background:transparent; border-radius:9px; padding:9px; font-weight:800; color:var(--muted); }
.auth-tab.active { background:white; color:var(--ink); box-shadow:0 1px 4px rgba(15,23,42,.08); }
.auth-form { display:grid; gap:12px; }
.auth-form #signupFields { display:grid; gap:12px; }
.wide { width:100%; }
.auth-message { font-size:12px; line-height:1.5; border-radius:10px; padding:10px 12px; background:#eff6ff; color:#1e40af; }
.auth-message.error { background:var(--danger-bg); color:var(--danger); }
.account-actions { display:flex; align-items:center; gap:8px; }
.org-switcher { min-width:150px; max-width:220px; padding:8px 10px; font-size:12px; font-weight:700; }
.workspace-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.workspace-summary div { border:1px solid var(--border); border-radius:12px; padding:12px; }
.workspace-summary span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; font-weight:800; margin-bottom:5px; }
.workspace-summary strong { font-size:13px; }
.organization-card { grid-column:1 / -1; }
.loading-inline { padding:28px; text-align:center; color:var(--muted); }
.sheet-note { font-size:11px; color:var(--muted); margin:-3px 0 12px; line-height:1.45; }
.history-list { display:grid; gap:7px; margin-top:8px; }
.history-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; }
.history-row strong { display:block; font-size:12px; }
.history-row span { color:var(--muted); font-size:10px; }
.form-section { grid-column:1 / -1; border-top:1px solid var(--border); padding-top:14px; margin-top:3px; }
.form-section h3 { margin:0 0 3px; font-size:14px; }
.form-section p { margin:0 0 10px; color:var(--muted); font-size:11px; }
.empty-inline { color:var(--muted); font-size:12px; padding:8px 0; }
.share-back { margin-bottom:12px; }
.share-route .open-label { color:var(--danger); font-weight:800; }
@media (max-width: 1040px) {
  .topbar { flex-wrap:wrap; height:auto; padding:17px 0; }
  .account-actions { margin-left:auto; }
}
@media (max-width: 880px) {
  .account-actions { order:3; width:100%; justify-content:flex-end; }
  .org-switcher { flex:1; max-width:none; }
}
@media (max-width: 560px) {
  .auth-view { padding:16px; }
  .auth-card { padding:18px; }
  .workspace-summary { grid-template-columns:1fr; }
  .account-actions { justify-content:stretch; }
  .account-actions .btn { flex:0 0 auto; }
}