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

:root {
  --da-blue:      #1a56a0;
  --da-blue-d:    #143f7a;
  --da-blue-bg:   #e8f0fb;
  --da-green:     #16a34a;
  --da-green-bg:  #dcfce7;
  --da-amber:     #d97706;
  --da-amber-bg:  #fef3c7;
  --da-red:       #dc2626;
  --da-red-bg:    #fee2e2;
  --da-slate:     #475569;
  --da-border:    #e2e8f0;
  --da-text:      #0f172a;
  --da-muted:     #64748b;
  --da-bg:        #f1f5f9;
  --da-surface:   #ffffff;
  --da-nav-h:     60px;
  --da-topbar-h:  56px;
  --da-radius:    12px;
  --da-shadow:    0 1px 3px rgba(0,0,0,.08);
  --da-shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --da-t:         160ms ease;
}

html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; color: var(--da-text); background: var(--da-bg); overflow: hidden; }

/* ── App shell ───────────────────────────────────────────────────────────── */
.da-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 600px;
  margin: 0 auto;
  background: var(--da-bg);
  position: relative;
}
.da-shell.busy { pointer-events: none; opacity: .85; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.da-topbar {
  height: var(--da-topbar-h);
  background: var(--da-blue);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
  position: relative;
  z-index: 20;
}
.da-topbar-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.da-topbar-mark  { width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;letter-spacing:.3px;color:#fff;flex-shrink:0; }
.da-topbar-title { font-weight:700;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.da-topbar-date  { font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap; }
.da-topbar-right { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.da-icon-btn {
  width:36px;height:36px;border-radius:8px;border:none;
  background:rgba(255,255,255,.15);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;transition:background var(--da-t);
}
.da-icon-btn:hover { background:rgba(255,255,255,.25); }

/* ── Date row ────────────────────────────────────────────────────────────── */
.da-date-bar {
  background:var(--da-blue-d);
  display:flex;align-items:center;gap:8px;
  padding:6px 16px;flex-shrink:0;
}
.da-date-bar label { font-size:12px;color:rgba(255,255,255,.7); }
.da-date-input {
  background:rgba(255,255,255,.15);border:none;border-radius:6px;
  color:#fff;font-size:13px;padding:4px 8px;outline:none;cursor:pointer;
  flex:1;max-width:180px;
}
.da-date-input::-webkit-calendar-picker-indicator { filter:invert(1); cursor:pointer; }
.da-refresh-btn {
  background:rgba(255,255,255,.15);border:none;border-radius:6px;
  color:rgba(255,255,255,.85);font-size:12px;padding:4px 10px;cursor:pointer;
  transition:background var(--da-t);
}
.da-refresh-btn:hover { background:rgba(255,255,255,.25); }

/* ── Scroll area ─────────────────────────────────────────────────────────── */
.da-scroll {
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--da-nav-h) + 12px);
}
.da-scroll::-webkit-scrollbar { width:4px; }
.da-scroll::-webkit-scrollbar-thumb { background:var(--da-border); border-radius:4px; }

/* ── Bottom nav ──────────────────────────────────────────────────────────── */
.da-bottom-nav {
  position:fixed;
  bottom:0;left:0;right:0;
  max-width:600px;margin:0 auto;
  height:var(--da-nav-h);
  background:var(--da-surface);
  border-top:1px solid var(--da-border);
  display:flex;
  z-index:100;
  box-shadow:0 -2px 12px rgba(0,0,0,.08);
}
.da-nav-btn {
  flex:1;
  border:none;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 4px;
  font-size:10px;font-weight:600;color:var(--da-muted);letter-spacing:.3px;
  text-transform:uppercase;transition:color var(--da-t);
  position:relative;
}
.da-nav-btn:hover { color:var(--da-text); }
.da-nav-btn.active { color:var(--da-blue); }
.da-nav-btn.active::before { content:'';position:absolute;top:0;left:20%;right:20%;height:2.5px;background:var(--da-blue);border-radius:0 0 3px 3px; }
.da-nav-icon { font-size:20px;line-height:1; }
.da-nav-badge {
  position:absolute;top:6px;right:calc(50% - 18px);
  background:var(--da-red);color:#fff;font-size:10px;font-weight:700;
  min-width:16px;height:16px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.da-nav-badge.warn { background:var(--da-amber); }
.da-nav-badge.ok   { background:var(--da-green); }

/* ── Sections & spacing ──────────────────────────────────────────────────── */
.da-section { padding:12px 14px; }
.da-section + .da-section { padding-top:0; }
.da-section-title {
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--da-muted);margin-bottom:8px;padding:0 2px;
}

/* ── Alert banner ────────────────────────────────────────────────────────── */
.da-alert {
  margin:12px 14px;padding:14px 16px;
  border-radius:var(--da-radius);
  background:var(--da-amber-bg);border:1.5px solid var(--da-amber);
  cursor:pointer;
}
.da-alert.ok { background:var(--da-green-bg);border-color:var(--da-green); }
.da-alert strong { display:block;font-size:14px;font-weight:700;color:var(--da-text); }
.da-alert span   { font-size:13px;color:var(--da-muted); }

/* ── Dashboard tiles ─────────────────────────────────────────────────────── */
.da-tiles {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 14px 14px;
}
.da-tile {
  background:var(--da-surface);
  border:1.5px solid var(--da-border);
  border-radius:var(--da-radius);
  padding:16px 14px;
  cursor:pointer;
  text-align:left;
  transition:border-color var(--da-t),box-shadow var(--da-t),transform var(--da-t);
  display:flex;flex-direction:column;gap:4px;
}
.da-tile:hover { border-color:var(--da-blue);box-shadow:var(--da-shadow-md);transform:translateY(-1px); }
.da-tile-kicker { font-size:11px;color:var(--da-muted);font-weight:500;text-transform:uppercase;letter-spacing:.4px; }
.da-tile-label  { font-size:14px;font-weight:700;color:var(--da-text); }
.da-tile-count  { font-size:28px;font-weight:800;line-height:1;margin-top:4px; }
.da-tile.warn   .da-tile-count { color:var(--da-amber); }
.da-tile.ok     .da-tile-count { color:var(--da-green); }
.da-tile.info   .da-tile-count { color:var(--da-blue); }
.da-tile.neutral .da-tile-count { color:var(--da-slate); }

/* ── Segmented control ───────────────────────────────────────────────────── */
.da-seg {
  display:flex;background:var(--da-bg);border-radius:10px;padding:3px;
  margin:12px 14px 8px;border:1px solid var(--da-border);
}
.da-seg-btn {
  flex:1;padding:8px;border:none;border-radius:8px;background:transparent;
  font-size:13px;font-weight:600;color:var(--da-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all var(--da-t);
}
.da-seg-btn.active { background:var(--da-surface);color:var(--da-blue);box-shadow:0 1px 3px rgba(0,0,0,.1); }
.da-seg-count { background:var(--da-border);color:var(--da-muted);font-size:11px;font-weight:700;padding:1px 5px;border-radius:10px; }
.da-seg-btn.active .da-seg-count { background:var(--da-blue);color:#fff; }

/* ── Job card ────────────────────────────────────────────────────────────── */
.da-job-card {
  background:var(--da-surface);
  border:1.5px solid var(--da-border);
  border-radius:var(--da-radius);
  margin:0 14px 10px;
  overflow:hidden;
  position:relative;
  transition:border-color var(--da-t),box-shadow var(--da-t);
}
.da-job-card:hover { border-color:var(--da-blue); box-shadow:var(--da-shadow-md); }
.da-job-card.started { border-color:var(--da-green); }
.da-job-card.unassigned { border-color:var(--da-amber); }

/* left status strip */
.da-job-card::before {
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
}
.da-job-card.unassigned::before { background:var(--da-amber); }
.da-job-card.assigned::before   { background:var(--da-blue); }
.da-job-card.started::before    { background:var(--da-green); }

.da-job-inner { padding:14px 14px 10px 18px; }
.da-job-top {
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:8px;margin-bottom:6px;
}
.da-job-name { font-weight:700;font-size:15px;line-height:1.2; }
.da-job-ref  { font-size:11px;color:var(--da-muted);margin-top:2px; }
.da-job-pills { display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end; }

.da-pill {
  display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:20px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.da-pill-slot     { background:var(--da-bg);color:var(--da-slate); }
.da-pill-van      { background:var(--da-blue-bg);color:var(--da-blue); }
.da-pill-post     { background:var(--da-bg);color:var(--da-slate); }
.da-pill-delivery { background:#dbeafe;color:#1e40af; }
.da-pill-collection { background:#d1fae5;color:#065f46; }
.da-pill-clearance  { background:#ede9fe;color:#5b21b6; }
.da-pill-starter-pack { background:var(--da-amber-bg);color:var(--da-amber); }
.da-pill-generic    { background:var(--da-bg);color:var(--da-slate); }
.da-pill-warn       { background:var(--da-amber-bg);color:var(--da-amber); }
.da-pill-ok         { background:var(--da-green-bg);color:var(--da-green); }
.da-pill-info       { background:var(--da-blue-bg);color:var(--da-blue); }

.da-job-address {
  font-size:13px;color:var(--da-text);margin-bottom:4px;
  display:flex;align-items:flex-start;gap:6px;
}
.da-job-address span { flex:1; }
.da-job-meta {
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:12px;color:var(--da-muted);margin-bottom:10px;
}
.da-job-note {
  background:var(--da-amber-bg);border-radius:8px;
  padding:8px 10px;margin-bottom:10px;font-size:13px;
  border-left:3px solid var(--da-amber);
}
.da-job-note strong { display:block;font-size:11px;font-weight:700;margin-bottom:2px;color:var(--da-amber); }
.da-job-actions {
  display:flex;gap:8px;flex-wrap:wrap;
  padding:10px 14px 12px 18px;
  border-top:1px solid var(--da-border);
}

/* ── Route card (numbered) ───────────────────────────────────────────────── */
.da-route-card {
  background:var(--da-surface);
  border:1.5px solid var(--da-border);
  border-radius:var(--da-radius);
  margin:0 14px 10px;
  display:flex;
  overflow:hidden;
  transition:border-color var(--da-t);
}
.da-route-card.started { border-color:var(--da-green); }
.da-route-num {
  width:44px;min-width:44px;
  background:var(--da-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:var(--da-muted);
  border-right:1px solid var(--da-border);
  flex-shrink:0;
}
.da-route-card.started .da-route-num { background:var(--da-green-bg);color:var(--da-green); }
.da-route-body { flex:1;min-width:0;padding:12px 14px 10px; }
.da-route-name { font-weight:700;font-size:14px;margin-bottom:2px; }
.da-route-addr { font-size:12px;color:var(--da-muted);margin-bottom:6px; }
.da-route-actions { display:flex;gap:6px;flex-wrap:wrap;margin-top:8px; }

/* ── Timetable mini card ─────────────────────────────────────────────────── */
.da-mini-card {
  background:var(--da-surface);
  border:1.5px solid var(--da-border);
  border-radius:var(--da-radius);
  padding:12px 14px;
  margin:0 14px 8px;
}
.da-mini-name { font-weight:600;font-size:14px;margin-bottom:2px; }
.da-mini-sub  { font-size:12px;color:var(--da-muted);margin-bottom:8px; }

/* ── Finished card ───────────────────────────────────────────────────────── */
.da-finished-card {
  background:var(--da-surface);
  border:1.5px solid var(--da-border);
  border-radius:var(--da-radius);
  padding:12px 14px;
  margin:0 14px 8px;
}
.da-finished-outcome { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px; }
.da-finished-ok   { color:var(--da-green); }
.da-finished-warn { color:var(--da-amber); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.da-btn {
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 16px;border-radius:8px;border:1.5px solid transparent;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all var(--da-t);white-space:nowrap;text-decoration:none;
  font-family:inherit;
}
.da-btn:disabled { opacity:.45;cursor:not-allowed; }
.da-btn.primary  { background:var(--da-blue);  color:#fff;border-color:var(--da-blue); }
.da-btn.primary:hover:not(:disabled)  { background:var(--da-blue-d); }
.da-btn.success  { background:var(--da-green); color:#fff;border-color:var(--da-green); }
.da-btn.success:hover:not(:disabled)  { background:#15803d; }
.da-btn.solid    { background:var(--da-blue-bg);color:var(--da-blue);border-color:rgba(26,86,160,.2); }
.da-btn.solid:hover:not(:disabled) { background:var(--da-blue);color:#fff; }
.da-btn.solid.alt { background:#ede9fe;color:#5b21b6;border-color:rgba(91,33,182,.2); }
.da-btn.solid.alt:hover:not(:disabled) { background:#5b21b6;color:#fff; }
.da-btn.ghost    { background:transparent;color:var(--da-muted);border-color:var(--da-border); }
.da-btn.ghost:hover:not(:disabled) { background:var(--da-bg);color:var(--da-text); }
.da-btn.danger   { background:var(--da-red);color:#fff;border-color:var(--da-red); }
.da-btn.warn-btn { background:var(--da-amber);color:#fff;border-color:var(--da-amber); }
.da-btn.call     { background:var(--da-green-bg);color:var(--da-green);border-color:var(--da-green);font-size:14px; }
.da-btn.call:hover:not(:disabled) { background:var(--da-green);color:#fff; }
.da-btn.maps     { background:#ede9fe;color:#5b21b6;border-color:rgba(91,33,182,.2); }
.da-btn.maps:hover:not(:disabled) { background:#5b21b6;color:#fff; }
.da-btn.wide { width:100%; justify-content:center; }
.da-btn.lg { padding:13px 20px;font-size:15px;border-radius:10px; }

/* ── Job detail (full page) ──────────────────────────────────────────────── */
.da-detail-page {
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--da-topbar-h) - 50px - var(--da-nav-h));
}
.da-detail-back {
  display:flex;align-items:center;gap:8px;
  padding:12px 14px 8px;
  font-size:14px;font-weight:600;color:var(--da-blue);
  background:transparent;border:none;cursor:pointer;
  text-align:left;
}
.da-detail-back svg { flex-shrink:0; }

.da-detail-hero {
  background:var(--da-surface);
  padding:16px 16px 14px;
  margin:0 14px 12px;
  border-radius:var(--da-radius);
  border:1.5px solid var(--da-border);
}
.da-detail-name { font-size:20px;font-weight:800;margin-bottom:4px; }
.da-detail-sub  { font-size:13px;color:var(--da-muted);margin-bottom:12px; }
.da-detail-addr {
  font-size:14px;font-weight:500;margin-bottom:12px;padding:10px;
  background:var(--da-bg);border-radius:8px;line-height:1.5;
}
.da-detail-cta-row {
  display:flex;gap:8px;flex-wrap:wrap;
}
.da-detail-cta-row .da-btn { flex:1; justify-content:center; }

.da-detail-card {
  background:var(--da-surface);
  border:1.5px solid var(--da-border);
  border-radius:var(--da-radius);
  margin:0 14px 10px;
  overflow:hidden;
}
.da-detail-card-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--da-border);
  background:var(--da-bg);
}
.da-detail-card-head h4 { font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--da-muted); }
.da-detail-card-head span { font-size:12px;color:var(--da-muted); }
.da-field-row {
  display:flex;align-items:baseline;
  padding:10px 14px;border-bottom:1px solid var(--da-border);
  gap:10px;
}
.da-field-row:last-child { border-bottom:none; }
.da-field-row > span { font-size:12px;color:var(--da-muted);min-width:90px;flex-shrink:0; }
.da-field-row > strong { font-size:14px;font-weight:600;word-break:break-word; }

.da-assign-row { display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--da-border); }
.da-action-row { display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px; }
.da-helper-box {
  margin:0 14px;padding:10px 12px;
  background:var(--da-amber-bg);border-radius:8px;
  font-size:13px;color:var(--da-amber);
  border:1px solid var(--da-amber);margin-bottom:8px;
}
.da-gallery {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;padding:10px 14px;
}
.da-gallery a img { width:100%;border-radius:6px;display:block;aspect-ratio:1;object-fit:cover; }

.da-items-list { padding:8px 14px 12px; }
.da-item { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--da-border); }
.da-item:last-child { border-bottom:none; }
.da-item img { width:48px;height:48px;object-fit:cover;border-radius:6px;background:var(--da-bg);flex-shrink:0; }
.da-item-placeholder { width:48px;height:48px;border-radius:6px;background:var(--da-bg);border:1px solid var(--da-border);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--da-muted);flex-shrink:0; }
.da-item-info strong { display:block;font-size:13px;font-weight:600; }
.da-item-info small  { font-size:12px;color:var(--da-muted); }

/* ── Confirm bottom sheet ────────────────────────────────────────────────── */
.da-sheet-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;
  animation:da-fade .16s ease;
}
.da-sheet {
  position:fixed;bottom:0;left:0;right:0;max-width:600px;margin:0 auto;
  background:var(--da-surface);border-radius:var(--da-radius) var(--da-radius) 0 0;
  padding:20px 16px calc(env(safe-area-inset-bottom,0px) + 24px);
  z-index:201;box-shadow:var(--da-shadow-md);
  animation:da-slide-up .2s ease;
}
.da-sheet h3    { font-size:17px;font-weight:700;margin-bottom:6px; }
.da-sheet p     { font-size:14px;color:var(--da-muted);margin-bottom:18px; }
.da-sheet-btns  { display:flex;flex-direction:column;gap:8px; }
.da-sheet-btns .da-btn { justify-content:center; }

/* ── Message banner ──────────────────────────────────────────────────────── */
.da-banner {
  margin:10px 14px;padding:12px 14px;
  background:#1e293b;color:#fff;border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;animation:da-fade .2s ease;
}
.da-banner-close { background:none;border:none;color:rgba(255,255,255,.6);font-size:18px;cursor:pointer;flex-shrink:0;padding:0 4px; }

/* ── Empty / loading ─────────────────────────────────────────────────────── */
.da-empty { text-align:center;padding:40px 20px;color:var(--da-muted);font-size:14px; }
.da-loading { display:flex;align-items:center;justify-content:center;padding:60px 20px; }
.da-spinner { width:32px;height:32px;border:3px solid var(--da-border);border-top-color:var(--da-blue);border-radius:50%;animation:da-spin .7s linear infinite; }

/* ── Notify bar ──────────────────────────────────────────────────────────── */
.da-notify-bar {
  margin:10px 14px;padding:10px 14px;
  background:var(--da-blue-bg);color:var(--da-blue);
  border-radius:10px;border:1px solid rgba(26,86,160,.2);
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;gap:10px;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes da-fade     { from{opacity:0} to{opacity:1} }
@keyframes da-slide-up { from{transform:translateY(30px);opacity:0} to{transform:none;opacity:1} }
@keyframes da-spin     { to{transform:rotate(360deg)} }

/* ── Desktop expansion ───────────────────────────────────────────────────── */
@media (min-width:640px) {
  .da-shell { box-shadow:0 0 0 1px var(--da-border),0 8px 40px rgba(0,0,0,.1); }
  .da-bottom-nav { left:50%;transform:translateX(-50%); width:600px; }
}


/* ── Settings form ───────────────────────────────────────────────────────── */
.da-form-grid { display:grid; gap:12px; padding:14px; }
.da-form-field { display:flex; flex-direction:column; gap:6px; }
.da-form-field span { font-size:12px; color:var(--da-muted); font-weight:600; }
.da-form-field input {
  width:100%;
  border:1.5px solid var(--da-border);
  border-radius:10px;
  background:#fff;
  padding:12px 13px;
  font-size:14px;
  color:var(--da-text);
  outline:none;
}
.da-form-field input:focus { border-color:var(--da-blue); box-shadow:0 0 0 3px rgba(26,86,160,.12); }
.da-switch { position:relative; display:inline-flex; width:52px; height:30px; vertical-align:middle; }
.da-switch input { position:absolute; opacity:0; inset:0; }
.da-switch-slider {
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#cbd5e1;
  transition:all var(--da-t);
}
.da-switch-slider::after {
  content:'';
  position:absolute;
  width:24px;
  height:24px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:all var(--da-t);
}
.da-switch input:checked + .da-switch-slider { background:var(--da-blue); }
.da-switch input:checked + .da-switch-slider::after { transform:translateX(22px); }


.da-sheet-lg { max-width:640px; }
.da-load-list { display:flex; flex-direction:column; gap:10px; margin:0 0 16px; max-height:46vh; overflow:auto; padding-right:2px; }
.da-load-row { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--da-border); border-radius:14px; background:#fff; }
.da-load-row input { margin-top:2px; width:18px; height:18px; }
.da-load-row span { display:flex; flex-direction:column; gap:3px; }
.da-load-row small { color:var(--da-muted); font-size:12px; }
.da-load-empty { padding:12px; border:1px dashed var(--da-border); border-radius:14px; color:var(--da-muted); background:#fff; }