:root {
  --bg: #0f1117;
  --surface: #1d2033;
  --card: #141724;
  --border: #272c3f;
  --text: #e4e4e7;
  --muted: #8b8fa3;
  --accent: #3b82f6;
  --accent2: #6366f1;
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f59e0b;
  --cyan: #06b6d4;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0, 0, 0, .3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, rgba(15, 17, 23, 0.98) 0%, rgba(11, 13, 19, 0.98) 100%);
  border-right: 1px solid rgba(59, 130, 246, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  /* will-change applied only during animation via JS to avoid permanent GPU memory cost */
  z-index: 120;
  contain: layout style;
  overflow: hidden;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.06), transparent);
  pointer-events: none;
}

.sidebar-header {
  padding: 24px 18px 18px;
  position: relative;
  z-index: 1;
}

.sidebar-collapsed-logo {
  display: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  padding: 4px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(31, 41, 55, 0.88), rgba(10, 13, 22, 0.96));
  border: 1px solid rgba(96, 165, 250, 0.3);
  box-shadow:
    0 10px 24px rgba(2, 6, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sidebar-collapsed-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 13px;
  background: transparent;
  border: 0;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.18);
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-header h1 {
  flex: 1;
  font-size: 17px;
  font-weight: 800;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.sidebar-header p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 500;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-header p::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
  display: inline-block;
}

.sidebar-toggle {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sidebar-toggle:hover {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.12);
}

.sidebar-toggle-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  line-height: 1;
  transform: none;
}

.sidebar-toggle-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 20px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-quick-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
  flex-wrap: wrap;
}

.sidebar-chip {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.nav-group {
  margin-bottom: 16px;
}

.nav-group-label {
  padding: 0 12px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  color: var(--accent);
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
  margin-bottom: 0;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.04);
  min-height: 66px;
  background: rgba(255, 255, 255, 0.015);
  text-align: left;
}

.nav-item:hover {
  background: rgba(59, 130, 246, 0.06);
  color: var(--text);
  border-color: rgba(59, 130, 246, 0.12);
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
  color: var(--accent);
  font-weight: 600;
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.nav-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--muted);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.nav-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(15, 17, 23, 0.92), rgba(31, 41, 55, 0.74));
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: #dbeafe;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.nav-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  flex: 1;
}

.nav-label {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: 0.05px;
  color: #cfd5df;
  text-wrap: balance;
}

.nav-sub {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.2;
}

.nav-item:hover .nav-num {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: var(--text);
}

.nav-item.active .nav-num {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-item.active .nav-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.24), rgba(99, 102, 241, 0.18));
  border-color: rgba(96, 165, 250, 0.34);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-item.active .nav-label {
  color: #60a5fa;
}

/* Main */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  contain: layout style;
}

.topbar {
  padding: 14px 24px 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-menu {
  display: none;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(15, 17, 23, 0.74);
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.topbar-menu:hover {
  border-color: rgba(59, 130, 246, 0.42);
  background: rgba(59, 130, 246, 0.14);
}

.topbar h2 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  min-width: 0;
}

.topbar .badge {
  font-size: 11px;
  background: var(--card);
  padding: 4px 12px;
  border-radius: 20px;
  color: var(--muted);
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 24px 24px;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

/* Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.kpi-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
}

.kpi-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.kpi-value.green {
  color: var(--green);
}

.kpi-value.red {
  color: var(--red);
}

.kpi-value.accent {
  color: var(--accent);
}

.kpi-value.orange {
  color: var(--orange);
}

/* Tables */
.table-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}

.table-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-card-header h3 {
  font-size: 14px;
  font-weight: 600;
}

.table-wrap {
  overflow-x: auto;
  max-height: 500px;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

th {
  background: var(--surface);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tr:hover td {
  background: rgba(59, 130, 246, .04);
}

.positive {
  color: var(--green);
}

.negative {
  color: var(--red);
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.tag-green {
  background: rgba(34, 197, 94, .15);
  color: var(--green);
}

.tag-red {
  background: rgba(239, 68, 68, .15);
  color: var(--red);
}

.tag-blue {
  background: rgba(59, 130, 246, .15);
  color: var(--accent);
}

.tag-orange {
  background: rgba(245, 158, 11, .15);
  color: var(--orange);
}

/* Charts */
.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.chart-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-label {
  width: 140px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  flex: 1;
  height: 24px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .6s ease;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  min-width: fit-content;
}

.bar-val {
  width: 80px;
  font-size: 12px;
  text-align: right;
  flex-shrink: 0;
}

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

/* Donut */
.donut-container {
  display: flex;
  align-items: center;
  gap: 24px;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Section title */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  margin-top: 8px;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

@media(max-width:900px) {
  .sidebar {
    width: 220px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 16px;
  }
}

body.sidebar-collapsed .sidebar {
  width: 94px;
  transform: translate3d(0, 0, 0);
}

body.sidebar-collapsed .sidebar .sidebar-header {
  padding: 24px 10px 18px;
}

body.sidebar-collapsed .sidebar .sidebar-collapsed-logo {
  display: flex;
  margin: 0 auto 16px;
  transform: translateY(-2px);
}

body.sidebar-collapsed .sidebar .sidebar-brand-row {
  justify-content: center;
}

body.sidebar-collapsed .sidebar .sidebar-header h1,
body.sidebar-collapsed .sidebar .sidebar-header p,
body.sidebar-collapsed .sidebar .nav-item {
  white-space: nowrap;
}

body.sidebar-collapsed .sidebar .sidebar-header h1,
body.sidebar-collapsed .sidebar .sidebar-header p,
body.sidebar-collapsed .sidebar .nav-copy,
body.sidebar-collapsed .sidebar .nav-num,
body.sidebar-collapsed .sidebar .nav-sub {
  display: none;
}

body.sidebar-collapsed .sidebar .sidebar-toggle,
body.sidebar-collapsed .sidebar .nav-item,
body.sidebar-collapsed .sidebar .nav-icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 16px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

body.sidebar-collapsed .sidebar .sidebar-toggle {
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.sidebar-collapsed .sidebar .nav-list {
  padding: 8px 17px 16px;
}

body.sidebar-collapsed .sidebar .nav-item {
  justify-content: center;
  padding: 0;
  gap: 0;
  margin-bottom: 14px;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

body.sidebar-collapsed .sidebar .nav-icon {
  font-size: 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.sidebar-collapsed .sidebar .nav-item.active::before {
  left: -17px;
  height: 34px;
}

body.sidebar-collapsed .sidebar .sidebar-toggle:hover {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.12);
}

body.sidebar-collapsed .sidebar-toggle-icon {
  transform: none;
}

body.sidebar-collapsed .main {
  min-width: 0;
}

body.sidebar-animating .sidebar {
  pointer-events: none;
}

body.sidebar-animating .sidebar .sidebar-toggle,
body.sidebar-animating .sidebar .nav-item,
body.sidebar-animating .sidebar .nav-icon,
body.sidebar-animating .sidebar .nav-num {
  transition: none !important;
  transform: none !important;
}

body.sidebar-animating .master-section,
body.sidebar-animating .table-card,
body.sidebar-animating .chart-card {
  transition-property: opacity, transform !important;
}

body.sidebar-hover-transitioning .content.page-daily {
  contain: layout paint;
}

body.sidebar-hover-transitioning .content.page-daily .dc-qa-page,
body.sidebar-hover-transitioning .content.page-daily #dc_result,
body.sidebar-hover-transitioning .content.page-daily .dc-normal-customer-section,
body.sidebar-hover-transitioning .content.page-daily .dc-normal-customer-card,
body.sidebar-hover-transitioning .content.page-daily .dc-qa-case,
body.sidebar-hover-transitioning .content.page-daily .dc-qa-table-wrap {
  contain: layout paint;
}

body.sidebar-hover-transitioning .content.page-daily *,
body.sidebar-hover-transitioning .content.page-daily *::before,
body.sidebar-hover-transitioning .content.page-daily *::after {
  transition: none !important;
  animation-play-state: paused !important;
}

body.sidebar-hover-transitioning .content.page-daily .dc-normal-customer-card,
body.sidebar-hover-transitioning .content.page-daily .dc-qa-case,
body.sidebar-hover-transitioning .content.page-daily .dc-qf-panel,
body.sidebar-hover-transitioning .content.page-daily .dc-normal-summary {
  box-shadow: none !important;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html.sidebar-auto-preload .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 94px;
    transform: translate3d(0, 0, 0);
    transition: none;
    box-shadow: none;
    contain: layout style paint;
  }

  html.sidebar-auto-preload .main {
    margin-left: 94px;
    width: calc(100% - 94px);
    min-width: 0;
    overflow: hidden;
    transition: none;
  }

  html.sidebar-auto-preload .sidebar-header {
    min-height: 102px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  html.sidebar-auto-preload .sidebar-collapsed-logo {
    display: flex;
    margin: 0 auto;
    transform: translateY(-6px);
    background: linear-gradient(90deg, rgba(36, 42, 56, 0.92) 25%, rgba(148, 163, 184, 0.18) 50%, rgba(36, 42, 56, 0.92) 75%);
    background-size: 220% 100%;
    animation: skeletonShimmer 1.45s ease-in-out infinite;
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: none;
  }

  html.sidebar-auto-preload .sidebar-collapsed-logo img {
    opacity: 0;
  }

  html.sidebar-auto-preload .sidebar-brand-row,
  html.sidebar-auto-preload .sidebar-header p {
    display: none;
  }

  html.sidebar-auto-preload .nav-list {
    padding: 4px 17px 16px;
    overflow-x: hidden;
  }

  html.sidebar-auto-preload .shell-nav-skeleton {
    padding: 4px 0 16px;
    gap: 14px;
    justify-items: center;
  }

  html.sidebar-auto-preload .shell-skeleton-nav {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  body.sidebar-auto .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 94px;
    transform: translate3d(0, 0, 0);
    transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none;
    contain: layout style paint;
  }

  body.sidebar-auto .main {
    margin-left: 94px;
    width: calc(100% - 94px);
    min-width: 0;
    overflow: hidden;
    transition: margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.sidebar-auto.sidebar-hover-expanded .sidebar {
    width: 280px;
    box-shadow: none;
  }

  body.sidebar-auto.sidebar-hover-expanded .main {
    margin-left: 280px;
    width: calc(100% - 280px);
  }

  body.sidebar-hover-transitioning .sidebar {
    will-change: width;
  }

  body.sidebar-hover-transitioning .main {
    will-change: margin-left, width;
    contain: layout paint;
  }

  body.sidebar-auto .sidebar-toggle {
    display: none;
  }

  body.sidebar-auto .sidebar-header {
    padding: 24px 10px 18px;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .sidebar-header {
    padding: 24px 18px 18px;
  }

  body.sidebar-auto:not(.sidebar-hover-expanded) .sidebar-header,
  body.sidebar-auto.sidebar-hover-transitioning .sidebar-header {
    min-height: 102px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .sidebar-header {
    min-height: 0;
    display: block;
  }

  body.sidebar-auto .sidebar-collapsed-logo {
    display: flex;
    margin: 0 auto;
    transform: translateY(-6px);
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .sidebar-collapsed-logo {
    display: none;
  }

  body.sidebar-auto:not(.sidebar-hover-expanded) .sidebar-brand-row,
  body.sidebar-auto:not(.sidebar-hover-expanded) .sidebar-header p,
  body.sidebar-auto.sidebar-hover-transitioning .sidebar-brand-row,
  body.sidebar-auto.sidebar-hover-transitioning .sidebar-header p {
    display: none;
  }

  body.sidebar-auto .sidebar-brand-row {
    justify-content: center;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .sidebar-brand-row {
    justify-content: space-between;
  }

  body.sidebar-auto .sidebar-header h1,
  body.sidebar-auto .sidebar-header p,
  body.sidebar-auto .nav-copy,
  body.sidebar-auto .nav-sub {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: none;
    white-space: nowrap;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .sidebar-header h1,
  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .sidebar-header p,
  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .nav-copy,
  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .nav-sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  body.sidebar-auto.sidebar-hover-transitioning .sidebar-header h1,
  body.sidebar-auto.sidebar-hover-transitioning .sidebar-header p,
  body.sidebar-auto.sidebar-hover-transitioning .nav-copy,
  body.sidebar-auto.sidebar-hover-transitioning .nav-sub {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .nav-label {
    text-wrap: auto;
    overflow-wrap: anywhere;
  }

  body.sidebar-auto .nav-list {
    padding: 4px 17px 16px;
    overflow-x: hidden;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .nav-list {
    padding: 8px 14px 20px;
  }

  body.sidebar-auto .nav-item {
    width: 58px;
    min-width: 58px;
    height: 58px;
    min-height: 58px;
    justify-content: center;
    padding: 0;
    gap: 0;
    margin-bottom: 14px;
    border-radius: 16px;
    transform: translate3d(0, 0, 0);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .nav-item {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 66px;
    justify-content: flex-start;
    padding: 16px;
    gap: 14px;
    margin-bottom: 0;
    border-radius: 14px;
  }

  body.sidebar-auto .nav-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    border-radius: 16px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .nav-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(15, 17, 23, 0.92), rgba(31, 41, 55, 0.74));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  body.sidebar-auto .nav-item.active::before {
    left: -17px;
    height: 34px;
  }

  body.sidebar-auto.sidebar-hover-expanded:not(.sidebar-hover-transitioning) .nav-item.active::before {
    left: -12px;
    height: 24px;
  }
}

.sidebar-backdrop {
  display: none;
}

@media(max-width: 768px) {
  body {
    width: 100vw;
  }

  .main {
    flex: 0 0 100vw;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
  }

  .topbar {
    padding: 12px 14px;
  }

  .topbar-left {
    flex: 1;
  }

  .topbar-menu {
    display: inline-flex;
  }

  .topbar h2 {
    overflow: hidden;
  }

  .content {
    max-width: 100vw;
    min-width: 0;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.35);
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 110;
  }
}

/* ─── Daily Comparison v1.1 ─── */
.dc-selector-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(to right, var(--card), var(--surface));
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.dc-selector-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dc-selector-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dc-select {
  background: var(--bg);
  color-scheme: dark;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  min-width: 180px;
  transition: all 0.2s ease;
}

.dc-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.dc-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

.dc-vs-badge {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: pulse-glow 3s infinite;
}

.dc-btn-compare {
  background: var(--accent);
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  color: #fff;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.dc-btn-compare::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.5s ease;
}

.dc-btn-compare:hover::after {
  left: 150%;
}

.dc-btn-compare:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

.dc-btn-compare:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.dc-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.dc-side-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  text-align: center;
}

.dc-label-a {
  background: rgba(20, 184, 166, .16);
  color: #7dd3c7;
}

.dc-label-b {
  background: rgba(99, 102, 241, .18);
  color: #b8bdfd;
}

.dc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.dc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.dc-header-a {
  background: rgba(20, 184, 166, .08);
  border-left: 3px solid #14b8a6;
}

.dc-header-b {
  background: rgba(99, 102, 241, .10);
  border-left: 3px solid #818cf8;
}

.dc-date-badge {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(241, 245, 249, .92);
}

.dc-trips-badge {
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  color: var(--muted);
}

.dc-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

.dc-metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

.dc-metric-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}

.dc-metric-value {
  font-size: 20px;
  font-weight: 700;
}

.dc-metric-value.green {
  color: var(--green);
}

.dc-metric-value.red {
  color: var(--red);
}

.dc-metric-value.accent {
  color: var(--accent);
}

.dc-metric-value.orange {
  color: var(--orange);
}

.dc-route-section {
  padding: 12px 16px;
}

.dc-route-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.dc-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.dc-empty-msg {
  color: var(--muted);
  font-size: 14px;
}

.dc-diff-panel {
  background: linear-gradient(145deg, rgba(33, 37, 47, 0.95), rgba(26, 29, 39, 0.95));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.dc-diff-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      var(--accent), var(--green), var(--orange), var(--accent2), var(--accent));
  background-size: 300% 100%;
  animation: shine 4s linear infinite;
}

@keyframes shine {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: 100% 0;
  }
}

.dc-diff-title {
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dc-diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  width: 100%;
}

.dc-qf-panel {
  margin: 16px 0 18px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(26, 29, 39, 0.98) 0%, rgba(16, 18, 25, 0.98) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dc-qf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.dc-qf-title-wrap {
  min-width: 0;
}

.dc-qf-kicker {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  font-family: 'Prompt', 'Inter', 'Segoe UI', sans-serif;
}

.dc-qf-title {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 550;
  color: #9fb0c7;
  font-family: 'Prompt', 'Inter', 'Segoe UI', sans-serif;
}

.dc-qf-caption {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #99a3b8;
  font-family: 'Prompt', 'Inter', 'Segoe UI', sans-serif;
}

.dc-qf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.dc-qf-btn {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px 18px;
  transition: all .2s ease;
}

.dc-qf-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
}

.dc-qf-btn.active {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
  box-shadow: none;
}

.dc-qf-btn.active:hover {
  transform: none;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.1);
}

.dc-qf-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dc-qf-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.dc-qf-btn.active .dc-qf-icon {
  color: #fecaca;
  border-color: rgba(254, 202, 202, 0.35);
  background: rgba(239, 68, 68, 0.22);
}

.dc-qf-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}

.dc-qf-label {
  font-size: 15px;
  font-weight: 500;
  color: #9fb0c7;
  line-height: 1.3;
  font-family: 'Prompt', 'Inter', 'Segoe UI', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.dc-qf-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  font-family: 'Prompt', 'Inter', 'Segoe UI', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dc-qf-btn.active .dc-qf-label {
  color: #fce7e7;
}

.dc-qf-btn.active .dc-qf-sub {
  color: #dbbebe;
}

.dc-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(26, 29, 39, 0.98) 0%, rgba(16, 18, 25, 0.98) 100%);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.dc-summary-copy {
  flex: 0 1 auto;
  min-width: 180px;
}

.dc-summary-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #aeb9cb;
  font-family: 'Prompt', 'Inter', 'Segoe UI', sans-serif;
}

.dc-summary-sub {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #8fa0b5;
  font-family: 'Prompt', 'Inter', 'Segoe UI', sans-serif;
}

.dc-summary-filter {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.dc-summary-filter::-webkit-scrollbar {
  display: none;
}

/* ═══ Status Filter Toggle Bar ═══ */
.sf-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.025);
  scrollbar-width: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sf-bar::-webkit-scrollbar {
  display: none;
}

.sf-bar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  flex-shrink: 0;
}

.sf-bar-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  font-family: 'Prompt', 'Inter', sans-serif;
}

.sf-bar-meta {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.sf-sep {
  width: 1px;
  height: 18px;
  background: rgba(148, 163, 184, 0.18);
  flex-shrink: 0;
  margin: 0 2px;
}

.sf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease, box-shadow .15s ease;
  position: relative;
  flex-shrink: 0;
}

.sf-toggle:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.sf-toggle.off {
  opacity: .4;
}

.sf-toggle.off:hover {
  opacity: .65;
}

.sf-switch {
  position: relative;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  transition: background .15s ease;
  flex-shrink: 0;
}

.sf-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  transition: transform .15s ease, background .15s ease;
}

.sf-toggle.on .sf-switch::after {
  transform: translateX(12px);
  background: #fff;
}

.sf-label {
  font-size: 10.5px;
  font-weight: 400;
  color: #b0b8c8;
  white-space: nowrap;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', sans-serif;
  transition: color .15s ease;
  letter-spacing: 0.01em;
}

.sf-toggle.on .sf-label {
  color: #e8ecf2;
}

.sf-count {
  font-size: 10px;
  font-weight: 600;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', sans-serif;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  text-align: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(148, 163, 184, 0.25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  transition: background .15s ease;
  flex-shrink: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* Semantic colors per status */
.sf-toggle.on[data-color="red"] .sf-switch {
  background: rgba(239, 68, 68, 0.6);
}

.sf-toggle.on[data-color="red"] .sf-count {
  background: rgba(239, 68, 68, 0.75);
}

.sf-toggle.on[data-color="red"] {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
}

.sf-toggle.on[data-color="orange"] .sf-switch {
  background: rgba(249, 115, 22, 0.6);
}

.sf-toggle.on[data-color="orange"] .sf-count {
  background: rgba(249, 115, 22, 0.75);
}

.sf-toggle.on[data-color="orange"] {
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.06);
}

.sf-toggle.on[data-color="purple"] .sf-switch {
  background: rgba(168, 85, 247, 0.6);
}

.sf-toggle.on[data-color="purple"] .sf-count {
  background: rgba(168, 85, 247, 0.75);
}

.sf-toggle.on[data-color="purple"] {
  border-color: rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.06);
}

.sf-toggle.on[data-color="blue"] .sf-switch {
  background: rgba(59, 130, 246, 0.6);
}

.sf-toggle.on[data-color="blue"] .sf-count {
  background: rgba(59, 130, 246, 0.75);
}

.sf-toggle.on[data-color="blue"] {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.06);
}

.sf-toggle.on[data-color="cyan"] .sf-switch {
  background: rgba(6, 182, 212, 0.6);
}

.sf-toggle.on[data-color="cyan"] .sf-count {
  background: rgba(6, 182, 212, 0.75);
}

.sf-toggle.on[data-color="cyan"] {
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(6, 182, 212, 0.06);
}

.sf-toggle.on[data-color="green"] .sf-switch {
  background: rgba(16, 185, 129, 0.6);
}

.sf-toggle.on[data-color="green"] .sf-count {
  background: rgba(16, 185, 129, 0.75);
}

.sf-toggle.on[data-color="green"] {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.06);
}

.sf-toggle.on[data-color="slate"] .sf-switch {
  background: rgba(148, 163, 184, 0.55);
}

.sf-toggle.on[data-color="slate"] .sf-count {
  background: rgba(148, 163, 184, 0.65);
}

.sf-toggle.on[data-color="slate"] {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.06);
}

