/* Drop & Dash processing board. Brand palette: blue #236AF8, indigo #111D4A,
   yellow #FED766, slate #2D3142. Montserrat for labels and numbers, Inter for text. */
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat.woff2") format("woff2");
             font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2");
             font-weight: 100 900; font-display: swap; }

:root {
  --indigo: #111d4a;
  --indigo-2: #1c2a63;
  --indigo-3: #2b3a7a;
  --brand: #236af8;
  --yellow: #fed766;
  --slate: #2d3142;
  --bg: #f1f3f8;
  --card: #fff;
  --ink: #161a2c;
  --ink-2: #474d63;
  --line: #dde1ea;
  --red: #b3261e;
  --red-bg: #fdeceb;
  --amber: #8a4b00;
  --amber-bg: #fff4d6;
  /* Card type: residential blue, commercial purple. */
  --res: #1f5fe0;
  --com: #7e22ce;
  /* One colour per phase, shared by the card bar and the summary strip. */
  --ph-on_route: #e3e7ef;  --ph-on_route-ink: #3a4058;
  --ph-picked: #fed766;    --ph-picked-ink: #111d4a;
  --ph-at59: #c2410c;      --ph-at59-ink: #fff;
  --ph-cleaning: #0f766e;  --ph-cleaning-ink: #fff;
  --ph-completed: #15803d; --ph-completed-ink: #fff;
  --ph-nothing: #e3e7ef;   --ph-nothing-ink: #5b6178;
  --ph-hold: #b3261e;      --ph-hold-ink: #fff;
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(17, 29, 74, .06), 0 4px 14px rgba(17, 29, 74, .07);
  --shadow-up: 0 2px 4px rgba(17, 29, 74, .08), 0 12px 28px rgba(17, 29, 74, .14);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body { font-family: var(--text); background: var(--bg); color: var(--ink); font-size: 14px;
       line-height: 1.4; -webkit-font-smoothing: antialiased; }
::selection { background: var(--yellow); color: var(--indigo); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
html { scrollbar-color: #b7bfd2 transparent; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: #b7bfd2; border-radius: 8px; border: 3px solid var(--bg); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
svg { width: 20px; height: 20px; display: block; }

/* Language: login page swaps spans by <html lang>. */
html[lang="en"] .l-es, html[lang="es"] .l-en { display: none; }

/* ----------------------------------------------------------------- app bar */
.appbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 24px;
          padding: 0 20px; height: 64px; background: var(--indigo); color: #fff; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo { height: 22px; width: auto; display: block; }
.product { font-family: var(--display); font-weight: 600; font-size: 15px; color: #c9d2f2;
           padding-left: 14px; border-left: 1px solid var(--indigo-3); white-space: nowrap; }
.days { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.days input { font: 600 15px var(--text); color: #fff; background: var(--indigo-2);
              border: 1px solid var(--indigo-3); border-radius: 8px; height: 38px; padding: 0 10px;
              color-scheme: dark; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px;
            color: #dfe5fb; background: var(--indigo-2); border: 1px solid var(--indigo-3);
            transition: background .15s var(--ease); }
.icon-btn:hover { background: var(--indigo-3); color: #fff; }
.icon-btn:disabled { opacity: .35; cursor: default; background: var(--indigo-2); }
.icon-btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.live { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
        border-radius: 8px; font: 700 14px var(--display); background: var(--indigo-2);
        border: 1px solid var(--indigo-3); color: #dfe5fb; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #7d88b3; }
.live.on { background: #fff; color: var(--indigo); border-color: #fff; }
.live.on i { background: #16a34a; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } }
.tools { display: flex; align-items: center; gap: 8px; }
.updated { font-size: 12.5px; color: #aab4d8; margin-right: 6px; white-space: nowrap;
           font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--indigo-2);
       border: 1px solid var(--indigo-3); }
.seg button { font: 700 13px var(--display); letter-spacing: .04em; padding: 0 11px; height: 30px;
              border-radius: 6px; color: #aab4d8; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--indigo); }
.seg.light { background: var(--bg); border-color: var(--line); align-self: center; }
.seg.light button { color: var(--ink-2); }
.seg.light button[aria-pressed="true"] { background: var(--indigo); color: #fff; }

/* -------------------------------------------------------- summary strip */
.summary { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap;
           background: var(--card); border-bottom: 1px solid var(--line); padding: 0 8px; }
.stat { display: flex; align-items: center; gap: 10px; padding: 12px 18px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat i { width: 14px; height: 14px; border-radius: 4px; background: var(--c);
          box-shadow: inset 0 0 0 1px rgba(17, 29, 74, .12); }
.stat b { font: 800 28px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }
.stat span { font: 600 14px var(--display); color: var(--ink-2); }
.stat.zero { opacity: .4; }
.stat.ph-hold { background: var(--red-bg); }
.stat.ph-hold b, .stat.ph-hold span { color: var(--red); }

.banner { text-align: center; padding: 9px 16px; font-weight: 700; }
.stale { background: var(--red); color: #fff; }
.history { background: var(--amber-bg); color: var(--amber); border-bottom: 1px solid #f3dfa6; }
.empty { text-align: center; color: var(--ink-2); padding: 80px 16px; font: 600 18px var(--display); }

/* Phase colour tokens, used by .phase, .chip and .stat. */
.ph-on_route { --c: var(--ph-on_route); --ci: var(--ph-on_route-ink); }
.ph-picked { --c: var(--ph-picked); --ci: var(--ph-picked-ink); }
.ph-at59 { --c: var(--ph-at59); --ci: var(--ph-at59-ink); }
.ph-cleaning { --c: var(--ph-cleaning); --ci: var(--ph-cleaning-ink); }
.ph-completed { --c: var(--ph-completed); --ci: var(--ph-completed-ink); }
.ph-nothing { --c: var(--ph-nothing); --ci: var(--ph-nothing-ink); }
.ph-hold { --c: var(--ph-hold); --ci: var(--ph-hold-ink); }

/* -------------------------------------------------------------------- grid */
/* At most 6 columns, fewer on smaller screens; never wider than the window.
   Every tile is the same shape, so rows line up. */
.grid { display: grid; gap: 16px; padding: 20px 20px 56px; align-items: stretch;
        grid-template-columns: repeat(auto-fill, minmax(max(236px, calc((100% - 5 * 16px) / 6)), 1fr)); }

.tile { --type: var(--res); display: flex; flex-direction: column; background: var(--card);
        border-radius: 12px; overflow: hidden; cursor: pointer; min-width: 0; box-shadow: var(--shadow);
        transition: box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease); }
.tile.commercial { --type: var(--com); }
.tile:hover { box-shadow: var(--shadow-up); transform: translateY(-2px); }
.tile:focus-visible { outline-offset: 3px; }
.tile .head { background: var(--type); color: #fff; font: 600 16px var(--display);
              padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile .head b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tile .head .from { font: 700 12px var(--display); background: rgba(255, 255, 255, .2);
                    border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.tile.hold, .tile.overdue { outline: 3px solid var(--red); outline-offset: 2px; }
.tile.new { animation: arrive 1.8s var(--ease) 3; }
@keyframes arrive { 0%, 100% { box-shadow: var(--shadow); } 40% { box-shadow: 0 0 0 6px var(--yellow), var(--shadow-up); } }
/* Completed / nothing to pick up: same size, dimmed, still clickable. */
.tile.done { opacity: .5; }
.tile.done:hover { opacity: 1; }

/* Square photo, framed on the bags server-side. Uncropped photos (no bags
   found yet) lean low, where bags usually sit in a phone shot. */
.photo { position: relative; aspect-ratio: 1 / 1; background: #e4e8f0; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo img.uncropped { object-position: 50% 62%; }
.ph-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 10px; color: #7b839c; font: 600 15px var(--display); }
.ph-empty svg { width: 44px; height: 44px; }

/* Flags sit on the photo, just above the phase bar. */
.pills { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap;
         gap: 6px; pointer-events: none; }
.pill { font: 700 13px/1.2 var(--display); color: #fff; padding: 5px 10px; border-radius: 999px;
        background: rgba(17, 29, 74, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .25); white-space: nowrap; max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; }
.pill.late, .pill.crit { background: rgba(179, 38, 30, .86); }
.pill.warn { background: rgba(138, 75, 0, .86); }
.pill.first { background: rgba(254, 215, 102, .92); color: var(--indigo); }

/* The phase: one full-width bar under the photo, readable from across the room. */
.phase { background: var(--c); color: var(--ci); font: 800 17px var(--display);
         letter-spacing: .05em; text-transform: uppercase; padding: 9px 12px; }
.chip { display: inline-flex; align-items: center; background: var(--c); color: var(--ci);
        font: 800 11.5px var(--display); letter-spacing: .05em; text-transform: uppercase;
        padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex: 0 0 auto; }

.body { flex: 1; padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.name { font: 700 17px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line.due.late { color: var(--red); font-weight: 700; }
.line.due.pri { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------------ detail */
dialog { margin: auto; border: 0; border-radius: 16px; max-width: min(1080px, 94vw); width: 100%;
         padding: 0; overflow: hidden; box-shadow: 0 24px 64px rgba(10, 14, 36, .4); }
dialog::backdrop { background: rgba(10, 14, 36, .62); }
dialog[open] { animation: rise .28s var(--ease); }
@keyframes rise { from { transform: translateY(12px) scale(.985); opacity: 0; } }
.detail { --type: var(--res); display: grid; grid-template-columns: minmax(280px, 1fr) 1.1fr; max-height: 88vh; }
.detail.commercial { --type: var(--com); }
.detail .big { background: #e4e8f0; display: grid; place-items: center; min-height: 440px; overflow: hidden;
               color: var(--ink-2); font: 600 15px var(--display); }
.detail .big img { width: 100%; height: 100%; max-height: 88vh; object-fit: contain; display: block; }
.detail .info { position: relative; padding: 22px 24px 26px; overflow: auto;
                display: flex; flex-direction: column; gap: 12px; }
.detail .close { position: absolute; top: 14px; right: 14px; background: var(--bg);
                 border-color: var(--line); color: var(--ink); }
.detail .close:hover { background: var(--line); color: var(--ink); }
.dhead { align-self: flex-start; color: #fff; background: var(--type); font: 700 15px var(--display);
         border-radius: 7px; padding: 5px 11px; }
.detail h2 { font: 800 26px/1.15 var(--display); letter-spacing: -.01em; padding-right: 44px; text-wrap: balance; }
.big-chip { align-self: flex-start; font-size: 15px; padding: 6px 12px; border-radius: 8px; }
.holdnote { color: var(--red); font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font: 700 12.5px var(--display); padding: 3px 9px; border-radius: 999px; }
.tag.pri { background: #e1f3f1; color: #0b5e57; }
.tag.late { background: var(--red); color: #fff; }
.tag.carry { background: #e6eafb; color: var(--indigo); }
.tag.first { background: var(--yellow); color: var(--indigo); }
dl { display: grid; gap: 6px; padding: 12px 0; border-block: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-variant-numeric: tabular-nums; }
.kv dt { color: var(--ink-2); }
.kv dd { font-weight: 600; }
.detail h3 { font: 700 13px var(--display); color: var(--ink-2); letter-spacing: .04em;
             text-transform: uppercase; margin-top: 6px; }
.insts { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.inst { padding: 8px 11px; border-radius: 8px; font-weight: 600; background: var(--bg); }
.inst.crit { background: var(--red-bg); color: #8c1d16; }
.inst.warn { background: var(--amber-bg); color: var(--amber); }
table.settings { border-collapse: collapse; width: 100%; }
table.settings td { border-bottom: 1px solid var(--line); padding: 7px 0; font-size: 14px; }
table.settings td:first-child { color: var(--ink-2); padding-right: 16px; }
table.settings td:last-child { font-weight: 600; }
.notes { background: var(--bg); border-radius: 8px; padding: 10px 12px; max-width: 70ch; white-space: pre-wrap; }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 1100px) {
  .updated { display: none; }
}
@media (max-width: 760px) {
  .appbar { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .product { display: none; }
  .days { margin-left: 0; order: 3; width: 100%; }
  .days input { flex: 1; min-width: 0; }
  .tools { margin-left: auto; }
  .summary { position: static; }
  .stat { padding: 10px 12px; }
  .stat b { font-size: 22px; }
  .grid { padding: 16px; gap: 12px; }
  /* One column: the whole dialog scrolls, the photo keeps to its own box. */
  .detail { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .detail .big { min-height: 0; height: 42vh; overflow: hidden; }
  .detail .big { display: block; }
  .detail .big img { height: 100%; max-height: none; }
  .detail .info { overflow: visible; }
  .kv { grid-template-columns: 1fr; gap: 0; }
}
/* Phones: two columns, two rows of cards above the fold. Everything shrinks
   in proportion; the bar and the counts take one tight row each. */
@media (max-width: 600px) {
  .appbar { gap: 8px; padding: 8px 10px; }
  .logo { height: 17px; }
  .icon-btn { width: 34px; height: 34px; }
  .seg button { height: 26px; padding: 0 9px; font-size: 12px; }
  .days input, .live { height: 34px; }
  .days input { font-size: 14px; }
  .summary { display: grid; grid-template-columns: repeat(6, 1fr); padding: 0; }
  .stat { flex-direction: column; gap: 3px; padding: 7px 2px; text-align: center; }
  .stat + .stat { border-left: 1px solid var(--line); }
  .stat i { display: none; }
  .stat b { font-size: 18px; }
  .stat span { font-size: 10px; line-height: 1.15; }
  .stat:not(.ph-hold) b { box-shadow: inset 0 -3px 0 var(--c); padding: 0 3px 3px; }
  .summary:not(:has(.ph-hold)) { grid-template-columns: repeat(5, 1fr); }
  .banner { font-size: 12px; padding: 6px 10px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 8px 40px; }
  .tile { border-radius: 9px; }
  .tile:hover { transform: none; }
  .tile.hold, .tile.overdue { outline-width: 2px; outline-offset: 1px; }
  .tile .head { font-size: 12px; padding: 5px 8px; gap: 4px; white-space: nowrap; }
  .tile .head > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tile .head .from { display: none; }   /* order number wins; carry-over is in the detail */
  .phase { font-size: 11.5px; letter-spacing: .03em; padding: 5px 8px;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .body { padding: 6px 8px 8px; gap: 1px; }
  .name { font-size: 13.5px; }
  .line { font-size: 11.5px; }
  /* Square when there's room; on short phones the photo gives up height so
     two full rows still fit above the fold (svh = with Safari's bars showing). */
  .photo { aspect-ratio: auto; height: min(calc((100vw - 24px) / 2), calc((100svh - 168px) / 2 - 122px)); min-height: 120px; }
  .pills { left: 6px; right: 6px; bottom: 6px; gap: 4px; }
  .pill { font-size: 10.5px; padding: 3px 7px; }
  .ph-empty svg { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------- login */
.loginpage { display: grid; place-items: center; min-height: 100vh; padding: 16px;
             background: var(--indigo); }
.login { background: #fff; padding: 36px 32px 28px; border-radius: 16px; width: min(400px, 100%);
         display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
.login-logo { width: 220px; height: auto; align-self: center; margin-bottom: 6px; }
.login h1 { font: 800 22px var(--display); text-align: center; margin-bottom: 12px; color: var(--indigo); }
.login label { font: 600 14px var(--display); color: var(--ink-2); }
.login input { font-size: 18px; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px; }
.login input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(35, 106, 248, .2); }
.login button[type="submit"] { background: var(--brand); color: #fff; border-radius: 10px; padding: 13px;
                               font: 700 16px var(--display); margin-top: 4px; }
.login button[type="submit"]:hover { background: #1856d6; }
.login .err { color: var(--red); font-weight: 700; }