/* KoolAI Employee Surface — Kool Gas Branded
   Palette refined from canonical logo-derived brand guidelines.
   Colors: Industrial Black (#1a1a1a) + Trust Blue (#0071bc).
   No OCYL branding. No governance language. System fonts only. */

:root {
  /* === Kool Gas Brand (Canonical — logo-derived) === */
  --kg-primary: #0071bc;
  --kg-primary-light: #3a9ad9;
  --kg-primary-dark: #005a96;
  --kg-accent: #ff6600;
  --kg-accent-soft: #ff944d;

  /* === Backgrounds === */
  --kg-bg: #f5f5f5;
  --kg-surface: #ffffff;
  --kg-surface-alt: #eef1f4;

  /* === Text === */
  --kg-text: #1a1a1a;
  --kg-text-dim: #444444;
  --kg-text-heading: #1a1a1a;

  /* === Borders === */
  --kg-border: #dee2e6;
  --kg-border-strong: #adb5bd;

  /* === Status === */
  --kg-status-good: #00a651;
  --kg-status-warn: #ff6600;
  --kg-status-error: #cc0000;
  --kg-status-info: #0071bc;

  /* === Typography === */
  --kg-font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --kg-font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --kg-font-mono: 'Courier New', Courier, monospace;

  /* === Spacing === */
  --kg-space-xs: 4px;
  --kg-space-sm: 8px;
  --kg-space-md: 16px;
  --kg-space-lg: 24px;
  --kg-space-xl: 32px;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--kg-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--kg-text);
  background: var(--kg-bg);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 100vw;
}

/* === Header === */
.kg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--kg-space-md);
  background: var(--kg-primary-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.kg-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg-logo {
  height: 34px;
  width: auto;
}

.kg-header-title {
  font-family: var(--kg-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.3px;
}


/* === Layout === */
.kg-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* === Side Navigation (Desktop) === */
.kg-side-nav {
  width: 200px;
  min-width: 200px;
  background: var(--kg-surface);
  border-right: 1px solid var(--kg-border);
  padding-top: var(--kg-space-sm);
  overflow-y: auto;
}

.kg-side-nav .kg-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 var(--kg-space-md);
  border: none;
  background: none;
  font-family: var(--kg-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--kg-text-dim);
  cursor: pointer;
  text-align: left;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s;
}

.kg-side-nav .kg-nav-item:hover {
  background: var(--kg-surface-alt);
}

.kg-side-nav .kg-nav-item.active {
  background: rgba(0, 113, 188, 0.08);
  color: var(--kg-primary);
  border-left-color: var(--kg-primary);
  font-weight: 600;
}

.kg-nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* === Main Content === */
.kg-main {
  flex: 1;
  min-height: 0;
  padding: var(--kg-space-lg);
  overflow-y: auto;
  max-width: 960px;
}

.kg-page { display: none; }
.kg-page.kg-page-active { display: block; }

.kg-page-header {
  margin-bottom: var(--kg-space-lg);
}

.kg-page-header h1 {
  font-family: var(--kg-font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--kg-text-heading);
  line-height: 1.3;
}

.kg-page-header p {
  font-size: 13px;
  color: var(--kg-text-dim);
  margin-top: var(--kg-space-xs);
}

/* === Cards === */
.kg-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  padding: var(--kg-space-md);
  margin-bottom: 12px;
}

.kg-card:hover {
  border-color: var(--kg-border-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.kg-card h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--kg-text-heading);
  margin-bottom: var(--kg-space-sm);
}

.kg-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--kg-text);
  margin-bottom: var(--kg-space-xs);
}

.kg-card-accent {
  border-left: 3px solid var(--kg-primary);
}

/* === Stat Grid === */
.kg-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: var(--kg-space-lg);
}

.kg-stat-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  overflow: hidden;
  min-width: 0;
}

.kg-stat-value {
  font-family: var(--kg-font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--kg-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kg-stat-label {
  font-size: 12px;
  color: var(--kg-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* === Search === */
.kg-search {
  display: flex;
  gap: var(--kg-space-sm);
  margin-bottom: var(--kg-space-md);
}

.kg-search-input {
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--kg-border);
  border-radius: 6px;
  font-family: var(--kg-font-body);
  font-size: 14px;
  color: var(--kg-text);
  background: var(--kg-surface);
  outline: none;
}

.kg-search-input:focus {
  border-color: var(--kg-primary);
  box-shadow: 0 0 0 2px rgba(0, 113, 188, 0.15);
}

.kg-search-input::placeholder {
  color: var(--kg-border-strong);
}

/* === Smart Search Focus === */
#cs-search:focus,
#dash-cust-search:focus,
#vp-search:focus {
  border-color: var(--kg-primary, #0071bc);
  box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.12);
  outline: none;
}
#cs-search::placeholder,
#dash-cust-search::placeholder,
#vp-search::placeholder {
  color: #aaa;
}

/* === Quick Tags === */
.kg-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--kg-space-md);
}

.kg-quick-tag {
  padding: 4px 10px;
  border: none;
  border-radius: 12px;
  background: var(--kg-surface-alt);
  font-size: 12px;
  color: var(--kg-text-dim);
  cursor: pointer;
  font-family: var(--kg-font-body);
  transition: background 0.15s, color 0.15s;
}

.kg-quick-tag:hover {
  color: var(--kg-primary);
  background: rgba(0, 113, 188, 0.08);
}

/* === Result Cards === */
.kg-result-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-left: 3px solid var(--kg-primary);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
}

.kg-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--kg-text);
  margin-bottom: 4px;
}

.kg-result-meta {
  font-size: 12px;
  color: var(--kg-text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* === Badges === */
.kg-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.kg-badge-good { background: rgba(0, 166, 81, 0.12); color: var(--kg-status-good); }
.kg-badge-warn { background: rgba(255, 102, 0, 0.12); color: var(--kg-status-warn); }
.kg-badge-error { background: rgba(204, 0, 0, 0.12); color: var(--kg-status-error); }
.kg-badge-info { background: rgba(0, 113, 188, 0.12); color: var(--kg-status-info); }
.kg-badge-dim { background: rgba(102, 102, 102, 0.12); color: var(--kg-text-dim); }

/* === Concentration Risk Badges === */
.conc-risk-HIGH { background: #ffebee; color: #c62828; border: 1px solid rgba(198, 40, 40, 0.25); }
.conc-risk-MEDIUM { background: #fff3e0; color: #e65100; border: 1px solid rgba(230, 81, 0, 0.25); }
.conc-risk-LOW { background: #e8f5e9; color: #2e7d32; }

/* === Vendor Connection Dashboard === */
.vc-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #e3f2fd;
  border-radius: 8px;
  font-size: 13px;
  color: #1565c0;
  margin: 12px 0;
}
@media (max-width: 768px) {
  .vc-security-note {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* === Steps === */
.kg-step {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--kg-border);
  font-size: 13px;
}

.kg-step:last-child { border-bottom: none; }

.kg-step-num {
  font-weight: 700;
  color: var(--kg-primary);
  min-width: 20px;
}


/* === Table === */
.kg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kg-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--kg-border);
  font-weight: 600;
  color: var(--kg-text-heading);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.kg-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--kg-border);
  color: var(--kg-text);
}

.kg-table tr:hover td {
  background: var(--kg-surface-alt);
}

/* === Location Cards === */



/* Map layer toggle buttons */
.map-layer-btn { font-size:11px!important; padding:5px 10px!important; border-radius:6px!important; }
.map-layer-btn.active { background:var(--kg-primary)!important; color:#fff!important; border-color:var(--kg-primary)!important; }

/* Fix Leaflet z-index in KoolAI page system */
#kg-map .leaflet-top, #kg-map .leaflet-bottom { z-index:400; }
#kg-map .leaflet-pane { z-index:300; }
.kg-map-dark { filter: invert(1) hue-rotate(180deg); }

/* === Empty State === */
.kg-empty-state {
  text-align: center;
  padding: 48px var(--kg-space-lg);
  color: var(--kg-text-dim);
  font-size: 14px;
}

.kg-empty-state p {
  margin-bottom: var(--kg-space-sm);
}

/* === Section Separator === */
.kg-section {
  margin-bottom: var(--kg-space-lg);
}

.kg-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--kg-text-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: var(--kg-space-sm);
  border-bottom: 2px solid var(--kg-primary);
  margin-bottom: var(--kg-space-md);
}

/* === Toggle / Expand === */
.kg-toggle {
  background: none;
  border: none;
  color: var(--kg-primary);
  font-size: 13px;
  font-family: var(--kg-font-body);
  cursor: pointer;
  padding: 4px 0;
}

.kg-toggle:hover { text-decoration: underline; }

/* === Info Note === */
.kg-info-note {
  background: #e8f4fd;
  border-left: 4px solid var(--kg-primary);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--kg-text);
  margin-bottom: var(--kg-space-md);
}

/* === Footer === */
.kg-footer {
  background: var(--kg-surface-alt);
  border-top: 1px solid var(--kg-border);
  padding: var(--kg-space-md);
  text-align: center;
  font-size: 13px;
  color: var(--kg-text-dim);
  display: flex;
  justify-content: center;
  gap: var(--kg-space-lg);
  flex-wrap: wrap;
}

/* === Bottom Navigation (Mobile) === */
.kg-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: 64px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--kg-surface);
  border-top: 1px solid var(--kg-border);
  padding: 4px 0 env(safe-area-inset-bottom, 0);
}

.kg-bottom-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.kg-bottom-nav .kg-nav-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: inherit;
}

.kg-bottom-nav .kg-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  font-family: var(--kg-font-body);
  font-size: 13px;
  color: var(--kg-text-dim);
  cursor: pointer;
  padding: 0;
  min-height: 48px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kg-bottom-nav .kg-nav-item .kg-nav-icon {
  font-size: 20px;
}

.kg-bottom-nav .kg-nav-item.active {
  color: var(--kg-primary);
  border-top: 2px solid var(--kg-primary);
}

/* === More Overlay === */
.kg-more-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px;
  z-index: 85;
  background: rgba(0,0,0,0.4);
}

.kg-more-overlay.kg-show { display: block; }

.kg-more-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--kg-surface);
  border-radius: 16px 16px 0 0;
  padding: var(--kg-space-lg) var(--kg-space-md);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}

.kg-more-panel .kg-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 var(--kg-space-md);
  border: none;
  background: none;
  font-family: var(--kg-font-body);
  font-size: 16px;
  color: var(--kg-text);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
}

.kg-more-panel .kg-nav-item:hover {
  background: var(--kg-surface-alt);
}

.kg-more-close {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: var(--kg-space-md);
  border: none;
  border-radius: 10px;
  background: var(--kg-surface-alt);
  font-family: var(--kg-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--kg-text-dim);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
  /* ── More Menu: Section group headers ── */
  .kg-more-group {
    margin-bottom: 4px;
  }
  .kg-more-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kg-text-dim, #888);
    padding: 8px 16px 4px;
  }
  /* Hide groups where ALL nav items are role-hidden */
  .kg-more-group:not(:has(.kg-nav-item:not(.kg-nav-hidden))) {
    display: none !important;
  }

/* === More Menu Trigger (mobile hamburger) — SEPT-UX1 === */
.kg-more-trigger { display: none; background: none; border: none; color: #fff; cursor: pointer; padding: 6px; border-radius: 6px; }
.kg-more-trigger:active { background: rgba(255,255,255,0.15); }

/* === Responsive === */
@media (max-width: 768px) {
  .kg-more-trigger { display: flex; align-items: center; }
  .kg-header { height: 56px; }


  .kg-side-nav { display: none; }

  .kg-bottom-nav { display: block; }

  .kg-main {
    padding: var(--kg-space-md);
    padding-bottom: 80px;
  }

  .kg-footer { display: none; }

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

@media (min-width: 769px) and (max-width: 1024px) {
  .kg-side-nav { width: 180px; min-width: 180px; }
  .kg-main { padding: var(--kg-space-md); }
}

@media (min-width: 1025px) {
  .kg-header { height: 64px; }
}

/* === Responsive Mode Utilities — SEPT-UX5 ===
   App mode  (<=768px): bottom nav, cards, single-task, large touch targets
   Dash mode (>=769px): sidebar, tables, multi-panel, dense info
   Same HTML, CSS toggles. Phone=app, desktop=dashboard. */

/* Desktop default: show dash, hide app */
.kg-app-only { display: none !important; }
.kg-dash-only { display: block; }
table.kg-dash-only { display: table; }
tbody.kg-dash-only { display: table-row-group; }
tr.kg-dash-only { display: table-row; }
td.kg-dash-only, th.kg-dash-only { display: table-cell; }

@media (max-width: 768px) {
  /* Mobile: show app, hide dash */
  .kg-app-only { display: block !important; }
  .kg-app-only.kg-flex { display: flex !important; }
  .kg-app-only.kg-grid { display: grid !important; }
  .kg-dash-only { display: none !important; }

  /* App mode: prevent iOS input zoom (16px minimum) */
  input, select, textarea { font-size: max(16px, inherit); }

  /* App mode: page sections stack full-width */
  .kg-page-content, .kg-section { padding: var(--kg-space-sm) var(--kg-space-md); }

  /* App mode: stat cards 2-col on phone */
  .kg-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* === Touch Target Sizing — SEPT-UX3 ===
   44px min for general mobile targets, 56px for driver/field screens.
   Applied via media query — no impact on desktop dense layouts. */

.kg-touch-target { min-height: 44px; padding: 8px 12px; }
.kg-touch-target-lg { min-height: 56px; padding: 12px 16px; }

@media (max-width: 768px) {
  /* Baseline: all interactive elements get 44px min-height on mobile */
  .kg-page button:not(.kg-no-touch),
  .kg-page [role="button"]:not(.kg-no-touch),
  .kg-page .kg-btn:not(.kg-no-touch) {
    min-height: 44px;
  }

  /* Spacing between adjacent targets */
  .kg-page button + button,
  .kg-page .kg-btn + .kg-btn {
    margin-left: 8px;
  }

  /* Driver screens: 56px targets for gloved/greasy hands */
  #page-safety button:not(.kg-no-touch),
  #page-quickops button:not(.kg-no-touch),
  #page-vendor button:not(.kg-no-touch) {
    min-height: 56px;
    font-size: 15px;
  }

  /* Form inputs: 44px min, 16px font prevents iOS zoom */
  .kg-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  .kg-page select,
  .kg-page textarea {
    min-height: 44px;
    font-size: 16px;
  }
}

/* === Card Table — SEPT-UX2 ===
   Tables with .kg-card-table transform to stacked cards on mobile.
   Each row becomes a card, cells labeled via data-label from auto-labeler. */

@media (max-width: 768px) {
  .kg-card-table { border-collapse: separate; border-spacing: 0; }
  .kg-card-table thead { display: none; }
  .kg-card-table tbody { display: block; }
  .kg-card-table tbody tr {
    display: block;
    background: var(--kg-surface);
    border: 1px solid var(--kg-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .kg-card-table tbody tr:last-child { margin-bottom: 0; }
  .kg-card-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: right !important;
    font-size: 14px;
  }
  .kg-card-table td:last-child { border-bottom: none !important; }
  .kg-card-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: var(--kg-text-dim);
    text-align: left;
    flex-shrink: 0;
    margin-right: 12px;
  }
  .kg-card-table td:first-child {
    font-weight: 700;
    font-size: 15px;
    justify-content: flex-start;
    text-align: left !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--kg-border) !important;
  }
  .kg-card-table td:first-child::before { display: none; }
  /* Hide less-important columns on card view */
  .kg-card-table td.hide-mobile { display: none !important; }
}

/* === Step Wizard — SEPT-UX4 ===
   Full-viewport step sequences for driver workflows.
   Each step fills screen, back/next navigation, progress indicator. */

.kg-wizard {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--kg-bg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.kg-wizard.kg-wizard-active { display: flex; }

.kg-wizard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--kg-primary-dark);
  color: #fff;
  min-height: 56px;
}
.kg-wizard-back {
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 8px; font-size: 20px; min-height: 44px; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.kg-wizard-back:active { background: rgba(255,255,255,0.15); }
.kg-wizard-title { font-size: 16px; font-weight: 600; flex: 1; }
.kg-wizard-step-label { font-size: 12px; opacity: 0.7; }

.kg-wizard-progress {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  background: var(--kg-primary-dark);
  padding-bottom: 8px;
}
.kg-wizard-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  transition: background 0.2s;
}
.kg-wizard-dot.kg-done { background: rgba(255,255,255,0.8); }
.kg-wizard-dot.kg-current { background: #fff; }

.kg-wizard-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--kg-space-md);
  -webkit-overflow-scrolling: touch;
}