.sf-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 450;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
  font-family: 'Prompt', 'Inter', sans-serif;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

.sf-all-btn:hover {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent);
}

.sf-reset-btn:hover {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
}

.sf-all-btn.active {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
}

.dc-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dc-tags-wrap-sm {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.dc-tags-wrap-xs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

@keyframes dcExportPulse {
  0% {
    transform: translateX(-110%);
  }

  50% {
    transform: translateX(35%);
  }

  100% {
    transform: translateX(120%);
  }
}

.diff-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.diff-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.diff-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  z-index: 1;
}

.diff-val {
  font-size: clamp(13px, 1.8vw, 20px);
  font-weight: 800;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.positive .diff-val {
  color: var(--green);
}

.negative .diff-val {
  color: var(--red);
}

.diff-icon {
  font-size: 14px;
}

.diff-bg-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.positive .diff-bg-bar {
  background: var(--green);
  box-shadow: 0 -2px 12px rgba(34, 197, 94, 0.4);
}

.negative .diff-bg-bar {
  background: var(--red);
  box-shadow: 0 -2px 12px rgba(239, 68, 68, 0.4);
}

.diff-wave {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

.positive .diff-wave {
  background: radial-gradient(circle at right, var(--green) 0%, transparent 70%);
}

.negative .diff-wave {
  background: radial-gradient(circle at right, var(--red) 0%, transparent 70%);
}

@media(max-width:900px) {
  .dc-compare-grid {
    grid-template-columns: 1fr;
  }

  .dc-diff-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dc-qf-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   MASTER DASHBOARD V2 — PROFESSIONAL INTEGRATED LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* ── Sticky Jump Navigation ── */
.master-jump-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: linear-gradient(180deg, rgba(15, 17, 23, 0.97), rgba(15, 17, 23, 0.92));
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
  padding: 12px 0;
  margin: -24px -32px 32px -32px;
}

.master-jump-nav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 0 32px;
  scrollbar-width: none;
}

.master-jump-nav-inner::-webkit-scrollbar {
  display: none;
}

.master-jump-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid var(--border);
}

.master-jump-link {
  text-decoration: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.master-jump-link:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--accent);
  transform: translateY(-1px);
}

.master-jump-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Hero KPI Banner ── */
.master-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.master-hero-card {
  background: linear-gradient(145deg, var(--card), rgba(26, 29, 39, 0.95));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.master-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0.6;
}

.master-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  border-color: rgba(59, 130, 246, 0.25);
}

.master-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.master-hero-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 8px;
}

.master-hero-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.master-hero-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}

/* ── MASTER DASHBOARD — 6 CARD GRID (NO SCROLL) ── */
.content.master-no-scroll {
  padding: 12px !important;
  overflow: hidden !important;
}

.master-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.master-dashboard-grid .master-section {
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.master-section {
  background: linear-gradient(180deg, var(--card), rgba(26, 29, 39, 0.6));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  position: relative;
  transition: all 0.3s ease;
  animation: masterFadeIn 0.6s ease both;
}

.master-section:hover {
  border-color: rgba(59, 130, 246, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

@keyframes masterFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.master-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), transparent);
  flex-shrink: 0;
}

.master-section-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1px solid;
  background: rgba(255, 255, 255, 0.03);
}

.master-section-title-group {
  flex: 1;
  min-width: 0;
}

.master-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1px;
}

.master-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #cfd5df;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master-section-viewall {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.master-section-viewall:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--accent);
}

.master-section-body {
  padding: 12px 14px 14px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.master-section-body::-webkit-scrollbar {
  width: 4px;
}

.master-section-body::-webkit-scrollbar-track {
  background: transparent;
}

.master-section-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.18);
  border-radius: 4px;
}

.master-section-body::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.3);
}

.master-section-accent-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  opacity: 0.7;
}

/* ── Grid Layouts for Sections ── */
.master-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.master-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* ── Mini KPI inside sections ── */
.master-mini-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  transition: all 0.2s ease;
}

.master-mini-kpi:hover {
  border-color: rgba(59, 130, 246, 0.2);
}

.master-mini-kpi-label {
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
  font-weight: 600;
}

.master-mini-kpi-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.master-mini-kpi-sub {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Compact Table for Cards ── */
.master-compact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-top: 6px;
}

.master-compact-table th {
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 6px;
  text-align: left;
  font-size: 8px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.master-compact-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.master-compact-table tr:hover td {
  background: rgba(59, 130, 246, 0.04);
}

/* ── Compact Bar Chart ── */
.master-compact-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 10px;
}

.master-compact-bar-label {
  width: 70px;
  text-align: right;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.master-compact-bar-track {
  flex: 1;
  height: 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.master-compact-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 4px;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ── Chart Card ── */
.master-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}

.master-chart-card:last-child {
  margin-bottom: 0;
}

.master-chart-card h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.master-chart-card-compact {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

.master-chart-card-compact h4 {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Progress Bar (own/outsource style) ── */
.master-progress-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
  margin: 10px 0 6px;
}

.master-progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.master-progress-wrap-compact {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin: 4px 0 2px;
}

.master-progress-fill-compact {
  height: 100%;
  border-radius: 4px;
}

/* ── Side-by-side Cards (own vs outsource) ── */
.master-vs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.master-vs-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.master-vs-header {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.master-vs-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin: 12px 0;
}

.master-vs-detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.master-vs-detail b {
  color: var(--text);
}

.master-vs-card-compact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  position: relative;
  overflow: hidden;
}

.master-vs-card-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.master-vs-header-compact {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.master-vs-value-compact {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  margin: 4px 0;
}

.master-vs-detail-compact {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}


/* Fleet usage panel (modern compact) */
.master-fleet {
  border: 1px solid rgba(99, 102, 241, 0.18);
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.06), rgba(15, 17, 23, 0.45));
  border-radius: 12px;
  padding: 10px;
}

.master-fleet-overview {
  padding: 8px 10px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(15, 17, 23, 0.45);
  margin-bottom: 8px;
}

