/* DealerOS — design system */
:root {
  --navy: #1e1b4b;
  --navy-2: #312e81;
  --indigo: #4f46e5;
  --indigo-light: #6366f1;
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --green: #16a34a;
  --emerald: #059669;
  --amber: #d97706;
  --red: #dc2626;
  --green-bg: #dcfce7;
  --amber-bg: #fef3c7;
  --red-bg: #fee2e2;
  --indigo-bg: #e0e7ff;
  --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 30px rgba(30,27,75,.18);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* Header */
header.appbar {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  position: sticky; top: 0; z-index: 10;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-light));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; color: #fff;
  box-shadow: 0 4px 10px rgba(79,70,229,.4);
}
.brand h1 { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p { font-size: 11px; margin: 0; color: #c7d2fe; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .icon-btn { background: rgba(255,255,255,.12); border: none; color: #e0e7ff; }

/* Views */
main { padding: 16px 14px 8px; max-width: 640px; margin: 0 auto; }
.view { display: none; animation: fade .18s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} }

.view-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.view-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.view-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }

/* Controls */
.control {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 11px; box-shadow: var(--shadow); flex: 0 0 auto;
}
.control label { font-size: 12px; font-weight: 600; color: var(--muted); }
input[type="date"], input[type="month"] {
  border: none; background: transparent; font-size: 14px; font-weight: 600;
  color: var(--text); font-family: inherit; outline: none; max-width: 150px;
}

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.card.tappable { cursor: pointer; transition: transform .1s ease; }
.card.tappable:active { transform: scale(.985); }
.card h3.section { margin: 0 0 10px; font-size: 15px; font-weight: 800; }

