/* ==========================================================================
   Select Mobility India Pvt. Ltd. - Transport Management System
   Application stylesheet
   ========================================================================== */

:root {
  --brand-900: #09243b;
  --brand-800: #0d3858;
  --brand-700: #12547f;
  --brand-600: #176d9e;
  --brand-500: #2187bd;
  --brand-100: #e3f1f8;
  --brand-50: #f3f8fb;

  --accent-500: #f59e0b;
  --accent-100: #fef3c7;

  --ok-600: #15803d;
  --ok-100: #dcfce7;
  --warn-600: #b45309;
  --warn-100: #fef3c7;
  --danger-600: #b91c1c;
  --danger-100: #fee2e2;
  --info-600: #1d4ed8;
  --info-100: #dbeafe;
  --muted-600: #64748b;
  --muted-100: #f1f5f9;

  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --line: #e2e8f0;
  --surface: #ffffff;
  --canvas: #f4f7f9;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);
  --sidebar-w: 246px;
  --topbar-h: 62px;
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 600; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }

/* Login screen styles live in login.css (loaded only by login.html). */

.demo-creds code {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: Consolas, Monaco, monospace;
}

/* ---------- App shell ----------------------------------------------------- */

.app { display: none; min-height: 100vh; }
.app.ready { display: block; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--brand-900);
  color: #cbd9e6;
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.sidebar-head {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  flex-shrink: 0;
}

.sidebar-head .mark {
  width: 33px;
  height: 33px;
  border-radius: 9px;
  background: var(--brand-600);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}