.fleet-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.fleet-overview-title {
  font-size: 10px;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.fleet-overview-total {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

.fleet-overview-bar {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: rgba(148, 163, 184, 0.2);
}

.fleet-overview-seg {
  height: 100%;
}

.fleet-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.fleet-company {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.fleet-outsource {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}

.fleet-overview-legend {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fleet-overview-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #cbd5e1;
  font-weight: 600;
}

.master-fleet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.master-fleet-card {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(165deg, rgba(26, 29, 39, 0.7), rgba(15, 17, 23, 0.45));
}

.master-fleet-card .fleet-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.master-fleet-card h4 {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: #dbeafe;
}

.fleet-share {
  font-size: 9px;
  font-weight: 700;
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 999px;
  padding: 2px 7px;
}

.fleet-main {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
  color: #f8fafc;
  margin-bottom: 8px;
}

.fleet-main small {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.fleet-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.fleet-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
}

.fleet-metrics span {
  color: #94a3b8;
  font-weight: 600;
}

.fleet-metrics b {
  color: #e2e8f0;
  font-weight: 700;
  text-align: right;
}

.fleet-pos {
  color: #22c55e !important;
}

.fleet-neg {
  color: #ef4444 !important;
}

.master-fleet-foot {
  margin-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fleet-foot-kpi {
  background: rgba(15, 17, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 7px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.fleet-foot-kpi span {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 600;
}

.fleet-foot-kpi b {
  font-size: 10px;
  color: #e2e8f0;
  font-weight: 700;
}

/* Vehicle Performance */
.vehperf-card-shell {
  display: grid;
  gap: 10px;
}

.vehperf-card-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vehperf-card-summary-box {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.vehperf-card-summary-label {
  display: block;
  color: #cfd5df;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.vehperf-card-summary-value {
  display: block;
  color: #e5e7eb;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.vehperf-card-summary-sub {
  display: block;
  margin-top: 4px;
  color: #9ca3af;
  font-size: 10px;
  font-weight: 600;
}

.vehperf-card-list {
  display: grid;
  gap: 8px;
}

.vehperf-card-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(135deg, rgba(26, 29, 39, 0.96), rgba(22, 25, 35, 0.84));
}

.vehperf-card-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(15, 17, 23, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--veh-color);
  font-size: 11px;
  font-weight: 800;
}

.vehperf-card-main {
  min-width: 0;
}

.vehperf-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.vehperf-card-type {
  color: #cfd5df;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vehperf-card-meta {
  color: #94a3b8;
  font-size: 10px;
  margin-top: 2px;
}

.vehperf-card-share {
  flex-shrink: 0;
  color: var(--veh-color);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 17, 23, 0.76);
}

.vehperf-card-track {
  margin: 8px 0 9px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  overflow: hidden;
}

.vehperf-card-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), var(--veh-color));
}

.vehperf-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #cbd5e1;
  font-size: 10px;
}

.vehperf-card-stats b {
  color: #94a3b8;
  font-weight: 700;
}

.vehperf-modal-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.vehperf-brief,
.vehperf-board {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(32, 37, 49, 0.98), rgba(24, 28, 38, 0.92));
  overflow: hidden;
}

.vehperf-brief {
  padding: 16px;
}

.vehperf-brief-head {
  margin-bottom: 14px;
}

.vehperf-brief-kicker,
.vehperf-board-kicker {
  color: #cfd5df;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.vehperf-brief-title,
.vehperf-board-title {
  color: #cfd5df;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 4px;
}

.vehperf-brief-grid {
  display: grid;
  gap: 10px;
}

.vehperf-brief-card {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
}

.vehperf-brief-label {
  display: block;
  color: #cfd5df;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
}

.vehperf-brief-value {
  display: block;
  color: #f8fafc;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.vehperf-brief-sub {
  display: block;
  color: #cbd5e1;
  font-size: 11px;
  margin-top: 5px;
}

.vehperf-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.vehperf-board-note {
  color: #cfd5df;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}

.vehperf-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.vehperf-board-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(140deg, rgba(24, 28, 38, 0.98), rgba(28, 33, 44, 0.94));
  padding: 14px;
  overflow: hidden;
}

.vehperf-board-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), var(--veh-color));
}

.vehperf-board-rank {
  color: var(--veh-color);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 10px;
}

.vehperf-board-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.vehperf-board-type {
  color: #cfd5df;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.vehperf-board-share {
  color: #94a3b8;
  font-size: 11px;
  margin-top: 4px;
}

.vehperf-board-pill {
  flex-shrink: 0;
  color: var(--veh-color);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 17, 23, 0.76);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
}

.vehperf-board-track {
  margin: 12px 0;
  height: 8px;
  background: rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  overflow: hidden;
}

.vehperf-board-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), var(--veh-color));
}

.vehperf-board-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vehperf-board-metric {
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 9px 10px;
}

.vehperf-board-metric span {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  margin-bottom: 4px;
}

.vehperf-board-metric strong {
  color: #f3f4f6;
  font-size: 14px;
  font-weight: 800;
}

.vehperf-table-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.24);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 960px) {

  .master-fleet-grid,
  .master-fleet-foot {
    grid-template-columns: 1fr;
  }

  .vehperf-card-summary,
  .vehperf-board-grid {
    grid-template-columns: 1fr;
  }

  .vehperf-modal-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Loss Month Bars ── */
.master-loss-month {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.master-loss-month:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.master-loss-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

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

.master-loss-month-stats {
  display: flex;
  gap: 20px;
  font-size: 12px;
}

.master-loss-bar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  height: 22px;
  overflow: hidden;
}

.master-loss-bar-fill {
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: width 0.8s ease;
}

.master-loss-bar-track-compact {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}

.master-loss-bar-fill-compact {
  height: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding-left: 4px;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
}

/* ── Scroll Animations ── */
.master-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.master-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

@media(max-width:1100px) {
  .master-hero {
    grid-template-columns: repeat(2, 1fr);
  }

  .master-grid-2 {
    grid-template-columns: 1fr;
  }

  .master-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media(max-width:700px) {
  .master-hero {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM EFFECTS — Glassmorphism, Glow, Gradients
   ═══════════════════════════════════════════════════════════ */

/* ── Custom Scrollbar ── */
.content::-webkit-scrollbar {
  width: 6px;
}

.content::-webkit-scrollbar-track {
  background: transparent;
}

.content::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.25);
  border-radius: 3px;
}

.content::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.4);
}

/* ── Hero Glow Effects ── */
.master-hero-card {
  position: relative;
  overflow: hidden;
}

.master-hero-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.master-hero-card:hover::after {
  opacity: 1;
}

/* ── Section Glow Border ── */
.master-section {
  position: relative;
}

.master-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent2) 80%, transparent);
  opacity: 0.3;
}

/* ── Chart Card Premium ── */
.master-chart-card {
  position: relative;
  overflow: hidden;
}

.master-chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 50%, transparent);
}

/* ── VS Card Premium ── */
.master-vs-card {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.master-vs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.master-vs-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.master-vs-card:hover::after {
  opacity: 1;
}

/* ── Table Premium ── */
.table-card {
  position: relative;
}

.table-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 50%, transparent);
}

/* ── Bar Chart Enhancement ── */
.bar-row {
  transition: transform 0.2s ease;
}

.bar-row:hover {
  transform: translateX(4px);
}

/* ── Smooth Section Entrance ── */
.master-section {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.master-section.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Stagger Animation Delays ── */
.master-section:nth-child(1) {
  transition-delay: 0.05s;
}

.master-section:nth-child(2) {
  transition-delay: 0.15s;
}

.master-section:nth-child(3) {
  transition-delay: 0.25s;
}

.master-section:nth-child(4) {
  transition-delay: 0.35s;
}

.master-section:nth-child(5) {
  transition-delay: 0.45s;
}

.master-section:nth-child(6) {
  transition-delay: 0.55s;
}

/* ── Jump Nav Active State ── */
.master-jump-link:active {
  transform: scale(0.96);
}

/* ── Loading Shimmer (for future use) ── */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ── Focus States ── */
.master-jump-link:focus,
.master-section-toplink:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* ── Print Styles ── */
@media print {

  .sidebar,
  .master-jump-nav,
  .master-section-toplink {
    display: none !important;
  }

  .main {
    flex: none;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .content {
    overflow: visible;
    padding: 20px;
  }

  .master-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ═══════════════════════════════════════════════════════════
   FULL MODAL CONTENT — Professional Dashboard Detail View
   ═══════════════════════════════════════════════════════════ */

/* ── Modal Content Layout ── */
.modal-full-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.modal-full-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.modal-full-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.modal-kpi-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.modal-kpi-card:hover {
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.modal-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--kpi-color, #3b82f6), transparent);
}

.modal-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.modal-kpi-value {
  font-size: 29px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.7px;
  text-shadow: 0 0 0.25px currentColor;
}

.modal-kpi-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}

.modal-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
}

.modal-kpi-delta.up {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.modal-kpi-delta.down {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

/* ── Modal Section Cards (audit tables) — match mvw-panel theme ── */
.modal-section-card {
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.45), rgba(15, 17, 23, 0.55));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 13px;
  overflow: hidden;
  margin-bottom: 16px;
}

.modal-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent);
  position: relative;
}

.modal-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.modal-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0 !important;
  letter-spacing: .15px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.modal-chart-title {
  font-weight: 600;
  color: #cfd5df !important;
}

.modal-section-body {
  padding: 16px 18px 18px;
}

/* ── Sparkline / Mini Chart — Premium ── */
.sparkline-container {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100px;
  padding: 8px 8px 8px;
  position: relative;
  /* No overflow — bars scale to fit container width automatically */
  overflow: visible;
}

.sparkline-container::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 50%, transparent);
}

.sparkline-bar {
  /* flex:1 makes each bar take equal width — auto-scales for any month count */
  flex: 1 1 0;
  min-width: 0;
  border-radius: 6px 6px 0 0;
  min-height: 6px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 0 transparent;
}

.sparkline-bar:hover {
  filter: brightness(1.4) saturate(1.2);
  transform: scaleY(1.08) scaleX(1.05);
  box-shadow: 0 0 20px var(--glow-color, rgba(59, 130, 246, 0.3));
  z-index: 2;
}

.sparkline-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: linear-gradient(180deg, var(--surface), rgba(30, 33, 45, 0.95));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  line-height: 1.5;
}

.sparkline-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border);
}

.sparkline-bar:hover .sparkline-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Sparkline bar entrance animation */
@keyframes sparkGrow {
  from {
    transform: scaleY(0);
    opacity: 0;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.sparkline-bar {
  animation: sparkGrow 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* ── Modal Tabs ── */
.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.modal-tab {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-tab:hover {
  color: var(--text);
}

.modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), transparent);
}

/* ── Modal Table Enhancements ── */
.modal-table-wrap {
  overflow: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.modal-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.modal-table-wrap th {
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.modal-table-wrap td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.modal-table-wrap tr:hover td {
  background: rgba(59, 130, 246, 0.04);
}

/* ── Modal Charts ── */
.audit-table-section-header {
  align-items: flex-start;
}

.audit-table-section-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-table-section-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.audit-table-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.audit-table-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.audit-table-toolbar-main {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.audit-table-toolbar-side {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-end;
  margin-left: auto;
}

.audit-table-filter-row,
.audit-table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.audit-table-filter-row-full {
  flex: 1 1 100%;
  padding-top: 4px;
}

.audit-table-status {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.audit-table-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.audit-table-filter span {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.75);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.audit-table-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.2px;
}

.audit-table-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.65), rgba(15, 17, 23, 0.55));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 0 12px;
  min-height: 34px;
  box-sizing: border-box;
  white-space: nowrap;
}

.audit-table-search,
.audit-table-select {
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.65), rgba(15, 17, 23, 0.55));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 12px;
  min-height: 34px;
  box-sizing: border-box;
}

.audit-table-search {
  width: 100%;
}

.audit-table-select {
  min-width: 150px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa4bb 50%),
    linear-gradient(135deg, #9aa4bb 50%, transparent 50%),
    linear-gradient(180deg, rgba(26, 29, 39, 0.65), rgba(15, 17, 23, 0.55));
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px),
    0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.audit-table-select-sm {
  min-width: 82px;
}

.audit-table-select option {
  background: #1a1d27;
  color: #e4e4e7;
}

.audit-table-search:focus,
.audit-table-select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.audit-table-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.65), rgba(15, 17, 23, 0.55));
  color: #cfd5df;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, color .2s ease;
  box-sizing: border-box;
}

.audit-table-button:hover {
  border-color: rgba(59, 130, 246, 0.35);
  color: var(--text);
  transform: translateY(-1px);
}

.audit-table-wrap {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 11px;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(15, 17, 23, 0.35);
}

.audit-table-wrap.compact {
  overflow-x: hidden;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 100%;
  table-layout: auto;
}

.audit-table-compact {
  min-width: 100%;
  table-layout: fixed;
}

.audit-table-compact th:first-child,
.audit-table-compact td:first-child {
  width: 46%;
  white-space: normal;
  word-break: break-word;
}

.audit-table-compact th:nth-child(2),
.audit-table-compact td:nth-child(2),
.audit-table-compact th:nth-child(3),
.audit-table-compact td:nth-child(3) {
  width: 18%;
}

.audit-table-compact th:nth-child(4),
.audit-table-compact td:nth-child(4) {
  width: 18%;
}

.audit-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(15, 17, 23, 0.85);
  color: rgba(203, 213, 225, 0.8);
  font-size: 10.5px;
  font-weight: 600;
  text-align: left;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.audit-table th:hover {
  background: rgba(26, 29, 39, 0.9);
  color: #e2e8f0;
}

.audit-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  font-size: 12px;
  color: var(--text);
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.audit-table tbody tr:hover td {
  background: rgba(59, 130, 246, 0.04);
}

.audit-table th.is-right,
.audit-table td.is-right {
  text-align: right;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.audit-table td.is-strong {
  font-weight: 500;
}

.audit-table td.is-positive {
  color: #22c55e;
}

.audit-table td.is-negative {
  color: #ef4444;
}

.audit-table tbody tr.audit-row-action {
  cursor: pointer;
}

.audit-table tbody tr.audit-row-action td:first-child {
  position: relative;
}

.audit-table tbody tr.audit-row-action td:first-child::before {
  content: '↗';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #94a3b8;
  opacity: 0;
  transition: opacity .2s ease;
}

.audit-table tbody tr.audit-row-action:hover td:first-child::before {
  opacity: .9;
}

.audit-table-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 16px !important;
}

.loss-drill-card {
  width: 96%;
  max-width: 1480px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(33, 37, 47, 0.98), rgba(22, 25, 34, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.loss-drill-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(99, 102, 241, 0.06));
}

.loss-drill-title-wrap {
  flex: 1;
  min-width: 0;
}

.loss-drill-title {
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;
  line-height: 1.35;
}

.loss-drill-sub {
  margin-top: 3px;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.35;
}

.loss-drill-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.loss-drill-close:hover {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

.loss-drill-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.loss-drill-kpi {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.loss-drill-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: rgba(148, 163, 184, 0.35);
}

.loss-drill-kpi span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .45px;
  text-transform: uppercase;
  color: #a8b1c3;
  margin-bottom: 10px;
  line-height: 1.35;
}

.loss-drill-kpi b {
  color: #e5e7eb;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.25px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.loss-drill-kpi b.neg {
  color: #f87171;
}

.loss-drill-kpi.metric b {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.8px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  margin-bottom: auto;
}

.loss-drill-kpi.metric-trips::before {
  background: linear-gradient(90deg, rgba(14, 165, 233, .92), rgba(56, 189, 248, .6));
}

