/* ===== Inter — bundled with the app (no Google request, works offline). SIL Open Font License: assets/fonts/Inter-LICENSE.txt ===== */
@font-face {
  font-family: 'Inter'; font-style: normal; font-display: swap;
  font-weight: 100 900;
  src: url('fonts/Inter.woff2') format('woff2');
}
/* MerchTrack UI — mobile-first field app
   Palette: ink #16243B · blue #1A5FD6 · green #2EA14B · paper #F2F6FA */
:root {
  --ink: #16243B;
  --ink-soft: #51607A;
  --blue: #1A5FD6;
  --blue-deep: #14264A;
  --green: #2EA14B;
  --green-soft: #E3F4E8;
  --blue-soft: #E7EEFC;
  --amber: #C97E08;
  --amber-soft: #FBF0DC;
  --red: #C94444;
  --red-soft: #FBE7E7;
  --paper: #F2F6FA;
  --card: #FFFFFF;
  --line: #DEE6F0;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(22, 36, 59, .06), 0 4px 14px rgba(22, 36, 59, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss03';   /* Inter: single-storey a, rounder quotes & commas — friendlier on small screens */
  font-optical-sizing: auto;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}
/* ---- PWA lock: no pinch/double-tap zoom, no iOS text inflation, no rubber-band ---- */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
.btn, .tab, .appbar, .tabbar, .onum, .chip2, .h-btn, .hbtn, .mt-add, .mnav, .mapchip, .mapseg button, label.f, h1, h2, h3 { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }
/* photos in the lightbox may still be pinch-zoomed */
#mt-lightbox, #mt-lightbox img { touch-action: pinch-zoom; }

body.has-tabbar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

a { color: var(--blue); text-decoration: none; }
.ic { vertical-align: -4px; }