.kg-wizard-step { display: none; }
.kg-wizard-step.kg-step-active { display: block; }

.kg-wizard-footer {
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--kg-border);
  background: var(--kg-surface);
  display: flex;
  gap: 12px;
}
.kg-wizard-btn {
  flex: 1;
  min-height: 56px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.kg-wizard-btn-primary { background: var(--kg-primary); color: #fff; }
.kg-wizard-btn-primary:active { background: var(--kg-primary-dark); }
.kg-wizard-btn-secondary { background: var(--kg-surface-alt); color: var(--kg-text); border: 1px solid var(--kg-border); }

/* === Pull-to-Refresh — SEPT-UX6 === */
.kg-ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 13px;
  color: var(--kg-text-dim);
  height: 0;
  opacity: 0;
  transition: opacity 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.kg-ptr-indicator.kg-ptr-refreshing {
  height: 40px !important;
  opacity: 1 !important;
}

/* === DataWeld Progressive Guidance === */

/* Intent Grid */
.kg-intent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: var(--kg-space-lg);
}

.kg-intent-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border: none;
  border-radius: 12px;
  background: var(--kg-surface);
  cursor: pointer;
  font-family: var(--kg-font-body);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s, transform 0.1s;
}

.kg-intent-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 113, 188, 0.12);
  transform: translateY(-1px);
}

.kg-intent-icon {
  font-size: 28px;
}

.kg-intent-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--kg-text);
}

/* Panel Navigation */
.kg-dw-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--kg-space-md);
}

.kg-dw-back {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 4px;
  min-height: 44px;
  font-family: var(--kg-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--kg-primary);
  cursor: pointer;
}

.kg-dw-back:hover {
  color: var(--kg-primary-dark);
}

/* Walkthrough */
.kg-walk-header {
  font-size: 18px;
  font-weight: 600;
  color: var(--kg-text-heading);
  margin-bottom: var(--kg-space-sm);
}

.kg-walk-progress {
  display: flex;
  gap: 4px;
  margin-bottom: var(--kg-space-md);
}

.kg-walk-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kg-border);
}

.kg-walk-dot.kg-walk-done {
  background: var(--kg-status-good);
}

.kg-walk-dot.kg-walk-current {
  background: var(--kg-primary);
  box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.2);
}

.kg-walk-step-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-left: 3px solid var(--kg-primary);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: var(--kg-space-md);
  min-height: 80px;
}

.kg-walk-step-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--kg-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.kg-walk-step-text {
  font-size: 16px;
  color: var(--kg-text);
  line-height: 1.5;
}

.kg-walk-step-tip {
  margin-top: 12px;
  padding: 8px 12px;
  background: #e8f4fd;
  border-radius: 6px;
  font-size: 13px;
  color: var(--kg-text-dim);
}

.kg-walk-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--kg-space-md);
}

.kg-walk-btn {
  padding: 10px 20px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: var(--kg-surface-alt);
  font-family: var(--kg-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--kg-text);
  cursor: pointer;
  transition: background 0.15s;
}

.kg-walk-btn:hover {
  background: var(--kg-border);
}

.kg-walk-btn-primary {
  background: var(--kg-primary);
  border-color: var(--kg-primary);
  color: #ffffff;
}

.kg-walk-btn-primary:hover {
  background: var(--kg-primary-dark);
}

.kg-walk-btn-error {
  background: rgba(255, 102, 0, 0.06);
  border: none;
  color: var(--kg-accent);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
}

.kg-walk-btn-error:hover {
  background: rgba(255, 102, 0, 0.12);
}

/* Month-End Checklist */
.kg-me-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--kg-space-md);
  font-size: 14px;
  color: var(--kg-text-dim);
}

.kg-me-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--kg-border);
  border-radius: 3px;
  overflow: hidden;
}

.kg-me-progress-fill {
  height: 100%;
  background: var(--kg-status-good);
  border-radius: 3px;
  transition: width 0.2s;
}

.kg-me-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--kg-surface);
  cursor: pointer;
  transition: border-color 0.1s;
}

.kg-me-item:hover {
  border-color: var(--kg-border-strong);
}

.kg-me-item.kg-me-done {
  background: rgba(0, 166, 81, 0.04);
  border-color: rgba(0, 166, 81, 0.3);
}

.kg-me-item.kg-me-current {
  border-color: var(--kg-primary);
  border-left: 3px solid var(--kg-primary);
}

.kg-me-check {
  width: 44px;
  height: 44px;
  border: 2px solid var(--kg-border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  color: transparent;
}

.kg-me-done .kg-me-check {
  background: var(--kg-status-good);
  border-color: var(--kg-status-good);
  color: #ffffff;
}

.kg-me-current .kg-me-check {
  border-color: var(--kg-primary);
}

.kg-me-info {
  flex: 1;
}

.kg-me-type {
  font-weight: 600;
  color: var(--kg-text);
  font-size: 14px;
}

.kg-me-runner {
  font-size: 12px;
  color: var(--kg-text-dim);
}

.kg-me-tip {
  font-size: 12px;
  color: var(--kg-text-dim);
  margin-top: 4px;
  font-style: italic;
}

.kg-me-validate {
  font-size: 12px;
  color: var(--kg-primary);
  margin-top: 4px;
  font-weight: 500;
}

.kg-me-naming {
  font-size: 12px;
  color: var(--kg-text-dim);
  margin-top: 2px;
  font-family: monospace;
}

/* Clickable result cards */
.kg-result-card-link {
  cursor: pointer;
}

.kg-result-card-link:hover {
  border-color: var(--kg-primary);
  box-shadow: 0 1px 4px rgba(0, 113, 188, 0.1);
}

.kg-guide-arrow {
  color: var(--kg-primary);
  font-weight: 600;
  font-size: 12px;
}

/* === Severity Colors (DataWeld Errors) === */
.kg-sev-critical { color: var(--kg-status-error); font-weight: 700; }
.kg-sev-high { color: var(--kg-accent); font-weight: 600; }
.kg-sev-medium { color: var(--kg-status-warn); }
.kg-sev-low { color: var(--kg-text-dim); }

/* === Operational Overlay Components === */

/* Ops Stat Cards (Dashboard) */
.kg-ops-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: var(--kg-space-md);
}

.kg-ops-stat {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.1s;
}

.kg-ops-stat:hover { border-color: var(--kg-primary); }
.kg-ops-stat-value { font-family: var(--kg-font-mono); font-size: 20px; font-weight: 700; line-height: 1.3; }
.kg-ops-stat-label { font-size: 12px; color: var(--kg-text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* Health Bar */
.kg-health-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: var(--kg-space-sm);
}

.kg-health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kg-border);
}

.kg-health-dot.kg-health-green { background: var(--kg-status-good); }
.kg-health-dot.kg-health-yellow { background: var(--kg-status-warn); }
.kg-health-dot.kg-health-red { background: var(--kg-status-error); }


/* Attention Items */
.kg-attention-item {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.kg-attention-item.kg-sev-high { border-left: 3px solid var(--kg-status-error); }
.kg-attention-item.kg-sev-med { border-left: 3px solid var(--kg-status-warn); }
.kg-attention-item.kg-sev-low { border-left: 3px solid var(--kg-status-info); }

.kg-attention-body { flex: 1; }
.kg-attention-title { font-size: 13px; font-weight: 600; color: var(--kg-text); margin-bottom: 2px; }
.kg-attention-detail { font-size: 12px; color: var(--kg-text-dim); }
.kg-attention-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Severity Badges */
.kg-sev-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.kg-sev-badge-high { background: rgba(204,0,0,0.12); color: var(--kg-status-error); }
.kg-sev-badge-med { background: rgba(230,168,0,0.12); color: var(--kg-status-warn); }
.kg-sev-badge-low { background: rgba(0,113,188,0.12); color: var(--kg-status-info); }

/* Aging Badges */
.kg-aging-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.kg-aging-fresh { background: rgba(0,166,81,0.12); color: var(--kg-status-good); }
.kg-aging-aging { background: rgba(255,102,0,0.12); color: var(--kg-accent); }
.kg-aging-stale { background: rgba(255,102,0,0.20); color: #cc5200; }
.kg-aging-critical { background: rgba(204,0,0,0.12); color: var(--kg-status-error); }

/* Callback Cards */
.kg-callback-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.kg-callback-card.kg-callback-critical { border-left: 3px solid var(--kg-status-error); }
.kg-callback-card.kg-callback-high { border-left: 3px solid var(--kg-accent); }
.kg-callback-card.kg-callback-medium { border-left: 3px solid var(--kg-status-warn); }
.kg-callback-card.kg-callback-low { border-left: 3px solid var(--kg-status-info); }

.kg-callback-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.kg-callback-customer { font-size: 14px; font-weight: 600; color: var(--kg-text); }
.kg-callback-meta { font-size: 12px; color: var(--kg-text-dim); margin-top: 2px; }
.kg-callback-hint { font-size: 12px; color: var(--kg-primary); font-style: italic; margin-top: 6px; padding: 6px 10px; background: #e8f4fd; border-radius: 4px; }

/* Interrupt / Continuity Cards */
.kg-interrupt-card {
  background: #fff5f0;
  border: 1px solid rgba(255,102,0,0.3);
  border-left: 3px solid var(--kg-accent);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: var(--kg-space-md);
}

.kg-interrupt-title { font-size: 14px; font-weight: 600; color: var(--kg-text); margin-bottom: 6px; }
.kg-interrupt-meta { font-size: 12px; color: var(--kg-text-dim); margin-bottom: 4px; }

.kg-continuity-hint {
  font-size: 13px;
  color: var(--kg-primary);
  font-style: italic;
  padding: 10px 14px;
  background: #e8f4fd;
  border-left: 3px solid var(--kg-primary);
  border-radius: 4px;
  margin-bottom: var(--kg-space-md);
}

.kg-deferred-list { margin: 8px 0 0 0; padding: 0; list-style: none; }
.kg-deferred-list li { font-size: 12px; color: var(--kg-text-dim); padding: 3px 0; padding-left: 16px; position: relative; }
.kg-deferred-list li::before { content: '\2192'; position: absolute; left: 0; color: var(--kg-accent); }

/* Assist Cards */




.kg-conf-high { background: rgba(0,166,81,0.12); color: var(--kg-status-good); }
.kg-conf-med { background: rgba(230,168,0,0.12); color: var(--kg-status-warn); }
.kg-conf-low { background: rgba(204,0,0,0.12); color: var(--kg-status-error); }


.kg-state-hold { background: rgba(0,113,188,0.12); color: var(--kg-status-info); }
.kg-state-review { background: rgba(255,102,0,0.15); color: var(--kg-accent); }

/* Compliance / Safety Items */
.kg-compliance-item {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kg-compliance-icon { font-size: 20px; flex-shrink: 0; }
.kg-compliance-body { flex: 1; }
.kg-compliance-title { font-size: 14px; font-weight: 600; color: var(--kg-text); margin-bottom: 2px; }
.kg-compliance-meta { font-size: 12px; color: var(--kg-text-dim); }


/* Table Wrapper (responsive) */
.kg-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--kg-space-md);
  -webkit-overflow-scrolling: touch;
}

.kg-row-overdue td { background: rgba(204,0,0,0.03); }
.kg-row-flagged td { background: rgba(255,102,0,0.03); }

/* Stale Queue Cards */
.kg-stale-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-left: 3px solid var(--kg-status-warn);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.kg-stale-title { font-size: 13px; font-weight: 600; color: var(--kg-text); }
.kg-stale-meta { font-size: 12px; color: var(--kg-text-dim); margin-top: 2px; }

/* Timeline */
.kg-timeline {
  border-left: 2px solid var(--kg-border);
  margin-left: 8px;
  padding-left: 16px;
  margin-bottom: var(--kg-space-md);
}

.kg-timeline-event {
  position: relative;
  padding-bottom: 12px;
  font-size: 12px;
  color: var(--kg-text-dim);
}

.kg-timeline-event::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kg-border-strong);
}

.kg-timeline-event.kg-timeline-current::before { background: var(--kg-primary); box-shadow: 0 0 0 3px rgba(0,113,188,0.2); }