.sidebar-head .title { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.15; }
.sidebar-head .sub { font-size: 9.5px; letter-spacing: 0.7px; text-transform: uppercase; color: #7fa3c4; }

.nav { flex: 1; overflow-y: auto; padding: 12px 10px 24px; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 3px; }

.nav-group { margin-bottom: 15px; }
.nav-group > .label {
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b8dab;
  padding: 6px 9px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13.2px;
  color: #c3d4e3;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.13s, color 0.13s;
  position: relative;
}

.nav-item:hover { background: rgba(255, 255, 255, 0.075); color: #fff; }
.nav-item.active { background: var(--brand-600); color: #fff; font-weight: 600; }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--accent-500);
  border-radius: 0 3px 3px 0;
}
.nav-item .ico { width: 17px; text-align: center; font-size: 14px; flex-shrink: 0; }
.nav-item .badge {
  margin-left: auto;
  background: var(--danger-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9px;
}

/* Compact operations desk: strong state colours, tighter rhythm, less empty canvas. */
.topbar { box-shadow: 0 2px 12px rgba(9,36,59,.08); }
.page { padding: 18px 24px 30px; }
.page-head { margin-bottom: 14px; }
.page-head h1 { font-size: 20px; letter-spacing: -.2px; }
.page-head .sub { font-size: 12px; }
.kpi-grid { gap: 12px; margin-bottom: 14px; }
.kpi-card { min-height: 112px; padding: 14px 16px; border-radius: 9px; position: relative; overflow: hidden; }
.kpi-card::after { content: ""; position: absolute; right: -24px; bottom: -28px; width: 82px; height: 82px; border-radius: 50%; background: rgba(255,255,255,.34); }
.kpi-card .label { font-size: 10px; letter-spacing: .75px; }
.kpi-card .value { font-size: 28px; line-height: 1.05; margin: 8px 0 4px; }
.kpi-card .hint { font-size: 11px; }
.kpi-card:nth-child(1) { border-top: 3px solid #16a34a; background: linear-gradient(135deg,#fff 0%,#ecfdf3 100%); }
.kpi-card:nth-child(2) { border-top: 3px solid #2563eb; background: linear-gradient(135deg,#fff 0%,#eff6ff 100%); }
.kpi-card:nth-child(3) { border-top: 3px solid #7c3aed; background: linear-gradient(135deg,#fff 0%,#f5f3ff 100%); }
.kpi-card:nth-child(4) { border-top: 3px solid #dc2626; background: linear-gradient(135deg,#fff 0%,#fff1f2 100%); }
.kpi-card:nth-child(5) { border-top: 3px solid #f59e0b; background: linear-gradient(135deg,#fff 0%,#fffbeb 100%); }
.kpi-card:nth-child(6) { border-top: 3px solid #0891b2; background: linear-gradient(135deg,#fff 0%,#ecfeff 100%); }
.kpi-card:nth-child(7) { border-top: 3px solid #0f766e; background: linear-gradient(135deg,#fff 0%,#f0fdfa 100%); }
.kpi-card:nth-child(8) { border-top: 3px solid #ea580c; background: linear-gradient(135deg,#fff 0%,#fff7ed 100%); }
.panel { border-radius: 9px; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.panel-head { padding: 13px 16px; }
.panel-head h2 { font-size: 16px; }
.workflow { padding: 12px 16px; }
.workflow-step { padding: 8px 10px; }
.sidebar-head { height: 58px; }
.nav { padding-top: 8px; }
.nav-group { margin-bottom: 10px; }
.nav-item { padding: 7px 10px; font-size: 12.5px; }
@media (max-width: 900px) { .page { padding: 14px; } .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Final compact palette overrides for the live SMIPL desk. */
.content { padding: 14px 22px 24px; }
.topbar { height: 58px; }
.stats { gap: 10px; margin-bottom: 14px; }
.stats > div { min-height: 104px; padding: 13px 15px; border-top-width: 3px; position: relative; overflow: hidden; }
.stats > div::after { content: ""; position: absolute; width: 62px; height: 62px; right: -17px; bottom: -22px; border-radius: 50%; background: rgba(255,255,255,.48); }
.stats > div:nth-child(1) { border-top-color:#16a34a; background:linear-gradient(135deg,#fff,#ecfdf3); }
.stats > div:nth-child(2) { border-top-color:#2563eb; background:linear-gradient(135deg,#fff,#eff6ff); }
.stats > div:nth-child(3) { border-top-color:#7c3aed; background:linear-gradient(135deg,#fff,#f5f3ff); }
.stats > div:nth-child(4) { border-top-color:#dc2626; background:linear-gradient(135deg,#fff,#fff1f2); }
.stats > div:nth-child(5) { border-top-color:#f59e0b; background:linear-gradient(135deg,#fff,#fffbeb); }
.stats > div:nth-child(6) { border-top-color:#0891b2; background:linear-gradient(135deg,#fff,#ecfeff); }
.stats > div:nth-child(7) { border-top-color:#0f766e; background:linear-gradient(135deg,#fff,#f0fdfa); }
.stats > div:nth-child(8) { border-top-color:#ea580c; background:linear-gradient(135deg,#fff,#fff7ed); }
.stats b { font-size: 26px; margin-top: 6px; }
.workflow-card { margin: 14px 0; border-left-width: 3px; }
.workflow-card .panel-head { padding: 13px 16px; margin-bottom: 0; }
.workflow-row { padding: 10px 15px; }
.nav-group { margin-bottom: 9px; }
.nav-item { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 900px) { .content { padding: 12px; } .stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.sidebar-foot {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 10.5px;
  color: #6b8dab;
  flex-shrink: 0;
}
.sidebar-foot strong { color: #9db8ce; display: block; font-size: 11px; }

.main { margin-left: var(--sidebar-w); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }

.topbar { 
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar .page-title { font-size: 16.5px; font-weight: 600; }
.topbar .page-sub { font-size: 11.5px; color: var(--ink-500); }
.topbar .spacer { flex: 1; }
.command-search { position: relative; width: min(360px, 31vw); margin-left: 24px; }
.command-search input { width: 100%; height: 36px; padding: 0 42px 0 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--muted-100); color: var(--ink-900); font: inherit; outline: none; }
.command-search input:focus { background: #fff; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.command-search-icon { position: absolute; left: 12px; top: 7px; color: var(--ink-500); font-size: 18px; z-index: 1; }
.command-search kbd { position: absolute; right: 10px; top: 9px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-500); font: 11px Consolas, monospace; background: #fff; }
.command-results { position: absolute; top: 43px; left: 0; right: 0; z-index: 60; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); }
.command-result { display: grid; grid-template-columns: 24px 1fr auto 18px; gap: 8px; align-items: center; width: 100%; padding: 9px 10px; text-align: left; border: 0; border-radius: 6px; background: transparent; color: var(--ink-900); font: inherit; cursor: pointer; }
.command-result:hover { background: var(--brand-50); }
.command-result span { font-size: 15px; }
.command-result strong { font-size: 13px; }
.command-result small { color: var(--ink-500); font-size: 11px; }
.command-result b { color: var(--brand-600); }
.command-empty { padding: 13px 10px; color: var(--ink-500); font-size: 12px; }

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--ink-700);
  position: relative;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--muted-100); border-color: var(--ink-400); }
.icon-btn .dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger-600);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}

.menu-toggle { display: none; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}
.user-chip:hover { background: var(--muted-100); }
.user-chip .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-700);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.user-chip .who { font-size: 12.5px; font-weight: 600; line-height: 1.15; }
.user-chip .role { font-size: 10px; color: var(--ink-500); text-transform: capitalize; }

.content { padding: 20px 22px 40px; flex: 1; min-width: 0; }

/* ---------- Common components -------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

.card-head {
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.card-head h3 { margin: 0; font-size: 14.5px; }
.card-head .desc { font-size: 11.5px; color: var(--ink-500); }
.card-head .spacer { flex: 1; }
.card-body { padding: 17px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 15px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.stat:hover,.stat:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-400); outline: none; }
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-500);
}
.stat.ok::before { background: var(--ok-600); }
.stat.warn::before { background: var(--accent-500); }
.stat.danger::before { background: var(--danger-600); }
.stat.info::before { background: var(--info-600); }

.stat .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-500);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.stat .value { font-size: 25px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; }
.stat .value small { font-size: 13px; font-weight: 600; color: var(--ink-500); }
.stat .foot { font-size: 11.5px; color: var(--ink-500); margin-top: 5px; }

.control-tower-card { border-top: 3px solid var(--brand-700); }
.tower-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 11px 17px;
  color: var(--ink-500);
  background: var(--brand-50);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.tower-summary strong { color: var(--ink-900); font-size: 16px; margin-right: 4px; }
.tower-summary .tower-danger strong { color: var(--danger-600); }
.tower-summary .tower-warn strong { color: var(--accent-700); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s, border-color 0.13s;
}
.btn:hover { background: var(--muted-100); border-color: var(--ink-400); }
.btn.primary { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn.primary:hover { background: var(--brand-800); border-color: var(--brand-800); }
.btn.success { background: var(--ok-600); border-color: var(--ok-600); color: #fff; }
.btn.success:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brand-600); }
.btn.ghost:hover { background: var(--brand-50); border-color: transparent; }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.field { margin-bottom: 13px; }
.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 5px;
}
.field label .req { color: var(--danger-600); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.2px;
  font-family: inherit;
  color: var(--ink-900);
  background: var(--surface);
  transition: border-color 0.13s, box-shadow 0.13s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(26, 128, 196, 0.13);
}
.field input:disabled, .field select:disabled { background: var(--muted-100); color: var(--ink-500); }
.field textarea { resize: vertical; min-height: 72px; }
.field .hint { font-size: 11px; color: var(--ink-500); margin-top: 4px; }
.field .error { font-size: 11.5px; color: var(--danger-600); margin-top: 4px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 15px; }
.form-grid .span-2 { grid-column: span 2; }

.toolbar {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.toolbar .search {
  flex: 1;
  min-width: 190px;
  max-width: 330px;
  position: relative;
}
.toolbar .search input { width: 100%; padding: 8px 11px 8px 32px; }
.toolbar .search::before {
  content: "🔍";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.5;
}
.toolbar select { padding: 8px 11px; }
.toolbar .spacer { flex: 1; }

.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data thead th {
  text-align: left;
  padding: 10px 13px;
  background: var(--muted-100);
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-500);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--brand-600); }
table.data tbody td {
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data tbody tr:hover { background: var(--brand-50); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .mono { font-family: Consolas, Monaco, monospace; font-size: 12px; }
table.data .strong { font-weight: 600; }
table.data .muted { color: var(--ink-500); font-size: 12px; }
table.data .actions { display: flex; gap: 5px; justify-content: flex-end; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}
.pill.ok, .pill.active, .pill.completed, .pill.valid, .pill.paid { background: var(--ok-100); color: var(--ok-600); }
.pill.warn, .pill.maintenance, .pill.expiring, .pill.pending, .pill.scheduled, .pill.in-progress, .pill.under-review { background: var(--warn-100); color: var(--warn-600); }
.pill.danger, .pill.breakdown, .pill.expired, .pill.cancelled, .pill.suspended, .pill.rejected, .pill.no-show { background: var(--danger-100); color: var(--danger-600); }
.pill.info, .pill.on-leave, .pill.confirmed, .pill.approved, .pill.own { background: var(--info-100); color: var(--info-600); }
.pill.muted, .pill.idle, .pill.inactive, .pill.closed, .pill.exited, .pill.retired { background: var(--muted-100); color: var(--muted-600); }

.empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--ink-500);
}
.empty .ico { font-size: 38px; opacity: 0.35; margin-bottom: 10px; }
.empty h4 { color: var(--ink-700); margin-bottom: 4px; }
.empty p { font-size: 12.5px; }

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--line);
  border-top-color: var(--brand-600);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin: 34px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}
.toast {
  background: var(--ink-900);
  color: #fff;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  max-width: 340px;
  animation: slideIn 0.22s ease;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  pointer-events: auto;
}
.toast.ok { background: var(--ok-600); }
.toast.error { background: var(--danger-600); }
.toast.warn { background: var(--warn-600); }
@keyframes slideIn { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 42px 18px;
  z-index: 150;
  overflow-y: auto;
  animation: fade 0.15s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 620px;
  box-shadow: var(--shadow-lg);
  animation: rise 0.2s ease;
}
.modal.wide { max-width: 860px; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 20px; }
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  background: var(--muted-100);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 8px 14px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.2px;
  color: var(--ink-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.tab:hover { color: var(--ink-900); }
.tab.active { color: var(--brand-700); border-bottom-color: var(--brand-700); font-weight: 600; }

.bar-track {
  height: 6px;
  background: var(--muted-100);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}
.bar-fill { height: 100%; border-radius: 4px; background: var(--brand-500); transition: width 0.3s; }
.bar-fill.ok { background: var(--ok-600); }
.bar-fill.warn { background: var(--accent-500); }
.bar-fill.danger { background: var(--danger-600); }

.chart { width: 100%; height: 220px; }
.chart svg { display: block; width: 100%; height: 100%; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-500); margin-top: 10px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.kv { display: grid; grid-template-columns: 132px 1fr; gap: 9px 14px; font-size: 13px; }
.kv dt { color: var(--ink-500); font-size: 12px; }
.kv dd { margin: 0; font-weight: 500; }
.vendor-detail-grid { display:grid; grid-template-columns: max-content minmax(0,1fr) max-content minmax(0,1fr); gap:8px 12px; align-items:baseline; font-size:12px; }
.vendor-detail-grid span { color:var(--ink-500); white-space:nowrap; }
.vendor-detail-grid strong { min-width:0; overflow-wrap:anywhere; font-size:12px; }
.vendor-detail-grid .mono { font-size:11px; }

.alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.alert-row:last-child { border-bottom: none; }
.alert-row .when { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }

.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: var(--line);
}
.timeline-item { position: relative; padding-bottom: 15px; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-500);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.timeline-item.danger::before { background: var(--danger-600); }
.timeline-item.warn::before { background: var(--accent-500); }
.timeline-item .when { font-size: 11.5px; color: var(--ink-500); }
.timeline-item .what { font-size: 13px; }

.stop-list { display: grid; gap: 7px; }
.stop-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.stop-row .seq {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--brand-700);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.stop-row .count { margin-left: auto; font-size: 12px; color: var(--ink-500); }

.divider { height: 1px; background: var(--line); margin: 16px 0; }

.tracking-map-card, .tracking-vehicle-card { margin-bottom: 18px; }
.workflow-card { margin: 18px 0; border-left: 3px solid var(--accent-500); }
.etms-flow-card { border-left: 3px solid var(--brand-500); }
.etms-flow { display:grid; grid-template-columns:repeat(8,minmax(105px,1fr)); gap:8px; padding:4px 0 2px; }
.etms-stage { position:relative; min-height:88px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:12px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--ink-900); text-decoration:none; }
.etms-stage:hover,.etms-stage:focus-visible { border-color:var(--brand-400); box-shadow:var(--shadow-sm); outline:none; }
.etms-stage-no { color:var(--brand-600); font-size:11px; font-weight:800; }
.etms-stage strong { font-size:13px; }
.etms-stage small { color:var(--ink-500); line-height:1.25; }
.etms-arrow { position:absolute; right:-12px; top:35px; z-index:1; color:var(--brand-500); font-size:18px; }
@media (max-width: 1100px) { .etms-flow { grid-template-columns:repeat(4,1fr); } .etms-arrow { display:none; } }
@media (max-width: 680px) { .etms-flow { grid-template-columns:repeat(2,1fr); } }
.workflow-list { display: grid; }
.workflow-row { display: flex; align-items: center; gap: 12px; padding: 12px 17px; border-top: 1px solid var(--line); }
.workflow-row:first-child { border-top: 0; }
.workflow-row.urgent { background: #fffaf0; }
.workflow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-500); flex: 0 0 auto; box-shadow: 0 0 0 4px var(--brand-100); }
.workflow-dot.request { background: var(--accent-500); box-shadow: 0 0 0 4px var(--accent-100); }
.workflow-dot.acceptance, .workflow-dot.incident { background: var(--danger-600); box-shadow: 0 0 0 4px var(--danger-100); }
.workflow-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.workflow-main strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-main span, .workflow-clear small { color: var(--ink-500); font-size: 12px; }
.workflow-clear { display: flex; align-items: center; gap: 12px; padding: 18px; color: var(--ok-600); }
.workflow-clear > span { font-size: 22px; }
.workflow-clear div { display: grid; gap: 2px; }
.tracking-view-toggle { display: inline-flex; gap: 4px; padding: 3px; background: var(--muted-100); border: 1px solid var(--line); border-radius: 7px; }
.tracking-view-toggle .btn { border-color: transparent; }
.tracking-vehicle-select { min-width: 190px; }
.tracking-map-card { border-top: 3px solid var(--brand-700); }
.tracking-map-card .card-head { align-items: center; }
.map-workspace { position: relative; }
.map-tools { position: absolute; z-index: 2; top: 12px; right: 12px; display: flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.map-tools .icon-btn { width: 30px; height: 30px; min-height: 30px; font-size: 16px; }
.leaflet-map { width: 100%; height: 390px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #e8eef2; }
.smi-vehicle-marker { background: transparent; border: 0; }
.smi-vehicle-pin { display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(10, 32, 54, .35); font-size: 17px; line-height: 1; }
.smi-vehicle-pin.moving { background: #15803d; }
.smi-vehicle-pin.stopped { background: #d97706; }
.smi-vehicle-pin.selected { width: 34px; height: 34px; font-size: 20px; box-shadow: 0 0 0 4px rgba(37, 99, 235, .22), 0 3px 9px rgba(10, 32, 54, .4); }
.leaflet-tooltip { font-family: var(--font); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tracking-live-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 1px solid var(--ok-200); border-radius: 999px; color: var(--ok-700);
  background: var(--ok-50); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tracking-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-600); box-shadow: 0 0 0 3px var(--ok-100); }
.tracking-vehicle-card .table { table-layout: fixed; }
.tracking-vehicle-card .table th, .tracking-vehicle-card .table td { padding: 12px 14px; vertical-align: middle; }
.tracking-vehicle-card .table th:nth-child(1) { width: 20%; }
.tracking-vehicle-card .table th:nth-child(2) { width: 10%; }
.tracking-vehicle-card .table th:nth-child(3) { width: 19%; }
.tracking-vehicle-card .table th:nth-child(4) { width: 22%; }
.tracking-vehicle-card .table th:nth-child(5) { width: 14%; }
.tracking-vehicle-card .table th:last-child { width: 15%; }
.direction-readout { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-700); }
.direction-arrow { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--brand-700); background: var(--brand-50); font-size: 16px; line-height: 1; }

.section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-500);
  font-weight: 700;
  margin: 20px 0 10px;
}
.section-title:first-child { margin-top: 0; }

.text-ok { color: var(--ok-600); }
.text-warn { color: var(--warn-600); }
.text-danger { color: var(--danger-600); }
.text-muted { color: var(--ink-500); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }

.checkbox-list { display: grid; gap: 7px; max-height: 330px; overflow-y: auto; }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.checkbox-row:hover { background: var(--muted-100); }
.checkbox-row input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.checkbox-row .stop { margin-left: auto; font-size: 11.5px; color: var(--ink-500); }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1180px) {
  .grid.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.22s; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .menu-toggle { display: grid; }
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .grid.cols-6, .grid.cols-5, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .content { padding: 15px 13px 34px; }
  .topbar { padding: 0 13px; }
  .user-chip .who, .user-chip .role { display: none; }
  .command-search { width: min(280px, 36vw); margin-left: 12px; }
}

@media (max-width: 560px) {
  .command-search { width: 38px; margin-left: 8px; }
  .command-search input { padding: 0; text-indent: -999px; }
  .command-search kbd { display: none; }
  .grid.cols-6, .grid.cols-5, .grid.cols-4 { grid-template-columns: 1fr; }
  .stat .value { font-size: 22px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .vendor-detail-grid { grid-template-columns: max-content minmax(0,1fr); }
  .kv dt { margin-top: 8px; }
}

/* ---------- Print --------------------------------------------------------- */

@media print {
  .sidebar, .topbar, .toolbar, .btn, .modal-backdrop { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; }
  .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

/* Live dashboard visual pass: the dashboard renders `.stat` cards, not `.kpi-card`. */
.content { padding: 14px 22px 24px; }
.topbar { height: 58px; }
.stat { min-height: 112px; padding: 13px 16px; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg,#fff,#f7fbff); box-shadow: 0 3px 12px rgba(15,23,42,.07); }
.stat::after { content:""; position:absolute; width:70px; height:70px; right:-20px; bottom:-26px; border-radius:50%; background:rgba(255,255,255,.52); pointer-events:none; }
.stat.ok { background:linear-gradient(135deg,#fff,#ecfdf3); }
.stat.info { background:linear-gradient(135deg,#fff,#eff6ff); }
.stat.warn { background:linear-gradient(135deg,#fff,#fffbeb); }
.stat.danger { background:linear-gradient(135deg,#fff,#fff1f2); }
.stat .label { font-size:10px; letter-spacing:.8px; }
.stat .value { font-size:27px; margin-top:7px; }
.stat .foot { font-size:11px; }
.stats { gap: 8px; }
.stat { min-height: 82px; height: 82px; padding: 9px 12px; border-radius: 7px; }
.stat .label { font-size: 9px; line-height: 1.1; }
.stat .value { font-size: 22px; line-height: 1; margin-top: 5px; }
.stat .foot { font-size: 10px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat::after { width: 48px; height: 48px; right: -16px; bottom: -20px; }

/* SMIPL brand treatment: charcoal structure with orange operational emphasis. */
:root {
  --brand-900: #111111;
  --brand-800: #1b1b1b;
  --brand-700: #252525;
  --brand-600: #f4511e;
  --brand-500: #ff7a1a;
  --accent-500: #ff8a00;
}
.sidebar { background: linear-gradient(180deg,#111 0%,#1d1d1d 58%,#2a160d 100%); }
.sidebar-head { border-bottom-color: rgba(255,122,26,.28); }
.sidebar-head .mark { background: linear-gradient(135deg,#111,#f4511e); border-color: rgba(255,138,0,.7); }
.sidebar-head .sub { color: #ff9a54; }
.nav-group > .label { color: #ff9a54; }
.nav-item { color: #e4e4e4; }
.nav-item:hover { background: rgba(244,81,30,.18); color: #fff; }
.nav-item.active { background: linear-gradient(100deg,#f4511e,#ff9800); color:#111; font-weight:800; }
.nav-item.active::before { background:#fff; }
.topbar { background: #fff; border-bottom: 1px solid #f1d2c3; }
.topbar .page-title { color:#171717; }
.command-search { border-color:#ead2c5; box-shadow: inset 0 0 0 1px rgba(244,81,30,.04); }
.command-search:focus-within { border-color:#f4511e; box-shadow:0 0 0 3px rgba(244,81,30,.14); }
.icon-btn:hover { color:#f4511e; border-color:#f4511e; }
.user-chip { border-color:#ead2c5; }
.user-chip .avatar { background:linear-gradient(135deg,#171717,#f4511e); }
.stat { border-top-color:#f4511e; }
.stat.ok,.stat.info,.stat.warn,.stat.danger { background:linear-gradient(135deg,#fff 0%,#fff4ee 100%); }
.stat.ok::before,.stat.info::before,.stat.warn::before,.stat.danger::before { background:linear-gradient(180deg,#111,#f4511e); }
.card-head h3 { color:#1a1a1a; }
.workflow-card { border-left-color:#f4511e; }
.workflow-dot { background:#f4511e; box-shadow:0 0 0 4px #fff0e8; }

/* Mid-contrast SMIPL palette: stronger than white, calmer than full black. */
.sidebar { background:linear-gradient(180deg,#242424 0%,#303030 100%); color:#f4f4f4; border-right:0; }
.sidebar-head { background:#171717; border-bottom:1px solid rgba(255,255,255,.12); }
.sidebar-head .title { color:#fff; }
.nav { background:transparent; }
.nav-group > .label { color:#ffad73; }
.nav-item { color:#e1e1e1; }
.nav-item:hover { background:rgba(244,81,30,.18); color:#fff; }
.nav-item.active { background:linear-gradient(100deg,#f4511e,#ff861f); color:#171717; box-shadow:none; }
.sidebar-foot { background:#1c1c1c; color:#c8c8c8; border-top:1px solid rgba(255,255,255,.1); }
.main { background:#eef1f3; }
.topbar { background:#fff; }
.content { background:#eef1f3; }
.stat { background:#fffaf6 !important; border-color:#eadfd7; }
.stat.ok,.stat.info,.stat.warn,.stat.danger { background:linear-gradient(135deg,#fffaf6 0%,#fff1e8 100%) !important; }
.card { background:#fffefa; border-color:#e4ddd7; }
.etms-flow-card,.workflow-card { background:#fffefa; }

/* Final requested pattern: black navigation rail with multicolour operational highlights. */
.sidebar { background:#0d0d0d; color:#e9e9e9; border-right:1px solid #2b2b2b; }
.sidebar-head { background:#090909; border-bottom:1px solid #343434; }
.sidebar-head .mark { background:linear-gradient(135deg,#242424,#f4511e); box-shadow:0 0 0 2px #f4511e; }
.sidebar-head .title { color:#fff; }
.sidebar-head .sub { color:#ff8a4c; }
.nav { background:transparent; }
.nav-group > .label { color:#a8a8a8; }
.nav-item { color:#d2d2d2; }
.nav-item:hover { background:#242424; color:#fff; }
.nav-item.active { color:#fff; box-shadow:none; }
.nav-group:nth-child(1) .nav-item.active { background:linear-gradient(100deg,#f4511e,#ff9800); color:#111; }
.nav-group:nth-child(2) .nav-item.active { background:linear-gradient(100deg,#2563eb,#38bdf8); color:#fff; }
.nav-group:nth-child(3) .nav-item.active { background:linear-gradient(100deg,#7c3aed,#c084fc); color:#fff; }
.nav-group:nth-child(4) .nav-item.active { background:linear-gradient(100deg,#dc2626,#fb7185); color:#fff; }
.nav-group:nth-child(5) .nav-item.active { background:linear-gradient(100deg,#059669,#34d399); color:#06251c; }
.nav-item.active::before { display:none; }
.nav-item:not(.active), .nav-item:not(.active) .ico { color:#f1f1f1 !important; opacity:1 !important; }
.nav-item:not(.active):hover { color:#ffffff !important; background:#292929 !important; }
.nav-group > .label { color:#ffad73 !important; opacity:1 !important; }
.sidebar-foot, .sidebar-foot strong { color:#e5e5e5 !important; }
.sidebar-foot { background:#111; color:#c8c8c8; border-top:1px solid #333; }
.stat:nth-child(1),.stat:nth-child(5) { border-top-color:#16a34a; }
.stat:nth-child(2),.stat:nth-child(6) { border-top-color:#2563eb; }
.stat:nth-child(3),.stat:nth-child(7) { border-top-color:#7c3aed; }
.stat:nth-child(4) { border-top-color:#dc2626; }
.stat:nth-child(8) { border-top-color:#f59e0b; }

/* High-priority brand overrides for existing dashboard theme rules. */
.sidebar { background:#000 !important; }
.sidebar-head { background:#000 !important; }
.nav { background:transparent !important; }
.nav-item.active { color:#fff !important; border-radius:7px !important; }
.nav-group:nth-of-type(1) .nav-item.active { background:#f4511e !important; color:#111 !important; }
.nav-group:nth-of-type(2) .nav-item.active { background:#2563eb !important; }
.nav-group:nth-of-type(3) .nav-item.active { background:#7c3aed !important; }
.nav-group:nth-of-type(4) .nav-item.active { background:#dc2626 !important; }
.nav-group:nth-of-type(5) .nav-item.active { background:#16a34a !important; color:#071b12 !important; }
.sidebar-foot { background:#080808 !important; }
.btn-primary,.button,.btn { background:linear-gradient(120deg,#171717,#f4511e 72%,#ff9800); color:#fff; }

/* Commercials: keep payable and receivable terms visibly distinct. */
.commercials-page { display: grid; gap: 12px; width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
.commercials-page > *, .commercial-grid > * { min-width: 0; max-width: 100%; }
.commercial-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:3px solid #f4511e; padding:12px 16px; }
.commercial-hero h2 { font-size: 19px; margin-top: 2px; }
.section-kicker { display:block; color:#f4511e; font-size:11px; font-weight:800; letter-spacing:1.2px; }
.section-kicker.vendor { color:#176d9e; }
.section-kicker.client { color:#f4511e; }
.commercial-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }
.commercial-section { overflow:hidden; }
.commercial-section:first-child { border-top:4px solid #176d9e; }
.commercial-section:last-child { border-top:4px solid #f4511e; }
.commercial-detail { width:100%; max-width:100%; table-layout:fixed; border-collapse:collapse; }
.commercial-detail th,.commercial-detail td { padding:7px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; overflow-wrap:anywhere; }
.commercial-detail th { width:45%; color:var(--ink-500); font-size:11px; font-weight:600; }
.commercial-detail tr:last-child th,.commercial-detail tr:last-child td { border-bottom:0; }
.economics-card { border-top:4px solid #16a34a; }
.economics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:0 14px 14px; }
.economics-grid > div { background:#f8fafc; border:1px solid var(--line); border-radius:8px; padding:10px; min-height:78px; }
.economics-grid .highlight { background:linear-gradient(135deg,#fff7ed,#ffedd5); border-color:#fdba74; }
.economics-grid small,.economics-grid span { display:block; color:var(--ink-500); font-size:12px; }
.economics-grid strong { display:block; margin:5px 0 2px; font-size:17px; }
.commercial-table { width:100%; min-width:0; table-layout:fixed; font-size:11px; }
.commercial-table th { white-space:normal; line-height:1.15; padding:8px 7px; }
.commercial-table td { padding:8px 7px; vertical-align:middle; overflow-wrap:anywhere; }
.commercial-table th:nth-child(1), .commercial-table td:nth-child(1) { width:20%; }
.commercial-table th:nth-child(2), .commercial-table td:nth-child(2) { width:11%; }
.commercial-table th:nth-child(3), .commercial-table td:nth-child(3) { width:7%; }
.commercial-table th:nth-child(4), .commercial-table td:nth-child(4) { width:8%; }
.commercial-table th:nth-child(5), .commercial-table td:nth-child(5) { width:14%; }
.commercial-table th:nth-child(6), .commercial-table td:nth-child(6) { width:12%; }
.commercial-table th:nth-child(7), .commercial-table td:nth-child(7) { width:15%; }
.commercial-table th:nth-child(8), .commercial-table td:nth-child(8) { width:9%; }
.commercial-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end; }
.commercial-form-grid label { display:grid; gap:6px; color:var(--ink-700); font-size:12px; font-weight:600; }
.commercial-form-grid input,.commercial-form-grid select { width:100%; min-height:38px; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font:inherit; background:#fff; }
.form-group-title { grid-column:1/-1; padding:8px 0 0; border-bottom:1px solid var(--line); color:#f4511e; font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.commercial-form-grid .form-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }
@media (max-width: 1200px) { .commercial-grid,.economics-grid { grid-template-columns:1fr 1fr; } .commercial-form-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 650px) { .commercial-hero { align-items:flex-start; flex-direction:column; } .commercial-grid,.economics-grid,.commercial-form-grid { grid-template-columns:1fr; } .form-group-title { grid-column:auto; } .commercial-form-grid .form-actions { grid-column:auto; justify-content:flex-start; } }
.sidebar-foot { border-top-color:rgba(255,122,26,.28); }

/* Alternate SMIPL pattern: light control desk, charcoal type, orange accents only. */
.sidebar { background:#fff; color:#27313a; border-right:1px solid #e7e1dc; }
.sidebar-head { background:#171717; border-bottom:0; }
.sidebar-head .title { color:#fff; }
.sidebar-head .sub { color:#ff9a54; }
.sidebar-head .mark { box-shadow:0 0 0 2px #f4511e; }
.nav { background:#fff; }
.nav-group > .label { color:#9a4a20; }
.nav-item { color:#4b5560; }
.nav-item:hover { background:#fff4ee; color:#171717; }
.nav-item.active { background:#fff0e8; color:#c43d0f; box-shadow:inset 3px 0 #f4511e; }
.nav-item.active::before { display:none; }
.sidebar-foot { background:#faf8f6; color:#59636d; border-top:1px solid #eadfd8; }
.main { background:#f7f8fa; }
.topbar { background:#fff; border-bottom:1px solid #e7e1dc; }
.stat,.card { background:#fff !important; }
.stat.ok,.stat.info,.stat.warn,.stat.danger { border-top-color:#f4511e; }
.stat::before { background:#f4511e !important; }
.stat::after { display:none; }
.etms-flow-card { border-left-color:#f4511e; }
.workflow-card { border-left-color:#f4511e; }
.workflow-dot { background:#f4511e; box-shadow:0 0 0 4px #fff0e8; }
.card { border-radius:9px; box-shadow:0 2px 10px rgba(15,23,42,.055); }
.card-head { padding:13px 16px; }
.card-head h3 { font-size:15px; }
.workflow-card { margin:14px 0; }
.workflow-row { padding:9px 15px; }
@media (max-width:900px) { .content { padding:12px; } }

/* Official SMIPL tenant wordmark in the workspace header. */
.sidebar-head .mark {
  width: 58px;
  height: 38px;
  padding: 3px;
  border-radius: 6px;
  background: #fff !important;
  border: 1px solid #f4511e !important;
  overflow: hidden;
}
.sidebar-head .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sidebar-head .title { font-size: 12.5px; white-space: nowrap; }
.sidebar-head .sub { font-size: 9px; }

/* Dashboard content palette: keep the sidebar unchanged, add clear colour coding to the work area. */
.content > .grid.cols-4:first-child .stat:nth-child(1),
.content > .grid.cols-4:nth-child(2) .stat:nth-child(2) {
  border-top-color: #16a34a !important;
  background: linear-gradient(135deg, #ffffff 0%, #eaf8ef 100%) !important;
}
.content > .grid.cols-4:first-child .stat:nth-child(2),
.content > .grid.cols-4:nth-child(2) .stat:nth-child(3) {
  border-top-color: #2563eb !important;
  background: linear-gradient(135deg, #ffffff 0%, #eaf2ff 100%) !important;
}
.content > .grid.cols-4:first-child .stat:nth-child(3) {
  border-top-color: #7c3aed !important;
  background: linear-gradient(135deg, #ffffff 0%, #f3edff 100%) !important;
}
.content > .grid.cols-4:first-child .stat:nth-child(4) {
  border-top-color: #e11d48 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fff0f3 100%) !important;
}
.content > .grid.cols-4:nth-child(2) .stat:nth-child(1) {
  border-top-color: #f59e0b !important;
  background: linear-gradient(135deg, #ffffff 0%, #fff8df 100%) !important;
}
.content > .grid.cols-4:nth-child(2) .stat:nth-child(4) {
  border-top-color: #f97316 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fff1e5 100%) !important;
}
.content > .grid.cols-4 .stat::before { opacity: .95; }
.content > .grid.cols-4 .stat .label { color: #526579; }
.content > .grid.cols-4 .stat .value { color: #0b1728; }
.content > .grid.cols-4 .stat .foot { color: #61758b; }
.content > .card.etms-flow-card {
  border-left: 4px solid #06b6d4 !important;
  background: linear-gradient(135deg, #ffffff 0%, #effcff 100%) !important;
}
.content > .card.etms-flow-card .card-head { border-bottom-color: #bcecf4; }
.content > .card.etms-flow-card .etms-stage:nth-child(1) { color: #2563eb; }
.content > .card.etms-flow-card .etms-stage:nth-child(2) { color: #7c3aed; }
.content > .card.etms-flow-card .etms-stage:nth-child(3) { color: #0891b2; }
.content > .card.etms-flow-card .etms-stage:nth-child(4) { color: #f97316; }
.content > .card.etms-flow-card .etms-stage:nth-child(5) { color: #16a34a; }
.content > .card.etms-flow-card .etms-stage:nth-child(6) { color: #db2777; }
.content > .card.etms-flow-card .etms-stage:nth-child(7) { color: #d97706; }
.content > .card.etms-flow-card .etms-stage:nth-child(8) { color: #dc2626; }
.content > .card.workflow-card {
  border-left: 4px solid #f97316 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fff8f1 100%) !important;
}
.content > .card.workflow-card .card-head { border-bottom-color: #ffd5b5; }
.content > .card:not(.etms-flow-card):not(.workflow-card) {
  border-top: 3px solid #93c5fd;
}
.content > .card.etms-flow-card .etms-flow { align-items: stretch; }
.content > .card.etms-flow-card .etms-stage {
  position: relative;
  min-height: 118px;
  padding: 12px 10px 10px;
  border: 1px solid #dbe7f0;
  border-top: 4px solid currentColor;
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 2px 7px rgba(15,23,42,.06);
  transition: transform .16s ease, box-shadow .16s ease;
}
.content > .card.etms-flow-card .etms-stage:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 16px rgba(15,23,42,.13);
  text-decoration: none;
}
.content > .card.etms-flow-card .etms-stage-no { font-size: 12px; font-weight: 800; }
.content > .card.etms-flow-card .etms-stage strong { display: block; margin-top: 5px; color: #0f172a; font-size: 14px; }
.content > .card.etms-flow-card .etms-stage small { display: block; margin-top: 5px; color: #64748b; line-height: 1.35; }
.content > .card.etms-flow-card .etms-stage em { display: block; margin-top: 9px; color: currentColor; font-size: 10px; font-style: normal; font-weight: 700; }
.content > .card.etms-flow-card .etms-arrow { color: #f97316; font-weight: 800; }