/* ---------- App bar ---------- */
.appbar {
  background: var(--blue-deep);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
}
.appbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; max-width: 1060px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 9px; color: #fff; }
.brand-mark svg { display: block; }
.brand-word { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.brand-word b { font-weight: 800; color: #7BD694; }
.appbar-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.appbar-name { font-size: 13.5px; font-weight: 600; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.appbar-logout { color: #A9BEE4; display: inline-flex; padding: 6px; border-radius: 8px; }
.appbar-logout:active { background: rgba(255,255,255,.12); }

/* Panel top tabs */
.tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  max-width: 1060px; margin: 0 auto; padding: 0 10px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  color: #BACBEA; font-size: 14px; font-weight: 600;
  padding: 10px 13px 12px; border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab.is-active { color: #fff; border-bottom-color: var(--green); }

/* ---------- Layout ---------- */
.wrap { max-width: 1060px; margin: 0 auto; padding: 18px 16px 40px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.page-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.page-head .sub { color: var(--ink-soft); font-size: 14px; }

.flash { border-radius: var(--radius); padding: 12px 15px; font-weight: 600; font-size: 14.5px; margin-bottom: 14px; }
.flash-ok { background: var(--green-soft); color: #1C6B35; }
.flash-err { background: var(--red-soft); color: #9C3030; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.card h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.card .hint { color: var(--ink-soft); font-size: 13.5px; margin: -6px 0 12px; }

/* The check-in stamp — the one loud element */
.stamp {
  border: 2px dashed var(--line); border-radius: 18px; background: var(--card);
  padding: 20px 16px; text-align: center; margin-bottom: 14px;
}
.stamp.is-in { border-color: var(--green); background: linear-gradient(180deg, #FDFFFE, var(--green-soft)); }
.stamp.is-done { border-color: var(--blue); background: linear-gradient(180deg, #FDFEFF, var(--blue-soft)); }
.stamp .stamp-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.stamp .stamp-time { font-size: clamp(21px, 7.6vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0; white-space: nowrap; }
.stamp.is-in .stamp-time { color: #1C6B35; }
.stamp.is-done .stamp-time { color: var(--blue-deep); }
.stamp .stamp-meta { font-size: 13.5px; color: var(--ink-soft); }

/* Quick action grid (merch home) */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.quick a {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px 14px; color: var(--ink);
  display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 15px;
}
.quick a .ic { color: var(--blue); flex: none; }
.quick a:active { background: var(--blue-soft); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 15px; }
.stat .n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.stat .l { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.stat.good .n { color: var(--green); }
.stat.warn .n { color: var(--amber); }

/* ---------- Forms ---------- */
label.f { display: block; font-size: 13.5px; font-weight: 700; margin: 0 0 5px; color: var(--ink); }
.field { margin-bottom: 13px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel],
input[type=number], input[type=month], input[type=time], input[type=week], input[type=url],
input[type=datetime-local], input:not([type]), .inp, .sel, select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 11px 13px; min-height: 46px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(26, 95, 214, .35); outline-offset: 1px; border-color: var(--blue);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 15.5px;
  border: 0; border-radius: 12px; cursor: pointer;
  min-height: 48px; padding: 11px 20px;
  background: var(--blue); color: #fff; width: 100%;
}
.btn:active { filter: brightness(.94); }
.btn-green { background: var(--green); }
.btn-quiet { background: var(--blue-soft); color: var(--blue-deep); }
.btn-danger { background: var(--red-soft); color: #9C3030; }
.btn-slim { width: auto; min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .row-2.stack-sm { grid-template-columns: 1fr; } }

.geo-note { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 0; }
.geo-note.ok { color: #1C6B35; font-weight: 600; }

/* ---------- Lists & tables ---------- */
.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; gap: 11px; align-items: flex-start; padding: 12px 2px; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list .t { font-weight: 700; font-size: 15px; }
.list .m { color: var(--ink-soft); font-size: 13.5px; }
.list .when { margin-left: auto; color: var(--ink-soft); font-size: 13px; white-space: nowrap; }

.badge { display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.badge-green { background: var(--green-soft); color: #1C6B35; }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-blue  { background: var(--blue-soft); color: var(--blue-deep); }
.badge-red   { background: var(--red-soft); color: #9C3030; }

.tbl-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; position: relative; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 640px; }
.tbl th { text-align: left; font-size: 12.5px; color: var(--ink-soft); font-weight: 700; padding: 8px 10px; border-bottom: 1.5px solid var(--line); white-space: nowrap; background: #fff; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; background: #fff; }
/* first column (name) stays put while the rest scrolls sideways */
.tbl th:first-child, .tbl td:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 6px 0 10px -6px rgba(22,36,59,.18); }
.tbl td:first-child { font-weight: 700; }
.tbl td:first-child .avtr { vertical-align: middle; }
/* swipe hint on narrow screens */
.tbl-hint { display: none; font-size: 11px; font-weight: 700; color: var(--ink-soft); text-align: right; margin: 6px 0 0; }
@media (max-width: 640px) {
  .tbl-scroll { scrollbar-width: thin; }
  .tbl-hint { display: block; }
}
.tbl tr:last-child td { border-bottom: 0; }

/* Photo gallery */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); box-shadow: var(--shadow); }
.gallery img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--blue-soft); }
.gallery .cap { padding: 8px 10px; font-size: 12.5px; line-height: 1.35; }
.gallery .cap b { display: block; font-size: 13px; }

/* Filter bar */
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filter .field { margin: 0; flex: 1 1 140px; }
.filter .btn { width: auto; flex: none; }

/* ---------- Merch bottom tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 16px rgba(22, 36, 59, .07);
}
.tabbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 8px; color: var(--ink-soft); font-size: 11.5px; font-weight: 700;
}
.tabbar-item.is-active { color: var(--blue); }
.tabbar-item.is-active .ic { color: var(--blue); }

/* ---------- Login ---------- */
.login-body { min-height: 100svh; display: grid; place-items: center; padding: 20px; background: linear-gradient(160deg, var(--blue-deep) 0%, #1B3A6B 55%, #1F6B3C 130%); }
.login-card { width: 100%; max-width: 390px; background: var(--card); border-radius: 20px; padding: 28px 24px; box-shadow: 0 18px 50px rgba(10, 20, 40, .4); }
.login-card .brand { justify-content: center; margin-bottom: 4px; }
.login-card .brand-word { color: var(--ink); font-size: 24px; }
.login-card .brand-word b { color: var(--green); }
.login-tag { text-align: center; color: var(--ink-soft); font-size: 13.5px; margin: 0 0 20px; }
.login-err { background: var(--red-soft); color: #9C3030; border-radius: 11px; padding: 11px 13px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .flash { animation: flash-in .25s ease-out; }
  @keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } }
}
@media print { .appbar, .tabbar, .btn, .filter { display: none !important; } body { background: #fff; } }

/* Embedded outlet map (rounded box) */
.map-box{ border:1px solid var(--line); border-radius:16px; overflow:hidden; aspect-ratio:16/10; box-shadow:var(--shadow); background:var(--blue-soft); }
.map-box iframe{ width:100%; height:100%; border:0; display:block; }

/* Live activity feed */
.live-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); display:inline-block;
  animation:livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }
.live-feed{ max-height:430px; overflow-y:auto; }
.live-thumb{ width:46px; height:46px; object-fit:cover; border-radius:9px; border:1px solid var(--line); display:block; }
.live-emo{ width:46px; height:46px; border-radius:9px; background:var(--blue-soft); display:grid; place-items:center; font-size:20px; }
.live-feed li.live-new{ animation:livenew 2.4s ease-out; }
@keyframes livenew{ 0%{ background:var(--green-soft);} 100%{ background:transparent;} }

/* Progress popup */
#mt-modal{ position:fixed; inset:0; background:rgba(13,20,34,.55); display:flex; align-items:center; justify-content:center; z-index:90; padding:24px; }
.mtm-card{ background:var(--card); border-radius:18px; padding:26px 24px; width:100%; max-width:320px; text-align:center; box-shadow:0 18px 50px rgba(10,20,40,.4); }
.mtm-spin{ width:34px; height:34px; margin:0 auto 12px; border-radius:50%; border:4px solid var(--blue-soft); border-top-color:var(--blue); animation:mtspin .8s linear infinite; }
@keyframes mtspin{ to{ transform:rotate(360deg); } }
.mtm-stage{ font-weight:700; font-size:15.5px; margin-bottom:12px; }
.mtm-bar{ height:10px; border-radius:999px; background:var(--blue-soft); overflow:hidden; }
.mtm-fill{ height:100%; width:4%; background:linear-gradient(90deg,var(--blue),var(--green)); border-radius:999px; transition:width .25s ease; }
.mtm-fill.mtm-indef{ animation:mtindef 1.2s ease-in-out infinite; }
@keyframes mtindef{ 0%{ margin-left:-40%; width:40%; } 100%{ margin-left:100%; width:40%; } }
.mtm-pct{ font-size:12.5px; color:var(--ink-soft); font-weight:700; margin-top:7px; min-height:16px; }

/* Take picture button + category grid */
.cam-btn{ position:relative; overflow:hidden; }
.cam-btn input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.catgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cat{ border:1.5px solid var(--line); border-radius:13px; padding:11px 12px; text-align:center; }
.cat .cname{ font-weight:800; font-size:15px; }
.cat .ccount{ font-size:12px; color:var(--ink-soft); font-weight:700; margin:2px 0 8px; }
.cat .ccount.full{ color:var(--green); }
.cat.done{ border-color:var(--green); background:var(--green-soft); }

/* Display model cards (Before/After + photos per category) */
.model{ border:1.5px solid var(--line); border-radius:13px; padding:11px 12px; margin-bottom:10px; }
.model.done{ border-color:var(--green); background:var(--green-soft); }
.mhead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.mhead .cname{ font-weight:800; font-size:15px; }
.mhead .ccount{ font-size:12px; color:var(--ink-soft); font-weight:700; }
.mhead .ccount.full{ color:var(--green); }
.mrow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mslot.wide{ grid-column:1 / -1; }
.mslot-btn{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:42px; width:100%;
  border:1.5px dashed var(--line); border-radius:10px; font-weight:700; font-size:13px; color:var(--ink-soft); background:#fff; }
.mslot.filled{ display:flex; align-items:center; gap:8px; border:1.5px solid var(--green); border-radius:10px; padding:4px 8px; text-decoration:none; background:#fff; }
.mslot.filled img{ width:34px; height:34px; object-fit:cover; border-radius:7px; }
.mslot.filled span{ font-size:12px; font-weight:800; color:#1C6B35; }

/* BP progress bars */
.bar{ height:9px; border-radius:999px; background:var(--blue-soft); overflow:hidden; }
.bar-fill{ height:100%; background:var(--blue); border-radius:999px; }
.bar-fill.ok{ background:var(--green); }

/* Capture queue + one-submit (outlet page) */
.capq{ border:1.5px solid var(--line); border-radius:13px; padding:11px 12px; margin-bottom:10px; }
.capq .chead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:8px; }
.capq .cname{ font-weight:800; font-size:15px; }
.ccnt{ font-size:12px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.ccnt.ok{ color:var(--green); }
.caprow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.capbtn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13px;
  border:0; border-radius:10px; padding:10px 13px; background:var(--blue); color:#fff; cursor:pointer; min-height:40px; }
.capbtn.green{ background:var(--green); font-size:14.5px; padding:12px 16px; }
.capbtn.ghost{ background:#fff; color:var(--ink-soft); border:1.5px dashed var(--line); }
.capbtn input[type=file]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.qthumb{ position:relative; width:54px; height:54px; border-radius:10px; overflow:hidden; border:2px solid var(--green); flex:none; display:block; }
.qthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.qthumb .tag{ position:absolute; left:0; right:0; bottom:0; background:rgba(16,24,42,.85); color:#fff; font-size:7.5px;
  font-weight:800; text-align:center; padding:2px 1px; border-top:1.5px solid var(--green); letter-spacing:.02em; }
.qthumb .x{ position:absolute; top:1px; right:1px; width:17px; height:17px; border-radius:50%; background:var(--red);
  color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; cursor:pointer; }
.qthumb.locked{ border-color:var(--line); }
.submitbar{ position:sticky; bottom:8px; z-index:5; padding:8px 0 2px; background:linear-gradient(180deg, rgba(242,246,250,0), var(--paper) 35%); }
#batch-submit{ box-shadow:0 8px 24px rgba(46,161,75,.35); }
#batch-submit:disabled{ opacity:.55; box-shadow:none; }

/* Home banner slider (16:9, admin-managed) */
.bslider{ margin:0 0 16px; position:relative; }
.btrack{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border-radius:16px; box-shadow:0 10px 26px rgba(22,36,59,.12); scrollbar-width:none; }
.btrack::-webkit-scrollbar{ display:none; }
.bslide{ flex:0 0 100%; margin:0; scroll-snap-align:center; position:relative; }
.bslide img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:16px; }
.bslide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px; color:#fff; font-weight:800;
  font-size:14.5px; border-radius:0 0 16px 16px;
  background:linear-gradient(180deg, rgba(16,24,42,0), rgba(16,24,42,.72)); }
.bdots{ display:flex; gap:6px; justify-content:center; margin-top:8px; }
.bdots span{ width:7px; height:7px; border-radius:50%; background:#C6D2E4; transition:all .25s; }
.bdots span.on{ background:var(--blue); width:18px; border-radius:999px; }

/* Model card: separate BEFORE / AFTER / PHOTOS rows */
.capq .srow{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.capq .srow + .srow{ border-top:1px dashed var(--line); }
.capq .slbl{ flex:0 0 62px; font-size:10.5px; font-weight:800; color:var(--ink-soft); letter-spacing:.04em; }
.capq .srow .caprow{ flex:1; }

/* 6-slot BEFORE / AFTER grids */
.caprow.slots{ gap:7px; }
.caprow.slots .qthumb{ width:62px; height:62px; }
.qthumb .num{ position:absolute; left:3px; bottom:3px; min-width:17px; height:17px; padding:0 4px; border-radius:6px;
  background:rgba(16,24,42,.88); color:#fff; font-size:10.5px; font-weight:800; display:grid; place-items:center; }
.mt-add{ position:relative; overflow:hidden; width:62px; height:62px; border:1.6px dashed var(--line); border-radius:10px;
  background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; }
.mt-add .plus{ font-size:17px; font-weight:800; color:var(--blue); line-height:1; }
.mt-add span:last-of-type{ font-size:9px; font-weight:700; color:var(--ink-soft); }
.mt-add input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.mt-empty{ width:62px; height:62px; border-radius:10px; background:#E9EFF6; color:#ABB9CD; font-size:10px; font-weight:700;
  display:grid; place-items:center; }

/* App splash screen */
#mt-splash{ position:fixed; inset:0; z-index:99999; background:var(--ink); display:none; flex-direction:column;
  align-items:center; justify-content:center; opacity:1; transition:opacity .4s ease; }
#mt-splash.show{ display:flex; }
#mt-splash.hide{ opacity:0; pointer-events:none; }
#mt-splash .sp-center{ display:flex; align-items:center; gap:13px; animation:sp-pop .5s ease; }
#mt-splash .sp-tile{ width:58px; height:58px; border-radius:15px; background:var(--blue); display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(26,95,214,.45); }
#mt-splash .sp-word{ font-size:33px; font-weight:600; color:#fff; letter-spacing:-.01em; }
#mt-splash .sp-word b{ font-weight:800; color:#7BD694; }
#mt-splash .sp-foot{ position:absolute; bottom:max(26px, env(safe-area-inset-bottom)); left:0; right:0; text-align:center;
  color:#8FA3C4; font-size:12.5px; font-weight:600; display:grid; gap:3px; }
#mt-splash .sp-foot .sp-by{ color:#5F7499; font-size:11.5px; letter-spacing:.04em; }
@keyframes sp-pop{ from{ transform:scale(.88); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* Home refresh / sync button */
.syncbtn{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--blue);
  display:grid; place-items:center; cursor:pointer; }
.syncbtn.spin svg{ animation:syncspin .8s linear infinite; }
@keyframes syncspin{ to{ transform:rotate(360deg); } }

/* Login footer version */
.login-ver{ position:fixed; left:0; right:0; bottom:max(14px, env(safe-area-inset-bottom)); text-align:center;
  color:#8FA3C4; font-size:12px; font-weight:600; margin:0; }

/* Styled file-pick boxes everywhere (Drives, Settings, Outlets import) */
input[type="file"]{ width:100%; max-width:430px; border:1.5px dashed var(--line); border-radius:12px; background:#fff;
  padding:9px 10px; font:inherit; font-size:13px; color:var(--ink-soft); cursor:pointer; }
input[type="file"]::file-selector-button{ border:0; border-radius:9px; background:var(--blue); color:#fff; font:inherit;
  font-size:13px; font-weight:800; padding:8px 14px; margin-right:11px; cursor:pointer; }
input[type="file"]::file-selector-button:hover{ background:#1450B4; }
/* keep camera overlays invisible */
.cam-btn input[type="file"], .capbtn input[type="file"], .mt-add input[type="file"], .cam-pick input[type="file"]{
  border:0; padding:0; background:transparent; max-width:none; }

/* Two-column form row (Drives etc.) + full-width fields everywhere */
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
@media (max-width:680px){ .row2{ grid-template-columns:1fr; } }
.field .inp, .field .sel, .field textarea{ width:100%; }
.field{ margin-bottom:10px; }

/* In-app photo lightbox */
#mt-lightbox{ position:fixed; inset:0; z-index:99998; background:rgba(10,16,28,.94); display:none;
  align-items:center; justify-content:center; padding:14px; }
#mt-lightbox.show{ display:flex; }
#mt-lightbox img{ max-width:100%; max-height:92vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
#mt-lightbox .lb-x{ position:absolute; top:max(14px, env(safe-area-inset-top)); right:16px; width:40px; height:40px;
  border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:17px; font-weight:800; cursor:pointer; }

/* Attendance: month navigator + today hero */
.mnav{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:9px 10px; margin-bottom:12px; }
.mnav-title{ font-size:18px; font-weight:800; color:var(--ink); }
.mnav-btn{ width:38px; height:38px; border-radius:11px; border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font-size:18px; font-weight:800; display:grid; place-items:center; text-decoration:none; }
.mnav-btn.off{ opacity:.3; }
.att-hero{ background:linear-gradient(135deg, #16243B, #1E3356); color:#fff; border-radius:16px; padding:16px 18px;
  margin-bottom:12px; box-shadow:0 12px 28px rgba(22,36,59,.22); }
.att-hero .ah-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.att-hero .ah-lbl{ font-size:11.5px; font-weight:800; letter-spacing:.09em; color:#8FA3C4; }
.att-hero .ah-badge{ background:rgba(255,193,61,.16); color:#FFC94D; font-size:12px; font-weight:800; padding:5px 12px; border-radius:999px; }
.att-hero .ah-big{ font-size:clamp(21px, 6.6vw, 30px); font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.att-hero .ah-sub{ color:#AFC3E6; font-size:13px; font-weight:600; margin-top:4px; }

/* Drive campaign cards (MR) */
.dcard .drow{ display:flex; gap:9px; margin-top:11px; align-items:stretch; }
.dcard .drow .btn{ align-self:center; }

/* ===== New UI design system (v6) ===== */
.phead2{ display:flex; align-items:center; justify-content:space-between; margin:1px 0 12px; gap:10px; }
.phead2 .t1{ font-size:21px; font-weight:800; color:var(--ink); line-height:1.12; }
.phead2 .t1 small{ display:block; font-size:11.5px; color:var(--ink-soft); font-weight:700; margin-top:2px; }
.phead2 .side{ display:flex; gap:8px; align-items:center; flex:none; }
.datechip{ background:#fff; border:1px solid var(--line); border-radius:999px; font-size:11.5px; font-weight:800; color:var(--ink-soft); padding:7px 12px; white-space:nowrap; }
.hero2{ background:linear-gradient(135deg,#16243B,#1E3356); border-radius:16px; padding:14px 16px; color:#fff;
  margin-bottom:12px; box-shadow:0 12px 26px rgba(22,36,59,.22); }
.hero2 .h-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hero2 .h-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.1em; color:#8FA3C4; }
.hero2 .h-badge{ background:rgba(255,193,61,.16); color:#FFC94D; font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.hero2 .h-badge.g{ background:rgba(123,214,148,.15); color:#7BD694; }
.hero2 .h-big{ font-size:clamp(17px,5.4vw,21px); font-weight:800; margin-top:7px; }
.hero2 .h-sub{ color:#AFC3E6; font-size:12.5px; font-weight:600; margin-top:3px; }
.hero2 .h-btn{ display:block; background:var(--green); color:#fff; text-align:center; font-weight:800; font-size:14.5px;
  border-radius:12px; padding:12px; margin-top:12px; box-shadow:0 6px 16px rgba(46,161,75,.35); cursor:pointer; }
.hero2 .bar{ background:rgba(255,255,255,.15); }
.strip4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.mini4{ background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); padding:9px 5px; text-align:center; }
.mini4 .n{ font-size:18px; font-weight:800; color:var(--ink); }
.mini4 .l{ font-size:9.5px; font-weight:800; color:var(--ink-soft); letter-spacing:.04em; }
.mini4.g .n{ color:var(--green); } .mini4.b .n{ color:var(--blue); } .mini4.a .n{ color:#C77700; }
.sect2{ display:flex; justify-content:space-between; align-items:baseline; margin:3px 0 8px; }
.sect2 h3{ margin:0; font-size:14.5px; color:var(--ink); }
.sect2 span{ font-size:11.5px; font-weight:800; color:var(--ink-soft); }
.bar{ height:7px; border-radius:99px; background:#E7EEF8; overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue),#4D8BF0); transition:width .4s ease; }
.bar i[style*="width:0%"]{ display:none; }
.bar.g i{ background:linear-gradient(90deg,#2EA14B,#4EC06C); }
.rcard{ display:block; background:var(--card); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow);
  padding:13px 14px; margin-bottom:10px; text-decoration:none; }
.rcard .r-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.rcard .r-name{ font-weight:800; font-size:15.5px; color:var(--ink); }
.rcard .r-pct{ font-size:12px; font-weight:800; color:var(--blue); flex:none; }
.rcard .bar{ margin-top:9px; }
.rcard .r-m{ font-size:11.5px; color:var(--ink-soft); font-weight:700; margin-top:6px; }
.ocard{ display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line); border-radius:15px;
  box-shadow:var(--shadow); padding:12px 13px; margin-bottom:9px; text-decoration:none; }
.onum{ width:35px; height:35px; border-radius:10px; background:#E7EEFC; color:var(--blue); font-weight:800;
  display:grid; place-items:center; font-size:13px; flex:none; }
.onum.done{ background:#E7F6EC; color:#1C6B35; }
.ocard .ot{ font-weight:800; font-size:14px; color:var(--ink); }
.ocard .om{ font-size:11px; color:var(--ink-soft); font-weight:700; margin-top:1px; }
.chip2{ font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px; margin-left:auto; flex:none; }
.chip2.p{ background:#FFF3DC; color:#9A6B00; } .chip2.d{ background:#E7F6EC; color:#1C6B35; }
.srchbox{ display:flex; align-items:center; gap:9px; background:#fff; border:1.5px solid var(--line); border-radius:13px;
  padding:0 13px; margin-bottom:11px; }
.srchbox input{ border:0; outline:0; background:transparent; padding:12px 0; font:inherit; font-size:14px; width:100%; }
.dshort{ display:flex; align-items:center; gap:11px; background:linear-gradient(120deg,#EAF6EE,#F2FBF4);
  border:1.5px solid #CBE9D3; border-radius:15px; padding:12px 14px; margin-bottom:12px; text-decoration:none; }
.dshort .t{ font-weight:800; font-size:14px; color:#17683A; } .dshort .m{ font-size:11.5px; color:#3E8257; font-weight:700; }
.dshort .go{ margin-left:auto; background:var(--green); color:#fff; font-weight:800; font-size:12px; border-radius:999px; padding:8px 14px; flex:none; }
.taskrow{ display:flex; gap:11px; align-items:flex-start; }
.taskrow .tt{ font-weight:800; font-size:14px; color:var(--ink); }
.taskrow .tt.done{ text-decoration:line-through; color:#93A3BC; }
.taskrow .tm{ font-size:11.5px; color:var(--ink-soft); font-weight:600; margin-top:2px; }
.duechip{ font-size:10px; font-weight:800; padding:3px 9px; border-radius:999px; background:#FFE9E3; color:#B4472E; margin-left:auto; flex:none; }

/* profile avatars */
.avtr{border-radius:50%;object-fit:cover;background:#E7EEF8;border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 6px rgba(0,0,0,.18);display:inline-grid;place-items:center;vertical-align:middle}
.avtr-i{color:#1A5FD6;font-weight:800;background:#E7EEFC;border-color:#fff}
.tbl .avtr{border-color:#EDF2F9;box-shadow:none;margin-right:7px}

/* ---- Merchandisers: table on desktop, one card per MR on phones ---- */
.mr-cards { display: none; }
.mrc { border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 10px; margin-top: 10px; background: #fff; }
.mrc.in { border-color: #CBE9D3; background: linear-gradient(180deg, #F7FCF8, #fff); }
.mrc-top { display: flex; align-items: center; gap: 11px; }
.mrc-id { flex: 1; min-width: 0; }
.mrc-name { font-weight: 800; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mrc-att { margin-top: 4px; }
.mrc-rep { flex: none; }
.mrc-rep .badge:not(.badge-blue) { background: #EEF2F8; color: var(--ink-soft); }
.mrc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mrc-stats > div { text-align: center; }
.mrc-stats b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.mrc-stats b i { display: block; font-style: normal; font-size: 10px; font-weight: 800; color: #9A6B00; }
.mrc-stats span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); margin-top: 3px; text-transform: uppercase; }
@media (max-width: 640px) {
  .mr-table { display: none; }
  .mr-cards { display: block; }
}

/* ---- pill buttons for In/Out selfies & maps ---- */
.pb { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: #E7EEFC; color: var(--blue); font-weight: 800; font-size: 12px; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; }
.pb:active { transform: scale(.97); }
.pb-g { background: #E7F6EC; color: #1C6B35; }
.pbs { white-space: nowrap; }
.pbs .pb { margin-right: 5px; }
.mrc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mrc-btns .pb { justify-content: center; padding: 10px 8px; font-size: 13px; }
.mrc-hrs { text-align: right; flex: none; }
.mrc-hrs b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.mrc-hrs span { font-size: 9.5px; font-weight: 800; color: var(--ink-soft); letter-spacing: .04em; }
.att-cards { display: none; }
@media (max-width: 640px) { .att-table { display: none; } .att-cards { display: block; } }

/* photo review */
.gitem{display:flex;flex-direction:column}
.gitem.rv-good img{outline:3px solid #2EA14B;outline-offset:-3px}
.gitem.rv-redo img{outline:3px solid #C0392B;outline-offset:-3px}
.rvbar{display:flex;gap:6px;flex-wrap:wrap;padding:6px 2px 0}
.rvb{border:0;border-radius:999px;padding:6px 12px;font:inherit;font-weight:800;font-size:12px;cursor:pointer}
.rvb.g{background:#E7F6EC;color:#1C6B35}.rvb.r{background:#FDECEA;color:#B4472E}

.vis-cards{display:none}
@media (max-width:640px){.vis-table{display:none}.vis-cards{display:block}}

/* BP locations — simple rows that work on phone and desktop */
.bp-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.bp-row{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff}
.bp-top{display:flex;align-items:baseline;gap:8px}
.bp-code{font-weight:800;font-size:15px;color:var(--ink)}
.bp-name{font-size:12px;color:var(--ink-soft);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-att{margin-left:auto;font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap}
.bp-meta{font-size:12px;font-weight:700;color:var(--ink-soft)}

/* ===== Form controls — consistent on every page (UI fix pass) ===== */
/* Select boxes: one clean chevron on every phone instead of each browser's own arrow */
select:not([multiple]), .sel:not([multiple]) {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6B86' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}
select:disabled, input:disabled, textarea:disabled { background-color: #F1F4F8; color: var(--ink-soft); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: #9AA7BC; opacity: 1; }
/* Date / month / time pickers: keep the calendar icon visible and the text aligned */
input[type=date], input[type=month], input[type=time], input[type=week], input[type=datetime-local] { min-width: 0; line-height: 1.2; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
/* Search box inside the rounded search bar stays borderless */
.srchbox input[type=search] { -webkit-appearance: none; appearance: none; min-height: 0; border-radius: 0; }
.srchbox input[type=search]::-webkit-search-cancel-button { cursor: pointer; }

/* Checkboxes & radios: bigger, in the brand blue, easy to tap */
input[type=checkbox], input[type=radio] {
  accent-color: var(--blue); width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer; vertical-align: -4px;
}
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
  display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 40px; line-height: 1.35;
}
.mapchip:has(> input[type=checkbox]) { display: inline-flex; min-height: 0; gap: 6px; }
.mapchip input[type=checkbox] { width: 16px; height: 16px; }

/* Filter rows: inputs share the row evenly and never shrink to a sliver */
.filter > input, .filter > select { flex: 1 1 150px; width: auto; min-width: 0; }
.filter > .btn { min-height: 46px; }

/* Routes: tappable MR checklist instead of "hold to select several" */
.mr-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px; }
.mr-pick label { border: 1.5px solid var(--line); border-radius: 11px; padding: 8px 11px; background: #fff; font-weight: 700; font-size: 13.5px; color: var(--ink); min-height: 44px; }
.mr-pick label:has(input:checked) { border-color: var(--blue); background: #EEF4FF; }
.mr-pick small { color: var(--ink-soft); font-weight: 600; }

/* Drives "add drive" row: wraps neatly on phones */
.drv-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.drv-add.nobp { grid-template-columns: 1fr auto; }
@media (max-width: 560px) {
  .drv-add, .drv-add.nobp { grid-template-columns: 1fr 1fr; }
  .drv-add .btn { grid-column: 1 / -1; width: 100%; }
}

/* Big times never spill out of their box on small phones */
.stamp .stamp-time { font-size: clamp(19px, 6.8vw, 38px); }
.att-hero .ah-big { font-size: clamp(19px, 6vw, 30px); }

/* ===== Planned vs missed outlets ===== */
.ocard-wrap { position: relative; margin-bottom: 10px; }
.ocard-wrap .ocard { margin-bottom: 0; padding-bottom: 30px; }
.cantdo { position: absolute; right: 14px; bottom: 8px; font-size: 12px; font-weight: 800; color: #B23A2B; text-decoration: none; padding: 2px 4px; }
.onum.rsn { background: #FFF1D6; color: #9A6200; }
.chip2.r { background: #FFF1D6; color: #8A5A00; }
.rsn { display: grid; gap: 8px; }
.rsn label { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 700; color: var(--ink); background: #fff; min-height: 46px; }
.rsn label:has(input:checked) { border-color: var(--blue); background: #EEF4FF; }
.rsn small { color: #B23A2B; font-weight: 700; margin-left: 4px; }
.cov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cov-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; }
.cov-kpi .n { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.cov-kpi .l { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; margin-top: 3px; }
.cov-kpi.g .n { color: #1C8A3A; } .cov-kpi.a .n { color: #A86A00; } .cov-kpi.r .n { color: #C0392B; } .cov-kpi.b .n { color: var(--blue); }
.st { display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.st.done { background: #E7F6EC; color: #1C6B35; } .st.reason { background: #FFF1D6; color: #8A5A00; }
.st.missed, .st.nophoto { background: #FDECEA; color: #9B2C1E; } .st.extra { background: #EEF4FF; color: #1A4FB0; }
.covbar { height: 8px; border-radius: 99px; background: #E6ECF4; overflow: hidden; display: flex; min-width: 90px; }
.covbar i { display: block; height: 100%; } .covbar .g { background: #2EA14B; } .covbar .a { background: #F2B73D; } .covbar .r { background: #E5533D; }
.rbar { display: grid; grid-template-columns: 170px 1fr 34px; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; margin: 6px 0; }
.rbar .t { height: 10px; background: #E6ECF4; border-radius: 99px; overflow: hidden; } .rbar .t i { display: block; height: 100%; background: #F2B73D; border-radius: 99px; }
@media (max-width: 560px) { .rbar { grid-template-columns: 1fr 70px 30px; } }
.flag { font-size: 11px; font-weight: 800; color: #9B2C1E; background: #FDECEA; border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.cantdo2{display:block;text-align:center;margin-top:12px;font-size:13px;font-weight:800;color:#B23A2B;text-decoration:none}
.daypick { display: flex; flex-wrap: wrap; gap: 6px; }
.daypick label { min-height: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 10px; font-weight: 800; font-size: 13px; gap: 6px; background: #fff; }
.daypick label:has(input:checked) { border-color: var(--blue); background: #EEF4FF; color: var(--blue); }
.daypick input[type=checkbox] { width: 16px; height: 16px; }
.wrap.wide { max-width: 1360px; }
.wrap.wide .tbl td, .wrap.wide .tbl th { padding-left: 10px; padding-right: 10px; }

/* Inter tuning: tidy aligned numbers in tables, stats, times and scores */
.tbl, .stat .n, .mini .n, .cov-kpi .n, .kpi .n, .stamp-time, .ah-big, .h-big, .datechip, .badge, .bp-att, .tile .n, .score-n { font-variant-numeric: tabular-nums; }
h1, h2, h3, .t1, .h-big, .stamp-time, .ah-big { letter-spacing: -0.015em; }
input, select, textarea, button { font-family: inherit; }

/* Users page: search + filters */
.ufilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; }
.ufilter select { flex: 1 1 140px; width: auto; }

.mswitch { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.mswitch a { border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 800; font-size: 13.5px; border-radius: 999px; padding: 8px 14px; text-decoration: none; }
.mswitch a.on { border-color: var(--blue); background: var(--blue); color: #fff; }

/* Two-step outlet work */
.steps2 { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.steps2.run { border-color: #F2B73D; background: #FFFBF2; }
.steps2.done { border-color: #9ED7AE; background: #F3FBF5; }
.st2 { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--ink-soft); }
.st2 b:first-child { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #EEF2F8; color: var(--ink-soft); flex: none; font-size: 14px; }
.st2.now { color: var(--ink); } .st2.now b:first-child { background: var(--blue); color: #fff; }
.st2.ok b:first-child { background: #2EA14B; color: #fff; }
.st2 em { margin-left: auto; font-style: normal; font-weight: 800; color: #1C8A3A; font-size: 12.5px; white-space: nowrap; }
.st2-time { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mt-lock { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 74px; border: 1.5px dashed var(--line); border-radius: 12px; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); background: #F6F8FB; padding: 4px; text-align: center; }
.st.started{background:#FFF1D6;color:#8A5A00}

/* Attendance card (phone) — cleaner layout */
.mrc-top { display: flex; align-items: center; gap: 12px; }
.mrc-av { display: flex; flex: none; }
.mrc-av.pair > * + * { margin-left: -14px; }
.mrc-av .avtr, .mrc-av img { border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.mrc-id { flex: 1; min-width: 0; }
.mrc-name { font-weight: 800; font-size: 16px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.mrc-sub { margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mrc-pair { font-size: 12px; font-weight: 800; color: #6B3FB0; background: #F1EAFB; border-radius: 999px; padding: 2px 8px; }
.mrc-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mrc-dl { margin-top: 10px; display: grid; gap: 6px; }
.mrc-line { font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: #F4F7FB; color: var(--ink); }
.mrc-line small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.mrc-line.ok { background: #E7F6EC; color: #1C6B35; }
.mrc-line.warn-a { background: #FFF6E0; color: #7A5200; }
.mrc-line.warn-r { background: #FDECEA; color: #9B2C1E; }
.mrc-links { display: inline-flex; gap: 10px; margin-left: 6px; }
.mrc-links a { font-weight: 800; color: inherit; text-decoration: underline; }
.mrc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.mrc-btns:empty { display: none; }
.mrc-spot { margin-top: 8px; }
.mrc-spot button { width: 100%; border: 1.5px dashed #E8B44C; background: #FFF8EA; color: #7A4E00; font: inherit; font-weight: 800; font-size: 13.5px; border-radius: 11px; padding: 10px; cursor: pointer; }
.cronjob { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; margin: 10px 0; }
.cj-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.cj-head b { margin-right: 4px; }
.cj-fields { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 7px; }
.cronjob input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.cron-steps { display: grid; gap: 7px; margin: 6px 0; }
.cron-steps > div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.cron-steps > div > b:first-child { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 13px; }   /* only the step number, not bold words inside the text */
.cron-status { background: #F6F8FB; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; margin: 10px 0; font-size: 14px; }
/* Attendance (computer): Delink details line under the pair's row */
.att-table tr.dl-sub td { padding-top: 0; border-top: 0; }
.dl-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 0 4px 30px; }
.dl-line small { font-size: 12px; margin: 0 !important; align-self: center; line-height: 1.3; }
.att-table tr.dl-main td { border-bottom: 0; }
/* Delink detail line spans the whole row — it must not inherit the sticky first-column look */
.att-table tr.dl-sub td { position: static; box-shadow: none; background: transparent; font-weight: 400; }
.att-table tr.dl-sub .dl-line { padding-left: 36px; padding-bottom: 10px; }

/* Attendance on laptop / desktop: fit the whole table without sideways scrolling */
.att-table .tbl th, .att-table .tbl td { padding: 9px 10px; }
.att-table .tbl td:nth-child(2), .att-table .tbl td:nth-child(3), .att-table .tbl td:nth-child(4), .att-table .tbl td:nth-child(5) { white-space: nowrap; }
.att-table .tbl td:first-child { min-width: 210px; }
.att-table .pbs { white-space: nowrap; }
.att-table .pbs .pb { padding: 5px 9px; font-size: 12.5px; margin: 2px 4px 2px 0; }
.att-table .pbs .badge { margin: 2px 4px 2px 0; }
.att-table tr.dl-sub .dl-line { flex-wrap: wrap; }
.att-table tr.dl-sub form { margin-left: auto; }
@media (max-width: 1200px) { .att-table .tbl td:first-child { min-width: 170px; } .att-table .tbl th, .att-table .tbl td { padding: 8px 7px; } }

/* ===== Attendance — advanced desktop view ===== */
.akpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.ak { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; overflow: hidden; }
.ak span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak b { display: block; font-size: 24px; line-height: 1.15; margin-top: 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ak i { position: absolute; left: 0; bottom: 0; height: 3px; background: #2EA14B; }
.ak.g b { color: #1C8A3A; } .ak.r b { color: #C0392B; } .ak.a b { color: #A86A00; } .ak.b b { color: var(--blue); } .ak.p b { color: #6B3FB0; }
@media (max-width: 1100px) { .akpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.atools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.afcs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.afc { border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.afc b { margin-left: 3px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.afc.on { background: var(--ink); border-color: var(--ink); color: #fff; } .afc.on b { color: #C9D6EA; }
.afc.r:not(.on) b { color: #C0392B; } .afc.a:not(.on) b { color: #A86A00; } .afc.b:not(.on) b { color: var(--blue); } .afc.p:not(.on) b { color: #6B3FB0; }
.asrch { flex: 0 1 220px; margin: 0 !important; }
.atbl thead th { position: sticky; top: 0; background: #F6F8FB; z-index: 3; white-space: nowrap; }
.atbl th[data-s] { cursor: pointer; user-select: none; }
.atbl th[data-s]::after { content: ' ↕'; color: #A9B4C6; font-size: 11px; }
.atbl th.asc::after { content: ' ↑'; color: var(--blue); } .atbl th.desc::after { content: ' ↓'; color: var(--blue); }
.atbl td { vertical-align: middle; }
.atbl .nw { white-space: nowrap; }
.atbl tr.st-absent td { background: #FFFBFA; }
.amr { display: flex; align-items: center; gap: 10px; }
.amr b { display: block; font-size: 14px; } .amr small { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.apill { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: #EEF2F8; color: var(--ink-soft); }
.apill.sm { font-size: 11.5px; padding: 2px 8px; }
.apill.g { background: #E7F6EC; color: #1C6B35; } .apill.r { background: #FDECEA; color: #9B2C1E; } .apill.a { background: #FFF1D6; color: #8A5A00; } .apill.b { background: #EEF4FF; color: #1A4FB0; }
.ahrs { display: flex; flex-direction: column; gap: 4px; min-width: 86px; } .ahrs b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.abar { height: 5px; border-radius: 99px; background: #E6ECF4; overflow: hidden; } .abar i { display: block; height: 100%; background: #2EA14B; } .abar i.lo { background: #F2B73D; }
.aic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #EEF4FF; text-decoration: none; font-size: 14px; margin-right: 3px; border: 0; cursor: pointer; }
.aic.g { background: #E7F6EC; } .aic.o { outline: 1.5px dashed #C9D6EA; outline-offset: -3px; }
.aic.off { opacity: .28; cursor: default; }
.aic.req { width: auto; padding: 0 10px; font: inherit; font-size: 12px; font-weight: 800; color: #7A4E00; background: #FFF3DC; }
.adl { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ainl { display: inline; }
.aold { margin-top: 10px; background: #FFF8EA; border: 1px solid #F2D9A0; color: #7A5200; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aold a { font-weight: 800; color: #7A4E00; }
@media (max-width: 640px) { .atools, .aold { display: none; } .akpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .ak b { font-size: 19px; } .ak span { font-size: 9.5px; } }
.portal-tag { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; vertical-align: middle; }
.portal-tag.team { background: #E7F6EC; color: #1C6B35; } .portal-tag.admin { background: #EFE8FB; color: #5B2FA0; }

/* Map face pins: round profile photo, status-coloured ring, name label (Team app, Command center, Map) */
.fp { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: auto; }
.fp-ph { display: flex; padding: 3px; border-radius: 999px; background: #8A97A0; box-shadow: 0 5px 14px rgba(16,32,27,.35); }
.fp-ph img, .fp-ph b { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #2B5A4A; color: #fff; display: grid; place-items: center; font: 800 13px/1 Manrope, system-ui, sans-serif; flex: none; }
.fp-ph img + img, .fp-ph b + img { margin-left: -12px; }
.fp-nm { max-width: 120px; background: #fff; color: #10201B; border-radius: 7px; padding: 1px 7px; font: 800 11px/1.5 Manrope, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 5px rgba(16,32,27,.25); }
.fp-alert .fp-ph { animation: fpPulse 1.6s ease-in-out infinite; }
@keyframes fpPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,72,15,.55), 0 5px 14px rgba(16,32,27,.35); } 50% { box-shadow: 0 0 0 9px rgba(217,72,15,0), 0 5px 14px rgba(16,32,27,.35); } }
@media (prefers-reduced-motion: reduce) { .fp-alert .fp-ph { animation: none; } }

.fp-ph { position: relative; }
.fp-ph .sd { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; }
.fp-alert .fp-ph { animation: fpPulse 1.6s ease-in-out infinite; }
.kav { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 2px solid; flex: none; }
.sd.outlet { background: #2EA36F; } .sd.road { background: #3B82F6; } .sd.alert { background: #FF7A3D; } .sd.done { background: #9AA5AD; }
.fp-ph i.sd { width: 14px !important; height: 14px !important; right: -2px; bottom: -2px; position: absolute; }

/* outlet visits on the Map page: smaller face pin, numbered stop */
.fp.fp-sm { width: 96px; }
.fp-sm .fp-ph { padding: 2px; }
.fp-sm .fp-ph img, .fp-sm .fp-ph b { width: 28px; height: 28px; font-size: 10px; border-width: 1.5px; }
.fp-sm .fp-ph img + img, .fp-sm .fp-ph b + img { margin-left: -9px; }
.fp-sm .fp-nm { font-size: 10px; padding: 0 5px; }
.fp-no { position: absolute; right: -6px; top: -6px; min-width: 17px; height: 17px; border-radius: 99px; border: 2px solid #fff; color: #fff; font: 800 9.5px/13px Manrope, system-ui, sans-serif; font-style: normal; text-align: center; padding: 0 3px; box-sizing: border-box; }