/* ═══════════════════════════════════════════════════════════
   TaskMap — design system
   Hand-written from the approved mockups. Replaces the Tailwind
   CDN used in the design export: that build compiles styles in the
   browser at runtime (~400KB plus a flash of unstyled content),
   which is a development tool, not something to ship.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* Surfaces — depth comes from lightness steps, never shadows */
  --bg:            #0d0f14;
  --elev-1:        #13161d;
  --elev-2:        #1a1e28;
  --elev-3:        #222736;
  --border:        #2a2f3d;
  --border-strong: #353c50;

  /* Text */
  --text:       #e8ecf5;
  --text-2:     #9aa3b8;
  --text-muted: #5a6278;

  /* Accent + semantics */
  --accent:      #4f8ef7;
  --accent-dim:  #3a6fd4;
  --accent-ink:  #04203f;
  --green:       #3ecf8e;
  --yellow:      #f5c842;
  --orange:      #ffb873;
  --red:         #f56565;
  --purple:      #a78bfa;

  /* Tinted fills — 20% of the base colour, per the design spec */
  --accent-tint: rgba(79, 142, 247, .2);
  --green-tint:  rgba(62, 207, 142, .2);
  --yellow-tint: rgba(245, 200, 66, .2);
  --orange-tint: rgba(255, 184, 115, .2);
  --red-tint:    rgba(245, 101, 101, .2);
  --purple-tint: rgba(167, 139, 250, .2);

  /* Shape */
  --r-card: 12px;
  --r-ctl:  8px;
  --r-chip: 4px;
  --r-full: 9999px;

  /* Rhythm — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 24px; --s-6: 32px;

  /* Stacking order. Leaflet's own panes occupy 400–700, so anything
     that must float above the map starts at 1000. Getting this wrong
     is what made the route dialog open *behind* the map. */
  --z-nav:     45;
  --z-sticky:  46;
  --z-mapui:  500;
  --z-bulk:  1050;
  --z-detail:1100;
  --z-scrim: 1200;
  --z-toast: 1300;

  --sidebar:      248px;
  --sidebar-thin: 68px;
  --topbar-h:     57px;
  --maxw:         1280px;

  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Safe-area insets for iOS home-indicator devices */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.35; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: var(--accent); text-decoration: none; }

/* Focus is never removed — only restyled. Keyboard users need it. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}

::selection { background: var(--accent-tint); color: var(--text); }

/* ── Scrollbars ──────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Icons ───────────────────────────────────────────────── */
.icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* ── Accessibility helpers ───────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; right: var(--s-4);
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-ctl);
  z-index: 200; transition: top .15s;
}
.skip-link:focus { top: var(--s-3); }

/* ═══════════ BUTTONS ═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);
  border-radius: var(--r-ctl);
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
  min-height: 40px;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dim); color: #fff; }

.btn-ghost { background: var(--elev-2); border-color: var(--border); color: var(--text); }
.btn-ghost:hover:not(:disabled) { border-color: var(--border-strong); background: var(--elev-3); }

.btn-quiet { color: var(--text-2); }
.btn-quiet:hover:not(:disabled) { background: var(--elev-2); color: var(--text); }

.btn-danger { background: var(--red-tint); color: var(--red); }
.btn-danger:hover:not(:disabled) { background: var(--red); color: #2a0708; }

.btn-block { width: 100%; }
.btn-sm { min-height: 32px; padding: 5px var(--s-3); font-size: 13px; }

/* Square icon-only button */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-ctl);
  background: var(--elev-2); border: 1px solid var(--border);
  color: var(--text-2);
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-icon:hover { color: var(--text); border-color: var(--border-strong); background: var(--elev-3); }
.btn-icon.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-icon-sm { width: 32px; height: 32px; }
.btn-icon-bare { background: none; border: none; }
.btn-icon { position: relative; }

.btn-badge {
  position: absolute; top: -5px; inset-inline-end: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--bg);
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
}
.btn-icon.is-active .btn-badge { background: var(--accent-ink); color: var(--accent); }

/* ═══════════ FORM CONTROLS ═════════════════════════════════ */
.field { margin-bottom: var(--s-4); }

.label {
  display: block;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.label .req { color: var(--red); margin-inline-start: 2px; }

.input, .textarea, .select {
  width: 100%;
  background: var(--elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  color: var(--text);
  padding: 10px var(--s-3);
  /* 16px on mobile stops iOS Safari zooming the viewport on focus */
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
  min-height: 42px;
}
@media (min-width: 768px) {
  .input, .textarea, .select { font-size: 14px; }
}

.input::placeholder, .textarea::placeholder { color: var(--text-muted); }

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.input[aria-invalid="true"] { border-color: var(--red); }

.textarea { resize: vertical; min-height: 90px; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--s-3) center;
  padding-inline-start: var(--s-6);
}

/* Date/time pickers render a light-on-light native icon in dark UIs */
input[type="date"], input[type="time"] { color-scheme: dark; }

.input-icon { position: relative; }
.input-icon .icon {
  position: absolute; inset-inline-start: var(--s-3); top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.input-icon .input { padding-inline-start: 42px; }

.hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.error-text { font-size: 12px; color: var(--red); margin-top: 6px; }

/* Checkbox — square, 4px radius, checkmark on accent fill */
.check {
  appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-chip);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s, border-color .15s;
  position: relative;
}
.check:hover { border-color: var(--accent); }
.check:checked { background: var(--accent); border-color: var(--accent); }
.check:checked::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2304203f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Round variant used on task cards */
.check-round { border-radius: var(--r-full); }
.check-round:checked { background: var(--green); border-color: var(--green); }
.check-round:checked::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23052e1e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.5 3.5L15 6.5'/%3E%3C/svg%3E");
}

