:root {
  --navy: #0b1f3a;
  --navy-2: #123056;
  --teal: #0d9488;
  --teal-dark: #0f766e;
  --aqua: #14b8a6;
  --bg: #eef2f6;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --sidebar: #0b1f3a;
  --sidebar-w: 268px;
  --sidebar-collapsed: 76px;
  --header-h: 68px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #071627 0%, #0b1f3a 45%, #0d9488 160%);
  padding: 1.5rem;
}
.login-wrap { width: 100%; max-width: 420px; }
.brand-login { text-align: center; color: #fff; margin-bottom: 1.2rem; }
.logo-drop {
  width: 64px; height: 64px; margin: 0 auto .75rem;
  border-radius: 18px; background: #14b8a6; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; letter-spacing: .04em;
}
.brand-login h1 { font-size: 1.8rem; font-weight: 800; margin: 0; }
.brand-login h1 span { color: #5eead4; }
.brand-login p { color: #94a3b8; margin: .35rem 0 0; letter-spacing: .08em; font-size: .78rem; text-transform: uppercase; }
.login-card {
  background: #fff; border-radius: 18px; padding: 1.5rem 1.4rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.badge-role {
  display: inline-block; background: #ccfbf1; color: #0f766e;
  font-size: .7rem; font-weight: 700; border-radius: 6px; padding: .25rem .55rem;
}
.login-card h5 { margin: .7rem 0 .2rem; font-weight: 700; }
.login-card .hint { color: var(--muted); font-size: .9rem; }
.login-card .form-label { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.login-card .form-control { border: 1.5px solid #d7e0ea; border-radius: 10px; background: #f8fafc; }
.login-card .demo { font-size: .75rem; color: #78909c; margin-top: .8rem; }
.btn-water {
  background: var(--teal); color: #fff; border: 0; border-radius: 10px;
  font-weight: 700; padding: .75rem 1rem;
}
.btn-water:hover { background: var(--teal-dark); color: #fff; }

.app-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: linear-gradient(180deg, #081627 0%, #0b1f3a 55%, #0d2a44 100%);
  color: #cbd5e1; overflow: auto; z-index: 40;
  padding: .85rem .7rem 1.6rem;
  box-shadow: 8px 0 28px rgba(8,22,39,.18);
  transition: width .2s ease, transform .2s ease;
}
.app-sidebar .brand {
  display: flex; align-items: center; gap: .7rem;
  color: #fff; font-weight: 800; letter-spacing: .04em;
  padding: .45rem .55rem 1rem;
}
.brand-mark {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800;
}
.brand-text small { display: block; color: #5eead4; font-weight: 600; letter-spacing: .1em; font-size: .62rem; }
.app-sidebar a {
  display: flex; align-items: center; gap: .7rem;
  color: #cbd5e1; text-decoration: none; border-radius: 10px;
  padding: .52rem .7rem; font-size: .9rem; margin-bottom: 2px;
  white-space: nowrap;
}
.app-sidebar a i { font-size: 1.05rem; width: 1.2rem; text-align: center; color: #7dd3c7; }
.app-sidebar a:hover { background: rgba(20,184,166,.12); color: #fff; }
.app-sidebar a.active { background: #0d9488; color: #fff; box-shadow: 0 6px 16px rgba(13,148,136,.28); }
.app-sidebar a.active i { color: #fff; }
.app-sidebar .nav-label {
  font-size: .65rem; letter-spacing: .1em; color: #64748b;
  padding: .85rem .7rem .3rem; text-transform: uppercase; font-weight: 700;
}
.app-sidebar .nav-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; color: #94a3b8; cursor: pointer; font: inherit;
  padding: .7rem .7rem .25rem; border-radius: 8px;
}
.app-sidebar .nav-toggle:hover { color: #e2e8f0; }
.app-sidebar .nav-toggle i { font-size: .7rem; transition: transform .15s ease; }
.app-sidebar .nav-group.closed .nav-items { display: none; }
.app-sidebar .nav-group.closed .nav-toggle i { transform: rotate(-90deg); }
.app-sidebar .nav-items { padding-bottom: .25rem; }

.app-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  transition: margin-left .2s ease;
}
.app-top {
  min-height: var(--header-h);
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1.2rem; background: #fff; color: var(--navy);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(15,23,42,.04);
  position: sticky; top: 0; z-index: 15; gap: .8rem;
}
.top-left { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.top-title { font-weight: 800; font-size: 1.12rem; line-height: 1.2; }
.top-sub { color: var(--muted); font-size: .78rem; }
.top-right { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; justify-content: flex-end; }
.factory-switch { width: 200px; border-radius: 10px; }
.icon-btn {
  width: 40px; height: 40px; border: 1px solid var(--line); background: #f8fafc;
  border-radius: 10px; color: var(--navy); display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: #ecfeff; border-color: #99f6e4; color: var(--teal-dark); }
.user-chip { display: flex; align-items: center; gap: .55rem; }
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #0d9488; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem;
}
.user-meta { text-align: left; }
.user-meta span { display: block; font-size: .7rem; color: var(--muted); }
.btn-logout {
  border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 10px; font-weight: 600;
}
.btn-logout:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.app-content { padding: 1.15rem 1.3rem 2.4rem; min-height: 40vh; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem; }
.kpi {
  background: var(--card); border-radius: 14px; padding: 1rem 1.05rem;
  box-shadow: 0 8px 24px rgba(15,23,42,.05); border: 1px solid var(--line);
}
.kpi .lbl { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kpi .val { font-size: 1.32rem; font-weight: 800; margin-top: .25rem; color: var(--navy); }
.kpi.soon .val { color: #94a3b8; font-size: 1rem; }
.view-toggle { display: inline-flex; gap: .25rem; align-items: center; }
.section-head {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin: 1.15rem 0 .65rem;
}
.section-head h6 { margin: 0; font-weight: 800; color: var(--navy); }
.plant-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .85rem;
}
.plant-card {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
  cursor: default;
  width: 100%;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.plant-card:hover { border-color: #99f6e4; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.1); }
.plant-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
  margin-bottom: .75rem; text-decoration: none; color: inherit;
}
a.plant-card-head:hover strong { color: #0d9488; }
.plant-card-head strong { font-size: 1rem; color: var(--navy); }
.plant-card-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.plant-card-kpis a.kpi-mini,
a.kpi-mini {
  display: block; text-decoration: none; color: inherit;
  background: #f8fafc; border-radius: 10px; padding: .4rem .5rem;
  border: 1px solid transparent;
}
.plant-card-kpis a.kpi-mini:hover, a.kpi-mini:hover {
  border-color: #99f6e4; background: #f0fdfa;
}
.plant-card-kpis span, .kpi-mini span {
  display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700;
}
.plant-card-kpis b, .kpi-mini b { color: var(--navy); font-size: .9rem; }
.ex-matrix { margin-bottom: .5rem; }
.ex-cat-row { cursor: pointer; }
.ex-cat-row:hover { background: #f0fdfa; }
.stock-factory h6 a { text-decoration: none; color: var(--navy); }
.stock-factory h6 a:hover { color: #0d9488; }
.txn-type { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0f766e; }
a.kpi-link { text-decoration: none; color: inherit; display: block; transition: transform .12s ease, box-shadow .12s ease; }
a.kpi-link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.1); border-color: #99f6e4; }
.perm-mod { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem; }
.perm-group { margin-bottom: 1rem; }
.perm-group-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .55rem; }
.perm-group-head strong { margin-right: auto; }
.perm-mod-top { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .35rem; }
.perm-actions { display: flex; flex-wrap: wrap; gap: .15rem .85rem; padding-left: 2.4rem; }
.perm-act { font-size: .8rem; }
.role-btn-account { border-color: #5eead4; }
.role-btn.active { background: #0d9488; color: #fff; border-color: #0d9488; }
.role-btn.active small { color: #ccfbf1 !important; }
.badge.text-bg-teal { background: #ccfbf1; color: #0f766e; }
#routeMap { height: 260px; border-radius: 12px; z-index: 1; }
.card-soft {
  background: var(--card); border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(15,23,42,.05); padding: 1rem 1.1rem;
}
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: end;
  margin-bottom: 1rem; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: .75rem .85rem;
}
.table thead th { font-size: .72rem; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.table tbody tr:hover { background: #f8fafc; }
.calc-lock { background: #f1f5f9 !important; font-weight: 700; }
.later-note { color: var(--muted); font-size: .9rem; padding: 2rem 0; text-align: center; }
#liveMap, #tripMap { height: 420px; border-radius: 12px; z-index: 1; }
.sidebar-backdrop { display: none; }

body.track-mode .app-content { padding: 0; overflow: hidden; }
body.track-mode .app-main { min-height: 100vh; }
.track-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  height: calc(100vh - var(--header-h));
  background: #0b1f3a;
}
.track-list {
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 2;
}
.track-list-head { padding: .85rem .9rem .55rem; border-bottom: 1px solid var(--line); }
.track-list-head h6 { margin: 0 0 .55rem; font-weight: 800; }
.track-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.track-tabs button {
  border: 1px solid var(--line); background: #f8fafc; border-radius: 999px;
  font-size: .72rem; font-weight: 700; padding: .2rem .55rem; color: var(--navy);
}
.track-tabs button.active { background: #0d9488; color: #fff; border-color: #0d9488; }
.track-search { margin-top: .55rem; }
.track-alert {
  display: block; margin-top: .55rem; padding: .45rem .6rem;
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  border-radius: 10px; font-size: .78rem; font-weight: 700; text-decoration: none;
}
.track-alert:hover { color: #7f1d1d; background: #fee2e2; }
.alert-map { height: 280px; border-radius: 12px; background: #e2e8f0; }
.geo-map { height: 220px; border-radius: 12px; background: #e2e8f0; border: 1px solid var(--line); }
.webhook-box {
  background: #0b1f3a; color: #e2e8f0; border-radius: 10px; padding: .75rem .9rem;
  font-size: .78rem; overflow: auto; margin: 0;
}
.webhook-box code { color: #5eead4; }
.track-items { overflow: auto; flex: 1; padding: .45rem; }
.track-item {
  display: block; width: 100%; text-align: left; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; padding: .65rem .7rem; margin-bottom: .45rem;
  cursor: pointer;
}
.track-item:hover { border-color: #99f6e4; background: #f0fdfa; }
.track-item.sel { border-color: #0d9488; box-shadow: 0 0 0 2px #ccfbf1; }
.track-item-top { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.track-item-top strong { font-size: .88rem; }
.gps-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148,163,184,.25);
}
.gps-dot.on { background: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.28); }
.gps-dot.stale { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
.track-addr { font-size: .72rem; color: var(--muted); margin-top: .2rem; line-height: 1.3; }
.track-item-actions { display: flex; gap: .35rem; margin-top: .45rem; align-items: center; }
.track-map { position: relative; min-height: 0; }
.track-map #liveMap { height: 100%; border-radius: 0; }
.leaflet-div-icon.veh-pin { background: none; border: none; }
.veh-pin-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 14px;
  border: 2px solid #fff; box-shadow: 0 4px 12px rgba(15,23,42,.28);
}
.track-item .badge { font-size: .65rem; }
.track-call {
  display: inline-flex; align-items: center; gap: .25rem;
  border-radius: 999px; padding: .15rem .5rem; font-size: .7rem; font-weight: 700;
  background: #ecfdf5; color: #0f766e; text-decoration: none; border: 1px solid #99f6e4;
}
.track-call:hover { background: #0d9488; color: #fff; }
.track-tools {
  position: absolute; top: .75rem; right: .75rem; z-index: 500;
  display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end;
}
.track-tools .btn { box-shadow: 0 8px 20px rgba(15,23,42,.15); }
.track-play {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 500;
  background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 14px;
  padding: .65rem .8rem; display: none; box-shadow: 0 12px 28px rgba(15,23,42,.16);
}
.track-play.show { display: block; }
.track-detail {
  padding: .75rem .85rem; border-top: 1px solid var(--line); background: #f8fafc; font-size: .8rem;
}
.track-detail h6 { font-size: .78rem; font-weight: 800; margin: 0 0 .35rem; }

body.track-fs .app-sidebar { transform: translateX(-105%); }
body.track-fs .app-main { margin-left: 0; }
body.track-fs .app-top { min-height: 52px; padding: .4rem .8rem; }
body.track-fs .top-sub, body.track-fs .user-meta, body.track-fs .btn-logout span { display: none; }
body.track-fs .track-shell { height: calc(100vh - 52px); grid-template-columns: 1fr; }
body.track-fs .track-list { display: none; }
body.track-fs.track-list-open .track-list {
  display: flex; position: absolute; left: 0; top: 0; bottom: 0;
  width: min(360px, 92vw); z-index: 600; box-shadow: 12px 0 32px rgba(8,22,39,.25);
}
body.track-fs.track-list-open .track-shell { position: relative; }

@media (max-width: 992px) {
  .track-shell { grid-template-columns: 1fr; grid-template-rows: minmax(280px, 50vh) 1fr; height: calc(100vh - var(--header-h)); }
  .track-map { order: -1; }
  .track-list { border-right: 0; border-top: 1px solid var(--line); }
  body.track-fs .track-shell { grid-template-rows: 1fr; }
}

body.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed); }
body.sidebar-collapsed .app-sidebar .brand-text,
body.sidebar-collapsed .app-sidebar .nav-label,
body.sidebar-collapsed .app-sidebar a span { display: none; }
body.sidebar-collapsed .app-sidebar .nav-group.closed .nav-items { display: block; }
body.sidebar-collapsed .app-sidebar .nav-toggle { display: none; }
body.sidebar-collapsed .app-sidebar a { justify-content: center; padding: .65rem; }
body.sidebar-collapsed .app-main { margin-left: var(--sidebar-collapsed); }
body.sidebar-collapsed .app-sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }

@media (max-width: 992px) {
  .app-sidebar { transform: translateX(-105%); width: min(86vw, 280px); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(8,22,39,.45); z-index: 30;
  }
  .app-main { margin-left: 0; }
  .factory-switch { width: 140px; }
  .user-meta { display: none; }
  .btn-logout span, .btn-logout { font-size: .8rem; }
  .app-content { padding: .9rem .85rem 2rem; }
  .top-title { font-size: 1rem; }
}

@media (max-width: 640px) {
  .factory-switch { width: 118px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .filter-bar { padding: .65rem; }
  .bill-meta { grid-template-columns: 1fr 1fr; }
  .bill-head { flex-direction: column; align-items: flex-start; }
  .inv-sheet { padding: 1rem .85rem; }
  .inv-grid { grid-template-columns: 1fr; }
  .pay-panel { grid-template-columns: 1fr; }
}

.pill {
  display: inline-flex; align-items: center; gap: .25rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  padding: .2rem .55rem; white-space: nowrap;
}
.pill-paid { background: #d1fae5; color: #047857; }
.pill-credit { background: #fef3c7; color: #b45309; }
.pill-partial { background: #dbeafe; color: #1d4ed8; }
.pill-pending { background: #f1f5f9; color: #64748b; }

.bill-list { display: flex; flex-direction: column; gap: .7rem; }
.bill-row {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1rem; box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.bill-row:hover { border-color: #99f6e4; }
.bill-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.bill-head h6 { margin: 0; font-weight: 800; font-size: .98rem; }
.bill-head .muted { color: var(--muted); font-size: .78rem; }
.bill-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem; margin-top: .7rem;
}
.bill-meta div { background: #f8fafc; border-radius: 10px; padding: .45rem .55rem; }
.bill-meta .lbl { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.bill-meta .val { font-weight: 800; color: var(--navy); font-size: .92rem; }
.bill-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.quote-box {
  background: #f0fdfa; border: 1px dashed #99f6e4; border-radius: 12px;
  padding: .75rem .85rem; font-size: .85rem;
}
.quote-box strong { color: var(--teal-dark); }
.pay-panel {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: .85rem;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem;
}
.inv-sheet {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 1.4rem 1.5rem; max-width: 820px; margin: 0 auto;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
}
.inv-brand { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--teal); padding-bottom: .85rem; }
.inv-brand h2 { margin: 0; font-weight: 800; color: var(--navy); }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; font-size: .9rem; }
.inv-totals { margin-left: auto; width: min(280px, 100%); }
.inv-totals .row { display: flex; justify-content: space-between; padding: .25rem 0; }
.inv-totals .grand { font-weight: 800; font-size: 1.1rem; border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .45rem; }
.trip-mode { display: flex; gap: .4rem; flex-wrap: wrap; }
.trip-mode button {
  border: 1px solid var(--line); background: #f8fafc; border-radius: 999px;
  font-size: .78rem; font-weight: 700; padding: .3rem .7rem;
}
.trip-mode button.on { background: #0d9488; color: #fff; border-color: #0d9488; }
.day-block {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: .75rem; overflow: hidden;
}
.day-block h6 {
  margin: 0; padding: .7rem 1rem; background: #f8fafc;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  font-size: .92rem;
}
.pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .5rem; max-height: 220px; overflow: auto; padding: .15rem;
}
.pick-item {
  display: flex; align-items: center; gap: .55rem; flex-wrap: nowrap;
  border: 1px solid var(--line); border-radius: 12px; padding: .55rem .65rem;
  background: #fff; font-size: .82rem; margin: 0; cursor: pointer;
}
.pick-item:has(input:checked) { border-color: #0d9488; background: #f0fdfa; box-shadow: inset 0 0 0 1px #99f6e4; }
.pick-item .cust-l { width: 92px; margin-left: auto; flex: 0 0 92px; }
.pick-item .pick-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.pick-item .pick-body strong { line-height: 1.2; }
.pick-item .pick-body small { color: var(--muted); line-height: 1.25; }
.pick-route { align-items: flex-start; }
.pick-route .route-pick { margin-top: .2rem; }
.stop-plan {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem;
}
.stop-plan ol { margin: .35rem 0 0; padding-left: 1.15rem; }
.stop-plan li { margin: .2rem 0; }
.trip-factory-note { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.form-err { display: none; }
.form-err.show { display: block; }
.load-quote {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.load-quote .q { background: #f8fafc; border-radius: 10px; padding: .55rem .65rem; }
.load-quote .q .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.load-quote .q .val { font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.filter-chip {
  border: 1px solid var(--line); background: #f8fafc; border-radius: 999px;
  font-size: .78rem; font-weight: 700; padding: .25rem .7rem;
}
.filter-chip.on { background: #0d9488; color: #fff; border-color: #0d9488; }
.ex-flow {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin: .25rem 0 1rem; font-size: .8rem;
}
.ex-flow a, .ex-flow span {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .28rem .7rem; color: var(--text); text-decoration: none;
}
.ex-flow a:hover { border-color: #99f6e4; background: #f0fdfa; }
.ex-flow .now { background: #ccfbf1; border-color: #99f6e4; font-weight: 700; }
.ex-period-row { cursor: pointer; }
.ex-period-row:hover { background: #f0fdfa; }
.text-navy { color: var(--navy, #0b1f3a); }
.card-soft { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; }
.desk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .85rem;
}
.desk-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr auto;
  gap: .45rem;
  align-items: center;
  padding: .4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.desk-row:last-child { border-bottom: 0; }
.desk-row a { font-weight: 700; color: var(--navy); text-decoration: none; }
.desk-row a:hover { color: #0d9488; }
.read-hint {
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  border-radius: 10px; padding: .65rem .8rem; font-size: .85rem;
}
.rep-period { color: var(--muted); font-size: .8rem; margin-bottom: .65rem; font-weight: 600; }
.rep-foot { background: #f0fdfa; font-weight: 800; }
.rep-foot td { border-top: 2px solid #99f6e4 !important; }
.out-toolbar {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .65rem;
  margin-bottom: .75rem;
}
.out-search { width: min(220px, 100%); }
.out-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}
.out-charts {
  display: grid;
  grid-template-columns: 1.35fr .75fr;
  gap: .85rem;
}
@media (max-width: 992px) {
  .out-charts { grid-template-columns: 1fr; }
  .out-search { width: 100%; }
}
@media (max-width: 640px) {
  .out-card-grid { grid-template-columns: 1fr; }
  .bill-meta { grid-template-columns: 1fr 1fr; }
  .out-toolbar { gap: .45rem; }
}
.desk-row span:last-child { font-weight: 700; text-align: right; }

@media (max-width: 640px) {
  .load-quote { grid-template-columns: 1fr; }
}

@media print {
  .app-sidebar, .app-top, .sidebar-backdrop, .no-print, .app-bottom, .fab-new, .page-search { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0 !important; }
  .inv-sheet { box-shadow: none; border: 0; max-width: none; }
  .pay-slip { page-break-after: always; break-after: page; }
  .pay-slip:last-of-type { page-break-after: auto; break-after: auto; }
  .mx-wrap { max-height: none !important; overflow: visible !important; border: 0; }
}

.mx-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mx-wrap table { margin: 0; }
.mx-wrap thead th { position: sticky; top: 0; background: #f8fafc; z-index: 2; white-space: nowrap; }
.mx-wrap th:first-child, .mx-wrap td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.mx-wrap thead th:first-child { z-index: 3; background: #f8fafc; }
.mx-period { vertical-align: top; white-space: nowrap; font-weight: 600; background: #f8fafc !important; }
.mx-cell, .mx-row, .mx-plant { cursor: pointer; }
.mx-cell:hover, .mx-row:hover { background: #f0fdfa; }
.mx-plant:hover { border-color: #0d9488; }
.mx-ops thead tr:first-child th { top: 0; }
.mx-ops thead tr:nth-child(2) th { top: 32px; z-index: 2; }
.mx-ops th.mx-g { text-align: center; background: #ecfeff; border-left: 2px solid #5eead4; font-weight: 800; }
.mx-ops th.mx-all { background: #0b1f3a; color: #fff; border-left: 2px solid #0d9488; }
.mx-ops td.fw-semibold { background: #f0fdfa; }

.rec-list { background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 12px; padding: .75rem 1rem; }
.rec-list div { font-size: .9rem; color: #0f766e; padding: .2rem 0; }
.ask-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.ask-hist { max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: .65rem; margin-bottom: .85rem; }
.ask-bubble { max-width: 92%; padding: .7rem .9rem; border-radius: 12px; font-size: .92rem; line-height: 1.45; }
.ask-bubble.me { align-self: flex-end; background: #0d9488; color: #fff; }
.ask-bubble.ai { align-self: flex-start; background: #f8fafc; border: 1px solid var(--line); }
.ask-row { display: flex; gap: .5rem; }
.ask-row input { flex: 1; }
.ask-rec { margin-top: .45rem; font-size: .85rem; color: #0f766e; }
.ask-src { font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; }

.office-toast {
  position: fixed; top: 72px; right: 16px; z-index: 90;
  min-width: 240px; max-width: min(360px, 92vw);
  background: #0b1f3a; color: #fff; padding: .85rem 1rem; border-radius: 12px;
  font-size: .9rem; cursor: pointer;
  transform: translateY(-120%); opacity: 0; transition: .25s ease;
}
.office-toast.show { transform: translateY(0); opacity: 1; }

.inbox-wrap { position: relative; }
.inbox-dot {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  border-radius: 999px; background: #ef4444; color: #fff;
  font-size: .62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .25rem;
}
.inbox-panel {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40;
  width: min(360px, 92vw); max-height: 70vh; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,.16); padding: .75rem .8rem;
}
.inbox-item {
  display: block; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line); padding: .55rem 0;
}
.inbox-item:last-child { border-bottom: 0; }
.inbox-item.unread { background: #f0fdfa; margin: 0 -.4rem; padding: .55rem .4rem; border-radius: 8px; }
.inbox-unread { border-color: #99f6e4 !important; }
.page-search { width: min(220px, 36vw); border-radius: 10px; }
.filter-dates { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.chip-scroll { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.app-bottom { display: none; }
.fab-new { }

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

@media (max-width: 992px) {
  :root { --header-h: 58px; --bottom-h: 64px; }
  body { padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
  body.sidebar-open { overflow: hidden; }
  .app-top {
    padding: .55rem .7rem;
    padding-top: max(.55rem, env(safe-area-inset-top));
    gap: .45rem;
    flex-wrap: wrap;
  }
  .top-right { width: 100%; justify-content: space-between; }
  .page-search { order: 5; width: 100%; flex: 1 0 100%; }
  .factory-switch { flex: 1; min-width: 0; width: auto; }
  .btn-logout span { display: none; }
  .btn-logout { min-width: 40px; padding: .35rem .55rem; }
  .app-content {
    padding: .75rem .7rem calc(var(--bottom-h) + 1.2rem + env(safe-area-inset-bottom));
  }
  .app-bottom {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 25;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
    justify-content: space-around;
    box-shadow: 0 -8px 24px rgba(15,23,42,.06);
  }
  .app-bottom a, .app-bottom .more-nav {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    border: 0; background: none; color: #64748b; text-decoration: none;
    font-size: .62rem; font-weight: 700; padding: .25rem .15rem;
    min-height: 48px; justify-content: center;
  }
  .app-bottom a i, .app-bottom .more-nav i { font-size: 1.15rem; }
  .app-bottom a.active { color: #0d9488; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .plant-card-grid { grid-template-columns: 1fr; }
  .kpi { padding: .75rem .7rem; border-radius: 12px; }
  .kpi .val { font-size: 1.1rem; }
  .filter-bar { flex-direction: column; align-items: stretch; padding: .65rem; gap: .55rem; }
  .filter-dates { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .chip-scroll, .out-toolbar, #repTabs, #outViews {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: .4rem; width: 100%; padding-bottom: .15rem;
  }
  .filter-chip, .chip-scroll .btn { flex: 0 0 auto; }
  .desk-grid { grid-template-columns: 1fr; }
  .desk-row { grid-template-columns: 1fr auto; }
  .load-quote { grid-template-columns: 1fr; }
  .pick-grid { grid-template-columns: 1fr; max-height: 240px; }
  #liveMap, #tripMap { height: 58vh; min-height: 280px; }
  .modal-fullscreen-sm-down .modal-body { padding-bottom: 1.2rem; }
  .sticky-footer { position: sticky; bottom: 0; background: #fff; }
  #btnNew.fab-new, .fab-new {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--bottom-h) + .85rem + env(safe-area-inset-bottom));
    z-index: 22;
    width: 56px; height: 56px; border-radius: 50%;
    padding: 0; font-size: 0; line-height: 0;
    box-shadow: 0 12px 28px rgba(13,148,136,.35);
  }
  #btnNew.fab-new::before, .fab-new::before {
    content: "+";
    font-size: 1.85rem; line-height: 56px; font-weight: 700; color: #fff;
  }
  table.table-cards thead { display: none; }
  table.table-cards, table.table-cards tbody { display: block; width: 100%; }
  table.table-cards tr {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .7rem .85rem;
    margin-bottom: .65rem;
    box-shadow: 0 8px 20px rgba(15,23,42,.04);
  }
  table.table-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .3rem 0;
    border: 0;
    text-align: right;
  }
  table.table-cards td::before {
    content: attr(data-label);
    font-size: .68rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .03em;
    text-align: left; flex: 0 0 42%;
  }
  table.table-cards td.is-actions,
  table.table-cards td:last-child:has(.btn) {
    display: flex; justify-content: flex-end; gap: .4rem;
    padding-top: .55rem; margin-top: .35rem;
    border-top: 1px solid var(--line);
  }
  table.table-cards td.is-actions::before,
  table.table-cards td:last-child:has(.btn)::before { display: none; }
  .card-soft.table-responsive { padding: .15rem 0; border: 0; box-shadow: none; background: transparent; }
  .card-soft.table-responsive .table { margin: 0; }
}

.veh-day-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: .75rem; }
.out-drill { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .75rem .85rem; }
.out-day-block { margin-top: .65rem; }
.out-day-block:first-of-type { margin-top: .45rem; }

.cash-sheet .form-control, .cash-sheet .form-select { min-height: 44px; }
.retail-sale-grid .form-control { min-height: 44px; }
.badge.text-bg-teal { background: #0d9488; color: #fff; }

.login-roles {
  display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap;
  margin: .75rem 0 0;
}
.login-roles button {
  background: rgba(255,255,255,.12); color: #99f6e4; border: 1px solid transparent;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; cursor: pointer;
  text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px;
}
.login-roles button.on, .login-roles button:hover {
  background: #14b8a6; color: #042f2e; border-color: #5eead4;
}
.login-card .hint-outlet {
  background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px;
  padding: .7rem .85rem; font-size: .82rem; color: #115e59; margin: .85rem 0 1rem;
}
.login-card .hint-outlet strong { display: block; margin-bottom: .35rem; color: #0f766e; }
.login-tips { margin: .15rem 0 0; padding-left: 1.1rem; }
.who-trail { font-size: .8rem; line-height: 1.3; min-width: 8.5rem; }
.who-trail .small { color: #64748b; }
.contact-ic { display: inline-flex; gap: .2rem; vertical-align: middle; }
.contact-ic .btn { padding: .1rem .35rem; }
.ie-net.pos { color: #0d9488; }
.ie-net.neg { color: #b45309; }
.remark-line {
  margin-top: .35rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 8px;
  padding: .32rem .5rem;
  font-size: .78rem;
  line-height: 1.35;
  word-break: break-word;
}
.desk-row-note { align-items: start; }
.desk-row-note .remark-line { margin-top: .2rem; }
.plant-card .remark-line { margin-top: .55rem; }
.plant-card .who-trail { margin-top: .35rem; }
#ieTabs .filter-chip, #dashKind .filter-chip { min-width: 5.5rem; text-align: center; }

body.outlet-app .app-sidebar {
  background: linear-gradient(180deg, #062624 0%, #0b3d38 55%, #0f766e 160%);
}
body.outlet-app .brand-mark { background: #14b8a6; }
body.outlet-app .outlet-lead {
  font-size: .95rem; color: #0f766e; font-weight: 600;
}
body.outlet-app .app-top { border-bottom: 2px solid #99f6e4; }
body.outlet-app .btn-water { box-shadow: 0 8px 18px rgba(13,148,136,.22); }
body.outlet-app .kpi .lbl { letter-spacing: .04em; }

.chip-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  align-self: center; padding: 0 .35rem;
}
.ceo-lead { font-weight: 600; color: #0f766e; font-size: .95rem; }
.ceo-hero {
  background: linear-gradient(135deg, #0b1f3a 0%, #115e59 70%, #0d9488 140%);
  color: #fff; border-radius: 16px; padding: 1.05rem 1.15rem; margin-bottom: .85rem;
}
.ceo-hero-kicker { font-size: .82rem; font-weight: 700; letter-spacing: .04em; opacity: .85; margin-bottom: .85rem; }
.ceo-hero .kpi, .ceo-hero a.kpi-link {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff;
  box-shadow: none;
}
.ceo-hero .kpi .lbl { color: rgba(255,255,255,.72); }
.ceo-hero .kpi .val { color: #fff; }
.ceo-hero a.kpi-link:hover { border-color: #99f6e4; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.dash-ask { margin-top: .85rem; }
.dash-ask .ask-hist { max-height: 180px; }
body.ceo-app .app-top { border-bottom: 2px solid #0d9488; }
body.ceo-app .brand-mark { background: #0d9488; }
.ceo-report .filter-chip.on { background: #0b1f3a; border-color: #0b1f3a; }
.ceo-report.is-ceo .ceo-hero { box-shadow: 0 14px 32px rgba(11,31,58,.22); }

@media (min-width: 993px) {
  .app-bottom { display: none !important; }
}

@media (max-width: 992px) {
  .cash-sheet .card-soft { border-radius: 16px; }
  .form-control, .form-select, .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .modal-content { border-radius: 16px 16px 0 0; }
  .table-cards tbody tr { border-radius: 12px; }
}

@media (max-width: 640px) {
  .login-shell { padding: 1rem; align-items: flex-start; padding-top: 8vh; }
  .login-card { padding: 1.2rem 1rem; }
  .kpi-grid { gap: .45rem; }
  .top-sub { display: none; }
}