/* Lobster Pound — "Night Water + Aqua", matching the SmartCatchData survey sites.
   Dark is the default; <html class="wv-dark"> is toggled by the Light/Dark button and remembered
   in localStorage 'wvTheme' (same key as the survey sites, so the choice carries across them). */

:root {
  --b: #d7dde3;          /* borders */
  --mut: #5c6b78;        /* muted text */
  --em: #00785f;         /* accent (light mode): dark enough for white button text and for text on white */
  --bg: #eef3f6;
  --panel: #ffffff;
  --text: #14222c;
  --ok: #15803d; --warn: #b45309; --bad: #c62828;
  --t-good: #15803d; --t-warn: #b45309; --t-bad: #b91c1c; --t-info: #0e7490;      /* coloured text that reads on a light page */
}
html.wv-dark {
  --b: rgba(150,210,225,0.24);
  --mut: #a9c0cc;
  --em: #35d3dc;        /* aqua accent */
  --bg: #0c2a3a;
  --panel: rgba(6,30,44,0.88);
  --text: #e6f1f5;
  --ok: #35d3dc; --warn: #f2b84b; --bad: #ff6b6b;
  --t-good: #4ade80; --t-warn: #f5b84b; --t-bad: #ff8a8a; --t-info: #35d3dc;       /* ... and on a dark one */
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, sans-serif;
  margin: 0; padding: 20px; line-height: 1.38; color: var(--text);
  background: var(--bg) url('/assets/bg-tank.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* header: logo chip, title, buttons */
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px; flex-wrap: wrap; }
.header .spacer { flex: 1; }
.header h1 { margin: 0; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
/* brand chip: SmartCatchData logo, then "brought to you by" + the WaveWise logo (same order as the survey login) */
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 18px 10px;
         background: rgba(6,30,44,.78); border: 1px solid rgba(150,210,225,.24); border-radius: 16px; }
.brand .scd-hdr { max-width: 250px; width: 100%; height: auto; display: block; }
.brand .by { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 15px; font-style: italic; color: #a9c0cc; }
.brand .by img { height: 56px; width: auto; max-width: 270px; display: block; }
.hdr-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logout-btn { padding: 7px 13px; background: #0b3845; color: #fff; border: 1px solid #fff; text-decoration: none;
              border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.logout-btn:hover { background: #124a5b; }

/* panels */
.panel { background: var(--panel); border: 1px solid var(--b); border-radius: 12px; padding: 14px 14px 12px; margin: 0 0 14px; }
html.wv-dark .panel { box-shadow: 0 6px 24px rgba(0,0,0,.22); }
.panel h2, .panel h3 { margin: 0 0 10px; }
html.wv-dark .panel h2, html.wv-dark .panel h3 { color: #fff; }
.muted { color: var(--mut); }
.small { font-size: 13px; }
.err { color: var(--bad); }
a { color: var(--em); }

/* tabs: a capsule of pills, like the herring pages (open tab = filled pill); header buttons sit in a second capsule */
.wv-tabrow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 10px 16px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; width: fit-content; max-width: 100%; padding: 5px; margin: 0;
        background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.6); border-radius: 28px; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
html.wv-dark .tabs { background: rgba(6,30,44,.82); border-color: var(--b); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.tab-btn { appearance: none; border: none; border-radius: 999px; background: transparent; color: #334155; padding: 9px 13px; font-weight: 600; font-size: 14px;
           cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, color .15s; white-space: nowrap; }
html.wv-dark .tab-btn { color: #b7cfd9; }
.tab-btn:hover { background: rgba(0,0,0,.06); }
html.wv-dark .tab-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.tab-btn.active, html.wv-dark .tab-btn.active { background: var(--em); color: #fff; font-weight: 700; }
html.wv-dark .tab-btn.active { color: #04141c; }
.wv-tabrow-r { flex: 0 0 auto; padding: 5px; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.6); border-radius: 28px; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
html.wv-dark .wv-tabrow-r { background: rgba(6,30,44,.82); border-color: var(--b); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.wv-tabrow-r .hdr-btns { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
.wv-tabrow-r .hdr-btns a { background: transparent; color: #334155; border: none; border-radius: 999px; padding: 9px 14px; font-size: 13.5px; font-weight: 600;
                           white-space: nowrap; text-decoration: none; cursor: pointer; }
html.wv-dark .wv-tabrow-r .hdr-btns a { color: #cfe3ea; }
.wv-tabrow-r .hdr-btns a:hover { background: rgba(0,0,0,.07); }
html.wv-dark .wv-tabrow-r .hdr-btns a:hover { background: rgba(255,255,255,.1); color: #fff; }
.tab { display: none; }
.tab.active { display: block; }
.viewas { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 10px 14px; padding: 8px 14px; border-radius: 999px;
          background: #f2c230; color: #2b2100; font-weight: 600; font-size: 14px; }
tr.off td { opacity: .55; }

/* buttons & form controls */
.btn { appearance: none; border: 1px solid var(--em); border-radius: 10px; background: var(--em); color: #04141c;
       padding: 9px 14px; font-weight: 700; cursor: pointer; font-size: 15px; min-height: 40px; }
html:not(.wv-dark) .btn { color: #fff; }
.btn:hover { filter: brightness(.92); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--em); }
.btn.ghost:hover { background: rgba(53,211,220,.14); }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.sm { padding: 5px 10px; min-height: 30px; font-size: 13px; }

label { display: block; font-size: 13px; color: var(--mut); margin: 0 0 8px; }
input, select, textarea { display: block; width: 100%; margin-top: 3px; padding: 9px 10px; font: inherit; font-size: 15px;
                          color: var(--text); background: #fff; border: 1px solid var(--b); border-radius: 8px; min-height: 40px; }
html.wv-dark input, html.wv-dark select, html.wv-dark textarea { background: rgba(255,255,255,0.07); }
html.wv-dark select option { background: #0f3042; color: #e6f1f5; }
input::placeholder { color: #7f98a6; }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row > label { flex: 1 1 140px; margin: 0; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--b); border-radius: 12px; padding: 10px 12px; }
.kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.kpi .l { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.kpi.warn .v { color: var(--warn); }
.kpi.bad .v { color: var(--bad); }

/* tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut);
     padding: 8px 10px; background: rgba(127,127,127,.12); white-space: nowrap; }
td { padding: 8px 10px; border-top: 1px solid var(--b); vertical-align: middle; }
tbody tr:hover td { background: rgba(127,127,127,.07); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* pills */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
        background: rgba(53,211,220,.18); color: #00785f; white-space: nowrap; }
html.wv-dark .pill { color: #8fe9ee; }
.pill.warn { background: rgba(242,184,75,.2); color: #b57700; }
html.wv-dark .pill.warn { color: #f2b84b; }
.pill.bad { background: rgba(255,107,107,.18); color: #c63232; }
html.wv-dark .pill.bad { color: #ff9a9a; }
.pill.gray { background: rgba(127,127,127,.18); color: var(--mut); }

/* tank cards */
.tanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tank { background: var(--panel); border: 1px solid var(--b); border-radius: 12px; padding: 12px; }
.tank.alert { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }
.tank h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; }
.bar { height: 10px; border-radius: 6px; background: rgba(127,127,127,.2); overflow: hidden; margin: 8px 0 4px; }
.bar > i { display: block; height: 100%; background: var(--em); border-radius: 6px; }
.bar.hot > i { background: var(--warn); }
.bar.full > i { background: var(--bad); }
.reads { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; margin-top: 8px; }
.reads b { font-variant-numeric: tabular-nums; }
.reads .off { color: var(--bad); font-weight: 700; }

/* alerts strip & toasts */
.alerts { border-color: var(--bad); }
.alerts li { margin: 3px 0; }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #0b2635; color: #e6f1f5;
         border: 1px solid var(--em); padding: 10px 16px; border-radius: 10px; display: none; z-index: 50; max-width: 90vw; }
#toast.err { border-color: var(--bad); }
#live { font-size: 12px; color: var(--mut); }
#live.stale { color: var(--bad); }

/* login */
body.login .login-box { max-width: 380px; margin: 40px auto; }
body.login h2 { margin-top: 0; }

@media (max-width: 640px) {
  body { padding: 12px; }
  .kpi .v { font-size: 22px; }
  .header h1 { font-size: 22px; }
}

/* photo credit (CC BY-SA requires it) */
.credit { margin: 18px 10px 4px; text-align: right; font-size: 10px; color: rgba(230,241,245,.38); }
.credit a { color: inherit; text-decoration: none; }
.credit a:hover { text-decoration: underline; color: rgba(230,241,245,.8); }

/* modal dialog */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.modal-box { width: min(420px, 100%); margin: 0; }

/* sensor readings with traffic-light indicators */
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #7b8b95; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.dot.green { background: #2ecc71; box-shadow: 0 0 8px rgba(46,204,113,.7); }
.dot.yellow { background: #f2c230; box-shadow: 0 0 8px rgba(242,194,48,.7); }
.dot.red { background: #ff4d4d; box-shadow: 0 0 9px rgba(255,77,77,.85); }
.rstrip { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; padding: 7px 9px; margin: -2px -2px 8px; border-radius: 9px;
          background: rgba(0,0,0,.22); border: 1px solid var(--b); }
.rstrip .ov { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: .02em; }
.rstrip .ov.green { color: #54e08e; } .rstrip .ov.yellow { color: #f2c230; } .rstrip .ov.red { color: #ff6b6b; } .rstrip .ov.na { color: var(--mut); }
.rstrip .rd { display: inline-flex; align-items: center; gap: 5px; }
.rstrip .rd small { color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.rstrip .rd b { font-variant-numeric: tabular-nums; }
.rstrip .rt { margin-left: auto; font-size: 11px; color: var(--mut); }
.rstrip .rt.err { color: var(--bad); }
.tank.green { border-top: 3px solid #2ecc71; } .tank.yellow { border-top: 3px solid #f2c230; } .tank.red { border-top: 3px solid #ff4d4d; }

/* ───── pound map: overhead tank with crates on rope lines ───── */
.pm-water { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; }
.pm-water .rstrip { flex: 1 1 auto; margin: 0; }
.pmap { --cw: 52px; --ch: 76px; overflow: auto; padding: 4px; }          /* crates sit end to end along the rope: long side up the page */
.pmap.sz-s { --cw: 42px; --ch: 62px; } .pmap.sz-l { --cw: 72px; --ch: 104px; }
.pm-wrap { display: flex; flex-direction: column-reverse; width: max-content; min-width: min(100%, 360px); margin: 0 auto; padding: 8px 10px 10px; border-radius: 12px;
           background: linear-gradient(180deg, rgba(53,211,220,.10), rgba(6,30,44,.35) 40%, rgba(6,30,44,.55)); border: 2px solid rgba(150,210,225,.35); }
.pm-edge { text-align: center; font-size: 11px; letter-spacing: .25em; color: var(--mut); padding: 8px 0 2px; }      /* spot 1 (the front) is at the bottom */
.pm-edge.back { padding: 3px 0 8px; }
.pm-lines { display: flex; gap: 10px; align-items: flex-start; justify-content: center; }
.pm-line { flex: 0 0 auto; text-align: center; }
.pm-lh { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.2; }
.pm-lh small { display: block; font-weight: 400; color: var(--mut); font-size: 10.5px; }
.pm-rope { position: relative; display: flex; flex-direction: column-reverse; gap: 1px; align-items: center; padding: 2px 6px; }
.pm-rope::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, #b79b6b 0 5px, #8a7249 5px 9px); opacity: .8; border-radius: 2px; }
.crate { position: relative; width: var(--cw); height: var(--ch); border-radius: 8px; border: 2px solid rgba(255,255,255,.25); cursor: pointer;
         display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; color: #04141c; user-select: none;
         box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .08s; }
.crate:hover { transform: scale(1.07); z-index: 3; border-color: #fff; }
.crate b { font-size: 16px; font-weight: 800; }
.crate small { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.crate .vit { font-size: 8.5px; letter-spacing: 1px; opacity: .85; }
.crate em { position: absolute; right: 4px; bottom: 2px; font-size: 9.5px; font-style: normal; font-weight: 700; opacity: .8; }
.crate .pos { position: absolute; left: 4px; top: 2px; font-size: 9px; font-style: normal; font-weight: 700; opacity: .6; }
.pmap.sz-s .crate b { font-size: 12px; } .pmap.sz-s .crate .vit { display: none; } .pmap.sz-s .crate small { font-size: 8px; letter-spacing: 0; }
.pmap.sz-l .crate b { font-size: 20px; } .pmap.sz-l .crate small { font-size: 12px; } .pmap.sz-l .crate .vit { font-size: 10px; }
.g-market, .sw.g-market { background: #4fd1c5; } .g-jumbo, .sw.g-jumbo { background: #f2c230; }
.g-cull, .sw.g-cull { background: #a8b7c4; } .g-soft_shell, .sw.g-soft_shell { background: #f08fb0; } .g-mixed, .sw.g-mixed { background: #ff9f5a; } .g-none, .sw.g-none { background: #d6dde3; }
.crate.aging { outline: 3px solid #f2992e; outline-offset: -1px; }
.crate.lowv::after { content: "!"; position: absolute; right: 3px; top: 1px; width: 15px; height: 15px; border-radius: 50%; background: #ff4d4d; color: #fff; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.crate.empty { background: transparent; border: 2px dashed rgba(150,210,225,.35); color: var(--mut); font-size: 18px; font-weight: 700; box-shadow: none; }
.crate.empty:hover { background: rgba(53,211,220,.12); border-color: var(--em); color: var(--em); }
.pmap.moving .crate:not(.empty) { opacity: .5; }
.pmap.moving .crate.empty { border-color: var(--em); color: var(--em); animation: pmpulse 1.2s ease-in-out infinite; }
@keyframes pmpulse { 50% { background: rgba(53,211,220,.18); } }
.crate.flash { animation: pmflash .7s ease-in-out 5; z-index: 4; }
@keyframes pmflash { 50% { transform: scale(1.2); box-shadow: 0 0 0 5px #fff, 0 0 18px 8px var(--em); } }
.pm-empty { padding: 30px; text-align: center; }
.movebar { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 14px; margin: 0 0 12px; border-radius: 10px; background: var(--em); color: #04141c; font-weight: 700; }
.pm-tip { position: fixed; z-index: 70; width: 290px; pointer-events: none; padding: 10px 12px; border-radius: 10px; background: #0b2635; color: #e6f1f5;
          border: 1px solid var(--em); box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 13px; }
.pm-tip .tt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
table.kv { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.kv th { width: 38%; text-align: left; font-weight: 600; color: var(--mut); padding: 3px 8px 3px 0; text-transform: none; letter-spacing: 0; background: none; font-size: 13px; }
table.kv td { padding: 3px 0; border: 0; }
.modal-box.wide { width: min(560px, 100%); max-height: 92vh; overflow: auto; }
.modal-box .mh { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.modal-box .mh h2 { margin: 0; }
.modal-box .mbtns { margin-top: 12px; }
.modal-box .hist { font-size: 12.5px; max-height: 150px; overflow: auto; }
.modal-box a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.vit { letter-spacing: 1px; }

/* ───── whole-pound map ───── */
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.6); }
html.wv-dark .seg { background: rgba(6,30,44,.82); border-color: var(--b); }
.seg-btn { appearance: none; border: 0; border-radius: 999px; background: transparent; color: #334155; padding: 8px 15px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
html.wv-dark .seg-btn { color: #b7cfd9; }
.seg-btn.active { background: var(--em); color: #fff; font-weight: 700; }
html.wv-dark .seg-btn.active { color: #04141c; }
.pm-floorwrap { overflow: auto; }
.pm-floorbox { position: relative; margin: 0 auto; }
.pm-floor { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 10px; }
.pm-floor.arr { background-image: linear-gradient(rgba(150,210,225,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(150,210,225,.16) 1px, transparent 1px);
                background-size: 20px 20px; outline: 2px dashed var(--em); }
.pm-tank { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
           background: rgba(6,30,44,.62); border: 2px solid rgba(150,210,225,.45); box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.pm-tank.green { border-color: #2ecc71; } .pm-tank.yellow { border-color: #f2c230; } .pm-tank.red { border-color: #ff4d4d; }
.pm-tank.arr { cursor: move; user-select: none; touch-action: none; }
.pm-th { display: flex; align-items: center; gap: 6px; padding: 4px 7px; font-size: 12px; background: rgba(0,0,0,.28); cursor: pointer; white-space: nowrap; overflow: hidden; }
.pm-th b { font-size: 14px; }
.pm-th span { color: var(--mut); font-size: 11px; margin-left: auto; }
.pm-tank.arr .pm-th { cursor: move; }
.pm-tb { flex: 1; display: flex; gap: 3px; padding: 4px; min-height: 0; }
.pm-tl { flex: 1 1 0; display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.mc { flex: 1 1 0; min-height: 3px; border-radius: 2px; display: block; }
.mc:not(.e) { cursor: pointer; border: 1px solid rgba(255,255,255,.35); }
.mc:not(.e):hover { outline: 2px solid #fff; z-index: 2; }
.mc.e { background: rgba(255,255,255,.06); border: 1px dashed rgba(150,210,225,.22); }
.mc.aging { box-shadow: inset 0 0 0 2px #f2992e; }
.mc.lowv { box-shadow: inset 0 0 0 2px #ff4d4d; }
.pm-tb.noline { align-items: center; justify-content: center; color: var(--mut); font-size: 12px; text-align: center; }
.pm-rz { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--em) 50%); border-bottom-right-radius: 8px; }
.pm-tank.arr .mc { pointer-events: none; }

.pm-tank:not(.arr) { cursor: pointer; }
.pm-tank:not(.arr):hover { box-shadow: 0 0 0 2px var(--em), 0 3px 10px rgba(0,0,0,.3); }
.mc:not(.e) { cursor: pointer; }

/* grading photos */
.phs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ph img { height: 92px; width: auto; border-radius: 8px; border: 1px solid var(--b); display: block; }
.ph:hover img { outline: 2px solid var(--em); }

/* pickups */
.pkmap { height: 460px; border-radius: 12px; overflow: hidden; border: 1px solid var(--b); z-index: 0; }
.tab-btn .badge { background: #ff4d4d; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 800; line-height: 18px; min-width: 18px; text-align: center; }
.pkgroup h3 { margin: 4px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.pkcard { background: var(--panel); border: 1px solid var(--b); border-left: 5px solid #7b8b95; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.pkcard.requested { border-left-color: #ff4d4d; } .pkcard.assigned, .pkcard.en_route { border-left-color: #f2992e; }
.pkcard.at_wharf, .pkcard.loaded { border-left-color: #35d3dc; } .pkcard.delivered { border-left-color: #2ecc71; opacity: .8; } .pkcard.cancelled { opacity: .55; }
.pkcard .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pkcard .eta { font-weight: 800; }
.pkcard .eta.late { color: #ff6b6b; } .pkcard .eta.here { color: #54e08e; }
.pkcard .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.pkcard select { width: auto; min-height: 34px; padding: 4px 8px; margin: 0; font-size: 14px; }
.truck-ico { font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.truck-lbl { background: #0b2635; color: #fff; border: 1px solid #35d3dc; border-radius: 8px; padding: 1px 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip-r { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-right: 4px; background: rgba(53,211,220,.2); }

.pkcard.pkflash { animation: pkflash 1s ease-in-out 6; box-shadow: 0 0 0 3px #f2992e; }
@keyframes pkflash { 50% { box-shadow: 0 0 0 7px rgba(242,153,46,.35); } }

.warnrow td { background: rgba(242,153,46,.12); }

/* vessel tracker (same look as the herring-survey map) */
.boat-icon { position: relative; }
.boat-icon .tag { position: absolute; left: 26px; top: 2px; white-space: nowrap; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; color: #0b1420; border: 1px solid rgba(0,0,0,.35); }
.tab-badge { display: inline-block; min-width: 18px; margin-left: 7px; padding: 1px 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.5; text-align: center; vertical-align: 1px; }
.boat-icon .tag small { display: block; font-size: 10px; font-weight: 700; opacity: .85; margin-top: -1px; }
.boat-icon.stale { opacity: .55; }
.boat-icon.focus svg { filter: drop-shadow(0 0 6px #ffff00) drop-shadow(0 0 10px #ffff00); }
.boat-icon.focus::after { content: ''; position: absolute; left: -9px; top: -9px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #ffff00; animation: focusPing 1.2s ease-out 6; }
@keyframes focusPing { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.lg-step { margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(150,210,225,.3); border-radius: 12px; }
.lg-step p { margin: 6px 0; }
.watersw { position: relative; display: inline-block; width: 58px; height: 32px; flex: 0 0 auto; }
.watersw input { opacity: 0; width: 0; height: 0; }
.watersw span { position: absolute; inset: 0; background: #5a6b75; border-radius: 32px; cursor: pointer; transition: .2s; }
.watersw span::before { content: ''; position: absolute; width: 24px; height: 24px; left: 4px; top: 4px; background: #fff; border-radius: 50%; transition: .2s; }
.watersw input:checked + span { background: #2ecc71; }
.watersw input:checked + span::before { transform: translateX(26px); }

/* drag and drop */
.pkcard[draggable="true"] { cursor: grab; }
.pkcard.dragging { opacity: .45; }
.pkdrivers { margin: 0 0 14px; }
.pkdrow { display: flex; gap: 10px; flex-wrap: wrap; }
.pkdrv { flex: 1 1 170px; min-width: 150px; border: 2px dashed rgba(150,210,225,.45); border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.04); transition: .12s; }
.pkdrv.off { opacity: .6; }
.pkdrv.over, .pkgroup.over, .crate.empty.dropover { border-color: #35d3dc; background: rgba(53,211,220,.16); box-shadow: 0 0 0 3px rgba(53,211,220,.35); }
.pkdrv b { display: block; } .pkdrv small { opacity: .75; }
.pkchips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.pkchips span { background: rgba(242,153,46,.25); border-radius: 8px; padding: 1px 7px; font-size: 12px; }
.pkgroup.waiting { border: 2px dashed transparent; border-radius: 12px; padding: 4px; }
.pkgroup.waiting.droptarget { border-color: rgba(150,210,225,.45); }
.crate[draggable="true"] { cursor: grab; }

.pkcard { cursor: pointer; }
.pkcard.sel { box-shadow: 0 0 0 3px #35d3dc; }

/* Leaflet gives its panes and controls z-index 400-1000. Without their own stacking context they sit above popups and modals (z-index 60). */
.leaflet-container { isolation: isolate; }

/* crate age: a coloured edge always; "Colour: age" paints the whole crate */
.age-0 { --ag: #22c55e; } .age-1 { --ag: #eab308; } .age-2 { --ag: #f97316; } .age-3 { --ag: #ef4444; }
.crate[class*="age-"]:not(.empty)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 6px 0 0 6px; background: var(--ag); }
.mc[class*="age-"]:not(.e) { border-left: 3px solid var(--ag); }
.by-age .crate[class*="age-"]:not(.empty), .by-age .mc[class*="age-"]:not(.e), .pm-by-age .crate[class*="age-"]:not(.empty) { background: var(--ag); color: #111; }
.by-age .crate[class*="age-"]:not(.empty)::before { display: none; }
.ag-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; font-size: 13px; }
.ag-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Light mode: things that sit on a dark background of their own keep light text; things that were light-on-dark get darker colours on the white page */
.pm-tank, .fw-menu, .fw-undo, .brand, .camwrap, .truck-lbl { --text: #e6f1f5; --mut: #a9c0cc; --b: rgba(150,210,225,0.24); color: #e6f1f5; }
.logout-btn:hover { color: #fff; }
html:not(.wv-dark) .credit { color: rgba(20,34,44,.6); }
html:not(.wv-dark) .credit a:hover { color: rgba(20,34,44,.95); }
html:not(.wv-dark) .rstrip .ov.green { color: var(--t-good); }
html:not(.wv-dark) .rstrip .ov.yellow { color: var(--t-warn); }
html:not(.wv-dark) .pkcard .eta.here { color: var(--t-good); }
html:not(.wv-dark) .pkcard .eta.late { color: var(--t-bad); }
html:not(.wv-dark) .pkdrv { border-color: #9db3c0; background: rgba(0,0,0,.025); }
html:not(.wv-dark) .pkdrv.over, html:not(.wv-dark) .pkgroup.over { background: rgba(14,116,144,.14); }
html:not(.wv-dark) .pkchips span { background: rgba(180,83,9,.16); color: var(--t-warn); }
html:not(.wv-dark) .pkgroup.waiting.droptarget { border-color: #9db3c0; }
html:not(.wv-dark) .pkcard.sel { box-shadow: 0 0 0 3px var(--em); }

/* Light mode buttons: the solid button's white text must not reach the outline (ghost) and red (danger) ones, which sit on the white page */
html:not(.wv-dark) .btn.ghost { color: var(--t-info); background: transparent; border-color: var(--t-info); }
html:not(.wv-dark) .btn.ghost:hover { background: rgba(14,116,144,.10); }
html:not(.wv-dark) .btn.danger { color: var(--t-bad); background: transparent; border-color: var(--t-bad); }
html:not(.wv-dark) .btn.danger:hover { background: rgba(185,28,28,.08); }
html:not(.wv-dark) .btn:disabled { opacity: .55; }

html:not(.wv-dark) .rstrip .ov.red { color: var(--t-bad); }
html:not(.wv-dark) .tm-dot.in, html:not(.wv-dark) .sc-dot.in { background: #15803d; }

/* Crate icons: a plastic lobster crate seen from above; the shaded part is how full it is (a full crate is about 100 lb) */
:root { --crate-body: #dfe7ec; --crate-rim: #5b7384; --crate-floor: #f7fafc; --crate-halo: #f7fafc; --crate-grip: #8da1ae; --crate-post: #c3d0d8; }
html.wv-dark { --crate-body: #24506a; --crate-rim: #a9c7d4; --crate-floor: #0e2a38; --crate-halo: #0e2a38; --crate-grip: #6f93a6; --crate-post: #3a6a84; }
.crate-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }

.cs-floor { fill: var(--crate-floor); stroke: var(--crate-rim); stroke-width: 1; stroke-opacity: .6; }
.cs-lv { fill: var(--gc, #9fb6c4); }
.cs-mesh { fill: none; stroke: var(--crate-rim); stroke-opacity: .28; stroke-width: .8; }
.cs-line { stroke: var(--text); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 3 2; }
.cs-grip { fill: var(--crate-grip); } .cs-post { fill: var(--crate-post); stroke: var(--crate-rim); stroke-opacity: .5; stroke-width: .8; }
/* grade colours the shaded level */
.crate.g-market, .fw-crate.g-market, .mc.g-market { --gc: #4fd1c5; } .crate.g-jumbo, .fw-crate.g-jumbo, .mc.g-jumbo { --gc: #f2c230; }
.crate.g-cull, .fw-crate.g-cull, .mc.g-cull { --gc: #a8b7c4; } .crate.g-soft_shell, .fw-crate.g-soft_shell, .mc.g-soft_shell { --gc: #f08fb0; }
.crate.g-mixed, .fw-crate.g-mixed, .mc.g-mixed { --gc: #ff9f5a; } .crate.g-none, .fw-crate.g-weighed, .fw-crate.g-new, .mc.g-none { --gc: #9fb6c4; }
.crate.g-egg_bearing, .fw-crate.g-egg_bearing { --gc: #4ade80; } .fw-crate.g-dead { --gc: #ff6b6b; }
/* the pound-map crate: no flat colour block any more, the icon is the crate */
.crate:not(.empty) { background: none !important; border-color: transparent; box-shadow: none; color: var(--text); }
.crate:not(.empty) > b, .crate:not(.empty) > small, .crate:not(.empty) > .vit { position: relative; z-index: 1; text-shadow: 0 0 3px var(--crate-halo), 0 0 3px var(--crate-halo), 0 0 5px var(--crate-halo); }
.crate:not(.empty) > .pos, .crate:not(.empty) > em { z-index: 1; text-shadow: 0 0 3px var(--crate-halo); opacity: 1; }
.crate:not(.empty):hover { border-color: transparent; filter: drop-shadow(0 0 4px var(--em)); }
.crate:not(.empty)::before { z-index: 2; }
.by-age .crate[class*="age-"]:not(.empty) { background: none !important; }


/* the small crates on the whole-pound view are shaded from the bottom too */
.mc:not(.e) { background: linear-gradient(to top, var(--gc, #d6dde3) var(--lv, 100%), rgba(128,150,160,.22) var(--lv, 100%)) !important; }
.by-age .mc[class*="age-"]:not(.e) { background: var(--ag) !important; }
/* the Workflow dock crates */
.fw-crate { position: relative; background: none !important; border-color: transparent !important; color: var(--text); }
.fw-crate > b, .fw-crate > i { position: relative; z-index: 1; text-shadow: 0 0 3px var(--crate-halo), 0 0 3px var(--crate-halo), 0 0 5px var(--crate-halo); }
.fw-crate.sel { outline: 3px solid var(--em); outline-offset: 1px; }


/* the crates are grey plastic in either theme: dark text on a white halo, like the icon examples */
.crate:not(.empty) { color: #0b1a22; }
.crate:not(.empty) > b, .crate:not(.empty) > small, .crate:not(.empty) > .vit, .crate:not(.empty) > .pos, .crate:not(.empty) > em { text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff; }
.fw-crate { color: #0b1a22; }
.fw-crate > b, .fw-crate > i { text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff; }
.crate:not(.empty) > b { font-size: 15px; }
.crate:not(.empty) > small { font-size: 9px; letter-spacing: .05em; }
.by-age .crate[class*="age-"] .cs-door { fill: var(--ag); }
.cs-lvl { stroke: var(--gc, #9fb6c4); }
.cs-body { }
.cd-warn { display: grid; gap: 6px; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--t-warn); background: rgba(245,158,11,.14); }
.cd-warn p { margin: 0; font-size: 13.5px; color: var(--text); }
.pm-legend { margin: 0 0 10px; padding: 6px 12px; border: 1px solid var(--b); border-radius: 10px; background: var(--panel); font-size: 13px; }
.pm-legend summary { cursor: pointer; font-weight: 700; padding: 2px 0; }
.pm-legend .lg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; padding: 8px 0 4px; }
.pm-legend h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.lg-i { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; line-height: 1.3; }
.lg-sw { flex: 0 0 auto; width: 26px; height: 14px; border-radius: 3px; border: 1px solid rgba(128,150,160,.6); background: var(--gc, var(--ag)); }
.lg-ic { position: relative; flex: 0 0 auto; width: 34px; height: 50px; display: block; }
.lg-tx { flex: 0 0 auto; min-width: 42px; font-weight: 800; text-align: center; padding: 1px 4px; border-radius: 4px; background: #c3c8cc; color: #0b1a22; }
.lg-bang { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: #ff4d4d; color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.lg-band { flex: 0 0 auto; width: 26px; height: 16px; border-radius: 5px; border: 3px solid #f2992e; }
.lg-empty { flex: 0 0 auto; width: 26px; height: 16px; border-radius: 5px; border: 2px dashed rgba(150,210,225,.6); text-align: center; line-height: 12px; color: var(--mut); }
.pm-legend .small { margin: 4px 0 0; }
.lg-sw.g-market { --gc: #4fd1c5; } .lg-sw.g-jumbo { --gc: #f2c230; } .lg-sw.g-cull { --gc: #a8b7c4; } .lg-sw.g-soft_shell { --gc: #f08fb0; }
.lg-sw.g-mixed { --gc: #ff9f5a; } .lg-sw.g-egg_bearing { --gc: #4ade80; } .lg-sw.g-none { --gc: #9fb6c4; }
.sc-crate .cs-lv, .fw-crate .cs-lv { fill: var(--gc, #4fd1c5); }
.sc-crate { --gc: #4fd1c5; }
.truck-ico { background: none; border: 0; } .truck-ico img { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }

/* header lobsters, claws pointing in towards the title */
.hd-title { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hd-lob { height: 34px; width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); pointer-events: none; }
.hd-lob.flip { transform: scaleX(-1); }
@media (max-width: 700px) { .hd-lob { height: 24px; } .hd-title { gap: 8px; } }
.hd-lob { height: 68px; } @media (max-width: 700px) { .hd-lob { height: 44px; } }

/* crates from the weigh-in in progress, lit up on the tank map */
.crate.hlb { outline: 4px solid #fde047; outline-offset: 2px; z-index: 3; position: relative; animation: hlbpulse 1.4s ease-in-out infinite; box-shadow: 0 0 14px 4px rgba(253,224,71,.8); }
@keyframes hlbpulse { 50% { box-shadow: 0 0 6px 1px rgba(253,224,71,.5); } }

/* tank popup: camera left; readings and small summary tiles to its right */
.tk-top { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.tk-right { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-right .pm-water { padding: 6px 10px; }
.kpis.tk-mini { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.kpis.tk-mini .kpi { padding: 3px 9px; min-width: 0; flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; border-radius: 8px; }
.kpis.tk-mini .kpi .v { font-size: 15px; line-height: 1.1; } .kpis.tk-mini .kpi .l { font-size: 10.5px; margin: 0; }

/* clickable aging / low vitality filters in the tank popup */
.kpis.tk-mini .kpi-f { font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--b); background: transparent; }
.kpis.tk-mini .kpi-f:hover { border-color: var(--em); } .kpis.tk-mini .kpi-f.on { border-color: #fde047; box-shadow: 0 0 0 2px rgba(253,224,71,.4); background: rgba(253,224,71,.12); }
.crate.tkdim { opacity: .28; filter: grayscale(.5); transition: opacity .15s; }
/* header: brand left, the title (lobsters and all) in the true centre of the page, the refresh time right */
.header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.header > :first-child { justify-self: start; }
.header > #live { justify-self: end; }
.header .hd-title { justify-self: center; text-align: center; }
@media (max-width: 900px) { .header { display: flex; justify-content: center; } .header .hd-title { order: -1; width: 100%; } }
/* header: brand + refresh time left, title centre, the page buttons right */
.hd-left { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; }
.hd-left #live { white-space: nowrap; }
.header .hd-right { justify-self: end; }
.wv-tabrow .tabs { flex: 1 1 100%; }
@media (max-width: 900px) { .header .hd-right { width: 100%; display: flex; justify-content: center; } }
/* sign-in page: a big lobster, lying sideways, in place of the heading */
body.login .login-lobster { display: block; width: min(230px, 100%); height: auto; margin: 4px auto 14px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
body.login .brand .by img { height: 38px; }
/* header on a medium window: there is no room for brand, title and buttons side by side, so the title drops to its own centred row */
@media (min-width: 901px) and (max-width: 1680px) {
  .header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .header .hd-left { order: 1; } .header .hd-right { order: 2; margin-left: auto; width: auto; } .header .hd-title { order: 3; width: 100%; justify-self: auto; }
}
@media (min-width: 1681px) { .header { grid-template-columns: auto 1fr auto; column-gap: 16px; } }