/* ═══════════ CHIPS ═════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px var(--s-3);
  border-radius: var(--r-full);
  background: var(--elev-3);
  color: var(--text-2);
  font-size: 12px; font-weight: 500;
  letter-spacing: .02em;
  border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
/* Hover never repaints a chip.
   Changing background/colour on hover wiped out the very colour that
   tells you what the chip means — and made a *selected* filter look
   unselected. Hover now only brightens and outlines. */
button.chip:hover { filter: brightness(1.22); border-color: currentColor; }
button.chip:active { filter: brightness(.95); }

.chip.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Filter chips carry the colour of what they filter, so the panel
   reads the same way the badges in the list do. */
.chip-new    { color: var(--accent); background: var(--accent-tint); }
.chip-prog   { color: var(--yellow); background: var(--yellow-tint); }
.chip-done   { color: var(--green);  background: var(--green-tint); }
.chip-late   { color: var(--red);    background: var(--red-tint); }
.chip-today  { color: var(--orange); background: var(--orange-tint); }
.chip-future { color: var(--purple); background: var(--purple-tint); }

.chip-new.is-active    { background: var(--accent); color: var(--accent-ink); }
.chip-prog.is-active   { background: var(--yellow); color: #2e2405; }
.chip-done.is-active   { background: var(--green);  color: #052e1e; }
.chip-late.is-active   { background: var(--red);    color: #2a0708; }
.chip-today.is-active  { background: var(--orange); color: #2e1c05; }
.chip-future.is-active { background: var(--purple); color: #1b1140; }

/* Selected chips are already a solid fill; hover only brightens them,
   so the selected state never disappears under the cursor. */
.chip.is-active:hover { filter: brightness(1.1); }

/* Tag pill — 4px radius keeps it distinct from filter chips */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--s-2);
  border-radius: var(--r-chip);
  font-size: 11px; font-weight: 500;
  background: var(--accent-tint); color: var(--accent);
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag-1 { background: var(--accent-tint); color: var(--accent); }
.tag-2 { background: var(--purple-tint); color: var(--purple); }
.tag-3 { background: var(--green-tint);  color: var(--green); }
.tag-4 { background: var(--yellow-tint); color: var(--yellow); }
.tag-5 { background: var(--orange-tint); color: var(--orange); }
.tag-6 { background: var(--red-tint);    color: var(--red); }

.tag-x {
  display: inline-flex; cursor: pointer; opacity: .7;
  border-radius: var(--r-chip);
}
.tag-x:hover { opacity: 1; }

/* Status badge */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--s-2);
  border-radius: var(--r-chip);
  font-size: 11px; font-weight: 500;
}
.badge-new  { background: var(--accent-tint); color: var(--accent); }
.badge-prog { background: var(--yellow-tint); color: var(--yellow); }
.badge-done { background: var(--green-tint);  color: var(--green); }

/* Priority dot */
.dot { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; }
.dot-high   { background: var(--red); }
.dot-medium { background: var(--orange); }
.dot-low    { background: var(--accent); }
.dot-none   { background: var(--text-muted); }

/* ═══════════ CARDS ═════════════════════════════════════════ */
.card {
  background: var(--elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

/* ═══════════ APP SHELL ═════════════════════════════════════ */
.app { display: none; min-height: 100dvh; }
.app.is-ready { display: block; }

/* Desktop sidebar.
   Docked to the inline-START edge, which in an RTL document is the
   right-hand side. The previous build used inset-inline-end, which
   resolves to the left in RTL — that is why it sat on the wrong side. */
.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--sidebar);
  background: var(--elev-1);
  border-inline-end: 1px solid var(--border);
  padding: var(--s-4);
  display: none;
  flex-direction: column;
  z-index: 40;
  transition: width .18s ease;
}
@media (min-width: 1024px) { .sidebar { display: flex; } }

/* Collapsed: icons only, labels removed from the flow. */
.app.is-collapsed .sidebar { width: var(--sidebar-thin); padding: var(--s-3) var(--s-2); }
.app.is-collapsed .nav-label,
.app.is-collapsed .brand-text { display: none; }
.app.is-collapsed .brand { flex-direction: column; gap: var(--s-2); }
.app.is-collapsed .sidebar-toggle { margin-inline-start: 0; }
.app.is-collapsed .nav-item,
.app.is-collapsed .btn-block { justify-content: center; padding-inline: 0; }
@media (min-width: 1024px) {
  .app.is-collapsed .main { padding-inline-start: var(--sidebar-thin); }
}

.sidebar-toggle { margin-inline-start: auto; color: var(--text-muted); }
.sidebar-toggle:hover { color: var(--text); }
.app.is-collapsed .sidebar-toggle svg { transform: scaleX(-1); }

.brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.brand-text { min-width: 0; }
.brand-name { font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -.01em; }
.brand-sub { font-size: 12px; color: var(--text-2); }

.avatar {
  width: 38px; height: 38px; border-radius: var(--r-full);
  background: var(--accent-tint); color: var(--accent);
  display: grid; place-items: center;
  font-weight: 600; font-size: 14px;
  flex-shrink: 0; border: 1px solid var(--border);
}
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }

.nav { display: flex; flex-direction: column; gap: var(--s-1); }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--r-ctl);
  color: var(--text-2);
  font-size: 14px; font-weight: 500;
  transition: background-color .15s, color .15s;
  width: 100%;
  text-align: start;
}
.nav-item:hover { background: var(--elev-3); color: var(--text); }
.nav-item.is-active { background: var(--accent-dim); color: #fff; }
.nav-item .icon { color: currentColor; }

/* Top bar — tablet and below */
.topbar {
  position: sticky; top: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) { .topbar { display: none; } }

.topbar-tabs { display: none; }

/* Bottom navigation — mobile only */
.bottomnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
  display: flex;
  background: var(--elev-1);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-b);
}
@media (min-width: 1024px) { .bottomnav { display: none; } }

