:root {
  color-scheme: light;
  --bg: #f5f5f5;
  --card: #ffffff;
  --card-2: #f2f4f7;
  --border: #e5e7eb;
  --text: #191919;
  --muted: #737373;
  --green: #76b82a;
  --blue: #3483fa;
  --yellow: #ffe600;
  --violet: #8b5cf6;
  --red: #d92d20;
  background: var(--bg);
  color: var(--text);
}

body,
.login-page {
  background: var(--bg);
  color: var(--text);
}

.panel,
.kpi-card,
.cycle-card,
.portal-state,
.notification-popover {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
}

.button { color: var(--text); border-color: #d5d9de; }
.button-primary { background: var(--yellow); border-color: var(--yellow); color: #191919; }
.button-primary:hover { background: #f5dc00; }
.button-secondary { background: #fff; }
.eyebrow, .back-link { color: var(--blue); }
.muted, small { color: var(--muted); }

.sidebar {
  background: #fff;
  border-color: var(--border);
  box-shadow: 2px 0 12px rgb(0 0 0 / 3%);
}
.sidebar-brand { color: var(--text); display: flex; align-items: center; gap: .65rem; }
.sidebar-brand img { width: 78px; height: 38px; object-fit: cover; object-position: center; }
.sidebar-brand .brand-divider { height: 26px; border-left: 1px solid var(--border); }
.sidebar-brand strong { color: #173c70; font-size: 1.1rem; }
.nav-link, .logout-link { color: #4b5563; }
.nav-link:hover, .nav-link.active { color: #173c70; background: #fff9c2; }
.nav-link.active { box-shadow: inset 3px 0 var(--yellow); }
.topbar { border-bottom-color: var(--yellow); }
.user-menu { background: #fff; border-color: var(--border); color: var(--text); }
.avatar { background: linear-gradient(140deg, #ffe600, #f7c843); color: #173c70; }
.live-dot { color: #237a36; }

.portal-header, .check-header {
  background: #fff;
  color: var(--text);
  border-bottom: 3px solid var(--yellow);
  box-shadow: 0 2px 12px rgb(0 0 0 / 4%);
}
.portal-brand h1, .check-header h1 { color: #173c70; }
.portal-brand strong { color: #5a8f1c; }
.brand-lockup { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; }
.brand-lockup img { width: 88px; height: 42px; object-fit: cover; object-position: center; }
.brand-lockup > strong { color: #173c70; font-size: 1.2rem; }
.user-chip { background: #fff; color: var(--text); border-color: var(--border); }
.tab { color: var(--muted); }
.tab.active { color: #173c70; border-color: var(--blue); }
.tab-badge { background: #eaf2ff; color: #1f5dab; }

input, select, textarea,
.bulk-assignment select,
.carrier-user-form input,
.carrier-user-form select,
.noshow-table select,
.distribution-filters input,
.distribution-filters select,
.filters input, .filters select,
.check-filters select, .check-filters input,
.search {
  background-color: #fff;
  color: var(--text);
  border-color: #cfd4dc;
}
input::placeholder { color: #8a8f98; }

.route-table th, .vehicle-table th { background: #f2f4f7; color: #454b54; }
.route-table tr:hover td, .vehicle-table tr:hover td { background: #fffbea; }
.table-wrap { border-radius: 8px; }
.distribution-summary { color: #285d21; }
.drop-zone { background: #fff; border-color: #9bbff2; color: #344054; }
.share-track { background: #e9edf2; }
.share-value { background: linear-gradient(90deg, #ffe600, #3483fa); }
.notification-bell { color: #173c70; background: #fff; border-color: var(--border); }
.notification-item.unread { border-left-color: var(--blue); }
.notification-item p { color: #454b54; }
.notification-count { background: #d92d20; }
.carrier-access-result { background: #f2f8e9; border-color: #b8d98d; }
.carrier-access-result p { color: #344054; }
.bulk-assignment { background: #f8f9fb; border-color: var(--border); }

.distribution-table tbody tr.distribution-route-row > td:first-child {
  border-left: 3px solid var(--carrier-color, #98a2b3);
}
.carrier-tone-0 { --carrier-color: #3483fa; }
.carrier-tone-1 { --carrier-color: #69a927; }
.carrier-tone-2 { --carrier-color: #8b5cf6; }
.carrier-tone-3 { --carrier-color: #e8792e; }
.carrier-tone-4 { --carrier-color: #00a9a5; }
.carrier-tone-5 { --carrier-color: #d9466f; }
.carrier-tone-6 { --carrier-color: #64748b; }
.carrier-tone-7 { --carrier-color: #a16207; }
.carrier-tone-8 { --carrier-color: #0f766e; }
.carrier-tone-9 { --carrier-color: #4752c4; }
.carrier-tone-10 { --carrier-color: #c026d3; }
.carrier-tone-neutral { --carrier-color: #98a2b3; }
.carrier-tone-noshow { --carrier-color: #d92d20; }
.distribution-carrier-group > td {
  padding: .7rem .8rem;
  background: color-mix(in srgb, var(--carrier-color, #98a2b3) 10%, white);
  border-top: 1px solid color-mix(in srgb, var(--carrier-color, #98a2b3) 28%, white);
  border-bottom: 1px solid color-mix(in srgb, var(--carrier-color, #98a2b3) 28%, white);
}
.distribution-group-title { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; }
.distribution-group-dot, .distribution-carrier-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: .68rem;
  height: .68rem;
  border-radius: 50%;
  background: var(--carrier-color, #98a2b3);
}
.distribution-group-count { margin-left: .55rem; color: var(--muted); font-size: .8rem; }
.distribution-carrier-cell { display: inline-flex; align-items: center; gap: .45rem; }
.distribution-carrier-cell select { min-width: 190px; }
.carrier-table .carrier-badge { width: 12px; height: 12px; }
.carrier-badge { background: var(--carrier-color, #98a2b3); }
.carrier-reset-button { white-space: nowrap; }

#distribution-table { width: 100%; min-width: 0; }
#distribution-table .table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: auto;
}
#distribution-table .distribution-table { width: max-content; min-width: 1120px; border-collapse: collapse; }
#distribution-table .distribution-table th,
#distribution-table .distribution-table td { white-space: nowrap; }

#routes-table { width: 100%; min-width: 0; }
#routes-table .table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: auto;
}
#routes-table .route-table { display: table; width: max-content; min-width: 1550px; border-collapse: collapse; }
#routes-table .route-table thead { display: table-header-group; }
#routes-table .route-table tbody { display: table-row-group; }
#routes-table .route-table tr { display: table-row; padding: 0; }
#routes-table .route-table th, #routes-table .route-table td { display: table-cell; white-space: nowrap; }
#routes-table .route-table td:before { content: none !important; }
.route-panel .route-response { color: #191919; background: var(--yellow); border-color: var(--yellow); }
.route-panel .route-response:disabled { opacity: .6; }
.route-response-noshow { color: #b42318; background: #fff1f0; border-color: #fecdca; }
.route-status-badge.pending { color: #8a5700; background: #fff4cc; }
.route-status-badge.acting { color: #256c2b; background: #e9f7df; }
.route-status-badge.noshow { color: #b42318; background: #fff1f0; }
.route-response-feedback { min-height: 1.2em; margin-top: .65rem; color: #285d21; font-size: .88rem; }
.noshow-dialog {
  width: min(520px, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  background: #fff;
  box-shadow: 0 24px 80px rgb(15 23 42 / 24%);
}
.noshow-dialog::backdrop { background: rgb(16 24 40 / 45%); }
.noshow-dialog form { padding: 1.5rem; }
.noshow-dialog h2 { margin: .25rem 0 .35rem; color: #173c70; }
.noshow-route-label { margin-bottom: 1rem; color: var(--muted); font-weight: 700; }
.noshow-dialog fieldset { display: grid; gap: .65rem; margin: 1rem 0; padding: 0; border: 0; }
.noshow-dialog legend { margin-bottom: .55rem; font-size: .9rem; font-weight: 700; }
.noshow-choice { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.noshow-choice:has(input:checked) { border-color: var(--blue); background: #f3f8ff; }
.noshow-choice input { margin-top: .2rem; accent-color: var(--blue); }
.noshow-choice span { display: grid; gap: .2rem; }
.noshow-choice small { line-height: 1.4; }
.noshow-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

.login-page { background: linear-gradient(180deg, #fff8c2 0, #f5f5f5 43%); }
.login-panel { background: #fff; border-color: var(--border); box-shadow: 0 18px 48px rgb(0 0 0 / 10%); }
.login-brand-logo { width: 180px; height: 78px; object-fit: cover; object-position: center; margin: 0 auto 1rem; display: block; }
.login-panel input { background: #fff; color: var(--text); border-color: #cfd4dc; }
.login-panel input:focus { outline-color: var(--blue); }

@media (max-width: 700px) {
  .distribution-carrier-cell { align-items: flex-start; }
  .distribution-carrier-cell select { min-width: 150px; max-width: 100%; }
  .carrier-table td:last-child { white-space: normal; }
  #routes-table .route-table { min-width: 1550px; }
  #routes-table .table-wrap { max-height: 65vh; }
}