.loss-drill-kpi.metric-loss::before {
  background: linear-gradient(90deg, rgba(248, 113, 113, .92), rgba(239, 68, 68, .62));
}

.loss-drill-kpi.causes::before {
  background: linear-gradient(90deg, rgba(168, 85, 247, .92), rgba(129, 140, 248, .58));
}

.loss-drill-kpi.causes {
  min-height: 118px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(15, 17, 23, 0.1));
  border-color: rgba(99, 102, 241, 0.26);
}

.loss-drill-cause-list {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

.loss-drill-cause-item {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loss-drill-table th:nth-child(3),
.loss-drill-table td:nth-child(3) {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.loss-drill-table th:nth-child(2),
.loss-drill-table td:nth-child(2) {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.loss-drill-table th:nth-child(5),
.loss-drill-table td:nth-child(5) {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.loss-cause-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.loss-cause-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

.loss-cause-tag.red {
  background: #ef4444;
}

.loss-cause-tag.orange {
  background: #f97316;
}

.loss-cause-tag.purple {
  background: #a855f7;
}

.loss-cause-tag.blue {
  background: #3b82f6;
}

.loss-cause-empty {
  font-size: 11px;
  color: var(--muted);
}

.loss-drill-unit {
  font-style: normal;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: 0.2px;
  color: #9ca3af;
  margin-left: 0;
  vertical-align: baseline;
}

.loss-drill-body {
  padding: 12px 18px 16px;
  overflow: auto;
}

.loss-drill-loading {
  padding: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  color: #cbd5e1;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.loss-drill-filter-wrap {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(120, 138, 177, 0.28);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(34, 43, 66, 0.44), rgba(22, 31, 50, 0.32));
}

.loss-drill-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.loss-drill-filter-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #d9e2f1;
}

.loss-drill-filter-meta {
  font-size: 11px;
  font-weight: 700;
  color: #8bb4ff;
  border: 1px solid rgba(59, 130, 246, 0.34);
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(59, 130, 246, 0.1);
}

.loss-drill-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.loss-drill-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loss-drill-filter-field span {
  font-size: 11px;
  color: #a8b3c7;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.loss-drill-filter-control {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(122, 141, 186, 0.36);
  background: linear-gradient(180deg, rgba(37, 48, 75, 0.55), rgba(29, 37, 58, 0.45));
  color: #e6edf8;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  font-family: inherit;
  color-scheme: dark;
}

.loss-drill-filter-control:focus {
  border-color: rgba(59, 130, 246, 0.52);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.loss-drill-filter-control option {
  background: #1f2a44;
  color: #e6edf8;
}

.loss-drill-filter-control option:disabled {
  color: #8ea1c9;
}

.loss-drill-filter-control::-webkit-calendar-picker-indicator {
  filter: invert(86%) sepia(10%) saturate(420%) hue-rotate(178deg) brightness(106%) contrast(96%);
  opacity: 0.92;
  cursor: pointer;
}

.loss-drill-filter-control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.loss-drill-filter-day-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(122, 141, 186, 0.3);
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.loss-drill-filter-day-panel.show {
  display: grid;
}

.loss-drill-filter-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.loss-drill-filter-btn {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: #d8e1f0;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  cursor: pointer;
}

.loss-drill-filter-btn:hover {
  border-color: rgba(239, 68, 68, 0.48);
  color: #fecaca;
}

@media(max-width:900px) {
  .loss-drill-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loss-drill-kpi.metric b {
    font-size: 38px;
  }

  .loss-drill-filter-grid,
  .loss-drill-filter-day-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:600px) {
  .loss-drill-kpis {
    grid-template-columns: 1fr;
  }

  .loss-drill-kpi {
    min-height: 100px;
  }

  .loss-drill-kpi.metric b {
    font-size: 34px;
  }

  .loss-drill-filter-grid,
  .loss-drill-filter-day-panel {
    grid-template-columns: 1fr;
  }

  .loss-drill-filter-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .loss-drill-filter-actions {
    justify-content: stretch;
  }

  .loss-drill-filter-btn {
    width: 100%;
  }
}

.modal-chart-area {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.modal-chart-title {
  font-size: 12px;
  font-weight: 600;
  color: #cfd5df !important;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Progress Ring (SVG) ── */
.progress-ring-bg {
  stroke: rgba(255, 255, 255, 0.06);
}

.progress-ring-fill {
  transition: stroke-dashoffset 1s ease;
}

/* ── Modal Animations ── */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Responsive Modal ── */
@media(max-width:900px) {
  .modal-full-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-full-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .audit-table-toolbar-main {
    flex: 1 1 100%;
  }

  .audit-table-toolbar-side {
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .audit-table-status {
    justify-content: flex-start;
  }
}

@media(max-width:600px) {

  .modal-full-grid,
  .modal-full-grid-2,
  .modal-full-grid-3 {
    grid-template-columns: 1fr;
  }

  .audit-table-toolbar,
  .audit-table-actions,
  .audit-table-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .audit-table-filter,
  .audit-table-select,
  .audit-table-select-sm,
  .audit-table-button {
    width: 100%;
  }

  .audit-table-toolbar-side {
    flex-direction: column;
    align-items: stretch;
  }

  .audit-table-status {
    justify-content: stretch;
  }

  .audit-table-meta {
    width: 100%;
    text-align: left;
  }

  .audit-table,
  .audit-table-compact {
    min-width: 100%;
    table-layout: auto;
  }

  .audit-table-compact {
    table-layout: fixed;
  }
}

/* Professional Loading Screen */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52vh;
  padding: 40px 24px 28px;
  text-align: center;
}

.loader-emblem {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.14), rgba(15, 17, 23, 0.55));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  margin-bottom: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.loader-emblem-bar {
  width: 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, #60a5fa, #6366f1);
  transform-origin: bottom;
  animation: loaderBars 1.2s ease-in-out infinite;
}

.loader-emblem-bar:nth-child(1) {
  height: 18px;
  animation-delay: 0s;
}

.loader-emblem-bar:nth-child(2) {
  height: 30px;
  animation-delay: 0.15s;
}

.loader-emblem-bar:nth-child(3) {
  height: 24px;
  animation-delay: 0.3s;
}

@keyframes loaderBars {

  0%,
  100% {
    transform: scaleY(0.65);
    opacity: 0.7;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.loader-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
}

.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent2);
  animation: loaderSpin 1.2s linear infinite;
}

.loader-ring:nth-child(2) {
  inset: 10px;
  border-top-color: var(--green);
  border-right-color: var(--accent);
  animation: loaderSpin 1.8s linear infinite reverse;
  opacity: 0.7;
}

@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}

.loader-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.loader-dots::after {
  content: '';
  animation: loaderDots 1.5s steps(4, end) infinite;
}

@keyframes loaderDots {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }
}

.loader-sub {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.loader-progress {
  width: min(560px, 92vw);
  margin: 14px auto 8px;
}

.loader-progress-bar {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.loader-progress-fill {
  height: 100%;
  width: 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
  transition: width .35s ease;
}

.loader-steps {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.loader-step {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 17, 23, 0.38);
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.loader-step.active {
  color: #cfd5df;
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(99, 102, 241, 0.08));
}

.skeleton-pulse {
  background: linear-gradient(90deg, var(--card) 25%, rgba(255, 255, 255, 0.04) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 10px;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.skeleton-grid .skeleton-pulse {
  height: 124px;
}

.skeleton-card {
  height: 140px;
  margin-bottom: 16px;
}

.skeleton-row {
  height: 52px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.shell-skeleton {
  display: block;
  background: linear-gradient(90deg, rgba(36, 42, 56, 0.92) 25%, rgba(148, 163, 184, 0.18) 50%, rgba(36, 42, 56, 0.92) 75%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.45s ease-in-out infinite;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
}

.shell-skeleton-title {
  width: 220px;
  max-width: 100%;
  height: 30px;
}

.shell-skeleton-meta {
  margin-top: 10px;
  width: 84px;
  height: 12px;
  border-radius: 999px;
}

.shell-nav-skeleton {
  padding: 8px 0;
  display: grid;
  gap: 4px;
}

.shell-skeleton-nav {
  width: 100%;
  height: 66px;
}

.shell-skeleton-topbar {
  width: min(320px, 58vw);
  height: 64px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  animation: none;
}

.shell-skeleton-topbar::before,
.shell-skeleton-topbar::after {
  content: '';
  display: block;
  flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(36, 42, 56, 0.92) 25%, rgba(148, 163, 184, 0.18) 50%, rgba(36, 42, 56, 0.92) 75%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.45s ease-in-out infinite;
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.shell-skeleton-topbar::before {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.shell-skeleton-topbar::after {
  width: min(220px, 42vw);
  height: 24px;
  border-radius: 999px;
}

@media(max-width: 900px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 600px) {
  .skeleton-grid {
    grid-template-columns: 1fr;
  }
}

/* Master front-card readability tuning (scoped to page 1 only) */
.content.page-master .master-section-header {
  padding: 12px 16px;
  gap: 12px;
}

.content.page-master .master-section-num {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.content.page-master .master-section-label {
  font-size: 10px;
  letter-spacing: 0.8px;
}

.content.page-master .master-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #d8deea;
}

.content.page-master .master-section-viewall {
  font-size: 11px;
  padding: 5px 11px;
}

.content.page-master .master-section-body {
  padding: 12px 16px;
}

.content.page-master .master-mini-kpi-label {
  font-size: 10px;
  color: #a8b1c3;
  letter-spacing: 0.35px;
}

.content.page-master .master-mini-kpi-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.content.page-master .master-mini-kpi-sub {
  font-size: 10px;
  color: #9aa4b8;
}

.content.page-master .master-compact-table {
  font-size: 11px;
}

.content.page-master .master-compact-table th {
  font-size: 10px;
  letter-spacing: 0.25px;
  color: #a8b1c3;
}

.content.page-master .master-compact-table td {
  font-size: 11px;
  color: #d6dbea;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.content.page-master .master-compact-bar {
  font-size: 11px;
}

.content.page-master .master-compact-bar-label {
  font-size: 10px;
  color: #a3adc1;
}

.content.page-master .master-compact-bar-fill {
  font-size: 9px;
}

.content.page-master .master-vs-header-compact,
.content.page-master .master-chart-card-compact h4,
.content.page-master .fleet-overview-title,
.content.page-master .fleet-overview-total,
.content.page-master .fleet-overview-legend span,
.content.page-master .fleet-share,
.content.page-master .fleet-metrics div,
.content.page-master .fleet-foot-kpi span,
.content.page-master .vehperf-card-summary-label,
.content.page-master .vehperf-card-meta,
.content.page-master .vehperf-card-share {
  font-size: 10px;
}

.content.page-master .master-vs-value,
.content.page-master .master-vs-value-compact,
.content.page-master .fleet-main,
.content.page-master .vehperf-card-summary-value,
.content.page-master .vehperf-board-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.content.page-master .master-loss-month-stats,
.content.page-master .master-loss-bar-fill,
.content.page-master .master-loss-bar-fill-compact {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (max-width: 960px) {
  .content.page-master .master-section-title {
    font-size: 13px;
  }

  .content.page-master .master-section-viewall {
    font-size: 10px;
    padding: 4px 9px;
  }
}

@media (max-width: 1023px) {
  .content.master-no-scroll.page-master {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .content.page-master .master-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    height: auto;
    min-height: 0;
    max-width: 100%;
    overflow: visible;
  }

  .content.page-master .master-dashboard-grid .master-section {
    min-height: 380px;
    min-width: 0;
    max-width: 100%;
  }

  .content.page-master .master-section-body {
    min-width: 0;
    overflow-y: visible;
  }

  .content.page-master .master-section-body > div[style*="repeat(4"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Daily Compare QA review layout */
.dc-qa-page {
  display: grid;
  gap: 20px;
  padding: 24px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#dc_result > .dc-qf-panel {
  box-sizing: border-box;
  margin: 24px 24px 20px;
  width: auto;
}

#dc_result > .dc-qf-panel + .dc-qa-page {
  padding-top: 0;
}

.dc-normal-summary {
  display: grid;
  gap: 14px;
  margin-bottom: 2px;
}

.dc-normal-filter {
  min-width: 0;
}

.dc-normal-filter .sf-bar {
  width: 100%;
}

.dc-normal-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dc-normal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dc-normal-title-wrap span {
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  flex: 0 0 auto;
}

.dc-normal-title-wrap h2 {
  margin: 0;
  color: #b0c0d6;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0;
}

.dc-normal-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Stat Pill — report header KPI chips ───────────────────────────────────
   Each pill shows a label (top) and a numeric value (bottom).
   All pills share the same size for visual balance.
*/
.dc-normal-stat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 80px;
  padding: 7px 16px;
  border-radius: 8px;
  background: rgba(148, 163, 184, .06);
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  transition: border-color .18s ease, background-color .18s ease;
}

.dc-normal-stat-pill.is-alert {
  background: rgba(239, 68, 68, .07);
  border-color: rgba(239, 68, 68, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 2px 8px rgba(239, 68, 68, .06);
}

.dc-normal-stat-pill.is-ok {
  background: rgba(16, 185, 129, .07);
  border-color: rgba(16, 185, 129, .20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.dc-normal-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #6b7280;
  white-space: nowrap;
  line-height: 1;
}

.dc-normal-stat-pill.is-alert .dc-normal-stat-label {
  color: rgba(252, 165, 165, .7);
}

.dc-normal-stat-pill.is-ok .dc-normal-stat-label {
  color: rgba(110, 231, 183, .7);
}

.dc-normal-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.3px;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.dc-normal-stat-pill.is-alert .dc-normal-stat-value {
  color: #fca5a5;
}

.dc-normal-stat-pill.is-ok .dc-normal-stat-value {
  color: #6ee7b7;
}

/* Legacy — keep for backward compat with updateCompareStatusVisibility */
.dc-normal-summary-meta b {
  font-weight: 600;
  color: #e2e8f0;
}

/* ─── Customer Status Badge (Alert / OK) ─────────────────────────────────────
   Used in customer summary card (top-right) and in report header.
   Designed for clear hierarchy: icon → bold count → soft label.
*/
.dc-normal-alert,
.dc-normal-ok,
.dc-normal-total-alert {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Alert variant — used when there are anomalies */
.dc-normal-alert,
.dc-normal-total-alert {
  color: #fca5a5 !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06)) !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(239, 68, 68, 0.08);
}

.dc-normal-alert:hover,
.dc-normal-total-alert:hover {
  border-color: rgba(239, 68, 68, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(239, 68, 68, 0.14);
}

.dc-normal-alert b,
.dc-normal-total-alert b {
  font-weight: 700 !important;
  color: #ff8b8b !important;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin: 0 1px;
}

/* Inline SVG icon — sized consistently and aligned with text */
.dc-normal-alert svg,
.dc-normal-total-alert svg {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0;
  opacity: 0.88;
}

/* Legacy <i> dot — kept for backward compatibility */
.dc-normal-alert i,
.dc-normal-total-alert i {
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 999px;
  background: #ff4d4f;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255, 77, 79, 0.5);
}

/* OK variant — used when no anomalies */
.dc-normal-ok {
  color: #6ee7b7 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.06)) !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(16, 185, 129, 0.06);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.dc-normal-ok::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  flex-shrink: 0;
}

.dc-normal-customer-list {
  display: grid;
  gap: 12px;
}

.dc-normal-customer-section {
  display: block;
}

.dc-normal-route-list {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  background: rgba(15, 17, 23, .16);
  border-top: 1px solid rgba(148, 163, 184, .11);
}

.dc-normal-customer-card {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: linear-gradient(180deg, rgba(34, 40, 53, .96), rgba(31, 36, 48, .96));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.dc-normal-customer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
}

.dc-normal-customer-id {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.dc-normal-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.dc-normal-customer-id h3 {
  margin: 0;
  color: #b0c0d6;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0;
}

.dc-normal-customer-id p {
  margin: 4px 0 0;
  color: #9aa7bd;
  font-size: 12px;
}

.dc-normal-customer-score {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}

.dc-normal-customer-score div {
  text-align: right;
}

.dc-normal-customer-score span,
.dc-normal-customer-metrics span {
  display: block;
  color: #9aa7bd;
  font-size: 11px;
}

.dc-normal-customer-score b {
  display: block;
  margin-top: 3px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Reference-day badge in single mode header */
.dc-normal-ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #93c5fd;
  background: rgba(59, 130, 246, .10);
  border: 1px solid rgba(59, 130, 246, .22);
}
.dc-normal-ref-badge::before {
  content: '⇄';
  font-size: 12px;
  opacity: .8;
}
.dc-normal-ref-badge.is-none {
  color: #6b7280;
  background: rgba(107, 114, 128, .08);
  border-color: rgba(107, 114, 128, .18);
}

/* Reference-day row inside card table — IDENTICAL typography to A-day row.
   Same font-size, font-weight, and color inheritance as .dc-qa-table td.
   Only a subtle background tint + dashed top border distinguishes the section.
*/
.dc-qa-ref-row td {
  background: rgba(59, 130, 246, .045) !important;
  border-bottom: 1px dashed rgba(59, 130, 246, .16) !important;
}
/* First ref row gets a stronger top border to mark the section start */
.dc-qa-ref-row:first-of-type td {
  border-top: 1px dashed rgba(59, 130, 246, .26) !important;
}

/* Strip label showing ref date inside card strip */
.dc-qa-ref-strip-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 9px;
  border-radius: 4px;
  background: rgba(59, 130, 246, .10);
  border: 1px solid rgba(59, 130, 246, .20);
  color: #93c5fd;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dc-qa-ref-strip-label.is-no-match {
  background: rgba(107, 114, 128, .08);
  border-color: rgba(107, 114, 128, .18);
  color: #6b7280;
}

.dc-normal-customer-metrics {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: rgba(15, 17, 23, .28);
  border-top: 1px solid rgba(148, 163, 184, .11);
}

.dc-normal-customer-metrics b {
  display: block;
  margin-top: 4px;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dc-normal-customer-metrics .is-oil {
  color: #e2e8f0;
}

/* Anomaly count in metrics row */
.dc-normal-metrics-anom {
  color: #ff4d4f !important;
}

.dc-normal-metrics-ok {
  color: #6ee7b7 !important;
}

.dc-qa-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  margin-bottom: 4px;
}

.dc-qa-page-head h2 {
  margin: 0;
  color: #dce6f4;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.dc-qa-page-head p {
  margin: 5px 0 0;
  color: #8f9caf;
  font-size: 12px;
}

.dc-qa-filter-head {
  margin: 0 0 2px;
}

.dc-qa-case {
  background: #1c2030;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22), 0 1px 3px rgba(0, 0, 0, .14);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.dc-qa-case:hover {
  border-color: rgba(148, 163, 184, .26);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28), 0 1px 4px rgba(0, 0, 0, .16);
}

.dc-qa-case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(36, 42, 56, .96), rgba(28, 33, 46, .92));
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.dc-qa-title-block {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dc-qa-title-block h3 {
  margin: 0;
  color: #7aa2ff;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .1px;
  word-break: break-word;
}

.dc-qa-identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}

.dc-qa-customer,
.dc-qa-vtype {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .2px;
  text-align: center;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', sans-serif;
}

.dc-qa-customer {
  color: #c8d4e8;
  font-weight: 600;
  background: rgba(89, 133, 225, .12);
  border: 1px solid rgba(89, 133, 225, .22);
}

.dc-qa-vtype {
  color: #94a3b8;
  font-weight: 500;
  background: rgba(148, 163, 184, .08);
  border: 1px solid rgba(148, 163, 184, .14);
}

.dc-qa-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: #9aa7bd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.dc-qa-kicker .dc-qa-kind {
  color: #d6deec;
  background: rgba(96, 165, 250, .12);
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 999px;
  padding: 2px 8px;
}

.dc-qa-kicker .dc-qa-meta {
  color: #9aa7bd;
}

.dc-qa-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 220px;
}

.dc-qa-head-actions:empty {
  display: none;
}

.dc-qa-case-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 16px;
  background: rgba(10, 12, 18, .45);
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  color: #8a97b0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15px;
}

.dc-qa-case-strip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 2px 9px;
  border-radius: 4px;
  background: rgba(89, 133, 225, .05);
  border: 1px solid rgba(89, 133, 225, .10);
  color: #a8b8d0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .1px;
  white-space: nowrap;
}

.dc-qa-case-strip span.dc-qa-ref-arrow {
  background: none;
  border: none;
  padding: 0;
  min-height: auto;
  color: #8a97b0;
  margin: 0 2px;
  font-size: 11px;
}

.dc-qa-table-wrap {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}

.dc-qa-table-wrap.is-modal {
  max-height: calc(98vh - 82px);
  overflow-x: auto !important;
}

.dc-qa-table-wrap.is-modal .dc-qa-table {
  font-size: 11.5px !important;
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
}

.dc-qa-table-wrap.is-modal th,
.dc-qa-table-wrap.is-modal td {
  padding: 7px 8px !important;
}

.dc-qa-table-wrap.is-modal .dc-qa-driver {
  min-width: 190px !important;
  max-width: none !important;
  width: auto !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.dc-qa-table-wrap.is-modal .dc-qa-badges {
  overflow: visible;
  text-overflow: clip;
}

.dc-qa-table-wrap.is-modal .dc-qa-td-flag,
.dc-qa-table-wrap.is-modal td:last-child {
  min-width: 130px;
}

.dc-qa-table-wrap.is-modal .dc-qa-pair-cell {
  max-width: none !important;
}

.dc-qa-table-wrap.is-modal .dc-qa-ab-row,
.dc-qa-table-wrap.is-modal .dc-qa-ab-row span {
  font-size: 11.5px;
  font-weight: 400;
}

.dc-qa-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.dc-qa-pair-table {
  min-width: 100%;
  width: 100%;
}

/* Unified Column Widths for Single/Normal QA Tables (8 columns) - 100% Proportional */
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) th:nth-child(1),
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) td:nth-child(1) {
  width: 7% !important;
}
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) th:nth-child(2),
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) td:nth-child(2) {
  width: 15% !important;
}
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) th:nth-child(3),
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) td:nth-child(3) {
  width: 10% !important;
}
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) th:nth-child(4),
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) td:nth-child(4) {
  width: 10% !important;
}
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) th:nth-child(5),
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) td:nth-child(5) {
  width: 10% !important;
}
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) th:nth-child(6),
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) td:nth-child(6) {
  width: 10% !important;
}
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) th:nth-child(7),
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) td:nth-child(7) {
  width: 10% !important;
}
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) th:nth-child(8),
.dc-qa-case .dc-qa-table:not(.dc-qa-pair-table) td:nth-child(8) {
  width: 28% !important;
  padding-left: 36px !important;
}