.bottomnav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-2) 0 6px;
  color: var(--text-muted);
  font-size: 11px; font-weight: 500;
  transition: color .15s;
}
.bottomnav-item.is-active { color: var(--accent); }

/* Main region */
.main { min-height: 100dvh; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .main { padding-inline-start: var(--sidebar); } }

.container {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-4);
  flex: 1;
  display: flex; flex-direction: column;
  /* Clears the fixed bottom nav plus the stats bar on mobile */
  padding-bottom: calc(var(--s-5) + 64px + var(--safe-b));
}
@media (min-width: 768px) { .container { padding: var(--s-5) var(--s-6); } }
@media (min-width: 1024px) { .container { padding-bottom: var(--s-6); } }

/* ═══════════ STICKY HEAD ═══════════════════════════════════
   Stats and search stay visible while the list scrolls under them.
   The filter panel is a popover so opening it never pushes the
   content down or makes the sticky block tall. */
.stickyhead {
  position: sticky; top: var(--topbar-h);
  z-index: var(--z-sticky);
  background: var(--bg);
  padding-top: var(--s-2);
  margin-bottom: var(--s-3);
}
@media (min-width: 1024px) { .stickyhead { top: 0; padding-top: var(--s-1); } }

/* Fades the rows out as they slide beneath the sticky block. */
.stickyhead::after {
  content: '';
  position: absolute; inset-inline: 0; top: 100%; height: 12px;
  background: linear-gradient(var(--bg), transparent);
  pointer-events: none;
}

.toolbar {
  display: flex; gap: var(--s-2); align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--s-2);
}
.toolbar .input-icon { flex: 1 1 200px; min-width: 0; }
.toolbar-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.btn-add { padding-inline: var(--s-3); }
@media (max-width: 520px) { .btn-add-t { display: none; } }

/* ═══════════ FILTER POPOVER ════════════════════════════════ */
.filterpop {
  position: absolute; z-index: 70;
  top: calc(100% + 6px);
  inset-inline-start: auto; inset-inline-end: 0;
  width: min(400px, calc(100vw - 24px));
  background: var(--elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  padding: var(--s-3);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
  animation: rise .14s cubic-bezier(.2, .8, .3, 1);
  /* Scrolling lives on the inner wrapper so the caret isn't clipped. */
  overflow: visible;
}
.filterpop-in { max-height: min(56vh, 430px); overflow-y: auto; }

/* Caret pointing back at the filter button, so the panel reads as a
   popover rather than another row of the toolbar. */
.filterpop::before {
  content: '';
  position: absolute; top: -6px; inset-inline-end: 18px;
  width: 10px; height: 10px;
  background: var(--elev-2);
  border-inline-start: 1px solid var(--border-strong);
  border-block-start: 1px solid var(--border-strong);
  transform: rotate(45deg);
}

/* Two dense columns once there is room — halves the panel's height. */
.fgroup { margin-bottom: var(--s-3); }
@media (min-width: 380px) {
  .filterpop-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-3); }
  .fgroup { margin-bottom: var(--s-2); }
  .fgroup:nth-of-type(4), .fgroup:nth-of-type(5) { grid-column: 1 / -1; }
  .filterpop-foot { grid-column: 1 / -1; }
}

.fgroup-t {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.filterpop .chip { font-size: 11px; padding: 3px 9px; gap: 4px; }
.filterpop .wrap { gap: 4px; }

.filterpop-foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding-top: var(--s-2); margin-top: var(--s-1);
  border-top: 1px solid var(--border);
}