.kg-timeline-time { font-weight: 600; color: var(--kg-text); margin-right: 6px; }

/* Collapsible toggle for timeline */
.kg-collapse-toggle {
  background: none;
  border: none;
  padding: 6px 4px;
  font-family: var(--kg-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--kg-primary);
  cursor: pointer;
  margin-bottom: var(--kg-space-sm);
}

.kg-collapse-toggle:hover { color: var(--kg-primary-dark); }

/* === Tools Intent Grid & Panels === */

.kg-tl-intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: var(--kg-space-lg);
}

.kg-tl-intent-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border: none;
  border-radius: 12px;
  background: var(--kg-surface);
  cursor: pointer;
  font-family: var(--kg-font-body);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s, transform 0.1s;
}

.kg-tl-intent-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 113, 188, 0.12);
  transform: translateY(-1px);
}

/* "New" notice light — a red dot on a tool button the operator has not opened yet.
   Cleared on first open and remembered per browser, so it stops being noise. */
.kg-tl-intent-btn.kg-has-new {
  position: relative;
}

.kg-tl-intent-btn.kg-has-new::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kg-status-error, #cc0000);
  box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.55);
  animation: kg-new-pulse 2s ease-out infinite;
}

@keyframes kg-new-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(204, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(204, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .kg-tl-intent-btn.kg-has-new::after { animation: none; }
}

.kg-tl-back {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 4px;
  min-height: 44px;
  font-family: var(--kg-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--kg-primary);
  cursor: pointer;
}

.kg-tl-back:hover { color: var(--kg-primary-dark); }

/* Form Components */
.kg-form-group {
  margin-bottom: var(--kg-space-md);
}

.kg-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--kg-text);
  margin-bottom: var(--kg-space-xs);
}

.kg-form-input, .kg-form-select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--kg-border);
  border-radius: 6px;
  font-family: var(--kg-font-body);
  font-size: 14px;
  color: var(--kg-text);
  background: var(--kg-surface);
  outline: none;
}

.kg-form-input:focus, .kg-form-select:focus {
  border-color: var(--kg-primary);
  box-shadow: 0 0 0 2px rgba(0, 113, 188, 0.15);
}

textarea.kg-form-input { height: auto; padding: 10px 12px; resize: vertical; }

.kg-filter-row {
  display: flex;
  gap: var(--kg-space-sm);
  margin-bottom: var(--kg-space-md);
}

.kg-filter-row .kg-form-input { flex: 1; }
.kg-filter-row .kg-form-select { flex: 1; }

/* Calculator Output */
.kg-calc-output {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-left: 3px solid var(--kg-primary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: var(--kg-space-md);
}

.kg-calc-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--kg-border);
  font-size: 14px;
}

.kg-calc-row:last-child { border-bottom: none; }
.kg-calc-label { color: var(--kg-text-dim); }
.kg-calc-value { font-family: var(--kg-font-mono); font-weight: 600; color: var(--kg-text); }

/* Estimate Warning */
.kg-estimate-warn {
  background: #fff5f0;
  border-left: 4px solid var(--kg-accent);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kg-accent);
  margin-bottom: var(--kg-space-md);
}

/* Part Cards */
.kg-part-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.kg-part-card.kg-part-pl { border-left: 3px solid var(--kg-status-good); }

.kg-part-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.kg-part-number { font-family: var(--kg-font-mono); font-size: 14px; font-weight: 700; color: var(--kg-text); }
.kg-part-brand { font-size: 12px; font-weight: 600; color: var(--kg-text-dim); }
.kg-part-desc { font-size: 13px; color: var(--kg-text-dim); margin-bottom: 4px; }
.kg-part-equiv { font-size: 12px; color: var(--kg-primary); margin-top: 4px; }

.kg-confidence-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.kg-conf-exact { background: rgba(0,166,81,0.12); color: var(--kg-status-good); }
.kg-conf-likely { background: rgba(230,168,0,0.12); color: var(--kg-status-warn); }
.kg-conf-approx { background: rgba(204,0,0,0.12); color: var(--kg-status-error); }

.kg-pl-flag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(0,166,81,0.12);
  color: var(--kg-status-good);
}

/* Quick Reference Cards */
.kg-qref-card {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-left: 3px solid var(--kg-primary);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.kg-qref-question { font-size: 14px; font-weight: 600; color: var(--kg-text); margin-bottom: 4px; }
.kg-qref-answer { font-size: 13px; color: var(--kg-text-dim); line-height: 1.5; }
.kg-qref-link { font-size: 12px; color: var(--kg-primary); font-weight: 500; margin-top: 6px; cursor: pointer; }
.kg-qref-link:hover { text-decoration: underline; }

/* Tax Info Card */
.kg-tax-info {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-left: 3px solid var(--kg-primary);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.kg-tax-jurisdiction { font-size: 14px; font-weight: 600; color: var(--kg-text); margin-bottom: 2px; }
.kg-tax-rate { font-family: var(--kg-font-mono); font-size: 18px; font-weight: 700; color: var(--kg-primary); }

/* Saved Indicator */
.kg-saved-indicator {
  font-size: 12px;
  font-weight: 600;
  color: var(--kg-status-good);
  margin-left: 8px;
}

/* === Cognitive Load Buckets (Dashboard Model 6) === */
.kg-load-bucket { margin-bottom: 12px; }
.kg-load-bucket-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  padding: 6px 0; border-bottom: 1px solid var(--kg-border); margin-bottom: 4px;
}
.kg-load-bucket-label { flex: 1; }
.kg-load-bucket-count { font-family: var(--kg-font-mono); font-size: 14px; font-weight: 700; }
.kg-load-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; font-size: 12px; color: var(--kg-text);
  cursor: pointer; border-radius: 4px;
}
.kg-load-item:hover { background: var(--kg-surface-alt, rgba(0,0,0,0.03)); }
.kg-load-link { font-size: 12px; color: var(--kg-primary); font-weight: 500; white-space: nowrap; }

/* === Accent Card (Pricing, Month-End, Substitution) === */
.kg-card-accent {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-left: 3px solid var(--kg-accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* === Numbered Steps (Verify Steps, Recovery Steps) === */
.kg-step {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 12px; color: var(--kg-text);
}
.kg-step-num {
  flex-shrink: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kg-primary); color: #fff;
  border-radius: 50%; font-size: 12px; font-weight: 700;
}

/* === Meta Line (Reusable detail text) === */
.kg-meta-line { font-size: 12px; color: var(--kg-text-dim); line-height: 1.5; }

/* === Collapse Toggle (Continuity Chain, Timeline) === */
.kg-collapse-toggle {
  background: none; border: none;
  padding: 4px 2px;
  font-size: 12px; font-weight: 500; color: var(--kg-primary);
  cursor: pointer; font-family: var(--kg-font-body);
}
.kg-collapse-toggle:hover { color: var(--kg-primary-dark); }

/* === Stale Queue Items === */
.kg-stale-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 12px;
}
.kg-stale-item-text { flex: 1; color: var(--kg-text); }