/* Rows */
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-left { display: flex; align-items: center; min-width: 0; gap: 12px; }
.row-meta { min-width: 0; }
.row-title { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-amt { text-align: right; flex: 0 0 auto; }
.row-amt .amt { font-weight: 800; font-size: 15.5px; }
.row-amt .lbl { font-size: 11px; color: var(--muted); font-weight: 600; }
.amt.pos { color: var(--emerald); }
.amt.neg { color: var(--red); }

.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--navy-2), var(--indigo));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.avatar.sq { border-radius: 12px; }
.avatar.green { background: linear-gradient(135deg, #047857, #10b981); }
.avatar.amber { background: linear-gradient(135deg, #b45309, #f59e0b); }
.avatar.red { background: linear-gradient(135deg, #b91c1c, #ef4444); }

/* Badges & chips */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--indigo-bg); color: var(--indigo);
}
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.gray { background: #f1f5f9; color: var(--muted); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  transition: all .15s ease;
}
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Buttons */
.btn {
  border: none; border-radius: 12px; padding: 13px 18px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all .15s ease; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--indigo); color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.btn-primary:active { background: var(--navy-2); }
.btn-green { background: var(--emerald); color: #fff; box-shadow: 0 4px 12px rgba(5,150,105,.3); }
.btn-red { background: var(--red); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 13px; font-size: 13.5px; border-radius: 10px; }
.btn-ghost { background: transparent; color: var(--indigo); padding: 8px 10px; font-size: 14px; }
.btn-cancel { background: var(--bg); color: var(--text); }
.btn-outline { background: #fff; border: 1.5px solid var(--line); color: var(--text); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); flex: 0 0 auto;
}
.icon-btn:active { background: var(--bg); }
.icon-btn.wa { color: #16a34a; }
.icon-btn.call { color: var(--indigo); }

/* Search */
.search {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px;
}
.search input { border: none; outline: none; flex: 1; font-size: 15px; font-family: inherit; background: transparent; }
.search svg { color: var(--muted); flex: 0 0 auto; }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  box-shadow: var(--shadow); cursor: pointer;
}
.tile .t-num { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.tile .t-lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.tile .t-ico {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 10px;
}
.t-ico.indigo { background: var(--indigo-bg); color: var(--indigo); }
.t-ico.green { background: var(--green-bg); color: var(--green); }
.t-ico.amber { background: var(--amber-bg); color: var(--amber); }
.t-ico.red { background: var(--red-bg); color: var(--red); }

/* Hero card */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, #3730a3 100%);
  color: #fff; border: none; border-radius: 20px; padding: 18px; margin-bottom: 14px;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  border-radius: 50%; background: rgba(99,102,241,.25);
}
.hero .h-date { font-size: 12px; color: #a5b4fc; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.hero .h-biz { font-size: 20px; font-weight: 800; margin: 2px 0 12px; }
.hero .h-row { display: flex; gap: 10px; position: relative; z-index: 1; }
.hero .h-stat { flex: 1; background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; }
.hero .h-stat .n { font-size: 17px; font-weight: 800; }
.hero .h-stat .l { font-size: 10.5px; color: #c7d2fe; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* Quick actions grid */
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.qa {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 4px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .1s ease; text-align: center;
}
.qa:active { transform: scale(.95); }
.qa .qa-ico {
  width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.qa span { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.2; }

/* More menu grid */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.menu-item {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 8px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .1s ease; text-align: center;
}
.menu-item:active { transform: scale(.95); }
.menu-item .qa-ico { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.menu-item span { font-size: 12.5px; font-weight: 700; }

/* Segmented buttons (attendance) */
.seg { display: flex; gap: 8px; margin-top: 12px; }
.seg button {
  flex: 1; border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  padding: 10px 6px; border-radius: 10px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all .15s ease;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.seg button:active { transform: scale(.97); }
.seg button.on.present { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.seg button.on.half    { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.seg button.on.absent  { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.present { background: var(--green);} .dot.half{ background: var(--amber);} .dot.absent{ background: var(--red);}

/* Tabs (in-view) */
.tabs { display: flex; background: #e2e8f0; border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.tabs button {
  flex: 1; border: none; background: transparent; padding: 8px 6px; border-radius: 9px;
  font-size: 13.5px; font-weight: 700; font-family: inherit; color: var(--muted); cursor: pointer;
}
.tabs button.on { background: #fff; color: var(--text); box-shadow: var(--shadow); }

/* Empty state */
.empty { text-align: center; padding: 44px 24px; color: var(--muted); }
.empty-icon {
  width: 76px; height: 76px; border-radius: 20px; margin: 0 auto 16px;
  background: var(--indigo-bg); color: var(--indigo);
  display: flex; align-items: center; justify-content: center;
}
.empty h3 { color: var(--text); font-size: 17px; margin: 0 0 6px; }
.empty p { font-size: 14px; margin: 0 0 20px; }

/* Stats strip */
.stats { display: flex; gap: 8px; }
.stat { flex: 1; text-align: center; background: var(--bg); border-radius: 10px; padding: 8px 4px; }
.stat .n { font-weight: 800; font-size: 17px; }
.stat .l { font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat.p .n { color: var(--green);} .stat.h .n { color: var(--amber);} .stat.a .n { color: var(--red);}

.total-card { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; border: none; }
.total-card .tc-row { display: flex; align-items: center; justify-content: space-between; }
.total-card .tc-label { font-size: 14px; color: #c7d2fe; font-weight: 600; }
.total-card .tc-amt { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.total-card .tc-sub { font-size: 12px; color: #a5b4fc; margin-top: 3px; }

/* Bottom nav */
nav.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: #fff; border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(15,23,42,.06);
}
nav.bottomnav button {
  flex: 1; border: none; background: none; padding: 9px 2px 7px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--muted); font-family: inherit; font-size: 10.5px; font-weight: 600;
  transition: color .15s ease;
}
nav.bottomnav button.active { color: var(--indigo); }
nav.bottomnav button svg { width: 23px; height: 23px; }

/* Modal / bottom sheet */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 30;
  display: none; align-items: flex-end; justify-content: center;
}
.modal-backdrop.open { display: flex; animation: fade .15s ease; }
.modal {
  background: #fff; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  animation: slideUp .25s cubic-bezier(.16,1,.3,1);
}
@keyframes slideUp { from { transform: translateY(100%);} to { transform: none;} }
.modal h2 { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px;
  font-size: 16px; font-family: inherit; outline: none; transition: border-color .15s ease;
  background: #fff; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--indigo); }
.field textarea { resize: vertical; min-height: 64px; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.modal-actions { display: flex; gap: 10px; margin-top: 8px; }
.modal-actions .btn { flex: 1; }

/* Toggle pills (Got / Gave) */
.pills { display: flex; gap: 8px; margin-bottom: 13px; }
.pill {
  flex: 1; border: 1.5px solid var(--line); background: #fff; padding: 11px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; font-family: inherit; color: var(--muted); cursor: pointer;
}
.pill.on.got { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.pill.on.gave { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.pill.on.generic { background: var(--indigo-bg); border-color: var(--indigo); color: var(--indigo); }

/* Checklist */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 9px 11px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: #fff;
}
.check-item.on { border-color: var(--green); background: var(--green-bg); color: var(--green); }

/* Toast */
#toast {
  position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 600;
  padding: 11px 20px; border-radius: 12px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 60; max-width: 88vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* First-run onboarding */
#onboard, #authScreen {
  position: fixed; inset: 0; z-index: 110; display: none;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
#onboard.show, #authScreen.show { display: flex; }
.ob-card {
  background: #fff; color: var(--text); border-radius: 22px; width: 100%; max-width: 420px;
  padding: 28px 22px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
  margin: auto;
}
.ob-card .lock-logo { margin: 0 auto 14px; }
.ob-card h2 { text-align: center; font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.ob-sub { text-align: center; font-size: 13.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.ob-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 14px 0 0; line-height: 1.5; }
.ob-card .btn-block { margin-top: 6px; }
.ob-card .btn-ghost { margin-top: 10px; }

/* inline text links on auth screens */
.a-link { color: var(--indigo, #4F46E5); font-weight: 600; cursor: pointer; text-decoration: none; }
.a-link:hover { text-decoration: underline; }

/* Settings list */
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 2px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.set-row:last-child { border-bottom: none; }
.set-row .s-title { font-size: 15px; font-weight: 700; }
.set-row .s-sub { font-size: 12.5px; color: var(--muted); }

/* Misc */
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.section-label {
  font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin: 18px 2px 8px;
}
footer.appfoot { text-align: center; font-size: 12px; color: var(--muted); padding: 18px 0 8px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.fab {
  position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 15;
  width: 56px; height: 56px; border-radius: 18px; border: none; cursor: pointer;
  background: var(--indigo); color: #fff; box-shadow: 0 8px 20px rgba(79,70,229,.45);
  display: flex; align-items: center; justify-content: center;
}
.fab:active { transform: scale(.95); }

@media print {
  header.appbar, nav.bottomnav, .fab, .no-print { display: none !important; }
  body { background: #fff; padding: 0; }
  .card { box-shadow: none; }
}

/* ---------- Desktop layout (PC) ---------- */
#sidebar{display:none}
@media(min-width:1024px){
  nav.bottomnav{display:none}
  body{padding-bottom:32px}
  #sidebar{
    display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:248px;z-index:40;
    background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:22px 14px 16px;
  }
  #sidebar .sb-brand{display:flex;align-items:center;gap:11px;padding:0 10px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px}
  #sidebar .sb-brand img{width:40px;height:40px;border-radius:11px}
  #sidebar .sb-brand .sb-name{font-weight:800;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  #sidebar .sb-brand .sb-sub{font-size:11px;color:#a5b4fc}
  #sidebar .sb-scroll{overflow-y:auto;flex:1;scrollbar-width:thin}
  #sidebar a{
    display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;text-decoration:none;
    color:#c7d2fe;font-size:14px;font-weight:600;margin-bottom:2px;cursor:pointer;transition:background .12s;
  }
  #sidebar a:hover{background:rgba(255,255,255,.08);color:#fff}
  #sidebar a.active{background:var(--indigo);color:#fff;box-shadow:0 6px 14px -6px rgba(79,70,229,.6)}
  #sidebar .sb-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#818cf8;padding:14px 12px 6px}
  #sidebar .sb-user{border-top:1px solid rgba(255,255,255,.12);padding:12px 10px 0;display:flex;gap:10px;align-items:center}
  #sidebar .sb-user .avatar{width:36px;height:36px;font-size:13px;flex:0 0 auto}
  #sidebar .sb-user .u-name{font-size:13px;font-weight:700;line-height:1.2}
  #sidebar .sb-user .u-role{font-size:11px;color:#a5b4fc}
  header.appbar,main{margin-left:248px}
  header.appbar{padding-left:30px;padding-right:30px}
  main{max-width:none;padding:26px 36px 20px}
  .view{max-width:1080px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .qa-grid{grid-template-columns:repeat(8,1fr)}
  .menu-grid{grid-template-columns:repeat(4,1fr)}
  .checklist{grid-template-columns:repeat(3,1fr)}
  .modal-backdrop{align-items:center;padding:24px}
  .modal{border-radius:22px;max-width:560px}
  footer.appfoot{margin-left:0}
  /* slim light top bar — brand lives in the sidebar on PC */
  header.appbar{background:#fff;color:var(--navy);padding-top:11px;padding-bottom:11px;border-bottom:1px solid var(--line)}
  header.appbar .brand{display:none}
  header.appbar>div:last-child{margin-left:auto}
  .appbar .icon-btn{background:#fff;border:1px solid var(--line);color:var(--muted)}
  .appbar .icon-btn:hover{background:var(--bg);color:var(--navy)}
}

/* ---------- bar charts (reports) ---------- */
.chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding:8px 2px 0}
.chart .cbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.chart .cbar .bwrap{display:flex;align-items:flex-end;gap:3px;height:110px;width:100%;justify-content:center}
.chart .cbar .b{width:34%;max-width:26px;border-radius:6px 6px 2px 2px;min-height:2px}
.chart .cbar .b.sales{background:linear-gradient(180deg,var(--indigo),#7c3aed)}
.chart .cbar .b.recv{background:linear-gradient(180deg,#10b981,#059669)}
.chart .cbar .cl{font-size:10.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);font-weight:600;margin-top:4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.hbar-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.hbar-row .hl{width:92px;font-size:12.5px;font-weight:600;color:var(--muted);flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-row .htrack{flex:1;height:12px;border-radius:99px;background:var(--bg);overflow:hidden}
.hbar-row .hfill{height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#ef4444)}
.hbar-row .hv{width:76px;text-align:right;font-size:12.5px;font-weight:700;flex:0 0 auto}

/* ---------- v2.5 premium polish ---------- */
/* auth screen ambiance */
#authScreen{background:radial-gradient(900px 500px at 80% -10%,rgba(124,58,237,.45),transparent 60%),radial-gradient(700px 500px at -10% 100%,rgba(79,70,229,.5),transparent 55%),linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);}
#authScreen::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);background-size:24px 24px;pointer-events:none}
#authScreen .ob-card{position:relative;border-radius:24px;animation:cardIn .55s cubic-bezier(.16,1,.3,1) both;overflow:hidden}
#authScreen .ob-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--indigo),#7c3aed 55%,#f59e0b)}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
#authScreen .lock-logo{animation:logoPop .6s .1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes logoPop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}

/* inputs: focus ring */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.field input,.field select,.field textarea{transition:border-color .15s ease,box-shadow .15s ease}

/* password eye */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:none;background:transparent;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.pw-eye:active{background:var(--bg)}

/* button loading spinner */
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* view content stagger */
@keyframes vitem{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.view.active>*{animation:vitem .38s cubic-bezier(.16,1,.3,1) both}
.view.active>*:nth-child(1){animation-delay:.02s}
.view.active>*:nth-child(2){animation-delay:.06s}
.view.active>*:nth-child(3){animation-delay:.1s}
.view.active>*:nth-child(4){animation-delay:.14s}
.view.active>*:nth-child(5){animation-delay:.18s}
.view.active>*:nth-child(6){animation-delay:.22s}

/* hero card sheen + press feedback */
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);background-size:20px 20px}
.hero .h-stat{transition:background .15s ease,transform .12s ease}
.hero .h-stat:active{background:rgba(255,255,255,.16);transform:scale(.97)}

/* quick actions + menu: springier touch */
.qa,.menu-item{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
.qa:active,.menu-item:active{transform:scale(.93)}
@media(hover:hover){
  .qa:hover,.menu-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px -10px rgba(30,27,75,.25)}
  .card.tappable:hover{box-shadow:0 10px 24px -12px rgba(30,27,75,.22)}
  .tile:hover{box-shadow:0 10px 24px -12px rgba(30,27,75,.22)}
}
.qa .qa-ico,.menu-item .qa-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.qa:active .qa-ico,.menu-item:active .qa-ico{transform:rotate(-8deg) scale(1.12)}

/* bottom nav active indicator */
nav.bottomnav button{position:relative}
nav.bottomnav button::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--indigo);transition:transform .25s cubic-bezier(.16,1,.3,1)}
nav.bottomnav button.active::after{transform:translateX(-50%) scaleX(1)}
nav.bottomnav button svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
nav.bottomnav button.active svg{transform:translateY(-1px) scale(1.08)}

/* modal: handle + blurred backdrop */
.modal-backdrop{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal::before{content:"";display:block;width:42px;height:4px;border-radius:99px;background:var(--line);margin:-6px auto 12px}
@media(min-width:1024px){.modal::before{display:none}}

/* toast: springier */
#toast{transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}

/* fab breathing shadow */
.fab{transition:transform .15s ease;animation:fabGlow 3.2s ease-in-out infinite}
@keyframes fabGlow{0%,100%{box-shadow:0 8px 20px rgba(79,70,229,.45)}50%{box-shadow:0 10px 28px rgba(79,70,229,.7)}}

/* ---------- v2.6 deep polish ---------- */
:root{--bg:#F2F4FA;--line:#E6EAF3;--shadow:0 1px 2px rgba(15,23,42,.04),0 5px 16px -8px rgba(30,27,75,.1)}
.card{border-radius:18px}
.tile{border-radius:18px}
.tile .t-num{font-variant-numeric:tabular-nums}
.section-label{display:flex;align-items:center;gap:7px}
.section-label::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--amber);flex:0 0 auto}
.section-label.sl-row{justify-content:space-between}
.section-label.sl-row::before{display:none}
.section-label.sl-row span{display:flex;align-items:center;gap:7px}
.section-label.sl-row span::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--amber)}
.section-label.sl-row .btn{text-transform:none;letter-spacing:0}

/* ---------- v2.5 home dashboard redesign ---------- */
.hero2{background:linear-gradient(140deg,#1e1b4b 0%,#312e81 40%,#4c1d95 78%,#6d28d9 100%);background-size:170% 170%;animation:heroPan 12s ease-in-out infinite;padding:20px 18px 18px}
@keyframes heroPan{0%,100%{background-position:0% 0%}50%{background-position:90% 100%}}
.hero2::after{width:230px;height:230px;right:-60px;top:-70px;background:radial-gradient(circle,rgba(129,140,248,.4),rgba(129,140,248,0) 65%);animation:heroFloat 7s ease-in-out infinite}
@keyframes heroFloat{50%{transform:translate(-14px,12px) scale(1.1)}}
.hero2 .h-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:relative;z-index:1}
.h-greet{font-size:13px;color:#c7d2fe;font-weight:600}
.hero2 .h-biz{font-size:22px;margin:2px 0 2px}
.hero2 .h-date{text-transform:none;letter-spacing:0;font-size:12px}
.h-ava{width:46px;height:46px;border-radius:14px;flex:0 0 auto;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#e0e7ff}
.h-main{margin:14px 0;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.h-main .lbl{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#a5b4fc;font-weight:700}
.h-main .big{font-size:34px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15;color:#fff}
.h-spark{display:flex;align-items:flex-end;gap:5px;height:40px;flex:0 0 auto;padding-bottom:3px}
.h-spark span{width:9px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#818cf8,#4f46e5);opacity:.85}
.h-spark span.td{background:linear-gradient(180deg,#fbbf24,#f59e0b);opacity:1}
.hero2 .h-stat{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.09);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:14px}

/* quick actions: gradient icon chips */
.qa{border-radius:16px;padding:13px 4px 11px}
.qa .t-ico{width:44px;height:44px;border-radius:14px;color:#fff}
.qa .t-ico.indigo{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 5px 12px -4px rgba(79,70,229,.5)}
.qa .t-ico.green{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 5px 12px -4px rgba(5,150,105,.5)}
.qa .t-ico.amber{background:linear-gradient(135deg,#d97706,#f59e0b);box-shadow:0 5px 12px -4px rgba(217,119,6,.5)}
.qa .t-ico.red{background:linear-gradient(135deg,#dc2626,#f43f5e);box-shadow:0 5px 12px -4px rgba(220,38,38,.5)}

/* team & staff logins card */
.team-cta{background:linear-gradient(135deg,#eef0fe,#f5effe);border:1px solid #d9dcfb;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.team-cta:active{transform:scale(.985)}
.t-avastack{display:flex;align-items:center;flex:0 0 auto}
.t-avastack .ta{width:36px;height:36px;border-radius:50%;border:2px solid #fff;background:linear-gradient(135deg,#312e81,#6d28d9);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:-9px}
.t-avastack .ta:first-child{margin-left:0}
.t-avastack .ta.more{background:#e0e7ff;color:var(--navy-2)}

/* todo cards: colour accent */
.card.todo{border-left:4px solid var(--line);padding-left:13px}
.card.todo-amber{border-left-color:var(--amber)}
.card.todo-red{border-left-color:var(--red)}
.card.todo-green{border-left-color:var(--green)}
.card.todo-indigo{border-left-color:var(--indigo)}

@media(prefers-reduced-motion:reduce){
  .view.active>*,#authScreen .ob-card,#authScreen .lock-logo{animation:none}
  .fab,.hero2,.hero2::after{animation:none}
}

/* ---------- v2.6.1 PC polish (must stay at end — overrides later base rules) ---------- */
@media(min-width:1024px){
  .h-main .big{font-size:42px}
  .h-main{align-items:flex-end}
  .hero .h-spark{flex:1 1 auto;max-width:440px;height:64px;gap:8px;justify-content:flex-end}
  .hero .h-spark span{width:24px;border-radius:6px 6px 2px 2px}
  .chart{height:200px}
  .chart .cbar .bwrap{height:158px}
  .chart .cbar .b{max-width:36px}
}

/* ===== v3.0 motion polish (keep at end of file — overrides) ===== */
.card{transition:transform .16s ease, box-shadow .22s ease}
.card:active{transform:scale(.988)}
.btn{transition:transform .12s ease, filter .15s ease, box-shadow .2s ease, background .2s ease}
.btn:active{transform:scale(.96)}
.icon-btn{transition:transform .12s ease, background .15s ease, color .15s ease}
.icon-btn:active{transform:scale(.88)}
.tabs button{transition:color .18s ease, background .18s ease, box-shadow .18s ease}
.chip{transition:background .15s ease, color .15s ease, transform .12s ease}
.chip:active{transform:scale(.94)}
.pill{transition:background .16s ease, color .16s ease, transform .12s ease}
.pill:active{transform:scale(.95)}
#modalHost .modal{animation:v3mIn .34s cubic-bezier(.22,1.18,.36,1)}
@keyframes v3mIn{from{transform:translateY(26px) scale(.965);opacity:0}to{transform:none;opacity:1}}
.seg button{transition:background .16s ease, color .16s ease}
nav.bottomnav button{transition:color .18s ease, transform .14s ease}
nav.bottomnav button:active{transform:translateY(1px) scale(.94)}
.set-row{transition:background .14s ease}
.set-row:active{background:var(--bg)}
.avatar{transition:transform .16s ease}
.row-left:active .avatar{transform:scale(.94)}
.badge.green,.badge.red,.badge.amber{animation:v3badge .3s ease}
@keyframes v3badge{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){#modalHost .modal,.badge.green,.badge.red,.badge.amber{animation:none}}
/* ===== v3.1 premium pass — professional, quiet, consistent (keep at END) ===== */
/* hero: still and deep, no animated gradient — premium = restraint */
.hero2{background:#181647;background-image:radial-gradient(120% 90% at 85% -10%,rgba(99,102,241,.35),rgba(99,102,241,0) 60%),radial-gradient(90% 70% at -10% 110%,rgba(109,40,217,.28),rgba(109,40,217,0) 55%);animation:none;background-size:auto;border-radius:20px;padding:22px 20px 20px;box-shadow:0 18px 40px -22px rgba(24,22,71,.55)}
.hero2::after{animation:none;opacity:.5}
.h-greet{font-size:12px;color:#a5b4fc;font-weight:600;letter-spacing:.02em}
.hero2 .h-biz{font-size:21px;font-weight:750;letter-spacing:-.02em;margin:3px 0 2px}
.hero2 .h-date{font-size:11.5px;color:#818cf8}
.hero2 .big{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hero2 .h-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:12px}
.hero2 .h-stat .n{font-variant-numeric:tabular-nums}
.h-ava{border:1px solid rgba(255,255,255,.16)}
.h-spark .td{background:#c7b45e}
/* quick actions: one accent family, tinted — not a rainbow */
.qa{border-radius:14px;padding:13px 4px 11px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.qa .t-ico,.qa .t-ico.indigo,.qa .t-ico.green,.qa .t-ico.amber,.qa .t-ico.red{width:42px;height:42px;border-radius:12px;background:#EEF2FF;color:#4338CA;box-shadow:none}
.qa .t-ico.green{background:#ECFDF5;color:#047857}
.qa .t-ico.amber{background:#FFFBEB;color:#B45309}
.qa .t-ico.red{background:#FEF2F2;color:#B91C1C}
.qa span{font-size:11.5px;font-weight:600;color:#334155}
/* section labels: quiet editorial, no amber tick */
.section-label{font-size:11px;letter-spacing:.09em;color:#64748B}
.section-label::before{content:none}
.section-label.sl-row span::before{content:none}
/* cards: one consistent surface */
.card{border-radius:16px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 28px -24px rgba(15,23,42,.18)}
.card.todo{border-left-width:3px;padding-left:14px}
.tile{border-radius:16px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04)}
/* primary button: solid, confident, no gradient */
.btn-primary{background:#4F46E5;box-shadow:0 8px 18px -10px rgba(79,70,229,.55)}
.btn-primary:hover{background:#4338CA}
.btn-green{background:#059669}
/* numbers everywhere read like a ledger */
.row-amt .amt,.t-num,.stat .n{font-variant-numeric:tabular-nums}
/* team card on home: match the quiet system */
.team-cta{border:1px solid var(--line)}
/* v3.1 premium: quieter chrome */
header#appbar,header.appbar,body>header{background:#181647}
#hdrSub{display:none}
#hdrBiz{font-size:17px}
.card[style*="--green-bg"]{}
/* v3.1: desktop keeps its slim white appbar (mobile header is deep navy) */
@media (min-width:1024px){
  header.appbar{background:#fff}
}

/* ================= v3.2 feature pack ================= */
/* vehicle photo grid */
.vph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.vph{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--bg);cursor:pointer;border:1px solid var(--line)}
.vph img{width:100%;height:100%;object-fit:cover;display:block}
.vph-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--indigo);font-size:12px;font-weight:700;border:1.5px dashed #c7d2fe;background:var(--indigo-bg)}
.vph-add:active{transform:scale(.97)}
/* language pills sit tight inside a settings row */
.set-row .pills{gap:6px}
.set-row .pills .pill{padding:7px 14px}
/* ================= v3.3 pull-to-refresh ================= */
#ptr{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;z-index:900;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(15,23,42,.16);display:flex;align-items:center;justify-content:center;color:var(--indigo);opacity:0;margin-top:-54px;transform:translateX(-50%) translateY(0);pointer-events:none;transition:transform .22s ease,opacity .22s ease}
#ptr.ready{background:var(--indigo);color:#fff}
#ptr.spin svg{animation:ptrSpin .8s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* v3.3 skeleton loading */
.skel{height:86px;border-radius:16px;border:1px solid var(--line);margin-bottom:12px;background:linear-gradient(90deg,#EEF0F6 25%,#F7F8FB 50%,#EEF0F6 75%);background-size:200% 100%;animation:skelShimmer 1.15s linear infinite}
@keyframes skelShimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}