/* Kerbside — Route planning prototype (snyx showcase; reconstructed from client work, synthetic data).
   Self-contained: tokens, rail, map, work order list, driver timeline. */

:root {
  --slate-900: #222b36;   /* module rail */
  --slate-800: #28323f;   /* top bar */
  --slate-700: #3a4757;
  --navy:      #1f3a5f;   /* primary button */
  --navy-2:    #2a4d7d;
  --teal:      #2e8b7a;   /* print / completed */
  --amber:     #d98324;   /* clusters, missed */
  --amber-2:   #f2a541;
  --red:       #c8483f;
  --green:     #3f8f5b;
  --violet:    #6b5ca5;

  --paper: #ffffff;
  --ground: #eef1f5;
  --line: #d7dde5;
  --line-2: #e9edf2;
  --ink: #1b2430;
  --ink-2: #47536a;
  --muted: #7c879a;

  --font: Barlow, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 15px;

  --radius: 4px;
  --shadow-1: 0 1px 2px rgba(27, 36, 48, .08);
  --shadow-2: 0 10px 28px rgba(27, 36, 48, .2);
  --focus: 0 0 0 3px rgba(31, 58, 95, .25);

  --rail-w: 52px; --top-h: 44px; --filter-h: 52px;
  --hour-w: 46px;      /* one hour on the timeline ruler */
  --lane-h: 46px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); font-size: var(--fs-md); color: var(--ink); background: var(--ground);
       display: flex; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ module rail */
.rail { width: var(--rail-w); flex: none; background: var(--slate-900); display: flex; flex-direction: column;
        align-items: center; gap: 4px; padding: 10px 0; }
.rail-logo { width: 22px; height: 22px; border-radius: 5px; margin-bottom: 10px;
             background: linear-gradient(135deg, var(--teal), var(--amber-2)); }
.rail-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: var(--radius);
            background: none; color: rgba(255,255,255,.62); cursor: pointer; }
.rail-btn .ic { width: 19px; height: 19px; }
.rail-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.rail-btn.is-active { background: var(--teal); color: #fff; }

/* ------------------------------------------------------------ chrome */
.app { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--top-h); flex: none; background: var(--slate-800); color: #fff; display: flex;
          align-items: center; padding: 0 16px; gap: 16px; font-size: var(--fs-md); }
.crumb { color: rgba(255,255,255,.7); }
.crumb b { color: #fff; font-weight: 600; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.user { display: flex; align-items: center; gap: 8px; }
.user-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); }
.linkish { background: none; border: 0; cursor: pointer; color: inherit; font-size: var(--fs-sm);
           text-decoration: underline; text-underline-offset: 2px; opacity: .85; }
.linkish:hover { opacity: 1; }

.filterbar { min-height: var(--filter-h); flex: none; background: var(--paper); border-bottom: 1px solid var(--line);
             display: flex; align-items: center; gap: 8px; padding: 8px 14px; flex-wrap: wrap; }
.select { position: relative; display: inline-flex; align-items: center; }
.select select { appearance: none; height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--line);
                 border-radius: var(--radius); background: #fff; font-size: var(--fs-sm); cursor: pointer; }
.select .ic { position: absolute; right: 8px; width: 14px; height: 14px; pointer-events: none; color: var(--muted); }
.datefield { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
             border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted); }
.datefield input { border: 0; outline: 0; font-size: var(--fs-sm); color: var(--ink); background: none; }