/* Unified Column Widths for Comparison Pair QA Tables (9 columns) - 100% Proportional */
.dc-qa-case .dc-qa-pair-table th:nth-child(1),
.dc-qa-case .dc-qa-pair-table td:nth-child(1) {
  width: 7% !important;
}
.dc-qa-case .dc-qa-pair-table th:nth-child(2),
.dc-qa-case .dc-qa-pair-table td:nth-child(2) {
  width: 8% !important;
}
.dc-qa-case .dc-qa-pair-table th:nth-child(3),
.dc-qa-case .dc-qa-pair-table td:nth-child(3) {
  width: 12% !important;
}
.dc-qa-case .dc-qa-pair-table th:nth-child(4),
.dc-qa-case .dc-qa-pair-table td:nth-child(4) {
  width: 9% !important;
}
.dc-qa-case .dc-qa-pair-table th:nth-child(5),
.dc-qa-case .dc-qa-pair-table td:nth-child(5) {
  width: 9% !important;
}
.dc-qa-case .dc-qa-pair-table th:nth-child(6),
.dc-qa-case .dc-qa-pair-table td:nth-child(6) {
  width: 9% !important;
}
.dc-qa-case .dc-qa-pair-table th:nth-child(7),
.dc-qa-case .dc-qa-pair-table td:nth-child(7) {
  width: 9% !important;
}
.dc-qa-case .dc-qa-pair-table th:nth-child(8),
.dc-qa-case .dc-qa-pair-table td:nth-child(8) {
  width: 9% !important;
}
.dc-qa-case .dc-qa-pair-table th:nth-child(9),
.dc-qa-case .dc-qa-pair-table td:nth-child(9) {
  width: 28% !important;
  padding-left: 36px !important;
}



.dc-qa-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  text-align: left;
  color: #d8e4f4;
  background: #252b38;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dc-qa-table td {
  padding: 8px 10px;
  color: #e8eef8;
  border-bottom: 1px solid rgba(148, 163, 184, .09);
  vertical-align: middle;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-kerning: normal;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: nowrap;
}

.dc-qa-table tbody td,
.dc-qa-table tbody td > span,
.dc-qa-table tbody td > div:not(.dc-qa-badges) {
  font-weight: 400;
}

.dc-qa-table tbody td.is-right,
.dc-qa-table tbody td.is-oil,
.dc-qa-table tbody td.is-positive,
.dc-qa-table tbody td.is-negative,
.dc-qa-pair-cell,
.dc-qa-pair-cell span,
.dc-qa-date,
.dc-qa-date-chip {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
  font-kerning: normal;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dc-qa-table tbody tr:hover td {
  background: rgba(96, 165, 250, .06);
}

.dc-qa-table .is-right {
  text-align: right;
}

.dc-qa-date {
  color: #eaf0fb;
  font-weight: 400;
}

.dc-qa-date-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.dc-qa-date-chip.is-a {
  color: #93c5fd;
  background: rgba(59, 130, 246, .14);
  border: 1px solid rgba(96, 165, 250, .18);
}

.dc-qa-date-chip.is-b {
  color: #86efac;
  background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(74, 222, 128, .18);
}

.dc-qa-driver {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #eaf0fb;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
}

.dc-qa-driver.is-company {
  color: #ff4d4f !important;
  font-weight: 400;
}

.dc-qa-muted {
  color: #6e7e98;
}

.dc-qa-table .is-oil,
.dc-qa-pair-cell.is-oil {
  color: #ffffff;
}

.dc-qa-table .is-positive,
.dc-qa-pair-cell.is-positive {
  color: #22c55e;
}

.dc-qa-table .is-negative,
.dc-qa-pair-cell.is-negative {
  color: #ff4d4f;
}

.dc-qa-pair-cell.is-blue {
  color: #ffffff;
}

.dc-qa-th-diff {
}

.dc-qa-th-flag {
}

.dc-qa-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.dc-qa-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  flex: 0 0 auto;
}

.dc-qa-badge.is-loss {
  color: #fca5a5;
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .24);
}

.dc-qa-badge.is-oil50,
.dc-qa-badge.is-oilHigh {
  color: #fdba74;
  background: rgba(249, 115, 22, .14);
  border-color: rgba(249, 115, 22, .24);
}

.dc-qa-badge.is-payHigh {
  color: #d8b4fe;
  background: rgba(168, 85, 247, .14);
  border-color: rgba(168, 85, 247, .24);
}

.dc-qa-badge.is-payOilChanged {
  color: #f9a8d4;
  background: rgba(219, 39, 119, .14);
  border-color: rgba(219, 39, 119, .26);
}

.dc-qa-badge.is-recvLow {
  color: #93c5fd;
  background: rgba(59, 130, 246, .14);
  border-color: rgba(59, 130, 246, .24);
}

.dc-qa-badge.is-recvOilChanged {
  color: #67e8f9;
  background: rgba(6, 182, 212, .14);
  border-color: rgba(6, 182, 212, .26);
}

.dc-qa-badge.is-payBasePattern {
  color: #d8b4fe;
  background: rgba(168, 85, 247, .10);
  border-color: rgba(168, 85, 247, .18);
}

.dc-qa-badge.is-recvBasePattern {
  color: #67e8f9;
  background: rgba(6, 182, 212, .10);
  border-color: rgba(6, 182, 212, .18);
}

.dc-qa-badge.is-normal {
  color: #34d399;
  background: rgba(16, 185, 129, .14);
  border: 1px solid rgba(16, 185, 129, .24);
}

.dc-qa-badge.is-noRef {
  color: #cbd5e1;
  background: rgba(100, 116, 139, .16);
  border: 1px solid rgba(100, 116, 139, .28);
}

.dc-qa-pair-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 92px;
  font-weight: 400;
  color: #e2e8f0;
  line-height: 1.25;
  letter-spacing: 0;
}

.dc-qa-pair-cell.has-inline-delta {
  /* Let columns autosize without scrolling */
}

.dc-qa-pair-cell.has-inline-delta .dc-qa-ab-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.dc-qa-inline-delta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  margin-left: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  flex-shrink: 0 !important; /* Prevent browser from shrinking delta text to zero width */
}