/* Print Safety === */
@media print {
  /* Economy print — hide chrome */
  .kg-bottom-nav, .kg-side-nav, .kg-header, .kg-fab,
  .kg-notif-dropdown, .kg-ai-float, #kg-confetti-canvas,
  .no-print, .kg-toast-container, #kg-scroll-top, #kg-ai-fab,
  #kg-offline-banner { display: none !important; }
  .kg-main { padding: 0; max-width: 100%; margin: 0; }
  .kg-page { display: block !important; }
  .kg-page:first-child { page-break-before: auto; }
  /* Economy colors */
  body { background: #fff !important; color: #222 !important; font-size: 12px; }
  .kg-card, .kg-section { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  /* Hide interactive elements */
  button:not(.kg-print-keep), .kg-btn, input[type="submit"],
  select, .kg-toggle, .kg-fab { display: none !important; }
  /* Tables */
  table { border-collapse: collapse; page-break-inside: avoid; }
  th, td { border: 1px solid #aaa !important; padding: 4px 8px !important; }
  th { background: #f5f5f5 !important; color: #222 !important; }
  /* Links */
  a { color: #222 !important; text-decoration: none !important; }
  /* Page breaks */
  h1, h2, h3 { page-break-after: avoid; }
  .kg-chart-container, canvas { page-break-inside: avoid; }
  /* Charts — show but lighter */
  canvas { max-width: 100% !important; }
  /* Only print the active page, not all pages */
  .kg-page:not(.kg-page-active) { display: none !important; height: 0 !important; overflow: hidden !important; }
  .kg-page.kg-page-active { display: block !important; visibility: visible !important; height: auto !important; max-height: none !important; }
  /* Hide search bars, filters, and action buttons in print */
  input[type="text"], input[type="search"], .kg-search-bar, .kg-filter-bar,
  .dash-cust-dropdown, .cs-dropdown, #dash-cust-search, #cs-search { display: none !important; }
  /* Keep data tables readable */
  .kg-section { page-break-inside: avoid; margin-bottom: 8px !important; }
  /* Print header branding */
  .kg-page.kg-page-active::before {
    content: 'Kool Gas — KoolAI Report';
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    border-bottom: 2px solid #0071bc;
    padding-bottom: 6px;
    margin-bottom: 12px;
  }
  /* Scroll containers — unclip for print */
  [style*="overflow:auto"], [style*="overflow-x:auto"], [style*="overflow:scroll"],
  [style*="max-height"] { overflow: visible !important; max-height: none !important; }
}

/* ── Search Match Highlight ── */
mark.kg-highlight {
  background: #fff3b0;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ── Skeleton Loading Shimmer ── */
@keyframes kgShimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.kg-skeleton {
  background: linear-gradient(90deg, var(--kg-surface-alt,#eef1f4) 25%, #e0e4e8 50%, var(--kg-surface-alt,#eef1f4) 75%);
  background-size: 800px 100%;
  animation: kgShimmer 1.5s infinite ease-in-out;
  border-radius: 6px;
}
.kg-skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.kg-skeleton-line:last-child { width: 60%; }
.kg-skeleton-card {
  background: var(--kg-surface,#fff);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--kg-border,#dee2e6);
  margin-bottom: 12px;
}

/* ── KoolAI Brand Tag ── */
.kg-header-tag {
  display: inline-block;
  background: none;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  margin-left: 8px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* ── API Integration Styles ── */

.kg-api-result {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: var(--kg-space-md);
}

.kg-api-result pre {
  margin: 0;
  font-family: var(--kg-font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--kg-text);
}

/* Safety tool panels */
.kg-safety-panel {
  margin-top: var(--kg-space-md);
}

.kg-safety-back {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--kg-primary);
}

.kg-safety-back:hover {
  color: var(--kg-primary-dark);
}

/* ── Safety Training ── */
.st-hub { padding: 0 }
.st-progress-ring { display:flex; align-items:center; gap:16px; padding:16px; background:var(--kg-surface-alt); border-radius:var(--kg-radius); margin-bottom:16px }
.st-ring-svg { width:80px; height:80px; flex-shrink:0 }
.st-ring-bg { fill:none; stroke:var(--kg-border); stroke-width:6 }
.st-ring-fg { fill:none; stroke:var(--kg-success); stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 0.6s ease }
.st-ring-text { font-size:15px; font-weight:700; fill:var(--kg-text) }
.st-ring-info h3 { margin:0 0 4px; font-size:16px }
.st-ring-info p { margin:0; font-size:13px; color:var(--kg-text-dim) }
.st-cat-header { font-size:14px; font-weight:700; color:var(--kg-primary); padding:12px 0 6px; border-bottom:1px solid var(--kg-border); margin-top:12px }
.st-topic-card { display:flex; align-items:center; gap:10px; padding:12px; border-radius:var(--kg-radius); background:var(--kg-surface-alt); margin-top:8px; cursor:pointer; transition:background 0.15s }
.st-topic-card:active { background:var(--kg-surface-hover) }
.st-topic-icon { font-size:22px; flex-shrink:0; width:32px; text-align:center }
.st-topic-info { flex:1; min-width:0 }
.st-topic-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st-topic-meta { font-size:12px; color:var(--kg-text-dim); margin-top:2px }
.st-topic-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; flex-shrink:0 }
.st-badge-done { background:var(--kg-success-bg, rgba(34,197,94,0.15)); color:var(--kg-success) }
.st-badge-new { background:var(--kg-primary-bg, rgba(59,130,246,0.15)); color:var(--kg-primary) }

/* Training wizard */
.st-wizard { padding:0 }
.st-wizard-header { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--kg-border) }
.st-wizard-back { background:none; border:none; font-size:20px; color:var(--kg-text-dim); cursor:pointer; padding:4px }
.st-wizard-title { font-size:15px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st-dots { display:flex; gap:6px; align-items:center }
.st-dot { width:10px; height:10px; border-radius:50%; background:var(--kg-border); transition:all 0.3s }
.st-dot.active { background:var(--kg-primary); transform:scale(1.2) }
.st-dot.done { background:var(--kg-success) }
.st-step { padding:16px; animation:stFadeIn 0.3s ease }
@keyframes stFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* Briefing content */
.st-briefing { line-height:1.65; font-size:15px }
.st-briefing h3 { font-size:16px; font-weight:700; margin:20px 0 8px; display:flex; align-items:center; gap:8px }
.st-briefing p { margin:0 0 12px }
.st-briefing ul { margin:0 0 12px; padding-left:20px }
.st-briefing li { margin-bottom:6px; font-size:14px }
.st-callout { padding:12px 14px; border-radius:var(--kg-radius); margin:12px 0; border-left:4px solid }
.st-callout-danger { background:rgba(239,68,68,0.08); border-color:#ef4444 }
.st-callout-warning { background:rgba(245,158,11,0.08); border-color:#f59e0b }
.st-callout-info { background:rgba(59,130,246,0.08); border-color:#3b82f6 }
.st-callout-tip { background:rgba(34,197,94,0.08); border-color:#22c55e }
.st-callout-title { font-size:13px; font-weight:700; margin-bottom:4px }
.st-callout-danger .st-callout-title { color:#ef4444 }
.st-callout-warning .st-callout-title { color:#f59e0b }
.st-callout-info .st-callout-title { color:#3b82f6 }
.st-callout-tip .st-callout-title { color:#22c55e }
.st-callout p { margin:0; font-size:13px }
.st-dodont { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 }
@media(max-width:500px) { .st-dodont { grid-template-columns:1fr } }
.st-do, .st-dont { padding:10px; border-radius:var(--kg-radius); font-size:13px }
.st-do { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2) }
.st-dont { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2) }
.st-do h4, .st-dont h4 { margin:0 0 6px; font-size:13px; font-weight:700 }
.st-do h4 { color:#22c55e }
.st-dont h4 { color:#ef4444 }
.st-do li, .st-dont li { margin-bottom:4px }
.st-keypoints { background:var(--kg-surface-alt); padding:12px 14px; border-radius:var(--kg-radius); margin:12px 0 }
.st-keypoints h4 { margin:0 0 8px; font-size:14px; font-weight:700 }
.st-keypoints li { font-size:13px; margin-bottom:4px; font-weight:600 }

/* Quiz */
.st-question { background:var(--kg-surface-alt); padding:14px; border-radius:var(--kg-radius); margin-bottom:12px }
.st-question-num { font-size:12px; font-weight:700; color:var(--kg-primary); margin-bottom:4px }
.st-question-text { font-size:14px; font-weight:600; margin-bottom:10px }
.st-option { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--kg-radius); margin-bottom:6px; cursor:pointer; border:2px solid var(--kg-border); transition:all 0.15s; font-size:14px }
.st-option:active { transform:scale(0.98) }
.st-option.selected { border-color:var(--kg-primary); background:rgba(59,130,246,0.08) }
.st-option.correct { border-color:#22c55e; background:rgba(34,197,94,0.12) }
.st-option.wrong { border-color:#ef4444; background:rgba(239,68,68,0.08) }
.st-option-letter { width:28px; height:28px; border-radius:50%; background:var(--kg-surface-hover); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0 }
.st-option.selected .st-option-letter { background:var(--kg-primary); color:#fff }
.st-option.correct .st-option-letter { background:#22c55e; color:#fff }
.st-option.wrong .st-option-letter { background:#ef4444; color:#fff }
.st-explanation { margin-top:8px; padding:10px; border-radius:var(--kg-radius); font-size:12px; background:rgba(59,130,246,0.06); display:none }
.st-explanation.show { display:block }
.st-explanation strong { color:var(--kg-primary) }

/* Result card */
.st-result { text-align:center; padding:24px 16px }
.st-result-icon { font-size:56px; margin-bottom:12px }
.st-result h2 { margin:0 0 8px; font-size:20px }
.st-result p { margin:0 0 16px; color:var(--kg-text-dim); font-size:14px }
.st-result-stats { display:flex; justify-content:center; gap:24px; margin-bottom:20px }
.st-result-stat { text-align:center }
.st-result-stat .val { font-size:24px; font-weight:800 }
.st-result-stat .label { font-size:11px; color:var(--kg-text-dim); text-transform:uppercase }
.st-result-pass { color:var(--kg-success) }
.st-result-fail { color:#ef4444 }

/* Buttons */
.st-btn { display:block; width:100%; padding:14px; border:none; border-radius:var(--kg-radius); font-size:15px; font-weight:700; cursor:pointer; transition:all 0.15s; margin-top:12px }
.st-btn:active { transform:scale(0.97) }
.st-btn-primary { background:var(--kg-primary); color:#fff }
.st-btn-primary:disabled { opacity:0.4; cursor:default; transform:none }
.st-btn-success { background:var(--kg-success); color:#fff }
.st-btn-outline { background:none; border:2px solid var(--kg-border); color:var(--kg-text) }

/* ── Nav hidden (role enforcement) ── */
.kg-nav-hidden { display: none !important; }

/* ── Fill Plant status colors ── */

/* ── Messages layout ── */
#messages-content .msg-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* ── Toggle buttons ── */

/* ── Filter chips ── */
.kg-chip {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: none;
  background: var(--kg-surface-alt);
  cursor: pointer;
  color: var(--kg-text-dim);
  transition: all 0.15s;
}
.kg-chip.active {
  background: rgba(0, 113, 188, 0.1);
  color: var(--kg-primary);
}


/* ══════════════════════════════════════════
   Mobile App-Like Polish
   ══════════════════════════════════════════ */

/* Prevent rubber-banding / overscroll on iOS */
html { overscroll-behavior: none; }
body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }

/* Safe area insets for notched phones */
.kg-header {
  padding-top: env(safe-area-inset-top, 0);
}
.kg-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 768px) {
  /* App-like header — compact, bold */
  .kg-header {
    height: calc(56px + env(safe-area-inset-top, 0));
    padding: env(safe-area-inset-top, 0) 12px 0 12px;
    background: linear-gradient(135deg, var(--kg-primary-dark), var(--kg-primary));
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  }
  .kg-header-title { font-size: 16px; letter-spacing: 0.5px; }
  .kg-logo { height: 28px; }

  /* Full-bleed content — no side padding waste */
  .kg-main {
    padding: 12px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards — tighter, rounder, subtle shadow */
  .kg-card, .kg-stat-card, .kg-tool-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 12px;
  }

  /* Stat grid — single column on small phones, 2 on larger */
  .kg-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  @media (max-width: 380px) {
    .kg-stat-grid { grid-template-columns: 1fr; }
  }

  /* Bottom nav — elevated, clean, app-like */
  .kg-bottom-nav {
    height: calc(60px + env(safe-area-inset-bottom, 0));
    background: var(--kg-surface);
    border-top: none;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.08);
  }
  .kg-bottom-nav-grid { height: 60px; }
  .kg-bottom-nav .kg-nav-item {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    gap: 2px;
    transition: color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .kg-bottom-nav .kg-nav-item:active {
    transform: scale(0.92);
  }
  .kg-bottom-nav .kg-nav-item .kg-nav-icon {
    font-size: 22px;
    line-height: 1;
  }
  /* Bottom nav active — enhanced below */

  /* More overlay — cleaner sheet */
  .kg-more-panel {
    border-radius: 20px 20px 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0));
    max-height: 70vh;
    overflow-y: auto;
  }
  .kg-more-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    margin: 0 auto 16px;
  }
  .kg-more-panel .kg-nav-item {
    height: 52px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .kg-more-panel .kg-nav-item:active {
    background: var(--kg-surface-alt);
  }

  /* Greeting — bigger on mobile */
  #dash-greeting {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  #dash-subtitle {
    font-size: 13px;
    color: var(--kg-text-dim);
    margin-bottom: 16px;
  }

  /* Tables — horizontal scroll wrapper */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
  table th, table td {
    padding: 10px 12px;
  }
  table th {
    white-space: nowrap;
  }
  table td {
    white-space: normal;
    word-break: break-word;
  }
  table td.kg-nowrap {
    white-space: nowrap;
  }

  /* Buttons — bigger touch targets */
  button, .kg-btn, .kg-tool-card {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Inputs — bigger on mobile */
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 44px;
    border-radius: 8px;
  }

  /* Notification dropdown — full width on mobile */
  .kg-notif-dropdown {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0));
    left: 0;
    right: 0;
    width: 100%;
    max-height: 60vh;
    border-radius: 0 0 12px 12px;
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }

  /* Account settings — mobile friendly */
  #account-settings-content > div {
    padding: 12px !important;
    max-width: 100% !important;
  }

  /* Page sections — clean padding */
  .kg-page { padding: 0; }
  .kg-page h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
  }

  /* Hide footer on mobile — app-like */
  .kg-footer { display: none; }

  /* Page transitions — enhanced below */
}

/* Touch feedback for all interactive elements */
@media (hover: none) and (pointer: coarse) {
  button:active, a:active, .kg-nav-item:active, .kg-tool-card:active {
    opacity: 0.7;
    transition: opacity 0.05s;
  }
}

/* Smooth scrolling */
.kg-main, .kg-more-panel, .kg-notif-list {
  scroll-behavior: smooth;
}

/* Selection color — brand consistent */
::selection {
  background: rgba(0, 113, 188, 0.2);
}


/* ══════════════════════════════════════════════════════
   Mobile UX Polish v2 — App-like feel
   ══════════════════════════════════════════════════════ */

/* ── 1. Smooth Page Transitions ── */
@media (max-width: 768px) {
  .kg-page {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
  }
  .kg-page.kg-page-active {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 2. Sticky Page Headers ── */
@media (max-width: 768px) {
  .kg-page-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--kg-bg);
    padding: 12px 0 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
  }
  .kg-page-header.kg-header-scrolled {
    border-bottom-color: var(--kg-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
}

/* ── 3. Loading States ── */
@keyframes kgPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes kgShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

.kg-loading-bar {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 400px 100%;
  animation: kgShimmer 1.5s infinite linear;
  margin-bottom: 10px;
}

.kg-loading-bar.kg-bar-short { width: 60%; }
.kg-loading-bar.kg-bar-med { width: 80%; }
.kg-loading-bar.kg-bar-long { width: 95%; }

.kg-loading-group {
  padding: 16px 0;
}

/* Pulse effect on info notes that say "Loading" */
.kg-info-note.kg-loading-pulse {
  animation: kgPulse 1.2s ease-in-out infinite;
}

/* ── Empty State ── */
.kg-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--kg-text-dim, #999);
}
.kg-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.5;
}
.kg-empty-msg {
  font-size: 13px;
  line-height: 1.5;
}

/* ── Offline Banner ── */
.kg-offline-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #e53935;
  color: #fff;
  text-align: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  animation: kgToastIn 0.25s ease forwards;
}

/* ── Skeleton Card ── */
.kg-skeleton-card {
  background: var(--kg-card-bg, #fff);
  border: 1px solid var(--kg-border, #e0e0e0);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.kg-skeleton-card .kg-loading-bar { margin-bottom: 8px; }
.kg-skeleton-card .kg-loading-bar:last-child { margin-bottom: 0; }

/* PTR removed — caused reload loop */

/* ── 5. Bottom Nav Polish ── */
@media (max-width: 768px) {
  .kg-bottom-nav .kg-nav-item {
    position: relative;
    color: var(--kg-primary-light);
  }

  .kg-bottom-nav .kg-nav-item.active {
    color: var(--kg-primary);
    border-top: none;
    margin-top: 0;
  }

  .kg-bottom-nav .kg-nav-item.active::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 28px;
    background: rgba(0, 113, 188, 0.1);
    border-radius: 14px;
    z-index: -1;
  }

  .kg-bottom-nav .kg-nav-item.active .kg-nav-icon {
    font-weight: 700;
  }

  .kg-bottom-nav .kg-nav-item.active span:last-child {
    font-weight: 700;
  }
}

/* ── 6. Toast Notifications ── */
.kg-toast-container {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0));
  left: 12px;
  right: 12px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

@media (min-width: 769px) {
  .kg-toast-container {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 360px;
  }
}

.kg-toast {
  background: #323232;
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px);
  animation: kgToastIn 0.25s ease forwards;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg-toast.kg-toast-success { border-left: 4px solid var(--kg-status-good); }
.kg-toast.kg-toast-error { border-left: 4px solid var(--kg-status-error); }
.kg-toast.kg-toast-warn { border-left: 4px solid var(--kg-status-warn); }
.kg-toast.kg-toast-info { border-left: 4px solid var(--kg-status-info); }

.kg-toast-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.kg-toast.kg-toast-out {
  animation: kgToastOut 0.2s ease forwards;
}

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

@keyframes kgToastOut {
  to { opacity: 0; transform: translateY(16px); }
}

/* ── 7. Mobile Form Improvements ── */
@media (max-width: 768px) {
  .kg-filter-row {
    flex-wrap: wrap;
  }
  .kg-filter-row > * {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Fill plant form stacking */
  #fp-tank-reading-form,
  #fp-fill-form,
  #fp-po-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #fp-tank-reading-form input,
  #fp-tank-reading-form select,
  #fp-fill-form input,
  #fp-fill-form select,
  #fp-po-form input,
  #fp-po-form select {
    width: 100%;
    min-height: 44px;
  }

  /* Message compose area */
  .msg-compose {
    flex-direction: column;
    gap: 8px;
  }
  .msg-compose input,
  .msg-compose textarea {
    width: 100%;
  }
  .msg-compose button {
    width: 100%;
    justify-content: center;
  }

  /* Dashboard filter/sort controls */

}

/* ── 8. Floating Action Button ── */
.kg-fab {
  display: none;
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--kg-primary);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 113, 188, 0.35);
  cursor: pointer;
  z-index: 50;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.kg-fab:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(0, 113, 188, 0.3);
}

.kg-fab.kg-fab-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 769px) {
  .kg-fab { display: none !important; }
}

/* Floating feedback button — adjust for mobile bottom nav */
@media (max-width: 768px) {
  #kg-feedback-fab { bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important; }
  #kg-quick-feedback { bottom: calc(130px + env(safe-area-inset-bottom, 0)) !important; }
}

/* Section styling removed — looked forced */

/* ── 10. Active State Feedback ── */
@media (max-width: 768px) {
  .kg-card:active,
  .kg-result-card:active,
  .kg-stat-card:active,
  .kg-ops-stat:active,
  .kg-callback-card:active,
  .kg-attention-item:active,
  .kg-assist-card:active,
  .kg-intent-btn:active,
  .kg-tl-intent-btn:active,
  .kg-me-item:active,
  .kg-chip:active,


  button:not(.kg-nav-item):active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }
}

/* ── Dashboard Filter Toggles ── */
.dash-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.dash-view-btn {
  background: #fff;
  border: 1.5px solid #d0d5dd;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--kg-font-body);
  color: #475467;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
  white-space: nowrap;
}

.dash-view-btn:hover {
  border-color: var(--kg-primary, #0071bc);
  color: var(--kg-primary, #0071bc);
  background: rgba(0, 113, 188, 0.04);
}

.dash-view-btn:active {
  transform: scale(0.96);
}

.dash-view-btn.active {
  color: #fff;
  font-weight: 700;
  background: var(--kg-primary, #0071bc);
  border-color: var(--kg-primary, #0071bc);
}

/* Dash tags (count badges) */
.dash-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.dash-tag-warn { background: rgba(255,102,0,0.1); color: var(--kg-accent); }
.dash-tag-info { background: rgba(0,113,188,0.1); color: var(--kg-primary); }

@media (max-width: 768px) {
  .dash-view-toggle {
    gap: 1px;
  }

  .dash-view-btn {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 40px;
    border-radius: 20px;
    line-height: 1.2;
  }

  /* Section titles with filters — wrap nicely */
  .kg-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* Sort selects — clean up */
  .kg-section-title select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--kg-border);
    border-radius: 6px;
    background: var(--kg-surface);
    color: var(--kg-text);
    min-height: 40px;
  }

  /* Intent buttons — tighter on mobile */
  .kg-intent-btn {
    padding: 16px 12px;
    gap: 6px;
    border-radius: 10px;
  }
  .kg-intent-icon {
    font-size: 22px;
  }
  .kg-intent-label {
    font-size: 13px;
  }

  /* Uniform button system for mobile */
  .dash-view-toggle {
    gap: 3px;
    flex-wrap: wrap;
  }

  /* Filter button groups — compact row */
  .kg-section-title .dash-view-toggle {
    margin-left: auto;
  }
}


/* ══════════════════════════════════════════════════════
   KoolAI Chat Interface
   ══════════════════════════════════════════════════════ */

.kg-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  max-height: 800px;
  background: var(--kg-bg);
  border-radius: 8px;
  overflow: hidden;
}

.kg-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--kg-surface);
  border-bottom: 1px solid var(--kg-border);
  flex-shrink: 0;
}

.kg-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.kg-chat-avatar-ai {
  background: var(--kg-primary);
  color: #fff;
}

.kg-chat-avatar-user {
  background: var(--kg-surface-alt);
  color: var(--kg-text);
  border: 1px solid var(--kg-border);
}

.kg-chat-avatar-sm { width: 28px; height: 28px; font-size: 12px; }

.kg-chat-header-title { font-size: 15px; font-weight: 600; color: var(--kg-text); }
.kg-chat-header-status { font-size: 12px; color: var(--kg-status-good); }

.kg-chat-clear {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--kg-text-dim);
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.kg-chat-clear:hover { background: var(--kg-surface-alt); color: var(--kg-text); }
.kg-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kg-chat-hdr-btn {
  background: none;
  border: 1px solid var(--kg-border);
  color: var(--kg-text-dim);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: 36px;
  white-space: nowrap;
}
.kg-chat-hdr-btn:hover {
  background: var(--kg-surface-alt);
  border-color: var(--kg-primary);
  color: var(--kg-text);
}
.kg-chat-new-btn {
  background: var(--kg-primary);
  color: #fff;
  border-color: var(--kg-primary);
  font-weight: 600;
}
.kg-chat-new-btn:hover {
  filter: brightness(1.1);
}

.kg-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

.kg-chat-msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
  animation: kgChatIn 0.2s ease-out;
}
.kg-chat-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.kg-chat-msg-ai { align-self: flex-start; }

.kg-chat-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.kg-chat-msg-user .kg-chat-bubble {
  background: var(--kg-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.kg-chat-msg-ai .kg-chat-bubble {
  background: var(--kg-surface);
  color: var(--kg-text);
  border: 1px solid var(--kg-border);
  border-bottom-left-radius: 4px;
  white-space: normal;
}
.kg-chat-msg-ai .kg-chat-bubble ul { margin: 6px 0; padding-left: 18px; }
.kg-chat-msg-ai .kg-chat-bubble li { margin: 2px 0; }
.kg-chat-msg-ai .kg-chat-bubble strong { font-weight: 600; }

/* ── Dashboard Section Groups ── */
.dash-group {
  margin-bottom: 16px;
  border: 1px solid var(--kg-border, #dee2e6);
  border-radius: 10px;
  overflow: hidden;
  background: var(--kg-surface, #fff);
}
.dash-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--kg-surface-alt, #eef1f4);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-bottom: 1px solid var(--kg-border, #dee2e6);
}
.dash-group-collapsed .dash-group-header {
  border-bottom: none;
}
.dash-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--kg-text, #1a1a1a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-group-count {
  font-size: 12px;
  color: var(--kg-accent, #ff6600);
  font-weight: 600;
}
.dash-group-arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--kg-text-dim, #888);
}
.dash-group-body {
  padding: 0 4px;
}
#dash-group-actions .dash-group-header {
  background: #fff8f0;
  border-bottom-color: #ffd6a8;
}
#dash-group-analytics .dash-group-header {
  background: #f0f6ff;
  border-bottom-color: #c8ddf5;
}

.kg-chat-welcome {
  text-align: center;
  padding: 32px 16px;
  color: var(--kg-text-dim);
  margin: auto 0;
}
.kg-chat-welcome-title { font-size: 20px; font-weight: 600; color: var(--kg-text); margin-bottom: 4px; }
.kg-chat-welcome-sub { font-size: 13px; margin-bottom: 16px; }

.kg-chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kg-chat-suggestion {
  background: var(--kg-surface);
  border: 1px solid var(--kg-border);
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--kg-primary);
  cursor: pointer;
  font-family: var(--kg-font-body);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.kg-chat-suggestion:hover { background: var(--kg-surface-alt); }
.kg-chat-suggestion:active { transform: scale(0.97); }

.kg-chat-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 8px;
}
.kg-chat-typing-dots { display: flex; gap: 4px; }
.kg-chat-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kg-text-dim);
  animation: kgChatDot 1.4s infinite;
}
.kg-chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.kg-chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
.kg-chat-thinking-text {
  font-size: 13px;
  color: var(--kg-primary);
  margin-left: 8px;
  animation: kgThinkPulse 2s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes kgThinkPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes kgChatDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
@keyframes kgChatIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.kg-chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--kg-surface);
  border-top: 1px solid var(--kg-border);
  flex-shrink: 0;
}
.kg-chat-input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--kg-border);
  border-radius: 22px;
  font-family: var(--kg-font-body);
  font-size: 14px;
  color: var(--kg-text);
  background: var(--kg-bg);
  outline: none;
}
.kg-chat-input:focus {
  border-color: var(--kg-primary);
  box-shadow: 0 0 0 2px rgba(0, 113, 188, 0.15);
}
.kg-chat-send {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--kg-primary);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.kg-chat-send:hover { background: var(--kg-primary-dark); }
.kg-chat-send:disabled { background: var(--kg-border); cursor: not-allowed; }

/* ── Voice Input Button ── */
.kg-chat-voice {
  width: 44px;
  height: 44px;
  border: 2px solid var(--kg-primary);
  border-radius: 50%;
  background: var(--kg-bg);
  color: var(--kg-primary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.kg-chat-voice:hover { background: var(--kg-primary); color: #fff; }
.kg-chat-voice.kg-voice-active {
  background: #d32f2f;
  border-color: #d32f2f;
  color: #fff;
  animation: kgVoicePulse 1.5s ease-in-out infinite;
}
@keyframes kgVoicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(211, 47, 47, 0); }
}
.kg-chat-voice.kg-voice-unsupported { display: none; }

.kg-chat-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--kg-text-dim);
  padding: 4px 16px 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .kg-chat-container {
    height: calc(100dvh - 120px);
    max-height: none;
    border-radius: 0;
  }
  .kg-chat-msg { max-width: 92%; }
  .kg-chat-header { padding: 10px 12px; }
  .kg-chat-messages { padding: 12px; gap: 10px; }
  .kg-chat-input-bar {
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
  .kg-chat-input { font-size: 16px !important; height: 48px; }
  .kg-chat-send { width: 48px; height: 48px; min-height: 48px; }
  .kg-chat-voice { width: 48px; height: 48px; min-height: 48px; }
  #page-askai { padding: 0 !important; }
  #page-askai.kg-page-active { padding: 0 !important; }
}
@media (max-width: 480px) {
  .kg-chat-container {
    height: calc(100dvh - 110px);
  }
  .kg-chat-input-bar {
    padding: 6px 10px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
    gap: 6px;
  }
  .kg-chat-messages { padding: 10px 8px; gap: 8px; }
  .kg-chat-bubble { padding: 10px 12px; font-size: 13px; }
  .kg-chat-disclaimer { font-size: 10px; padding: 4px 10px; }
}


/* ── Messages Mobile Responsive (Fix 9) ── */
@media (max-width: 768px) {
  .kg-msg-layout {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .kg-msg-sidebar {
    min-width: 0 !important;
    max-width: none !important;
    border-right: none !important;
    border-bottom: 1px solid #dee2e6;
    padding-right: 0 !important;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
}


/* ── DVIR Inspection Form ── */
.dvir-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}
.dvir-item-label {
  font-size: 13px;
  flex: 1;
}
.dvir-item-btns {
  display: flex;
  gap: 6px;
}
.dvir-btn {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #f5f5f5;
  color: #666;
  transition: all 0.15s;
  min-width: 52px;
  min-height: 44px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.dvir-pass:hover, .dvir-pass.dvir-selected {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #2e7d32;
}
.dvir-fail:hover, .dvir-fail.dvir-selected {
  background: #ffebee;
  color: #c62828;
  border-color: #c62828;
}
.dvir-cat-header {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--kg-text-dim, #888);
  padding: 12px 12px 4px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--kg-border, #dee2e6);
  margin-top: 8px;
}
.dvir-radio {
  font-size: 13px;
  cursor: pointer;
}
.dvir-input {
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

/* ── Period Filter Chips ── */
.kg-period-chip {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: 1.5px solid #d0d5dd;
  background: #fff;
  cursor: pointer;
  color: #475467;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.kg-period-chip:hover {
  border-color: var(--kg-primary, #0071bc);
  color: var(--kg-primary, #0071bc);
  background: rgba(0, 113, 188, 0.04);
}
.kg-period-chip:active {
  transform: scale(0.96);
}
.kg-period-chip.active {
  background: var(--kg-primary, #0071bc);
  border-color: var(--kg-primary, #0071bc);
  color: #fff;
}


/* ── Dashboard Horizontal Bar Chart (Cylinders) ── */
.dash-hbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dash-hbar:last-child { border-bottom: none; }
.dash-hbar-label {
  width: 120px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--kg-text);
  flex-shrink: 0;
}
.dash-hbar-track {
  flex: 1;
  height: 16px;
  background: var(--kg-surface-alt, #f0f0f0);
  border-radius: 8px;
  overflow: hidden;
}
.dash-hbar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
  min-width: 4px;
}
.dash-hbar-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--kg-text-dim);
  white-space: nowrap;
  min-width: 50px;
  text-align: right;
}

/* ── Dashboard Inline Bar (inside table cells) ── */
.dash-bar {
  height: 4px;
  background: var(--kg-surface-alt, #f0f0f0);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  background: var(--kg-primary, #0071bc);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ── Dashboard Table ── */
.dash-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dash-tbl th {
  text-align: left;
  padding: 8px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--kg-text-dim, #888);
  border-bottom: 2px solid var(--kg-border, #dee2e6);
  background: var(--kg-surface-alt, #f8f9fa);
}
.dash-tbl td {
  padding: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  vertical-align: middle;
}
.dash-tbl tr:hover { background: rgba(0,113,188,0.02); }
.dash-tbl .num { text-align: right; }
.dash-tbl .money { text-align: right; font-variant-numeric: tabular-nums; }
.dash-tbl .cust-name { font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tbl .cust-city { color: var(--kg-text-dim); font-size: 12px; }

/* ── Dashboard View Toggle ── */
.dash-view-toggle {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .dash-hbar-label { width: 80px; font-size: 12px; }
  .dash-tbl .hide-mobile, .kg-table .hide-mobile { display: none; }
  .dash-tbl th, .dash-tbl td { padding: 6px 4px; font-size: 12px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .kg-table .hide-mobile { display: none; }
}

/* ── Dispatch Dashboard Table Containers ── */
.dsp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}
@media (max-width: 768px) {
  .dsp-table-wrap .dash-tbl {
    min-width: 360px;
  }
  .dsp-table-wrap {
    margin: 0 -8px;
    padding: 0 8px;
  }
}

/* Mobile table scroll fix */
@media (max-width: 768px) {
  .dash-tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
}

/* Chart.js containers */
.kg-chart-wrap {
  position: relative;
  margin-top: 12px;
  margin-bottom: 16px;
  width: 100%;
}
.kg-chart-wrap canvas {
  display: block;
  width: 100% !important;
}
@media (max-width: 768px) {
  .kg-chart-wrap { min-height: 200px; }
}

/* ── Compliance/Filter Tab Buttons ── */
.drv-comp-tab {
  display: inline-block;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--kg-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--kg-primary, #0071bc);
  background: #fff;
  border: 1.5px solid var(--kg-primary, #0071bc);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
  white-space: nowrap;
  min-height: 40px;
}
.drv-comp-tab:hover {
  background: rgba(0, 113, 188, 0.08);
}
.drv-comp-tab:active {
  transform: scale(0.96);
}
.drv-comp-tab.drv-comp-active,
.drv-comp-active {
  color: #fff;
  font-weight: 700;
  background: var(--kg-primary, #0071bc);
  border-color: var(--kg-primary, #0071bc);
}
@media (max-width: 768px) {
  .drv-comp-tab {
    padding: 8px 16px;
    font-size: 13px;
    min-height: 44px;
  }
  /* koolai, 2026-10-21 -- #fi-tabs (Financial Intelligence page) has 25 tabs
     with very uneven label lengths ("GL" vs "Working Capital"). The default
     flex-wrap:wrap (set inline on #fi-tabs) lets short and long pills wrap
     unevenly across many rows on mobile, which reads as "random shaped" and
     pushes real content far down the page. Scoped to #fi-tabs only -- other
     pages reusing .drv-comp-tab (e.g. driver compliance) keep their existing
     wrapped layout, which was never reported as a problem. */
  #fi-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  #fi-tabs::-webkit-scrollbar {
    display: none;
  }
  #fi-tabs .drv-comp-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  /* koolai, 2026-10-21 round 2 -- same fix, the Anomalies tab's severity
     filter row (All/High/Medium/Low) has the same uneven-pill problem on a
     smaller scale. */
  #fi-anomaly-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  #fi-anomaly-filters::-webkit-scrollbar {
    display: none;
  }
  #fi-anomaly-filters .drv-comp-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  /* koolai, 2026-10-21 round 2 -- AR Aging Buckets / AP Summary is a
     hardcoded 2-column grid with no mobile override; the right column (AP
     Summary) was getting clipped off-screen. Stack to 1 column. */
  #fi-ar-ap-grid {
    grid-template-columns: 1fr !important;
  }
  /* koolai, 2026-10-21 round 2 -- every Finance-page data table (GL/Expense/
     YTD/Prior YTD/YOY, Period/Invoice Rev/GL Revenue/etc, the anomalies
     list) is a plain inline <table> with no .kg-table-wrap, so none of them
     got the scroll-instead-of-overflow treatment already proven elsewhere
     in the app. Applied directly to the table element -- same technique as
     .kg-table-wrap (overflow-x:auto + touch scrolling), scoped to the
     finance page only so it can't affect tables elsewhere that were never
     reported broken. */
  #page-finance table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ── Audit fixes: driver form inputs + tablet layout (2026-08-04) ── */

/* C1: Override inline fixed-width on driver form inputs for mobile */
@media (max-width: 768px) {
  .dvir-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* DVIR scroll container — taller on mobile for better visibility */
  #dvir-items {
    max-height: 55vh !important;
  }
  /* Fill plant inputs */
  #fp-tank-level, #fp-tank-notes, #fp-fill-qty, #fp-fill-notes,
  #fp-mfg-ioc-before, #fp-mfg-ioc-after, #fp-mfg-notes,
  .fp-po-item-qty, .fp-mfg-qty {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* DVIR buttons side by side with proper spacing */
  .dvir-item-btns {
    display: flex;
    gap: 8px;
  }
  .dvir-item-btns .dvir-btn {
    flex: 1;
    min-height: 48px;
    font-size: 15px;
  }
}

/* Quick access chips */
#quick-access-chips button:hover {
  background: var(--kg-primary, #0071bc) !important;
  color: #fff !important;
  border-color: var(--kg-primary, #0071bc) !important;
}

/* Priority card mobile */
@media (max-width: 480px) {
  #dash-priority-card { padding: 14px !important; }
  #priority-greeting { font-size: 16px !important; }
  #priority-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* M7: Tablet breakpoint improvements */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Dashboard cards: 2 columns instead of 3 */
  /* Tables: allow horizontal scroll but with reasonable sizing */
  table {
    font-size: 13px;
  }
  /* Form inputs: reasonable width on tablet */
  .dvir-input {
    min-width: 100px;
  }
  /* Side nav: slightly narrower */
  .kg-side-nav { width: 180px; min-width: 180px; }
  .kg-main { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   Stop Engagement — Full-screen immersive customer view
   ═══════════════════════════════════════════════════════════ */

#stop-engaged {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--kg-bg, #f5f6fa);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.se-topbar {
  position: sticky; top: 0; z-index: 1001;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  background: var(--kg-surface, #fff);
  border-bottom: 1px solid var(--kg-border, #dee2e6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.se-back-btn {
  background: none; border: 1px solid var(--kg-border, #dee2e6);
  padding: 8px 16px; border-radius: 6px; font-size: 14px;
  cursor: pointer; color: var(--kg-text, #333);
}
.se-complete-btn {
  background: #2e7d32; color: #fff; border: none;
  padding: 8px 20px; border-radius: 6px; font-size: 14px;
  font-weight: 600; cursor: pointer;
}

.se-customer-header {
  padding: 20px 16px 12px;
  background: var(--kg-surface, #fff);
  border-bottom: 1px solid var(--kg-border, #dee2e6);
}
.se-cust-name {
  font-size: 22px; font-weight: 700;
  color: var(--kg-text, #333); margin-bottom: 4px;
}
.se-cust-meta { margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.se-type-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; color: #fff; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.se-rank-badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 600; color: #f9a825;
  background: #fff8e1; border: 1px solid #f9a825;
}
.se-cust-detail { font-size: 13px; color: var(--kg-text-dim, #888); margin-top: 2px; }

#se-sections { padding: 8px 16px 100px; }

.se-section {
  background: var(--kg-surface, #fff);
  border: 1px solid var(--kg-border, #dee2e6);
  border-radius: 10px; margin-bottom: 10px;
  overflow: hidden;
}
.se-section:empty { display: none; }

.se-section-title {
  padding: 12px 14px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--kg-text, #333); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--kg-surface, #fff);
  user-select: none;
}
.se-section-title:active { background: #f0f0f0; }
.se-chevron { font-size: 11px; color: #aaa; transition: transform 0.2s; }
.se-collapsed .se-section-body { display: none; }
.se-collapsed .se-chevron { transform: rotate(-90deg); }

.se-section-body { padding: 0 14px 12px; }

.se-upsell-title { color: #1565c0; background: linear-gradient(135deg, #e3f2fd, #bbdefb); }

.se-cyl-row { padding: 6px 0; font-size: 14px; border-bottom: 1px solid #f0f0f0; }
.se-cyl-row:last-child { border-bottom: none; }

.se-prod-row { padding: 6px 0; font-size: 14px; border-bottom: 1px solid #f0f0f0; }
.se-prod-row:last-child { border-bottom: none; }
.se-freq-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  background: #e8f5e9; color: #2e7d32;
}

.se-upsell-row {
  padding: 8px 0; font-size: 14px;
  border-bottom: 1px solid #e3f2fd;
}
.se-upsell-row:last-child { border-bottom: none; }
.se-upsell-icon { font-size: 16px; }
.se-upsell-detail { font-size: 12px; color: #888; margin-top: 2px; margin-left: 24px; }

.se-equip-group { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.se-equip-group:last-child { border-bottom: none; }
.se-equip-label { font-size: 14px; font-weight: 600; color: var(--kg-text, #333); }
.se-equip-parts { font-size: 13px; color: #e65100; margin-top: 2px; }

.se-prompt {
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
  font-weight: 600; margin-bottom: 8px;
}
.se-prompt-medical { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.se-prompt-propane { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }

.se-note-text { padding: 8px 12px; background: #f5f5f5; border-radius: 6px; font-size: 13px; margin-bottom: 6px; }
.se-note-driver { background: #fffde7; border: 1px solid #fff9c4; }

.se-order-row { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.se-order-row:last-child { border-bottom: none; }
.se-order-date { font-size: 12px; font-weight: 600; color: var(--kg-text, #333); }
.se-order-items { font-size: 12px; color: #666; margin-top: 2px; }
.se-order-total { font-size: 12px; color: #2e7d32; font-weight: 600; margin-top: 2px; }

.se-bottom {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 12px 16px; background: var(--kg-surface, #fff);
  border-top: 1px solid var(--kg-border, #dee2e6);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  z-index: 1001;
}
.se-big-complete {
  width: 100%; padding: 16px; border: none; border-radius: 10px;
  background: #2e7d32; color: #fff; font-size: 18px; font-weight: 700;
  cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
}
.se-big-complete:active { background: #1b5e20; }

/* Encouragement overlay */
#encouragement-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2000; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
}
.encouragement-card {
  background: #fff; border-radius: 16px; padding: 32px 24px;
  max-width: 340px; width: 90%; text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: enc-pop 0.3s ease;
}
@keyframes enc-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.enc-msg { font-size: 18px; font-weight: 600; padding: 8px 0; color: #333; }
.enc-icon { font-size: 28px; }

/* Engage button pulse on stop cards */
.se-engage-btn { animation: se-pulse 2s infinite; }
@keyframes se-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,101,192,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(21,101,192,0); }
}

/* ═══════════════════════════════════════════════════
   Truck Load Management + Cylinder Location
   ═══════════════════════════════════════════════════ */

/* Weight/space utilization bars */
.tl-weight-bar {
  height: 8px;
  background: var(--kg-border, #dee2e6);
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0;
}
.tl-weight-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Bay cards (truck pallet positions) */
.tl-bay-card {
  background: var(--kg-surface, #fff);
  border: 1px solid var(--kg-border, #dee2e6);
  border-radius: 8px;
  padding: 10px 12px;
  transition: box-shadow 0.2s;
}
.tl-bay-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.tl-bay-header {
  font-size: 13px;
  font-weight: 600;
  padding-left: 8px;
  margin-bottom: 6px;
}
.tl-bay-body { padding-left: 12px; }
.tl-bay-empty {
  background: var(--kg-surface-alt, #f8f9fa);
  border-style: dashed;
  opacity: 0.7;
}

/* Load planning card (per truck) */
.tl-plan-card {
  background: var(--kg-surface, #fff);
  border: 1px solid var(--kg-border, #dee2e6);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* Cylinder location summary cards */
.cyl-loc-card {
  background: var(--kg-surface, #fff);
  border: 1px solid var(--kg-border, #dee2e6);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 120px;
  flex: 1;
}

/* Pallet inventory cards */
.pallet-card {
  background: var(--kg-surface, #fff);
  border: 1px solid var(--kg-border, #dee2e6);
  border-radius: 8px;
  padding: 10px 14px;
  transition: box-shadow 0.2s;
}
.pallet-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* HazMat segregation warning */

/* Mobile adjustments for load management */
@media (max-width: 600px) {
  .tl-bay-card { padding: 8px 10px; }
  .cyl-loc-card { min-width: 100px; padding: 8px 10px; }
  .pallet-card { padding: 8px 10px; }
}

/* ═══ KoolAI Signal — Intelligence Feed ═══ */
.signal-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: opacity 0.3s ease, transform 0.2s ease;
}
.signal-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#page-signal .kg-page-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kg-border);
  margin-bottom: 12px;
}

#signal-summary > div {
  transition: transform 0.15s ease;
}
#signal-summary > div:hover {
  transform: scale(1.03);
}

#kg-nav-signal {
  border-bottom: 1px solid var(--kg-border);
  margin-bottom: 2px;
  padding-bottom: 10px;
}

@media (max-width: 600px) {
  #signal-summary {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
    gap: 6px !important;
  }
  .signal-card {
    padding: 10px 12px !important;
  }
}

/* Signal Workflow Blocks */
.signal-block { background: var(--kg-surface); border-radius: 10px; padding: 14px 16px; border: 1px solid var(--kg-border); }
.signal-block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.signal-block-title { font-weight: 600; font-size: 14px; white-space: nowrap; }
.signal-block-badge { font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.signal-block-done { border-left: 4px solid #2e7d32; }
.signal-block-pending { border-left: 4px solid #e65100; }
.signal-block-active { border-left: 4px solid #1565c0; }
.signal-block-action { padding: 8px 16px; border-radius: 8px; border: none; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 40px; white-space: nowrap; }
.signal-stop-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--kg-border); font-size: 13px; }
.signal-stop-row:last-child { border-bottom: none; }
.signal-progress { height: 6px; border-radius: 3px; background: var(--kg-border); overflow: hidden; margin-bottom: 4px; }
.signal-progress-fill { height: 100%; border-radius: 3px; background: #2e7d32; transition: width 0.3s; }
@media (max-width: 600px) {
  .signal-block { padding: 12px; }
  .signal-block-action { padding: 6px 12px; font-size: 12px; min-height: 40px; }
}


/* ══════════════════════════════════════════════════════
   Mobile UX Polish — Consolidated (Mission 79)
   ══════════════════════════════════════════════════════ */

/* Touch targets — ensure minimum 36px (compact) on all interactive elements */
@media (max-width: 768px) {
  /* Tighten page sections */
  .kg-section {
    margin-bottom: 16px;
    padding: 12px;
  }

  /* Card shadows — subtle, consistent */
  .kg-stat-card,
  .dow-card,
  .kg-section {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  /* Stat cards — prevent text overflow */
  .kg-stat-card {
    padding: 10px 8px;
  }
  .kg-stat-value {
    font-size: 18px;
  }
  .kg-stat-label {
    font-size: 11px;
  }

  /* Day-of-week cards — compact */
  .dow-card {
    padding: 6px 4px;
    min-width: 60px;
  }
  .dow-card .dow-val {
    font-size: 14px;
  }
  .dow-card .dow-day {
    font-size: 10px;
  }

  /* Revenue comparison cards */
  .kg-section-title {
    font-size: 14px;
  }

  /* Tighter gap between filter button groups */
  .dash-view-toggle + .dash-view-toggle {
    margin-left: 4px;
  }

  /* Form inputs — touch-friendly height */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    min-height: 44px;
    font-size: 14px;
  }

  /* Page transitions — smooth */
  .kg-page {
    transition: opacity 0.15s ease;
  }
}

/* Small phones (under 400px) — extra compact */
@media (max-width: 400px) {
  .dash-view-btn {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 40px;
  }

  .kg-stat-card {
    padding: 8px 6px;
  }
  .kg-stat-value {
    font-size: 16px;
  }

  .dow-card {
    min-width: 50px;
    padding: 4px 2px;
  }

  .kg-intent-btn {
    padding: 12px 8px;
  }
}

/* Button press feedback — all platforms */
button:active,
.dash-view-btn:active,
.kg-intent-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}


/* ══════════════════════════════════════════════════════
   Product Catalog — Card-based Mobile-First Layout
   ══════════════════════════════════════════════════════ */

/* Catalog Toolbar */
.cat-toolbar { margin-bottom:16px; }
.cat-search-wrap { position:relative; margin-bottom:12px; }
.cat-filter-row { margin-bottom:8px; }
.cat-meta-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }

/* Department/Category Pills */
.cat-pills { display:flex; gap:6px; flex-wrap:wrap; }
.cat-pill {
  display:inline-flex; align-items:center; padding:8px 14px;
  border:1px solid var(--kg-border); border-radius:20px;
  font-size:13px; font-weight:500; cursor:pointer;
  background:var(--kg-card-bg); color:var(--kg-text);
  min-height:40px; transition:all 0.15s; white-space:nowrap;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.cat-pill:hover { border-color:var(--kg-primary); color:var(--kg-primary); }
.cat-pill.active { background:var(--kg-primary); color:#fff; border-color:var(--kg-primary); }
.cat-pill .cat-pill-count { font-size:11px; margin-left:4px; opacity:0.7; }

/* Product Grid - Cards */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }

.cat-card {
  background:var(--kg-card-bg); border:1px solid var(--kg-border);
  border-radius:10px; padding:14px; cursor:pointer;
  transition:all 0.15s; display:flex; flex-direction:column; gap:8px;
}
.cat-card:hover { border-color:var(--kg-primary); box-shadow:0 2px 8px rgba(0,0,0,0.08); transform:translateY(-1px); }
.cat-card:active { transform:scale(0.98); }

.cat-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.cat-card-stock { font-family:monospace; font-size:12px; color:var(--kg-text-dim); font-weight:600; }
.cat-card-desc { font-size:14px; font-weight:600; color:var(--kg-text); line-height:1.3; }
.cat-card-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cat-card-qty { font-size:13px; font-weight:700; padding:4px 10px; border-radius:6px; white-space:nowrap; }
.cat-card-qty.in-stock { background:#e8f5e9; color:#2e7d32; }
.cat-card-qty.low-stock { background:#fff3e0; color:#e65100; }
.cat-card-qty.out-stock { background:#ffebee; color:#c62828; }
.cat-card-qty.unknown { background:#f5f5f5; color:#666; }
.cat-card-meta { font-size:11px; color:var(--kg-text-dim); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cat-card-tag { font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; text-transform:uppercase; }
.cat-card-tag.gas { background:#e3f2fd; color:#1565c0; }
.cat-card-tag.dept { background:#f3e5f5; color:#7b1fa2; }

/* Card image layout */
.cat-card-img-wrap {
  width:100%; height:120px; display:flex; align-items:center; justify-content:center;
  background:#f8f9fa; border-radius:8px; overflow:hidden; margin-bottom:4px;
}
.cat-card-img {
  width:100%; height:100%; object-fit:contain;
}
.cat-card-icon {
  width:48px; height:48px; opacity:0.3; display:flex; align-items:center; justify-content:center;
}
.cat-card-icon svg { width:48px; height:48px; }
.cat-card-body { display:flex; flex-direction:column; gap:6px; flex:1; }

/* View toggle */
.cat-view-toggle {
  display:flex; border:1px solid var(--kg-border); border-radius:6px; overflow:hidden;
}
.cat-view-btn {
  padding:6px 10px; border:none; background:var(--kg-card-bg); color:var(--kg-text-dim);
  cursor:pointer; display:flex; align-items:center; transition:all 0.15s;
  min-height:40px;
}
.cat-view-btn:first-child { border-right:1px solid var(--kg-border); }
.cat-view-btn.active { background:var(--kg-primary); color:#fff; }
.cat-view-btn:hover:not(.active) { background:var(--kg-surface,#f5f5f5); }

/* List view */
.cat-list-view { width:100%; }

/* Product Detail Modal */
.cat-detail-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; display:flex; align-items:flex-end; justify-content:center; }
.cat-detail-sheet {
  background:var(--kg-card-bg); border-radius:16px 16px 0 0;
  width:100%; max-width:600px; max-height:80vh; overflow-y:auto;
  padding:24px; animation:catSlideUp 0.2s ease-out; position:relative;
}
@keyframes catSlideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes kgSlideUp { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
.cat-detail-close { position:absolute; top:16px; right:16px; background:none; border:none; font-size:24px; cursor:pointer; color:var(--kg-text-dim); padding:8px; min-width:44px; min-height:44px; }

/* Mobile adjustments */
@media (max-width:600px) {
  .cat-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
  .cat-card { padding:10px; }
  .cat-card-img-wrap { height:90px; }
  .cat-card-desc { font-size:12px; }
  .cat-card-stock { font-size:11px; }
  .cat-card-footer { flex-direction:column; align-items:flex-start; gap:4px; }
  .cat-pill { padding:6px 12px; font-size:12px; }
  .cat-detail-sheet { padding:16px; max-height:85vh; }
}
@media (max-width:380px) {
  .cat-grid { grid-template-columns:1fr; }
}

/* Legacy table class used by profit-center and detail views */
.cat-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cat-tbl th, .cat-tbl td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--kg-border, #eee);
}
.cat-tbl th {
  background: var(--kg-surface, #f8f9fa);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.cat-tbl tr:hover {
  background: var(--kg-surface-alt, #f0f4f8);
}


/* ══════════════════════════════════════════════════════
   Mobile Polish Pass — Chart Heights, Tables, Forms
   ══════════════════════════════════════════════════════ */

/* Responsive chart heights on mobile */
@media (max-width: 768px) {
  .kg-chart-wrap[style*="height:380px"],
  .kg-chart-wrap[style*="height: 380px"] {
    height: 260px !important;
    max-width: 100% !important;
  }
  .kg-chart-wrap[style*="height:300px"],
  .kg-chart-wrap[style*="height: 300px"] {
    height: 220px !important;
  }
  .kg-chart-wrap[style*="height:320px"],
  .kg-chart-wrap[style*="height: 320px"] {
    height: 240px !important;
  }
  .kg-chart-wrap[style*="height:240px"],
  .kg-chart-wrap[style*="height: 240px"] {
    height: 200px !important;
  }
}

@media (max-width: 480px) {
  .kg-chart-wrap[style*="height:380px"],
  .kg-chart-wrap[style*="height: 380px"] {
    height: 200px !important;
  }
  .kg-chart-wrap[style*="height:300px"],
  .kg-chart-wrap[style*="height: 300px"],
  .kg-chart-wrap[style*="height:320px"],
  .kg-chart-wrap[style*="height: 320px"] {
    height: 180px !important;
  }
}

/* Fill Plant form fields responsive */
@media (max-width: 768px) {
  #page-fillplant input[type="number"] {
    min-width: 60px;
    box-sizing: border-box;
  }
  #page-fillplant input[type="text"] {
    min-width: 100px;
    box-sizing: border-box;
  }
  #page-fillplant select {
    min-width: 120px;
    box-sizing: border-box;
  }
  /* MFG PO form rows */
  .fp-mfg-row {
    flex-wrap: wrap !important;
  }
  .fp-mfg-row select {
    min-width: 160px !important;
    flex: 1;
  }
  /* Tank grid */
  #fp-tanks-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
}

/* Tools page — dispatch form grid mobile */
@media (max-width: 768px) {
  #dispatch-create-form > div[style*="grid-template-columns: 1fr 1fr"],
  #dispatch-create-form > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #dispatch-create-form {
    padding: 12px !important;
  }
  /* Dispatch product results dropdown */
  #dispatch-product-results {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
  }
}

/* Dashboard stat cards — prevent squishing */
@media (max-width: 380px) {
  .kg-stat-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .kg-stat-card {
    min-width: 0 !important;
    padding: 10px 8px !important;
  }
  .kg-stat-value {
    font-size: 18px !important;
  }
  .kg-stat-label {
    font-size: 10px !important;
  }
}

/* More overlay — ensure signal and other items have icons */
@media (max-width: 768px) {
  .kg-more-panel .kg-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
  }
  .kg-more-panel .kg-nav-icon {
    font-size: 18px;
    min-width: 24px;
    text-align: center;
  }
}

/* Section titles — tighter on mobile */
@media (max-width: 480px) {
  .kg-section-title {
    font-size: 14px !important;
  }
  .kg-section {
    padding: 12px 10px !important;
    margin-bottom: 8px !important;
  }
}

/* Reseller management table mobile */
@media (max-width: 768px) {
  #reseller-content table {
    font-size: 11px;
  }
  #reseller-content table td,
  #reseller-content table th {
    padding: 4px 5px;
  }
  #reseller-content table td:first-child {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Signal page mobile */
@media (max-width: 768px) {
  #page-signal .kg-section {
    padding: 10px !important;
  }
  #page-signal table {
    font-size: 12px;
  }
  #page-signal table td,
  #page-signal table th {
    padding: 5px 6px;
  }
}

/* Fleet page table mobile */
@media (max-width: 768px) {
  #page-fleet table {
    font-size: 11px;
    min-width: 400px;
  }
  #page-fleet .kg-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Messages page mobile */
@media (max-width: 768px) {
  #page-messages .kg-section {
    padding: 10px !important;
  }
}

/* ══════════════════════════════════════════════════════
   Mobile Data Tables — Horizontal Scroll + Readability
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Wrap all data tables in scrollable container */
  .kg-section:has(.dash-tbl),
  .kg-card:has(.dash-tbl),
  div:has(> .dash-tbl) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent data tables from collapsing columns */
  .dash-tbl {
    min-width: 500px;
  }

  /* Better touch targets for all table buttons */
  .dash-tbl button {
    min-height: 36px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* Prevent badge/tag text from wrapping */
  .dash-tag {
    white-space: nowrap !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
  }

  /* Section titles need breathing room */
  .kg-section-title {
    font-size: 15px !important;
    padding: 10px 12px !important;
  }

  /* Stat cards — ensure readable on small screens */
  .kg-stat-card, .dash-stat-card {
    min-width: 0 !important;
    padding: 10px !important;
  }

  /* Info notes — better padding */
  .kg-info-note {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  /* Grid containers — prevent overflow */
  [style*="display:grid"] {
    overflow-x: auto;
  }
}

/* ══════════════════════════════════════════════════════
   Comprehensive Mobile UX — 768px and below
   DVIR, Time Record, Manifest, Fill Plant, Stat Cards,
   Touch Targets, Contrast, Readability
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Form Inputs: override all fixed-width inline styles ── */
  .dvir-input,
  #comp-dvir .dvir-input,
  #comp-time .dvir-input,
  #comp-manifest .dvir-input,
  #drv-compliance-section .dvir-input,
  #drv-compliance-section select,
  #drv-compliance-section input[type="text"],
  #drv-compliance-section input[type="date"],
  #drv-compliance-section input[type="time"],
  #drv-compliance-section input[type="number"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;  /* prevents iOS zoom on focus */
    padding: 10px 12px !important;
    min-height: 44px !important;  /* touch target */
  }

  /* Form field groups — each child takes full row on mobile */
  #comp-dvir > div > div[style*="display:flex"] > div,
  #comp-time div[style*="display:flex"] > div,
  #dvir-esign div[style*="display:flex"] > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* E-signature checkbox row — stack vertically */
  #dvir-esign div[style*="display:flex"][style*="align-items:center"] {
    flex-wrap: wrap !important;
  }

  /* DVIR radio labels — larger touch targets */
  .dvir-radio {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
  .dvir-radio input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* DVIR checkbox — larger on mobile */
  #dvir-esign-agree {
    width: 22px !important;
    height: 22px !important;
  }

  /* ── Manifest Rows: stack inputs ── */
  .manifest-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .manifest-row .mfst-stock {
    width: calc(50% - 4px) !important;
    flex: none !important;
  }
  .manifest-row .mfst-desc {
    width: 100% !important;
    flex: none !important;
    order: -1 !important;
  }
  .manifest-row .mfst-qty {
    width: 60px !important;
    flex: none !important;
  }
  .manifest-row .mfst-unit {
    width: calc(50% - 68px) !important;
    flex: 1 !important;
  }

  /* ── Time Record — better layout ── */
  #comp-time div[style*="display:flex"][style*="flex-wrap:wrap"] > div {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }

  /* ── Fill Plant inputs ── */
  #fp-po-form select,
  #fp-po-form input[type="text"],
  #fp-po-form input[type="number"],
  .fp-po-item input {
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  #fp-po-supplier {
    width: 100% !important;
    min-width: 0 !important;
  }
  .fp-po-item {
    flex-wrap: wrap !important;
  }
  .fp-po-item .fp-po-item-name {
    flex: 1 1 100% !important;
  }
  .fp-po-item .fp-po-item-qty {
    width: 80px !important;
  }

  /* Fill plant delivery amount */
  #fp-deliv-amount {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* ── Stat Cards: readable on narrow screens ── */
  .kg-stat-grid,
  .dash-stat-grid,
  #comp-eng-stats,
  div[style*="display:flex"][style*="gap:8px"]:has(> .dash-stat-card),
  div[style*="display:flex"][style*="gap:16px"]:has(> .dash-stat-card) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dash-stat-card, .kg-stat-card {
    min-width: 0 !important;
    padding: 10px 8px !important;
  }
  .dash-stat-label, .kg-stat-label {
    font-size: 11px !important;
  }
  .dash-stat-value, .kg-stat-value {
    font-size: 18px !important;
  }

  /* ── Stop Engagement: touch-friendly ── */
  .se-topbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .se-complete-btn {
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
  #se-checklist {
    padding: 8px 10px !important;
  }

  /* ── General Buttons: minimum touch target ── */
  .btn, button.btn,
  .drv-comp-tab,
  .dash-view-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Compliance tabs — full width on narrow */
  .drv-comp-tab {
    flex: 1 1 auto !important;
    text-align: center !important;
  }

  /* ── Contrast fixes: minimum #666 for body text ── */
  .kg-info-note {
    color: #555 !important;
  }

  /* ── Page headers: readable on mobile ── */
  .kg-page-header h1 {
    font-size: 20px !important;
  }
  .kg-page-header p {
    font-size: 13px !important;
  }

  /* ── Search input: prevent iOS zoom ── */
  .kg-search-input,
  #dash-cust-search,
  #kg-ai-input {
    font-size: 16px !important;
  }

  /* ── Customer search results: touch-friendly rows ── */
  .dash-search-row {
    padding: 12px 10px !important;
    min-height: 48px !important;
  }

  /* ── Compliance score ring: smaller on mobile ── */
  #comp-eng-score-ring {
    width: 90px !important;
    height: 90px !important;
  }
  #comp-eng-score-ring svg {
    width: 90px !important;
    height: 90px !important;
  }

  /* ── Day-of-week cards: 2-column grid ── */
  .dow-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .dow-card {
    min-width: 0 !important;
  }

  /* ── Hub operations buttons: bigger targets ── */
  #drv-hub-ops button {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* ── Table cell wrapping fixes ── */
  /* Prevent dates, times, day names, invoice numbers from wrapping mid-word */
  table td, table th {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  /* Banking: day-of-week names + monthly dates */
  #comp-banking table td:first-child,
  #comp-banking table th:first-child {
    white-space: nowrap !important;
  }
  /* Signal Engine: Recent Runs time column */
  #signal-recent-runs td:first-child {
    white-space: nowrap !important;
    font-size: 12px !important;
  }
  /* Deliveries table: hide City column on mobile, fix wrapping */
  #comp-deliveries table th:nth-child(3),
  #comp-deliveries table td:nth-child(3) {
    display: none !important;
  }
  #comp-deliveries table td:first-child {
    white-space: nowrap !important;
    font-size: 12px !important;
  }
  /* Orders / DataWeld table: fix invoice + date wrapping */
  #comp-orders table td:nth-child(1),
  #comp-orders table td:nth-child(2),
  #dataweld-invoices td:nth-child(1),
  #dataweld-invoices td:nth-child(2) {
    white-space: nowrap !important;
    font-size: 12px !important;
  }
  /* Callbacks table: fix date wrapping */
  #comp-continuity table td:nth-child(3),
  #comp-callbacks table td:nth-child(3) {
    white-space: nowrap !important;
    font-size: 12px !important;
  }
  /* Vendor profiles table: hide extra columns, fix name wrapping */
  #comp-vendor table th:nth-child(n+3),
  #comp-vendor table td:nth-child(n+3) {
    display: none !important;
  }
  #comp-vendor table td:first-child {
    white-space: nowrap !important;
    font-size: 12px !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Dispatch table: tighter on mobile */
  #reseller-dispatch-table td,
  #reseller-dispatch-table th {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }
  #reseller-dispatch-table select {
    font-size: 13px !important;
    padding: 4px 2px !important;
    min-width: 80px !important;
  }

  /* ── Kool Gas Forms cards: full-width on mobile ── */
  /* If forms are in a flex row, stack them */
  .kg-forms-grid,

  /* ── Generic table overflow: horizontal scroll wrapper ── */
  .kg-section table {
    font-size: 13px !important;
  }
  .kg-section table th {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }
  .kg-section table td {
    padding: 8px 4px !important;
  }
}

/* ══════════════════════════════════════════════════════
   Narrow Phone — 414px and below (iPhone SE, etc.)
   ══════════════════════════════════════════════════════ */
@media (max-width: 414px) {

  /* Form field groups — single column */
  #comp-dvir div[style*="display:flex"][style*="gap"] > div,
  #comp-time div[style*="display:flex"][style*="gap"] > div,
  #comp-manifest div[style*="display:flex"][style*="gap"] > div {
    flex: 1 1 100% !important;
  }

  /* Time record inputs — single column */
  #comp-time div[style*="display:flex"][style*="flex-wrap:wrap"] > div {
    flex: 1 1 100% !important;
  }

  /* Stat cards — still 2-col but tighter */
  .dash-stat-card, .kg-stat-card {
    padding: 8px 6px !important;
  }
  .dash-stat-value, .kg-stat-value {
    font-size: 16px !important;
  }

  /* Section padding — tighter */
  .kg-section {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }

  /* Navigation bar — prevent overflow */
  .kg-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .kg-nav-item {
    min-width: 56px !important;
    padding: 6px 4px !important;
  }

  /* Voice assistant bar — stack */
  #kg-voice-bar {
    flex-wrap: wrap !important;
  }
  #kg-voice-toggle-btn {
    width: 100% !important;
  }

  /* Emergency contact — full width */
  #manifest-content + div[style*="background:#fff3e0"] {
    padding: 12px !important;
  }

  /* Compliance filter buttons — wrap to 2 rows */
  #compliance-engine-section div[style*="display:flex"]:has(> .dash-tag) {
    flex-wrap: wrap !important;
  }
  #compliance-engine-section .dash-tag {
    flex: 1 1 auto !important;
    text-align: center !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Nav labels — bump from 9px to 10px for readability */

  /* Manifest rows — full stack on narrow phones */
  .manifest-row {
    flex-direction: column !important;
  }
  .manifest-row .mfst-stock,
  .manifest-row .mfst-desc,
  .manifest-row .mfst-qty,
  .manifest-row .mfst-unit {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════
   Mobile UX Fixes — Contrast, Touch Targets, Readability
   Task #201 — 2026-08-10
   ══════════════════════════════════════════════════════ */

/* ── Base Contrast Fixes (all screens) ── */

/* Override inline #888 on regulatory headers — compliance text must be readable */
#comp-dvir > div[style*="color:#888"],
#comp-manifest > div[style*="color:#888"],
#comp-time > div[style*="color:#888"],
#dvir-esign div[style*="color:#888"] {
  color: #555 !important;
}

/* Status counters and messages — override inline #888 */
#dvir-counter,
#dvir-status-msg,
#manifest-submit-msg,
#time-status-msg {
  color: #555 !important;
}

/* Fuel form labels — override inline #666/11px */
#drv-fuel-form label {
  font-size: 12px !important;
  color: #444 !important;
}

/* CHEMTREC sub-text — safety info must be readable */
#comp-manifest div[style*="background:#fff3e0"] div[style*="color:#888"] {
  color: #555 !important;
}

/* Stat card labels — ensure minimum contrast on all screens */
.dash-stat-label {
  color: #444;
}
.dash-stat-sub {
  color: #555;
}

/* Override inline #666 on optional/secondary text */
#dvir-esign span[style*="color:#666"] {
  color: #444 !important;
}

@media (max-width: 768px) {

  /* ── Manifest delete button: touch-safe ── */
  .manifest-row button {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
  }

  /* ── Manifest manual inputs: override inline 11px font ── */
  .manifest-row .mfst-stock,
  .manifest-row .mfst-desc,
  .manifest-row .mfst-qty,
  .manifest-row .mfst-unit {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
  }

  /* ── Manifest action buttons: proper touch targets ── */
  #comp-manifest div[style*="display:flex"][style*="gap:8px"] > button {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* ── Hazmat table: horizontal scroll on mobile ── */
  #manifest-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #manifest-content table {
    min-width: 360px !important;
    font-size: 12px !important;
  }

  /* ── Fuel form labels: readable on mobile ── */
  #drv-fuel-form label {
    font-size: 13px !important;
    color: #333 !important;
  }

  /* ── Dash tags: readable touch targets ── */
  .dash-tag {
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── Reconciliation/utility close buttons: touch-safe ── */
  #drv-reconciliation button[style*="padding:4px"] {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    color: #333 !important;
  }

  /* ── Stat card label contrast on mobile ── */
  .dash-stat-label {
    color: #333 !important;
  }
  .dash-stat-sub {
    font-size: 11px !important;
    color: #444 !important;
  }

  /* ── Compliance engine stat labels: override inline 11px ── */
  #comp-eng-stats .dash-stat-label {
    font-size: 12px !important;
  }

  /* ── Data tables: ensure horizontal scroll wrapper ── */
  .kg-section > div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Mobile UX fixes — hardcoded inline width overrides ── */

  /* Fill Plant form inputs: prevent overflow on narrow phones */
  #fp-level-input, #fp-reading-notes, #fp-cyl-type,
  #fp-po-supplier, #fp-po-item1, #fp-po-item2, #fp-po-notes,
  #fp-po-qty1, #fp-po-qty2,
  #fp-del-invoice, #fp-del-vendor, #fp-del-before, #fp-del-after, #fp-del-notes {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
    font-size: 16px !important;
  }

  /* Callback form inputs */
  #cb-customer, #cb-reason, #cb-assign {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
    font-size: 16px !important;
  }

  /* Delivery search: prevent iOS zoom + fill width */
  #del-search {
    width: 100% !important;
    max-width: 200px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  /* Header action icons: minimum 44px touch targets */
  .kg-header-logout, .kg-settings-link {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Day-of-week labels: bump from 10px to 11px for readability */
  .dow-card .dow-day {
    font-size: 11px !important;
  }

  /* ── P1 FIX: Dispatch stop inputs — touch-safe on mobile ── */
  #dsp-stop-cust,
  #dsp-stop-notes {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 100% !important;
  }
  #dsp-route-detail button[onclick*="dspAddStop"] {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
  }

  /* ── P1 FIX: Fill plant conversion inputs — prevent overflow ── */
  #fp-conv-tank, #fp-convert-tank {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  #fp-conv-value, #fp-convert-value {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  /* ── P2 FIX: Inline color:#888 contrast — WCAG AA compliance ── */
  [style*="color:#888"] { color: #555 !important; }
  [style*="color: #888"] { color: #555 !important; }

  /* ── P2 FIX: Inline font-size:10px minimum readability ── */
  .kg-main [style*="font-size:10px"] { font-size: 11px !important; }
  .kg-main [style*="font-size: 10px"] { font-size: 11px !important; }

  /* ── P2 FIX: Broader inline small font minimum ── */
  .kg-main [style*="font-size:11px"] { font-size: 12px !important; }
  .kg-main [style*="font-size: 11px"] { font-size: 12px !important; }

  /* ── P1 FIX: Global table horizontal scroll protection ── */
  .kg-main .dash-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* ── Global table overflow fix — all tables scroll horizontally on mobile ── */
  .kg-page table,
  .kg-card table,
  .kg-main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 32px);
    white-space: nowrap;
  }
  .kg-page table thead,
  .kg-page table tbody,
  .kg-page table tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }
  .kg-page table th,
  .kg-page table td {
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 13px;
  }

  /* ── P2 FIX: Quick tags, chips, toggle buttons — touch targets ── */
  .kg-quick-tag, .kg-chip, .kg-toggle-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── P2 FIX: City/State/Zip grid — stack on narrow phones ── */
  div:has(> #ds-ship-city) {
    grid-template-columns: 1fr !important;
  }
  #ds-ship-city, #ds-ship-state, #ds-ship-zip {
    font-size: 16px !important;
  }
}

/* ── Touch Target Accessibility (E24) ── */
@media (pointer: coarse) {
  button, [role="button"], .kg-btn, .drv-comp-tab,
  select, input[type="checkbox"], input[type="radio"],
  a.kg-nav-item, .kg-card-action, .kg-table-action {
    min-height: 44px;
    min-width: 44px;
  }
  input[type="text"], input[type="number"], input[type="date"],
  input[type="email"], input[type="tel"], input[type="search"],
  textarea, select {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

/* ── Dark Mode Foundation (E3) ── */
/* Activates via OS preference OR manual data-theme="dark" on <html> */
/* DISABLED: auto dark mode — opt-in only via settings toggle */
@media (prefers-color-scheme: DISABLED_dark) {
  :root:not([data-theme="light"]) {
    --kg-bg: #1a1a2e;
    --kg-surface: #16213e;
    --kg-surface-alt: #0f3460;
    --kg-text: #e0e0e0;
    --kg-text-muted: #a0a0a0;
    --kg-border: #2a2a4a;
    --kg-accent: #4fc3f7;
    --kg-success: #66bb6a;
    --kg-warning: #ffa726;
    --kg-danger: #ef5350;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --kg-bg: #1a1a2e;
  --kg-surface: #16213e;
  --kg-surface-alt: #0f3460;
  --kg-text: #e0e0e0;
  --kg-text-muted: #a0a0a0;
  --kg-border: #2a2a4a;
  --kg-accent: #4fc3f7;
  --kg-success: #66bb6a;
  --kg-warning: #ffa726;
  --kg-danger: #ef5350;
  color-scheme: dark;
}

/* DISABLED: auto dark mode — opt-in only via settings toggle */
@media (prefers-color-scheme: DISABLED_dark) {
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) .kg-page {
    background: var(--kg-bg, #1a1a2e) !important;
    color: var(--kg-text, #e0e0e0) !important;
  }
  :root:not([data-theme="light"]) .kg-card,
  :root:not([data-theme="light"]) .kg-stat-card,
  :root:not([data-theme="light"]) .kg-section,
  :root:not([data-theme="light"]) .kg-panel,
  :root:not([data-theme="light"]) table,
  :root:not([data-theme="light"]) th,
  :root:not([data-theme="light"]) td {
    border-color: var(--kg-border, #2a2a4a) !important;
    color: var(--kg-text, #e0e0e0) !important;
  }
  :root:not([data-theme="light"]) th {
    background: var(--kg-surface-alt, #0f3460) !important;
  }
  :root:not([data-theme="light"]) tr:nth-child(even) td {
    background: rgba(255,255,255,0.03) !important;
  }
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    background: var(--kg-surface, #16213e) !important;
    color: var(--kg-text, #e0e0e0) !important;
    border-color: var(--kg-border, #2a2a4a) !important;
  }
  :root:not([data-theme="light"]) .kg-page-header,
  :root:not([data-theme="light"]) .kg-header {
    background: var(--kg-surface-alt, #0f3460) !important;
    color: var(--kg-text, #e0e0e0) !important;
  }
  :root:not([data-theme="light"]) .kg-nav,
  :root:not([data-theme="light"]) .kg-bottom-nav {
    background: var(--kg-surface, #16213e) !important;
    border-color: var(--kg-border, #2a2a4a) !important;
  }
  :root:not([data-theme="light"]) .kg-btn {
    border-color: var(--kg-border, #2a2a4a) !important;
  }
  :root:not([data-theme="light"]) .drv-comp-tab {
    background: var(--kg-surface, #16213e) !important;
    color: var(--kg-text, #e0e0e0) !important;
    border-color: var(--kg-border, #2a2a4a) !important;
  }
  :root:not([data-theme="light"]) .drv-comp-tab.active,
  :root:not([data-theme="light"]) .drv-comp-tab.drv-tab-active {
    background: var(--kg-accent, #4fc3f7) !important;
    color: #1a1a2e !important;
  }
  :root:not([data-theme="light"]) a { color: var(--kg-accent, #4fc3f7); }
  :root:not([data-theme="light"]) hr { border-color: var(--kg-border, #2a2a4a) !important; }
  :root:not([data-theme="light"]) ::placeholder { color: var(--kg-text-muted, #a0a0a0) !important; }
}

/* Manual dark mode toggle — same rules */
[data-theme="dark"] body,
[data-theme="dark"] .kg-page {
  background: var(--kg-bg) !important;
  color: var(--kg-text) !important;
}
[data-theme="dark"] .kg-card,
[data-theme="dark"] .kg-stat-card,
[data-theme="dark"] .kg-section,
[data-theme="dark"] .kg-panel,
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
  border-color: var(--kg-border) !important;
  color: var(--kg-text) !important;
}
[data-theme="dark"] th { background: var(--kg-surface-alt) !important; }
[data-theme="dark"] tr:nth-child(even) td { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--kg-surface) !important;
  color: var(--kg-text) !important;
  border-color: var(--kg-border) !important;
}
[data-theme="dark"] .kg-page-header,
[data-theme="dark"] .kg-header {
  background: var(--kg-surface-alt) !important;
  color: var(--kg-text) !important;
}
[data-theme="dark"] .kg-nav,
[data-theme="dark"] .kg-bottom-nav {
  background: var(--kg-surface) !important;
  border-color: var(--kg-border) !important;
}
[data-theme="dark"] .kg-btn { border-color: var(--kg-border) !important; }
[data-theme="dark"] .drv-comp-tab {
  background: var(--kg-surface) !important;
  color: var(--kg-text) !important;
  border-color: var(--kg-border) !important;
}
[data-theme="dark"] .drv-comp-tab.active,
[data-theme="dark"] .drv-comp-tab.drv-tab-active {
  background: var(--kg-accent) !important;
  color: #1a1a2e !important;
}
[data-theme="dark"] a { color: var(--kg-accent); }
[data-theme="dark"] hr { border-color: var(--kg-border) !important; }
[data-theme="dark"] ::placeholder { color: var(--kg-text-muted) !important; }