.chips { display: flex; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border-radius: 14px;
        border: 1px solid var(--line); background: #fff; font-size: var(--fs-sm); cursor: pointer; color: var(--ink-2); }
.chip.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip .ic { width: 12px; height: 12px; opacity: .8; }

.btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--radius);
       border: 1px solid transparent; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.btn.solid { background: var(--navy); color: #fff; }
.btn.solid:hover { background: var(--navy-2); }
.btn.outline { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn.outline:hover { border-color: var(--slate-700); color: var(--ink); }
.btn.outline.green { color: var(--teal); border-color: #bfded6; }
.btn.outline.green:hover { background: #f0faf7; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------ stats strip */
.stats { flex: none; display: flex; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.stat { padding: 8px 16px; border-right: 1px solid var(--line-2); min-width: 118px; }
.stat b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; }
.stat span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.stat.warn b { color: var(--red); }
.stat.good b { color: var(--green); }

/* ------------------------------------------------------------ split */
.split { flex: 1; min-height: 0; display: flex; }
.left { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.right { width: 620px; flex: none; display: flex; flex-direction: column; background: var(--paper); }

/* map */
.map { height: 40%; min-height: 190px; position: relative; background: #eef2ee; overflow: hidden; }
.map svg { width: 100%; height: 100%; display: block; }
.map-legend { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.94); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 7px 10px; font-size: var(--fs-xs); display: flex; gap: 12px;
              box-shadow: var(--shadow-1); }
.map-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.pin { cursor: pointer; }
.pin:hover circle { stroke: var(--navy); stroke-width: 2.5; }
.pin.is-on circle:first-child { stroke: var(--navy); stroke-width: 3; }

/* work orders */
.wo { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
.wo-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line);
           border-bottom: 1px solid var(--line-2); background: #f7f9fb; flex-wrap: wrap; }
.wo-head h2 { font-size: var(--fs-lg); font-weight: 600; }
.wo-head h2 span { color: var(--muted); font-weight: 500; }
.wo-head .btn.solid { margin-left: auto; }
.wo-search { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--line);
             border-radius: var(--radius); background: #fff; color: var(--muted); }
.wo-search input { border: 0; outline: 0; width: 190px; font-size: var(--fs-sm); color: var(--ink); background: none; }
.wo-list { flex: 1; overflow-y: auto; }

.row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line-2);
       border-left: 4px solid transparent; cursor: pointer; }
.row:hover { background: #f8fafc; }
.row.is-on { background: #eef4fb; border-left-color: var(--navy); }
.row.is-assigned { opacity: .55; }
.row.is-flash { animation: flash 1.1s ease-out; }
@keyframes flash { from { background: #dbe8f7; } }
.cbox { width: 15px; height: 15px; margin-top: 2px; border: 1.5px solid #aab3c1; border-radius: 3px; background: #fff;
        cursor: pointer; display: grid; place-items: center; flex: none; padding: 0; color: #fff; }
.cbox .ic { width: 11px; height: 11px; stroke-width: 3.2; opacity: 0; }
.cbox.is-on { background: var(--navy); border-color: var(--navy); }
.cbox.is-on .ic { opacity: 1; }
.row-main { flex: 1; min-width: 0; }
.row-addr { font-weight: 600; font-size: var(--fs-md); }
.row-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 1px; }
.row-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.tag { font-size: var(--fs-xs); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; color: var(--ink-2);
       background: #fff; }
.tag.svc { border-color: #cfe0dc; background: #f1f8f6; color: var(--teal); }
.tag.missed { border-color: #f0c9b6; background: #fdf3ed; color: var(--amber); }
.tag.late { border-color: #eec2be; background: #fdf1f0; color: var(--red); }
.tag.done { border-color: #c3e0cd; background: #f0f9f3; color: var(--green); }
.row-detail { margin-top: 7px; padding: 8px 10px; background: #f7f9fb; border: 1px solid var(--line-2);
              border-radius: var(--radius); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.row-detail b { color: var(--ink); }
.row-right { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stars { display: flex; gap: 1px; background: none; border: 0; cursor: pointer; padding: 0; color: #cfd6e0; }
.stars .ic { width: 13px; height: 13px; }
.stars .on { color: var(--amber-2); fill: currentColor; }
.row-hrs { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row-when { font-size: var(--fs-xs); color: var(--muted); }

/* ------------------------------------------------------------ timeline */
.plan-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.plan-head h2 { font-size: var(--fs-lg); font-weight: 600; }
.plan-when { color: var(--muted); font-size: var(--fs-sm); }
.modes { margin-left: auto; display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mode { background: #fff; border: 0; padding: 5px 12px; font-size: var(--fs-sm); cursor: pointer; color: var(--ink-2); }
.mode + .mode { border-left: 1px solid var(--line); }
.mode.is-active { background: var(--navy); color: #fff; }

.ruler { flex: none; display: flex; padding-left: 168px; border-bottom: 1px solid var(--line); background: #f7f9fb;
         overflow: hidden; position: relative; }
.ruler span { width: var(--hour-w); flex: none; font-size: var(--fs-xs); color: var(--muted); padding: 5px 0 4px 4px;
              border-left: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.drivers { flex: 1; overflow: auto; }

.lane { display: flex; border-bottom: 1px solid var(--line-2); min-height: var(--lane-h); }
.lane.is-target .lane-info { background: #eef4fb; }
.lane.is-over .lane-track { background: #eef4fb; }
.lane-info { width: 168px; flex: none; padding: 7px 10px; border-right: 1px solid var(--line-2); cursor: pointer; }
.lane-info:hover { background: #f8fafc; }
.lane-name { font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; gap: 5px; }
.lane-name .ic { width: 13px; height: 13px; color: var(--violet); }
.lane-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.lane-load { font-size: var(--fs-xs); margin-top: 3px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.lane-load.over { color: var(--red); font-weight: 600; }
.lane-track { flex: 1; position: relative; background-image: repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px var(--hour-w)); }
.now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 3; }
.now::after { content: "now"; position: absolute; top: 1px; left: 3px; font-size: 9px; color: var(--red); font-weight: 700; }

.block { position: absolute; top: 6px; height: 34px; border-radius: 3px; border: 1px solid; padding: 3px 5px;
         font-size: var(--fs-xs); line-height: 1.25; overflow: hidden; cursor: grab; box-shadow: var(--shadow-1); }
.block b { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.block span { color: inherit; opacity: .82; }
.block.blue   { background: #e8effa; border-color: #b6c9e6; color: #23456f; }
.block.violet { background: #eeeaf8; border-color: #c6bce4; color: #4b3f80; }
.block.green  { background: #e9f6ee; border-color: #b4dcc3; color: #2b6a44; }
.block.amber  { background: #fdf2e5; border-color: #eccfa6; color: #8a5411; }
.block.red    { background: #fceeed; border-color: #e9bcb8; color: #973630; }
.block.is-ghost { position: fixed; z-index: 90; pointer-events: none; cursor: grabbing; box-shadow: var(--shadow-2);
                  opacity: .92; }
.block.is-dragging { opacity: .3; }
.block-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.08); }
.block-prog i { display: block; height: 100%; background: currentColor; opacity: .55; }

.lane-empty { align-self: center; color: var(--muted); font-size: var(--fs-sm); padding-left: 12px; }

/* ------------------------------------------------------------ guide + toasts */
.guide { position: fixed; left: calc(var(--rail-w) + 14px); bottom: 14px; z-index: 50; max-width: 420px;
         background: var(--slate-800); color: #fff; padding: 10px 14px; border-radius: var(--radius);
         font-size: var(--fs-sm); line-height: 1.5; box-shadow: var(--shadow-2); display: flex; gap: 9px; }
.guide b { color: var(--amber-2); }
.guide button { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.7); cursor: pointer; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--slate-800); color: #fff; padding: 9px 13px; border-radius: var(--radius); font-size: var(--fs-sm);
         box-shadow: var(--shadow-2); max-width: 360px; animation: toast-in .16s ease-out; }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------ narrow */
@media (max-width: 1180px) {
  .right { width: 470px; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .split { flex-direction: column; }
  .right { width: auto; border-top: 1px solid var(--line); min-height: 320px; }
  .left { border-right: 0; }
  .map { height: 210px; }
}