.dc-qa-inline-delta.is-positive {
  color: #22c55e !important;
}

.dc-qa-inline-delta.is-negative {
  color: #ff4d4f !important;
}

.dc-qa-inline-delta.is-zero,
.dc-qa-inline-delta.is-muted {
  color: #8f9caf !important;
}

.dc-qa-ab-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.dc-qa-ab-row span {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}

.dc-qa-ab-delta {
  width: fit-content;
  min-height: 18px;
  margin-top: 1px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(15, 17, 23, .24);
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.dc-qa-ab-delta.is-positive {
  color: #86efac;
  border-color: rgba(34, 197, 94, .22);
  background: rgba(34, 197, 94, .08);
}

.dc-qa-ab-delta.is-negative {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, .22);
  background: rgba(239, 68, 68, .08);
}

.dc-qa-ab-delta.is-zero,
.dc-qa-ab-delta.is-muted {
  color: #94a3b8;
}

.dc-qa-delta-label {
  font-size: 10.5px;
  font-weight: 700;
  color: currentColor;
}

.dc-qa-ab-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.dc-qa-ab-dot.is-a {
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, .25);
}

.dc-qa-ab-dot.is-b {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, .22);
}

.dc-qa-ab-label {
  width: 14px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.dc-qa-ab-label.is-a {
  color: #93c5fd;
}

.dc-qa-ab-label.is-b {
  color: #86efac;
}

.dc-qa-td-diff {
}

.dc-qa-td-flag {
}

.dc-qa-td-flag .dc-qa-badges {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  overflow: visible;
}

.dc-qa-note {
  color: #d2dbe8;
  min-width: 170px;
  font-weight: 400;
  white-space: normal !important;
}

/* ═══ Unmatched single-trip table — fixed-layout professional style ═══ */
.dc-qa-single-table {
  table-layout: fixed;
  min-width: 760px;
  border-collapse: collapse;
}

.dc-qa-single-table th {
  background: #252b38;
  color: #d8e4f4;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 9px 10px;
  border-bottom: 2px solid rgba(148, 163, 184, .22);
  white-space: nowrap;
}

.dc-qa-single-table th.is-right {
  text-align: right;
}

.dc-qa-single-table td {
  padding: 9px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(148, 163, 184, .07);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-qa-single-table tbody tr:last-child td {
  border-bottom: none;
}

.dc-qa-single-table tbody tr:hover td {
  background: rgba(96, 165, 250, .05);
}

/* Zebra stripe for readability */
.dc-qa-single-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .018);
}

.dc-qa-single-table tbody tr:nth-child(even):hover td {
  background: rgba(96, 165, 250, .05);
}

/* Flag column — allow wrap for badges */
.dc-qa-single-table td:last-child {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding-left: 12px;
}

.dc-qa-single-table th:last-child {
  padding-left: 12px;
}

.dc-qa-more {
  padding: 9px 16px;
  color: #6b7a94;
  background: rgba(10, 12, 18, .35);
  border-top: 1px solid rgba(148, 163, 184, .09);
  font-size: 10.5px;
  font-weight: 500;
  text-align: right;
  letter-spacing: .1px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.dc-qa-more:hover {
  color: #93c5fd;
  background: rgba(59, 130, 246, .06);
}

.dc-qa-more-base {
  color: #ffffff;
  font-weight: 400;
}

.dc-qa-more-base:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, .04);
}
.dc-qa-empty {
  padding: 42px 18px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 8px;
  background: #1f2430;
  color: #8f9caf;
  text-align: center;
}

.dc-qa-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(4px);
}

.dc-qa-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(1408px, 99vw);
  max-height: 98vh;
  overflow: hidden;
  background: #1f2430;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .62);
}

.dc-qa-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: #252b38;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.dc-qa-modal-titleblock {
  min-width: 0;
}

.dc-qa-modal-title {
  color: #f1f5f9;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dc-qa-modal-title-prefix {
  color: #8f9caf;
  font-size: 13px;
  font-weight: 400;
}

.dc-qa-modal-title-route {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dc-qa-modal-meta {
  margin-top: 3px;
  color: #8f9caf;
  font-size: 11px;
}

.dc-qa-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dc-qa-icon-btn,
.dc-qa-close-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}

.dc-qa-icon-btn {
  color: #8fb3ff;
  background: rgba(89, 133, 225, .10);
  border: 1px solid rgba(89, 133, 225, .35);
}

.dc-qa-close-btn {
  color: #bac6d8;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 18px;
  line-height: 1;
}

.dc-qa-icon-btn:hover {
  filter: brightness(1.18);
}

.dc-qa-close-btn:hover {
  color: #ffffff;
  background: #ef4444;
  border-color: #ef4444;
  filter: none;
}

.dc-qa-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden !important; /* Eliminate bottom horizontal scrollbar entirely */
}

.dc-qa-modal-section {
  padding: 14px 0 0;
}

.dc-qa-modal-section-main {
  padding-top: 0;
}

.dc-qa-modal-section + .dc-qa-modal-section {
  margin-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.dc-qa-modal-section-title {
  margin: 0 0 12px;
  padding: 0 16px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
}

@media (max-width: 900px) {
  .dc-qa-page {
    padding: 16px 14px 18px;
    gap: 16px;
  }

  #dc_result > .dc-qf-panel {
    margin: 16px 14px;
  }

  .dc-qa-case-head,
  .dc-qa-modal-head,
  .dc-qa-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dc-qa-head-actions {
    justify-content: flex-start;
    min-width: 0;
  }
}

/* ====== MASTER DASHBOARD PREMIUM UPGRADE (v2) ====== */

/* Progress Tubes - หลอดแสดงผลสวยงามแบบมืออาชีพ */
.master-progress-tube {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.master-progress-tube-fill {
  height: 100%;
  border-radius: 999px;
  position: relative;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.master-progress-tube-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
}

/* KPI Premium Card */
.master-kpi-premium {
  background: linear-gradient(145deg, rgba(26, 29, 39, 0.6), rgba(15, 17, 23, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.master-kpi-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0.6;
}

.master-kpi-premium:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.master-kpi-premium-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.master-kpi-premium-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.5px;
}

.master-kpi-premium-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}

/* Progress Tube for Customer */
.master-tube-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  height: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
}

.master-tube-fill {
  height: 100%;
  border-radius: 999px;
  position: relative;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.master-tube-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
}

/* Enhanced compact bar label (new structure with name/value spans) */
.master-compact-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  width: auto;
  text-align: left;
}

.master-compact-bar-label .name {
  color: var(--text);
  font-weight: 600;
}

.master-compact-bar-label .value {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
}

/* ====== END MASTER DASHBOARD PREMIUM UPGRADE ====== */

/* ════════════════════════════════════════════════════
   MASTER CARD REDESIGN v3 — Unified Professional Theme
   Shared classes: .mcr-* (Master Card Redesign)
   ════════════════════════════════════════════════════ */

/* Inherit system font + smoothing for all mcr-* */
[class^="mcr-"],
[class*=" mcr-"] {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── KPI tile (used in cards 01, 02, 03, 05) ── */
.mcr-kpi-row {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.mcr-kpi-row.cols-2 { grid-template-columns: 1fr 1fr; }
.mcr-kpi-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

.mcr-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px 13px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.55), rgba(15, 17, 23, 0.65));
  overflow: hidden;
  transition: border-color .2s, transform .2s;
  min-width: 0;
}
.mcr-kpi:hover {
  border-color: rgba(148, 163, 184, 0.25);
}
.mcr-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mcr-accent, #3b82f6);
  border-radius: 2px 0 0 2px;
}
.mcr-kpi-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.78);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 7px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcr-kpi-value {
  display: block;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: 900;
  color: var(--mcr-accent, #e5e7eb);
  letter-spacing: -0.5px;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 0.25px currentColor;
}
.mcr-kpi-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.85);
  margin-top: 6px;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcr-kpi-unit {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.7);
  margin-left: 5px;
  letter-spacing: .3px;
}

/* ── Section sub-header (e.g., "Top 5 เส้นทาง") ── */
.mcr-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.mcr-subhead-bar {
  width: 3px;
  height: 11px;
  background: var(--mcr-accent, #3b82f6);
  border-radius: 2px;
}
.mcr-subhead-text {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.88);
  letter-spacing: .7px;
  text-transform: uppercase;
}
.mcr-subhead-meta {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.7);
  letter-spacing: .15px;
}

/* ── Compact ranked row (used in cards 01, 02) ── */
.mcr-rank-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}
.mcr-rank-row:last-child { border-bottom: none; }

.mcr-rank-num {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.65);
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.mcr-rank-body { min-width: 0; }
.mcr-rank-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 5px;
}
.mcr-rank-name {
  font-size: 11.5px;
  font-weight: 500;
  color: #dde4f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .1px;
}
.mcr-rank-value {
  flex-shrink: 0;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(214, 222, 235, 0.92);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mcr-rank-meta {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.7);
  font-weight: 500;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
}
.mcr-rank-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  overflow: hidden;
  margin-top: 4px;
}
.mcr-rank-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mcr-rank-color, #3b82f6);
  transition: width .8s cubic-bezier(.16,1,.3,1);
}

/* ── Customer dual-bar (card 03) ── */
.mcr-cust {
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}
.mcr-cust:last-child { border-bottom: none; padding-bottom: 4px; }
.mcr-cust-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}
.mcr-cust-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .1px;
  min-width: 0;
}
.mcr-cust-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mcr-cust-color, #3b82f6);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--mcr-cust-color, #3b82f6);
}
.mcr-cust-label-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcr-cust-trips {
  flex-shrink: 0;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.78);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mcr-cust-bar {
  display: grid;
  grid-template-columns: 50px 1fr minmax(96px, auto);
  gap: 8px;
  align-items: center;
  margin-top: 5px;
}
.mcr-cust-tag {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.72);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mcr-cust-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  overflow: hidden;
}
.mcr-cust-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mcr-cust-color, #3b82f6);
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.mcr-cust-amount {
  text-align: right;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--mcr-cust-color, #e2e8f0);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}

/* ── Fleet card (card 04) — refined ── */
.mcr-fleet {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mcr-fleet-overview {
  padding: 11px 12px 12px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.5), rgba(15, 17, 23, 0.6));
}
.mcr-fleet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.mcr-fleet-title {
  font-size: 10px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.82);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.mcr-fleet-total {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.85);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mcr-fleet-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  overflow: hidden;
  display: flex;
}
.mcr-fleet-seg {
  height: 100%;
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.mcr-fleet-seg.co { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.mcr-fleet-seg.ou { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.mcr-fleet-legend {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 10.5px;
  color: rgba(203, 213, 225, 0.85);
  font-weight: 500;
  letter-spacing: .1px;
}
.mcr-fleet-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.mcr-fleet-legend i.co { background: #3b82f6; box-shadow: 0 0 5px rgba(59, 130, 246, 0.4); }
.mcr-fleet-legend i.ou { background: #f59e0b; box-shadow: 0 0 5px rgba(245, 158, 11, 0.4); }
.mcr-fleet-legend b {
  margin-left: 5px;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.mcr-fleet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.mcr-fleet-card {
  position: relative;
  padding: 12px 13px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.5), rgba(15, 17, 23, 0.6));
  overflow: hidden;
}
.mcr-fleet-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 2px 0 0 2px;
}
.mcr-fleet-card.co::before { background: #3b82f6; }
.mcr-fleet-card.ou::before { background: #f59e0b; }

.mcr-fleet-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.mcr-fleet-card-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.88);
  letter-spacing: .25px;
}
.mcr-fleet-card-share {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mcr-fleet-card.co .mcr-fleet-card-share {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.mcr-fleet-card.ou .mcr-fleet-card-share {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.mcr-fleet-card-main {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  color: #e5e7eb;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1.18;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcr-fleet-card-main small {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.75);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: .15px;
}
.mcr-fleet-card-stats {
  display: grid;
  gap: 6px;
}
.mcr-fleet-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 10.5px;
  min-width: 0;
}
.mcr-fleet-stat span {
  color: rgba(148, 163, 184, 0.82);
  font-weight: 500;
  letter-spacing: .15px;
  flex-shrink: 0;
}
.mcr-fleet-stat b {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  color: #e2e8f0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcr-fleet-stat b.pos { color: #4ade80; }
.mcr-fleet-stat b.neg { color: #f87171; }

.mcr-fleet-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.mcr-fleet-foot-kpi {
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(15, 17, 23, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mcr-fleet-foot-kpi span {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.82);
  font-weight: 500;
  letter-spacing: .25px;
  flex-shrink: 0;
}
.mcr-fleet-foot-kpi b {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11.5px;
  color: #e2e8f0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcr-fleet-foot-kpi b.pos { color: #4ade80; }
.mcr-fleet-foot-kpi b.neg { color: #f87171; }

/* ── Loss month bar (card 05) ── */
.mcr-loss-month {
  display: grid;
  grid-template-columns: 38px 1fr 110px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}
.mcr-loss-month:last-child { border-bottom: none; padding-bottom: 4px; }
.mcr-loss-month-label {
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .15px;
}
.mcr-loss-month-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.08);
  overflow: hidden;
}
.mcr-loss-month-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.55), #ef4444);
  transition: width .8s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.22);
}
.mcr-loss-month-stat {
  text-align: right;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  color: #f87171;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
  white-space: nowrap;
  line-height: 1.3;
}
.mcr-loss-month-stat small {
  display: block;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 9.5px;
  color: rgba(148, 163, 184, 0.7);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: .1px;
}

/* ── Vehicle Performance row (card 06) — refined ── */
.mcr-veh-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 12px;
}
.mcr-veh-summary-box {
  position: relative;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.5), rgba(15, 17, 23, 0.6));
  overflow: hidden;
}
.mcr-veh-summary-box::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mcr-veh, #06b6d4);
  border-radius: 2px 0 0 2px;
}
.mcr-veh-summary-label {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.78);
  text-transform: uppercase;
  letter-spacing: .55px;
  margin-bottom: 6px;
}
.mcr-veh-summary-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
  letter-spacing: .1px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcr-veh-summary-sub {
  display: block;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.85);
  font-weight: 500;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}