/* Tag multi-select */
.selecttrigger {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%;
  background: var(--elev-3);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  padding: 4px var(--s-2);
  min-height: 32px;
  color: var(--text-2);
  transition: border-color .15s;
}
.selecttrigger:hover { border-color: var(--border-strong); }
.selecttrigger[aria-expanded="true"] { border-color: var(--accent); }
.selecttrigger-v { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; text-align: start; }
.selecttrigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.tagmenu {
  margin-top: 4px;
  background: var(--elev-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  padding: var(--s-1);
  max-height: 220px; overflow-y: auto;
}
.tagopt {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-2);
  border-radius: var(--r-chip);
  cursor: pointer;
}
.tagopt:hover { background: var(--elev-2); }
.tagopt .tag { max-width: none; }
.tagopt .small { margin-inline-start: auto; }

/* ═══════════ TASK CARDS ════════════════════════════════════ */
.tasks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
  align-content: start;
}

.task {
  background: var(--elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color .15s, background-color .15s;
  cursor: pointer;
  text-align: start;
  position: relative;
}
.task:hover { border-color: var(--border-strong); }
.task.is-selected { background: var(--elev-2); border-color: var(--accent); }
.task.is-done .task-title { text-decoration: line-through; color: var(--text-muted); }

.task-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.task-title {
  flex: 1;
  font-size: 15px; font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-meta {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 12px; color: var(--text-2);
  flex-wrap: wrap;
}
.task-meta .icon { color: var(--text-muted); }
.task-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.task-meta.is-late, .task-meta.is-late .icon { color: var(--red); }

.progress {
  height: 6px; border-radius: var(--r-full);
  background: var(--border); overflow: hidden;
}
.progress > i { display: block; height: 100%; background: var(--green); border-radius: inherit; }

/* ═══════════ STATS ═════════════════════════════════════════
   Pinned to the top of the content area rather than floating at the
   bottom of the viewport, and each tile is a one-tap filter. */
.stats {
  display: flex; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}
.stats::-webkit-scrollbar { display: none; }

.stat {
  flex: 1 1 0; min-width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px var(--s-2);
  background: var(--elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  transition: border-color .15s, background-color .15s;
}
.stat:hover { border-color: var(--border-strong); background: var(--elev-2); }
.stat.is-active { border-color: var(--accent); background: var(--accent-tint); }
.stat b { font-size: 17px; font-weight: 700; line-height: 1.25; }
.stat span { font-size: 10px; color: var(--text-2); white-space: nowrap; }

/* ═══════════ LIST VIEW ═════════════════════════════════════
   Column order (reading right-to-left):
   سحب · إنجاز · أولوية · العنوان · تاقات · موقع · الوقت · الحالة */
.rows { display: flex; flex-direction: column; gap: 4px; }

.rowgroup-h {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  padding: var(--s-3) var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-1);
}
.rowgroup-h:first-child { padding-top: 0; }

.row {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 9px var(--s-3);
  background: var(--elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  width: 100%; text-align: start;
}
.row:hover { border-color: var(--border-strong); background: var(--elev-2); }
.row.is-selected { border-color: var(--accent); background: var(--accent-tint); }
.row.is-done .row-title { text-decoration: line-through; color: var(--text-muted); }

.row > .row-title { flex: 1; }
.row-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s-2); }
.row-title {
  font-size: 14px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

.row-tags { display: flex; gap: 4px; flex-shrink: 0; }

.row-pin {
  display: inline-flex; align-items: center; gap: 2px;
  width: 26px; flex-shrink: 0;
  font-size: 11px; color: var(--text-muted);
}

.row-time {
  width: 104px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: 11px; color: var(--text-2); line-height: 1.35;
}
.row-time b { font-weight: 500; }
.row-time i { font-style: normal; color: var(--text-muted); }
.row-time.is-late { color: var(--red); }
.row-time.is-late i { color: var(--red); opacity: .8; }

.row-status { width: 84px; flex-shrink: 0; display: flex; justify-content: flex-start; }

/* Narrow screens drop the optional columns rather than squeezing them. */
@media (max-width: 700px) { .row-tags { display: none; } }
@media (max-width: 560px) {
  .row-pin { display: none; }
  .row-time { width: 62px; }
  .row-status { width: 68px; }
  .row-status .badge { font-size: 10px; padding: 2px 6px; }
}

/* ═══════════ DRAG REORDER ══════════════════════════════════
   Pointer-driven: the row lifts under the cursor and a gap opens
   where it will land, so the target is never a guess. */
.handle {
  display: inline-flex; align-items: center;
  color: var(--text-muted);
  cursor: grab;
  padding: 2px;
  border-radius: var(--r-chip);
  touch-action: none;          /* stops the page scrolling mid-drag */
  flex-shrink: 0;
}
.handle:hover { color: var(--text); background: var(--elev-3); }
.handle:active { cursor: grabbing; }

.is-lifted {
  cursor: grabbing;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
  border-color: var(--accent) !important;
  transform: scale(1.01);
  opacity: .97;
}

.sort-gap {
  border: 1.5px dashed var(--accent);
  border-radius: var(--r-ctl);
  background: var(--accent-tint);
  margin: 0;
}

.is-landed { animation: land .45s ease-out; }
@keyframes land {
  from { background: var(--accent-tint); border-color: var(--accent); }
}

body.is-sorting { user-select: none; -webkit-user-select: none; }
body.is-sorting * { cursor: grabbing !important; }

/* ═══════════ MAP ═══════════════════════════════════════════ */
/* Edge to edge.
   The map used to sit inside the 1280px reading container, so widening
   the window or zooming out only grew the margins around it. On the map
   view the container drops its width cap and padding, and the map is
   sized in viewport units — so it genuinely expands with the screen. */
.container.is-bleed {
  max-width: none;
  padding: 0;
  padding-bottom: calc(58px + var(--safe-b));
}
@media (min-width: 1024px) { .container.is-bleed { padding-bottom: 0; } }

.mapwrap {
  position: relative; flex: 1;
  min-height: 60vh;
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (min-width: 1024px) { .mapwrap { min-height: calc(100dvh - 120px); } }

.container.is-bleed .mapwrap {
  border-radius: 0;
  min-height: calc(100dvh - var(--topbar-h) - 58px - var(--safe-b));
}
@media (min-width: 1024px) {
  .container.is-bleed .mapwrap { min-height: 100dvh; }
}
#map { position: absolute; inset: 0; background: var(--elev-1); }

.map-controls {
  position: absolute; top: var(--s-3); inset-inline-start: var(--s-3);
  z-index: var(--z-mapui);
  display: flex; flex-direction: column; gap: 6px;
}
/* Actions live at the bottom, camera controls at the top — a single
   column of seven identical squares was impossible to scan. */
.map-actions {
  position: absolute; z-index: var(--z-mapui);
  bottom: var(--s-3); inset-inline-start: var(--s-3);
  display: flex; gap: 6px;
}

.map-controls .btn-icon, .map-actions .btn-icon {
  background: rgba(19, 22, 29, .92);
  backdrop-filter: blur(6px);
}
.btn-icon-accent {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
.btn-icon-accent:hover { filter: brightness(1.1); }
.btn-icon-accent.is-active { background: var(--green) !important; border-color: var(--green) !important; }

/* Paired buttons read as one control. */
.map-stack { display: flex; flex-direction: column; gap: 1px; }
.map-stack .btn-icon:first-child { border-end-start-radius: 0; border-end-end-radius: 0; }
.map-stack .btn-icon:last-child  { border-start-start-radius: 0; border-start-end-radius: 0; }

.map-search {
  position: absolute; top: var(--s-3); z-index: var(--z-mapui);
  inset-inline-end: var(--s-3); inset-inline-start: 64px;
  max-width: 380px; margin-inline: auto;
}

/* Collapsible cards docked to the map's corners. */
.map-card {
  position: absolute; z-index: var(--z-mapui);
  background: rgba(19, 22, 29, .95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  width: min(258px, calc(100% - 24px));
  overflow: hidden;
}
.map-panel { bottom: var(--s-3); inset-inline-end: var(--s-3); }
.map-tasks { top: 64px; inset-inline-end: var(--s-3); max-height: 52%; display: flex; flex-direction: column; }
@media (max-width: 560px) { .map-card { width: min(210px, 58%); } }

.map-card-h {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  font-size: 12px; font-weight: 600; color: var(--text-2);
  background: var(--elev-2);
  border-bottom: 1px solid var(--border);
  text-align: start;
}
.map-card-h:hover { color: var(--text); }
.map-card-h[aria-expanded="false"] svg:last-child { transform: rotate(-90deg); }
.map-card-b { padding: var(--s-3); overflow-y: auto; max-height: 42vh; }
.map-tasks .map-card-b { display: flex; flex-direction: column; gap: 3px; }
.map-card .fgroup-t { margin-top: var(--s-2); }
.map-card .fgroup-t:first-child { margin-top: 0; }
.map-card .chip { font-size: 11px; padding: 3px 9px; }

/* Row shared by map popups and the map task panel. */
.poprow {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; text-align: start;
  padding: 5px var(--s-2);
  border-radius: var(--r-chip);
  font-size: 12px; color: var(--text);
}
.poprow:hover { background: var(--elev-3); }
.poprow .flex-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poprow .ordernum { width: 20px; height: 20px; font-size: 11px; }

.map-hint {
  position: absolute; z-index: var(--z-mapui);
  bottom: calc(var(--s-3) + 48px); inset-inline: 0;
  margin-inline: auto; width: max-content; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--accent-ink);
  padding: 6px var(--s-3); border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
}

/* Fullscreen: the map takes the viewport without leaving the SPA. */
.mapwrap.is-full {
  position: fixed; inset: 0; z-index: 1000;
  border-radius: 0; min-height: 100dvh;
}
body.map-full-open .bottomnav, body.map-full-open .topbar { display: none; }

.pin {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--accent);
}
.pin.is-done { color: var(--green); }
.pin.is-high { color: var(--red); }
.pin.is-cluster { color: var(--purple); }

/* Route pins get their own colour and a halo. Finding the path should
   not require reading the numbers one by one. */
.pin.is-route {
  color: var(--red);
  filter: drop-shadow(0 0 5px rgba(245, 101, 101, .75));
}
.pin.is-route .pin-num-seq { background: #fff; color: var(--red); }

.pin-num {
  position: absolute; inset-block-start: -5px; inset-inline-end: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--r-full);
  border: 2px solid var(--bg);
  font-size: 10px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
}
/* Route position and "several tasks here" must not look alike. */
.pin-num-seq   { background: var(--accent); color: var(--accent-ink); }
.pin-num-count { background: var(--purple); color: #14103a; }

/* Leaflet overrides — the default light chrome clashes with the theme */
.leaflet-container { background: var(--elev-1); font-family: var(--font); }
.leaflet-control-zoom a {
  background: var(--elev-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: var(--elev-3) !important; }
.leaflet-control-attribution {
  background: rgba(13, 15, 20, .8) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--elev-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong);
}
.leaflet-popup-content { margin: var(--s-3) !important; font-family: var(--font); }
.map-picking { cursor: crosshair !important; }

/* ═══════════ OVERLAYS ══════════════════════════════════════ */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(5, 7, 11, .72);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
  animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0; } }

.modal {
  background: var(--elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  width: 100%; max-width: 480px;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: rise .18s cubic-bezier(.2, .8, .3, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.modal-wide { max-width: 780px; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-head h2 { font-size: 18px; }
.modal-body { padding: var(--s-4); overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-foot .spacer { flex: 1; }

/* Full-screen modals on mobile — a centred card wastes the viewport */
@media (max-width: 640px) {
  .scrim { padding: 0; align-items: stretch; }
  .modal {
    max-width: none; max-height: none;
    border-radius: 0; border: none;
    min-height: 100dvh;
  }
  .modal-foot { padding-bottom: calc(var(--s-4) + var(--safe-b)); }
}

/* Detail panel: right sidebar on desktop, bottom sheet on mobile */
.detail {
  position: fixed; z-index: var(--z-detail);
  background: var(--elev-1);
  display: flex; flex-direction: column;
}
@media (min-width: 1024px) {
  /* Docked to the inline-END edge so it never covers the sidebar. */
  .detail {
    inset-block: 0; inset-inline-end: 0;
    width: 400px;
    border-inline-start: 1px solid var(--border-strong);
    box-shadow: 0 0 40px rgba(0, 0, 0, .4);
    animation: slide-in .2s cubic-bezier(.2, .8, .3, 1);
  }
  /* Transforms are physical, not logical: in RTL the inline-end edge
     is the left one, so the panel slides in from the left. */
  @keyframes slide-in { from { transform: translateX(-100%); } }
}
@media (max-width: 1023px) {
  .detail {
    inset-inline: 0; bottom: 0;
    max-height: 82dvh;
    border-radius: var(--r-card) var(--r-card) 0 0;
    border: 1px solid var(--border-strong);
    animation: sheet-up .22s cubic-bezier(.2, .8, .3, 1);
    padding-bottom: var(--safe-b);
  }
  @keyframes sheet-up { from { transform: translateY(100%); } }
}

.grabber {
  width: 36px; height: 4px; border-radius: var(--r-full);
  background: var(--border-strong);
  margin: var(--s-2) auto;
  flex-shrink: 0;
}
@media (min-width: 1024px) { .grabber { display: none; } }

/* ═══════════ TOAST ═════════════════════════════════════════ */
.toasts {
  position: fixed; z-index: var(--z-toast);
  inset-inline: var(--s-4);
  bottom: calc(72px + var(--safe-b));
  display: flex; flex-direction: column; gap: var(--s-2);
  align-items: center;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .toasts { inset-inline-start: auto; inset-inline-end: var(--s-5); bottom: var(--s-5); align-items: flex-end; }
}
.toast {
  background: var(--elev-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  padding: 10px var(--s-4);
  font-size: 13px;
  display: flex; align-items: center; gap: var(--s-2);
  animation: rise .2s ease-out;
  max-width: 400px;
  pointer-events: auto;
}
.toast-ok  { border-color: var(--green); color: var(--green); }
.toast-err { border-color: var(--red);   color: var(--red); }

/* ═══════════ MISC ══════════════════════════════════════════ */
.empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--text-2);
  grid-column: 1 / -1;
}
.empty .icon { width: 40px; height: 40px; color: var(--text-muted); margin-bottom: var(--s-3); }
.empty h3 { font-size: 15px; margin-bottom: 4px; }
.empty p { font-size: 13px; color: var(--text-muted); }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.divider { height: 1px; background: var(--border); margin: var(--s-4) 0; }

.section-title {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  margin-bottom: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}

.dropdown {
  position: absolute; z-index: 60;
  background: var(--elev-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  padding: var(--s-1);
  max-height: 240px; overflow-y: auto;
  min-width: 180px;
}
.dropdown button {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; text-align: start;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-chip);
  font-size: 13px; color: var(--text);
}
.dropdown button:hover { background: var(--elev-2); }

/* Bulk-selection action bar */
/* The selection bar belongs to the list view and nowhere else. */
body:not([data-view="list"]) .bulkbar { display: none !important; }

.bulkbar {
  position: fixed; z-index: var(--z-bulk);
  inset-inline: var(--s-3);
  bottom: calc(72px + var(--safe-b));
  background: var(--elev-3);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  padding: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  animation: rise .18s ease-out;
}
@media (min-width: 1024px) {
  .bulkbar {
    inset-inline: auto; inset-inline-start: 50%;
    transform: translateX(-50%);
    bottom: var(--s-5);
    max-width: 620px;
  }
}

.notif {
  display: flex; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-ctl);
  transition: background-color .15s;
}
.notif:hover { background: var(--elev-3); }
.notif.is-unread { background: var(--accent-tint); }
.notif-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); margin-top: 6px; flex-shrink: 0; }

.badge-count {
  position: absolute; top: 2px; inset-inline-end: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff;
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* Route planner */
.planner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 640px) { .planner { grid-template-columns: 1fr; } }
.planner-col { min-width: 0; }
.planner-scroll { max-height: 320px; overflow-y: auto; padding-inline-end: 2px; }
.planner .section-title { display: flex; align-items: center; gap: var(--s-2); }

.orderlist { display: flex; flex-direction: column; gap: 6px; }
.orderitem {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--elev-3);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
}
.orderitem-t {
  min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orderitem-btns { display: flex; gap: 2px; flex-shrink: 0; }
.orderitem-btns button:disabled { opacity: .3; cursor: not-allowed; }
.ordernum {
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}

.subtask {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--elev-3);
  border-radius: var(--r-ctl);
  margin-bottom: 6px;
}
.subtask.is-done span { text-decoration: line-through; color: var(--text-muted); }
.subtask span { flex: 1; font-size: 13px; }

.minimap {
  height: 150px; border-radius: var(--r-ctl);
  overflow: hidden; border: 1px solid var(--border);
  background: var(--elev-3);
}

.settings-group { margin-bottom: var(--s-5); }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .label { margin: 0; }

.copyfield {
  display: flex; gap: 6px; align-items: center;
  background: var(--elev-3);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  padding: 6px 6px 6px var(--s-3);
}
.copyfield code {
  flex: 1; font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: ltr; text-align: left;
}

/* ═══════════ TASK FORM ═════════════════════════════════════
   Sections are tinted so the eye can jump straight to the block it
   wants. The tint is a left rail plus a heading colour — never a
   filled background, which would fight the content. */
.formgrid { display: flex; flex-direction: column; gap: var(--s-3); }
/* Two columns only once the modal itself is genuinely wide — the
   breakpoint tracks the viewport width the 780px modal needs.
   The map and the notes span both columns: pairing a tall section
   with a short one is what left those large empty gaps. */
@media (min-width: 860px) {
  .formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: start; }
  .formsec-wide { grid-column: 1 / -1; }
}

.formsec {
  background: var(--elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  border-inline-start: 3px solid var(--border-strong);
  padding: var(--s-3);
}
.formsec-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  margin-bottom: var(--s-3);
  color: var(--text-2);
}
.formsec-accent { border-inline-start-color: var(--accent); }
.formsec-accent .formsec-h { color: var(--accent); }
.formsec-orange { border-inline-start-color: var(--orange); }
.formsec-orange .formsec-h { color: var(--orange); }
.formsec-green  { border-inline-start-color: var(--green); }
.formsec-green .formsec-h { color: var(--green); }
.formsec-purple { border-inline-start-color: var(--purple); }
.formsec-purple .formsec-h { color: var(--purple); }
.formsec-yellow { border-inline-start-color: var(--yellow); }
.formsec-yellow .formsec-h { color: var(--yellow); }
.formsec .field { margin-bottom: var(--s-3); }
.formsec .field:last-child { margin-bottom: 0; }
.formsec .hint { margin-top: 4px; }
.mb-0 { margin-bottom: 0 !important; }

/* Segmented pickers replace the two dullest <select>s in the form. */
.segmented {
  display: flex; gap: 4px;
  background: var(--elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  padding: 3px;
}
.seg {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  transition: background-color .15s, color .15s;
  white-space: nowrap;
}
.seg:hover { filter: brightness(1.3); }
.seg-new.is-active     { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.seg-prog.is-active    { background: var(--yellow-tint); color: var(--yellow); font-weight: 600; }
.seg-done.is-active    { background: var(--green-tint);  color: var(--green);  font-weight: 600; }
.seg-p-high.is-active  { background: var(--red-tint);    color: var(--red);    font-weight: 600; }
.seg-p-medium.is-active{ background: var(--orange-tint); color: var(--orange); font-weight: 600; }
.seg-p-low.is-active   { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.seg-p-none.is-active  { background: var(--elev-3);      color: var(--text);   font-weight: 600; }

/* Live map — mounted with the form, not behind a picker dialog. */
.formmap-wrap { position: relative; }
.formmap {
  height: 300px;
  transition: height .2s ease;
  border-radius: var(--r-ctl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--elev-3);
}
@media (min-width: 860px) { .formmap { height: 340px; } }
.formmap.is-tall { height: min(72vh, 620px); }
.formmap-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  pointer-events: none;
  color: var(--text-muted); font-size: 12px;
  background: rgba(13, 15, 20, .55);
  border-radius: var(--r-ctl);
}

/* Location row: the name is editable in place and each pin can be
   promoted into the user's saved places. */
.locbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.locurl { flex: 1 1 200px; min-width: 0; min-height: 32px; padding: 4px var(--s-3); font-size: 13px; }

.loclist { display: flex; flex-direction: column; gap: 4px; }
.locitem {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  background: var(--elev-3);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  font-size: 12px;
}
.locitem .ordernum { width: 20px; height: 20px; font-size: 11px; }

.locname {
  flex: 1; min-width: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-chip);
  padding: 3px 6px;
  font-size: 13px; min-height: 28px;
}
.locname:hover { border-color: var(--border-strong); }
.locname:focus { border-color: var(--accent); background: var(--elev-2); }
.locname::placeholder { color: var(--text-muted); }

/* Unconfirmed pin: amber, dashed, and visually separate from the
   committed list below it. */
.locdraft {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;
  background: var(--yellow-tint);
  border: 1px dashed var(--yellow);
  border-radius: var(--r-ctl);
}
.locdraft .draft-num { background: var(--yellow); color: #2e2405; }
.locdraft .locname { font-size: 13px; }
.locdraft .locname:focus { background: rgba(13, 15, 20, .35); border-color: var(--yellow); }
.locdraft .btn-sm { flex-shrink: 0; }

.pin.is-draft { color: var(--yellow); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }

.loccoords {
  flex-shrink: 0;
  font-size: 10px; color: var(--text-muted);
  direction: ltr; cursor: pointer;
  padding: 2px 4px; border-radius: var(--r-chip);
}
.loccoords:hover { color: var(--accent); background: var(--elev-2); }
@media (max-width: 560px) { .loccoords { display: none; } }

/* Tag picker — lists what exists, filters as you type, offers to create. */
.tagpick { position: relative; }
.tagpick-list {
  margin-top: 4px;
  background: var(--elev-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  padding: var(--s-1);
  max-height: 180px; overflow-y: auto;
}
.tagpick-row {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; text-align: start;
  padding: 5px var(--s-2);
  border-radius: var(--r-chip);
  font-size: 12px; color: var(--text);
}
.tagpick-row:hover { background: var(--elev-2); }
.tagpick-row .small { margin-inline-start: auto; }
.tagpick-row.is-create { color: var(--accent); font-weight: 600; }

.linklist { max-height: 150px; overflow-y: auto; }

/* ═══════════ PWA ═══════════════════════════════════════════ */

/* Install banner — phones only, dismissible, and remembered. */
.installbar {
  position: fixed; z-index: var(--z-bulk);
  inset-inline: var(--s-3);
  bottom: calc(66px + var(--safe-b));
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  animation: rise .22s cubic-bezier(.2, .8, .3, 1);
}
.installbar img { border-radius: 7px; flex-shrink: 0; }
.installbar strong { font-size: 13px; display: block; }
.installbar .small { font-size: 11px; }
@media (min-width: 721px) { .installbar { display: none; } }

/* Connection state. Sits above everything: a failed save while this is
   hidden is indistinguishable from no change at all. */
.offlinebar {
  position: fixed; z-index: var(--z-toast);
  top: 0; inset-inline: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px var(--s-3);
  padding-top: calc(6px + var(--safe-t));
  background: var(--red); color: #fff;
  font-size: 12px; font-weight: 600;
  animation: drop .2s ease-out;
}
.offlinebar.is-back { background: var(--green); color: #052e1e; }
@keyframes drop { from { transform: translateY(-100%); } }

/* Manual install instructions */
.steps { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.step {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  font-size: 13px; line-height: 1.6;
}
.step-n {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
}
.step-i { flex-shrink: 0; color: var(--accent); display: inline-flex; }
.step b { color: var(--text); font-weight: 600; }

/* ═══════════ AUTH ══════════════════════════════════════════ */
.auth {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--s-4);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-brand { text-align: center; margin-bottom: var(--s-5); }
.auth-brand h1 { font-size: 28px; color: var(--accent); letter-spacing: -.02em; }
.auth-brand p { font-size: 13px; color: var(--text-2); margin-top: 4px; }

.tabs {
  display: flex; gap: var(--s-1);
  background: var(--elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  padding: var(--s-1);
  margin-bottom: var(--s-5);
}
.tabs button {
  flex: 1; padding: var(--s-2);
  border-radius: 6px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: background-color .15s, color .15s;
}
.tabs button.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ═══════════ UTILITIES ═════════════════════════════════════ */
.row-flex { display: flex; align-items: center; gap: var(--s-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }
.wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-2 { margin-bottom: var(--s-2); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.flex-1 { flex: 1; }
.text-center { text-align: center; }
.ltr { direction: ltr; text-align: left; }

/* ── Motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}