.mcr-veh-list {
  display: grid;
  gap: 7px;
}
.mcr-veh-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(26, 29, 39, 0.35);
  align-items: center;
  transition: border-color .2s, background .2s;
}
.mcr-veh-row:hover {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(26, 29, 39, 0.5);
}
.mcr-veh-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 7px;
  background: rgba(15, 17, 23, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
  color: var(--mcr-veh, #06b6d4);
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .2px;
}
.mcr-veh-main {
  min-width: 0;
}
.mcr-veh-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.mcr-veh-type {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcr-veh-share {
  flex-shrink: 0;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mcr-veh, #06b6d4);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mcr-veh-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  overflow: hidden;
  margin-bottom: 7px;
}
.mcr-veh-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mcr-veh, #06b6d4);
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.mcr-veh-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 10.5px;
}
.mcr-veh-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.mcr-veh-stat span {
  color: rgba(148, 163, 184, 0.82);
  font-weight: 500;
  letter-spacing: .15px;
}
.mcr-veh-stat b {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  color: #e2e8f0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mcr-veh-stat b.pos { color: #4ade80; }
.mcr-veh-stat b.neg { color: #f87171; }

.mcr-veh-trips {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.7);
  font-weight: 500;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}

/* ── Two-col ranking layout (card 02) ── */
.mcr-rank-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mcr-rank-col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.mcr-rank-col-head .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mcr-rank-col-head .dot.pos { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.45); }
.mcr-rank-col-head .dot.neg { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.45); }
.mcr-rank-col-head .text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.mcr-rank-col-head .text.pos { color: #4ade80; }
.mcr-rank-col-head .text.neg { color: #f87171; }

@media (max-width: 1023px) {
  .content.page-master .mcr-kpi-row.cols-2,
  .content.page-master .mcr-kpi-row.cols-4,
  .content.page-master .mcr-rank-cols,
  .content.page-master .mcr-fleet-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .content.page-master .mcr-cust-bar {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .content.page-master .mcr-cust-amount {
    grid-column: 2;
    text-align: left;
  }

  .content.page-master .mcr-rank-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .content.page-master .mcr-rank-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* ════════════════════════════════════════════════════
   MODAL VIEW ALL — Premium Professional Layout
   Shared classes: .mvw-* (Modal View all)
   For redesigned Cards 2, 3, 4, 5 modal contents
   ════════════════════════════════════════════════════ */

[class^="mvw-"],
[class*=" mvw-"] {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Page hero — Section banner ── */
.mvw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(135deg, rgba(var(--mvw-rgb, 59, 130, 246), 0.08), rgba(15, 17, 23, 0.4) 60%);
  position: relative;
  overflow: hidden;
}
.mvw-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--mvw-color, #3b82f6);
}
.mvw-hero-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--mvw-color, #3b82f6);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}
.mvw-hero-title {
  font-size: 18px;
  font-weight: 600;
  color: #e8edf5;
  letter-spacing: 0.1px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.mvw-hero-desc {
  font-size: 12.5px;
  color: rgba(148, 163, 184, 0.85);
  line-height: 1.5;
  font-weight: 400;
}
.mvw-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.mvw-hero-meta-label {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.7);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.mvw-hero-meta-value {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--mvw-color, #e8edf5);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.3px;
  line-height: 1.15;
}

/* ── KPI Row (top of modal content) ── */
.mvw-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.mvw-kpi-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mvw-kpi-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mvw-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px 15px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.5), rgba(15, 17, 23, 0.65));
  overflow: hidden;
  min-width: 0;
  transition: border-color .2s, transform .2s;
}
.mvw-kpi:hover {
  border-color: rgba(148, 163, 184, 0.26);
  transform: translateY(-1px);
}
.mvw-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mvw-kpi-color, #3b82f6);
}
.mvw-kpi-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.78);
  text-transform: uppercase;
  letter-spacing: .55px;
  margin-bottom: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-kpi-value {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 900;
  color: var(--mvw-kpi-color, #e8edf5);
  letter-spacing: -0.5px;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 0.25px currentColor;
}
.mvw-kpi-sub {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.85);
  font-weight: 500;
  margin-top: 7px;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  margin-left: 8px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  letter-spacing: .15px;
}
.mvw-kpi-delta.up {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.22);
}
.mvw-kpi-delta.down {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.22);
}

/* ── Section panel ── */
.mvw-panel {
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.45), rgba(15, 17, 23, 0.55));
  overflow: hidden;
  margin-bottom: 16px;
}
.mvw-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent);
}
.mvw-panel-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mvw-panel-bar {
  width: 3px;
  height: 16px;
  background: var(--mvw-panel-color, #3b82f6);
  border-radius: 2px;
}
.mvw-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .15px;
}
.mvw-panel-meta {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.78);
  letter-spacing: .2px;
}
.mvw-panel-body {
  padding: 16px 18px 18px;
}

/* ── Distribution Bar (stacked) ── */
.mvw-dist {
  display: flex;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.18);
}
.mvw-dist-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .25px;
  transition: flex .8s cubic-bezier(.16,1,.3,1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  min-width: 60px;
  white-space: nowrap;
}
.mvw-dist-seg.pos { background: linear-gradient(180deg, #22c55ed8, #16a34a); }
.mvw-dist-seg.zero { background: linear-gradient(180deg, #f59e0bd8, #d97706); }
.mvw-dist-seg.neg { background: linear-gradient(180deg, #ef4444d8, #dc2626); }

/* ── Stat tile (smaller, used inside panels) ── */
.mvw-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mvw-stat-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mvw-stat {
  position: relative;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 17, 23, 0.4);
  overflow: hidden;
  min-width: 0;
}
.mvw-stat::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--mvw-stat-color, #3b82f6);
}
.mvw-stat-label {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.75);
  text-transform: uppercase;
  letter-spacing: .55px;
  margin-bottom: 6px;
}
.mvw-stat-value {
  display: block;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--mvw-stat-color, #e8edf5);
  letter-spacing: -0.2px;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-stat-sub {
  display: block;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.78);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Ranking row inside modal (detailed) ── */
.mvw-rank-list {
  display: grid;
  gap: 6px;
}
.mvw-rank-list .mvw-rank-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(15, 17, 23, 0.35);
  transition: border-color .2s, background .2s;
}
.mvw-rank-list .mvw-rank-row:hover {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(26, 29, 39, 0.5);
}
.mvw-rank-num {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .25px;
  color: var(--mvw-rank-color, rgba(148, 163, 184, 0.7));
  background: rgba(15, 17, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 6px;
  padding: 4px 0;
}
.mvw-rank-body {
  min-width: 0;
}
.mvw-rank-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.mvw-rank-name {
  font-size: 12px;
  font-weight: 500;
  color: #e2e8f0;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-rank-meta {
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.7);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: .15px;
}
.mvw-rank-amount {
  flex-shrink: 0;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--mvw-rank-color, #e2e8f0);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mvw-rank-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  overflow: hidden;
}
.mvw-rank-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mvw-rank-color, #3b82f6);
  transition: width .8s cubic-bezier(.16,1,.3,1);
}

/* ── Two-column layout ── */
.mvw-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

/* ── Fleet hero card (Card 04) ── */
.mvw-fleet-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.mvw-fleet-hero-card {
  position: relative;
  padding: 18px 20px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(135deg, rgba(var(--mvw-fleet-rgb, 59, 130, 246), 0.08), rgba(15, 17, 23, 0.55));
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}
.mvw-fleet-hero-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--mvw-fleet, #3b82f6);
}
.mvw-fleet-hero-ring {
  flex-shrink: 0;
  position: relative;
}
.mvw-fleet-hero-info {
  min-width: 0;
}
.mvw-fleet-hero-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mvw-fleet, #3b82f6);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 6px;
}
.mvw-fleet-hero-value {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: #e8edf5;
  letter-spacing: -0.4px;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  margin-bottom: 4px;
}
.mvw-fleet-hero-value small {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.8);
  margin-left: 6px;
  letter-spacing: .2px;
}
.mvw-fleet-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.85);
}
.mvw-fleet-hero-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  letter-spacing: .15px;
  font-weight: 500;
}
.mvw-fleet-hero-stats b {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  color: #e2e8f0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mvw-fleet-hero-stats b.pos { color: #4ade80; }
.mvw-fleet-hero-stats b.neg { color: #f87171; }

/* ── Compare table for Card 04 ── */
.mvw-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
}
.mvw-cmp-table th,
.mvw-cmp-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.mvw-cmp-table th {
  font-size: 10px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.78);
  text-transform: uppercase;
  letter-spacing: .55px;
  text-align: right;
  background: rgba(15, 17, 23, 0.4);
}
.mvw-cmp-table th:first-child {
  text-align: left;
}
.mvw-cmp-table th.col-co { color: #93c5fd; }
.mvw-cmp-table th.col-ou { color: #fcd34d; }
.mvw-cmp-table td {
  text-align: right;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-weight: 600;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .15px;
}
.mvw-cmp-table td:first-child {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  text-align: left;
  color: rgba(203, 213, 225, 0.85);
  font-weight: 500;
  letter-spacing: .1px;
}
.mvw-cmp-table tbody tr:last-child td { border-bottom: none; }
.mvw-cmp-table tbody tr:hover td { background: rgba(59, 130, 246, 0.04); }
.mvw-cmp-table td.pos { color: #4ade80; }
.mvw-cmp-table td.neg { color: #f87171; }
.mvw-cmp-table td.winner {
  position: relative;
}
.mvw-cmp-table td.winner::after {
  content: '★';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: rgba(245, 158, 11, 0.85);
}

/* ── Loss month grid (Card 05) ── */
.mvw-loss-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.mvw-loss-month-tile {
  position: relative;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 17, 23, 0.4);
  text-align: center;
  overflow: hidden;
}
.mvw-loss-month-tile::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.5), #ef4444);
}
.mvw-loss-month-name {
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .15px;
  margin-bottom: 8px;
}
.mvw-loss-month-count {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #f87171;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.2px;
  line-height: 1.18;
  margin-bottom: 2px;
}
.mvw-loss-month-count-label {
  font-size: 9.5px;
  color: rgba(148, 163, 184, 0.7);
  font-weight: 500;
  letter-spacing: .2px;
  margin-bottom: 8px;
}
.mvw-loss-month-amount {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(248, 113, 113, 0.9);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  letter-spacing: .15px;
}

/* ── Customer list (Card 03) ── */
.mvw-cust-list {
  display: grid;
  gap: 8px;
}
.mvw-cust-card {
  position: relative;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 17, 23, 0.38);
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.mvw-cust-card:hover {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(26, 29, 39, 0.5);
}
.mvw-cust-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mvw-cust-color, #3b82f6);
}
.mvw-cust-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 9px;
}
.mvw-cust-rank {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .25px;
  color: var(--mvw-cust-color, rgba(148, 163, 184, 0.7));
  background: rgba(15, 17, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 6px;
  padding: 4px 0;
}
.mvw-cust-name {
  font-size: 13px;
  font-weight: 600;
  color: #e8edf5;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-cust-name small {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.7);
  font-weight: 500;
  margin-left: 8px;
  letter-spacing: .15px;
}
.mvw-cust-pct {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
}
.mvw-cust-pct.pos {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.22);
}
.mvw-cust-pct.neg {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.22);
}
.mvw-cust-bars {
  display: grid;
  gap: 6px;
}
.mvw-cust-bar {
  display: grid;
  grid-template-columns: 60px 1fr minmax(110px, auto);
  gap: 10px;
  align-items: center;
}
.mvw-cust-bar-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.75);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mvw-cust-bar-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  overflow: hidden;
}
.mvw-cust-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.mvw-cust-bar-amount {
  text-align: right;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: #e2e8f0;
  letter-spacing: .15px;
}

/* ── Trend mini-chart polished ── */
.mvw-spark-wrap {
  padding: 4px 0;
  /* No scrollbar — sparkline auto-fits to panel width */
}
.mvw-spark-foot {
  display: flex;
  gap: 4px; /* Matches sparkline-container gap */
  padding-left: 8px; /* Matches sparkline-container padding */
  padding-right: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.mvw-spark-month {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 4px 2px;
  border-radius: 6px;
}
.mvw-spark-month-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .15px;
  margin-bottom: 3px;
}
.mvw-spark-month-value {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.1px;
}
.mvw-spark-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.mvw-spark-total span {
  font-size: 11px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.78);
  letter-spacing: .2px;
}
.mvw-spark-total b {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.1px;
}


/* ── Vehicle list (Card 06 modal) ── */
.mvw-veh-list {
  display: grid;
  gap: 10px;
}
.mvw-veh-card {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(26, 29, 39, 0.45), rgba(15, 17, 23, 0.55));
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.mvw-veh-card:hover {
  border-color: rgba(148, 163, 184, 0.26);
  transform: translateY(-1px);
}
.mvw-veh-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mvw-veh-color, #06b6d4);
}
.mvw-veh-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 7px;
  background: rgba(15, 17, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  color: var(--mvw-veh-color, #06b6d4);
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.mvw-veh-body { min-width: 0; }
.mvw-veh-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.mvw-veh-type {
  font-size: 14px;
  font-weight: 600;
  color: #e8edf5;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-veh-share-pill {
  flex-shrink: 0;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
  color: var(--mvw-veh-color, #06b6d4);
  background: color-mix(in srgb, var(--mvw-veh-color, #06b6d4) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mvw-veh-color, #06b6d4) 25%, transparent);
}
.mvw-veh-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  overflow: hidden;
  margin-bottom: 9px;
}
.mvw-veh-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mvw-veh-color, #06b6d4);
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.mvw-veh-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mvw-veh-metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mvw-veh-metric span {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.78);
  text-transform: uppercase;
  letter-spacing: .55px;
}
.mvw-veh-metric b {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-veh-metric b.pos { color: #4ade80; }
.mvw-veh-metric b.neg { color: #f87171; }

/* ── Monthly summary table (Card 01 modal) ── */
.mvw-month-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
}
.mvw-month-table th,
.mvw-month-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.mvw-month-table th {
  font-size: 10px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.78);
  text-transform: uppercase;
  letter-spacing: .55px;
  text-align: right;
  background: rgba(15, 17, 23, 0.4);
  white-space: nowrap;
}
.mvw-month-table th:first-child { text-align: left; }
.mvw-month-table td {
  text-align: right;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-weight: 600;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .15px;
}
.mvw-month-table td:first-child {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  text-align: left;
  color: rgba(203, 213, 225, 0.9);
  font-weight: 600;
  letter-spacing: .1px;
}
.mvw-month-table tbody tr:hover td { background: rgba(59, 130, 246, 0.04); }
.mvw-month-table tbody tr:last-child td { border-bottom: none; }
.mvw-month-table tfoot td {
  background: rgba(59, 130, 246, 0.06);
  font-weight: 700;
  color: #e8edf5;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  border-bottom: none;
}
.mvw-month-table tfoot td:first-child {
  color: #93c5fd;
  font-weight: 700;
}
.mvw-month-table td.pos { color: #4ade80; }
.mvw-month-table td.neg { color: #f87171; }

/* ── Insight strip (top callouts in card 01) ── */
.mvw-insight-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.mvw-insight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 17, 23, 0.4);
  position: relative;
  overflow: hidden;
}
.mvw-insight::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--mvw-ins-color, #3b82f6);
}
.mvw-insight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mvw-ins-color, #3b82f6);
  box-shadow: 0 0 8px var(--mvw-ins-color, #3b82f6);
  flex-shrink: 0;
}
.mvw-insight-body {
  min-width: 0;
  flex: 1;
}
.mvw-insight-label {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.75);
  text-transform: uppercase;
  letter-spacing: .55px;
  margin-bottom: 2px;
}
.mvw-insight-value {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-insight-value b {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  color: var(--mvw-ins-color, #93c5fd);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}


/* ════════════════════════════════════════════════════
   RANKING TABLE v2 — Financial-report style
   Replaces tube/bar layout with elegant tabular rows
   Shared classes: .mvw-rt-* (Modal View Ranking Table)
   ════════════════════════════════════════════════════ */

[class^="mvw-rt-"],
[class*=" mvw-rt-"] {
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container */
.mvw-rt {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(15, 17, 23, 0.3);
}

/* Header row */
.mvw-rt-head {
  display: grid;
  gap: 14px;
  padding: 11px 16px 11px 12px;
  background: rgba(15, 17, 23, 0.55);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.7);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mvw-rt-head > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-rt-head .num { text-align: center; }
.mvw-rt-head .right { text-align: right; }
.mvw-rt-head .center { text-align: center; }

/* Row */
.mvw-rt-row {
  display: grid;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  transition: background .18s;
  align-items: center;
  position: relative;
}
.mvw-rt-row:last-child { border-bottom: none; }
.mvw-rt-row:hover {
  background: rgba(59, 130, 246, 0.04);
}
.mvw-rt-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--mvw-rt-color, transparent);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity .18s;
}
.mvw-rt-row:hover::before { opacity: 1; }
.mvw-rt-row.tier-1::before,
.mvw-rt-row.tier-2::before,
.mvw-rt-row.tier-3::before {
  opacity: .6;
}

/* Rank medal */
.mvw-rt-medal {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  background: rgba(15, 17, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(148, 163, 184, 0.82);
  flex-shrink: 0;
  transition: all .18s;
  justify-self: center;
}
.tier-1 .mvw-rt-medal {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(245, 158, 11, 0.08));
  border-color: rgba(250, 204, 21, 0.4);
  color: #fde68a;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.18), inset 0 0 0 1px rgba(250, 204, 21, 0.2);
}
.tier-2 .mvw-rt-medal {
  background: linear-gradient(135deg, rgba(203, 213, 225, 0.18), rgba(148, 163, 184, 0.08));
  border-color: rgba(203, 213, 225, 0.4);
  color: #e2e8f0;
  box-shadow: 0 0 8px rgba(203, 213, 225, 0.12), inset 0 0 0 1px rgba(203, 213, 225, 0.18);
}
.tier-3 .mvw-rt-medal {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.18), rgba(180, 83, 9, 0.08));
  border-color: rgba(217, 119, 6, 0.4);
  color: #fdba74;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.14), inset 0 0 0 1px rgba(217, 119, 6, 0.18);
}

/* Name column */
.mvw-rt-info {
  min-width: 0;
}
.mvw-rt-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.mvw-rt-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.78);
  font-weight: 500;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-rt-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.35);
  flex-shrink: 0;
}

/* Number columns */
.mvw-rt-num {
  text-align: right;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
  white-space: nowrap;
}
.mvw-rt-num small {
  display: inline-block;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.7);
  letter-spacing: .15px;
  margin-left: 6px;
}
.mvw-rt-num.pos { color: #4ade80; }
.mvw-rt-num.neg { color: #f87171; }
.mvw-rt-num.accent { color: var(--mvw-rt-color, #93c5fd); }

/* Pill (chip) */
.mvw-rt-pill {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .15px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mvw-rt-pill.pos {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.22);
}
.mvw-rt-pill.neg {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.22);
}
.mvw-rt-pill.muted {
  background: rgba(148, 163, 184, 0.1);
  color: rgba(203, 213, 225, 0.85);
  border-color: rgba(148, 163, 184, 0.2);
}
.mvw-rt-pill.accent {
  background: color-mix(in srgb, var(--mvw-rt-color, #3b82f6) 15%, transparent);
  color: var(--mvw-rt-color, #93c5fd);
  border-color: color-mix(in srgb, var(--mvw-rt-color, #3b82f6) 28%, transparent);
}

/* Share indicator — minimalist dot scale (replaces tube bar) */
.mvw-rt-share {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.mvw-rt-share-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.18);
  transition: background .2s;
}
.mvw-rt-share-dot.on {
  background: var(--mvw-rt-color, #3b82f6);
  box-shadow: 0 0 4px var(--mvw-rt-color, #3b82f6);
}

/* Column variants — explicit minmax for consistent alignment */
.mvw-rt.cols-trips {
  grid-template-columns: 46px minmax(0, 1fr);
}
.mvw-rt.cols-trips .mvw-rt-head,
.mvw-rt.cols-trips .mvw-rt-row {
  grid-template-columns: 46px minmax(0, 1.4fr) minmax(100px, 120px) minmax(0, 1.8fr) minmax(150px, 170px);
}
.mvw-rt.cols-rank {
  grid-template-columns: 46px minmax(0, 1fr) auto;
}
.mvw-rt.cols-rank .mvw-rt-head,
.mvw-rt.cols-rank .mvw-rt-row {
  grid-template-columns: 46px minmax(0, 1fr) minmax(130px, 160px);
}
.mvw-rt.cols-customer .mvw-rt-head,
.mvw-rt.cols-customer .mvw-rt-row {
  grid-template-columns: 46px minmax(0, 1fr) minmax(120px, 140px) minmax(120px, 140px) minmax(76px, 88px);
}
.mvw-rt.cols-vehicle .mvw-rt-head,
.mvw-rt.cols-vehicle .mvw-rt-row {
  grid-template-columns: 46px minmax(0, 1fr) minmax(100px, 120px) minmax(120px, 140px) minmax(120px, 140px) minmax(76px, 88px);
}

/* Mini share visualization — professional financial-grade bar
   Used only in Top 10 Routes (Card 01) — bar width proportional to max value */
.mvw-rt-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}
.mvw-rt-mini-track {
  position: relative;
  height: 10px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.08);
  overflow: hidden;
  min-width: 90px;
}
/* Subtle vertical gridlines at 25/50/75% — financial chart style */
.mvw-rt-mini-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 24.7%, rgba(148,163,184,0.1) 24.7%, rgba(148,163,184,0.1) 25.3%, transparent 25.3%,
      transparent 49.7%, rgba(148,163,184,0.14) 49.7%, rgba(148,163,184,0.14) 50.3%, transparent 50.3%,
      transparent 74.7%, rgba(148,163,184,0.1) 74.7%, rgba(148,163,184,0.1) 75.3%, transparent 75.3%);
  pointer-events: none;
  z-index: 1;
}
.mvw-rt-mini-fill {
  position: relative;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mvw-rt-color, #3b82f6) 65%, transparent),
    var(--mvw-rt-color, #3b82f6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 8px color-mix(in srgb, var(--mvw-rt-color, #3b82f6) 35%, transparent);
  transition: width .9s cubic-bezier(.16,1,.3,1);
  z-index: 2;
}
.mvw-rt-mini-pct {
  font-family: 'Inter', 'Prompt', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #e8edf5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .15px;
  min-width: 56px;
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}
.mvw-rt-mini-pct small {
  display: inline-block;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.7);
  letter-spacing: .15px;
  margin-left: 5px;
}


/* Standalone customer column for Top 10 Routes table (Card 01) */
.mvw-rt-customer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(203, 213, 225, 0.92);
  letter-spacing: .1px;
  white-space: nowrap;
}
.mvw-rt-customer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mvw-rt-color, #3b82f6);
  box-shadow: 0 0 8px var(--mvw-rt-color, #3b82f6);
  flex-shrink: 0;
}
.mvw-rt-customer-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvw-rt-customer small {
  display: inline-block;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.65);
  letter-spacing: .15px;
  margin-left: 6px;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════
   POPUP / MODAL DEPTH ENHANCEMENT
   Darker backgrounds for all modal overlays and inner panels
   ════════════════════════════════════════════════════ */

/* Loss drill modal */
#lossDrillModal > div,
#lossDrillModal .loss-drill-card {
  background: #1e2235 !important;
  border-color: rgba(58, 63, 85, 0.9) !important;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* Anomaly modal (dc_anom_capture) */
#dc_anom_capture {
  background: #1e2235 !important;
  border-color: rgba(58, 63, 85, 0.9) !important;
}
#dc_anom_capture > div:first-child {
  background: rgba(34, 38, 58, 0.95) !important;
  border-bottom-color: rgba(58, 63, 85, 0.8) !important;
}

/* Unmatched modal (dc_unm_capture) */
#dc_unm_capture {
  background: #1e2235 !important;
  border-color: rgba(58, 63, 85, 0.9) !important;
}
#dc_unm_capture > div:first-child {
  background: rgba(34, 38, 58, 0.95) !important;
  border-bottom-color: rgba(58, 63, 85, 0.8) !important;
}

/* Master modal (View All) */
#masterModal > div {
  background: #1e2235 !important;
  border-color: rgba(58, 63, 85, 0.9) !important;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* Modal overlay backdrops — darker */
#lossDrillModal,
#masterModal {
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Inner content scroll area of all modals */
#masterModal > div > div:last-child {
  background: rgba(15, 17, 23, 0.35);
}

/* Loss drill inner panels */
.loss-drill-card {
  background: #1e2235;
  border-color: rgba(58, 63, 85, 0.9);
}
.loss-drill-head {
  background: linear-gradient(180deg, rgba(44, 49, 69, 0.6), transparent);
  border-bottom-color: rgba(58, 63, 85, 0.8) !important;
}
.loss-drill-body {
  background: rgba(15, 17, 23, 0.3);
}

/* Audit table inside modals — deeper background */
.modal-section-card {
  background: linear-gradient(180deg, rgba(34, 38, 58, 0.55), rgba(15, 17, 23, 0.65)) !important;
}
.audit-table-wrap {
  background: rgba(15, 17, 23, 0.45) !important;
}
.audit-table th {
  background: rgba(15, 17, 23, 0.9) !important;
}


/* ════════════════════════════════════════════════════════════════
   FLATPICKR CALENDAR — PROFESSIONAL DARK THEME OVERRIDE
   Elegant, formal calendar design matching dashboard aesthetics
   ════════════════════════════════════════════════════════════════ */

.flatpickr-calendar {
  background: linear-gradient(180deg, #1a1f35 0%, #141827 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.18) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  padding: 0 !important;
  width: 320px !important;
  overflow: hidden;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif !important;
  animation: fpCalendarIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fpCalendarIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.flatpickr-calendar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
  border-radius: 16px 16px 0 0;
  z-index: 10;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none !important;
}

/* ── Month Navigation Header ── */
.flatpickr-months {
  background: linear-gradient(180deg, rgba(26, 31, 53, 0.98), rgba(20, 24, 39, 0.95)) !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
  padding: 16px 16px 12px !important;
  align-items: center !important;
  border-radius: 16px 16px 0 0 !important;
}

.flatpickr-months .flatpickr-month {
  background: transparent !important;
  height: auto !important;
  overflow: visible !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: relative !important;
  top: auto !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  fill: #94a3b8 !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  fill: #60a5fa !important;
  transform: scale(1.05);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px !important;
  height: 14px !important;
  fill: inherit !important;
}

.flatpickr-current-month {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.2px !important;
  padding: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  border: none !important;
  color: #e2e8f0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 2px 4px !important;
  cursor: pointer !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  color: #60a5fa !important;
}

.flatpickr-current-month input.cur-year {
  background: transparent !important;
  border: none !important;
  color: #e2e8f0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Prompt', 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif !important;
  padding: 0 2px !important;
  cursor: default !important;
}

.flatpickr-current-month .numInputWrapper {
  width: auto !important;
}

.flatpickr-current-month .numInputWrapper:hover {
  background: transparent !important;
}

.flatpickr-current-month .numInputWrapper span {
  display: none !important;
}

/* ── Weekday Headers ── */
.flatpickr-weekdays {
  background: transparent !important;
  padding: 8px 12px 4px !important;
  border-bottom: none !important;
}

.flatpickr-weekday {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: transparent !important;
}

/* ── Day Grid ── */
.flatpickr-days {
  padding: 4px 12px 12px !important;
  border: none !important;
  width: 100% !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  justify-content: center !important;
}

.flatpickr-day {
  width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 2px !important;
  border-radius: 10px !important;
  color: #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}

.flatpickr-day:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

/* Today */
.flatpickr-day.today {
  border-color: rgba(59, 130, 246, 0.5) !important;
  background: rgba(59, 130, 246, 0.08) !important;
  color: #60a5fa !important;
  font-weight: 700 !important;
}

.flatpickr-day.today:hover {
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Range between */
.flatpickr-day.inRange {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: transparent !important;
  color: #93c5fd !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.flatpickr-day.startRange {
  border-radius: 10px 0 0 10px !important;
}

.flatpickr-day.endRange {
  border-radius: 0 10px 10px 0 !important;
}

.flatpickr-day.startRange.endRange {
  border-radius: 10px !important;
}

/* Previous/Next month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #334155 !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  color: #64748b !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Disabled days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #1e293b !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
}

/* ── Time Input (if used) ── */
.flatpickr-time {
  border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
  background: rgba(15, 17, 23, 0.4) !important;
  padding: 8px 12px !important;
  border-radius: 0 0 16px 16px !important;
}

.flatpickr-time input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 8px !important;
  color: #e2e8f0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.flatpickr-time .flatpickr-time-separator {
  color: #64748b !important;
}

/* ── Scrollbar inside calendar ── */
.flatpickr-calendar ::-webkit-scrollbar {
  width: 4px;
}

.flatpickr-calendar ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
  .flatpickr-calendar {
    width: 290px !important;
    border-radius: 14px !important;
  }

  .flatpickr-day {
    width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 12px !important;
  }

  .flatpickr-months {
    padding: 12px 12px 10px !important;
  }
}