/* Logistics additions on top of the shared portal app.css. */
.wrap.wide { max-width: 1320px; }
.flash.error { background: #fbecea; color: var(--danger); border-color: #efcfc7; }
.flash.ok { background: #eef2ec; color: var(--sage-dk); }
.btn.big { padding: 11px 24px; font-size: 15px; }
.login-card { text-align: center; padding: 40px 28px; }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0 0 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .n { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: 12px; font-weight: 500; }
.kpi.alert .n { color: var(--danger); }
@media screen and (max-width: 820px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media screen and (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

.pill.overdue { background: #f6e3dd; color: var(--danger); }
.pill.awaiting_docs { background: #efeeea; color: var(--muted); }
.pill.awaiting_ack, .pill.awaiting_schedule { background: #f6efe1; color: var(--amber); }
.pill.in_production { background: #eaf0f4; color: var(--blue); }
.pill.shipping { background: #eaf0f4; color: var(--blue); }
.pill.complete { background: #e3efe4; color: var(--sage-dk); }
.pill.booked { background: #efeeea; color: var(--ink-soft); }
.pill.sailed { background: #eaf0f4; color: var(--blue); }
.pill.arrived, .pill.cleared, .pill.out_for_delivery { background: #f6efe1; color: var(--amber); }
.pill.delivered { background: #fbecea; color: var(--danger); }
.pill.received { background: #e3efe4; color: var(--sage-dk); }

.bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #efeeea; min-width: 120px; }
.bar span { display: block; height: 100%; }
.bar .rcv { background: var(--sage); }
.bar .mov { background: var(--blue); }
.bar .bkd { background: #b9c4cf; }
.barlegend { font-size: 11px; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px; }
.form-grid label, .inline-form label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.form-grid input, .form-grid select, .form-grid textarea, .inline-form input, .inline-form select {
  width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff; }
.form-grid .full { grid-column: 1 / -1; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.inline-form > * { flex: 1 1 140px; }
.inline-form .btn { flex: 0 0 auto; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.gatebox { background: #f6f5f1; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--ink-soft); margin: 10px 0 0; }
.gatebox ul { margin: 6px 0 0; padding-left: 18px; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.steps span { padding: 4px 10px; border-radius: 99px; font-size: 12px; background: #efeeea; color: var(--muted); }
.steps span.done { background: #e3efe4; color: var(--sage-dk); }
.steps span.now { background: var(--ink); color: #fff; }
.clockdocs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.clockdocs span { padding: 4px 10px; border-radius: 8px; font-size: 12px; border: 1px solid var(--line); }
.clockdocs span.have { background: #eef2ec; color: var(--sage-dk); border-color: #d5e2d2; }
.clockdocs span.miss { background: #fbecea; color: var(--danger); border-color: #efcfc7; }
.internal { color: var(--amber); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ── map ── */
.mapwrap { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 18px; }
.mapstage { position: relative; width: 100%; }
.mapstage svg.overlay { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; }
.mapstage svg.overlay.dragging { cursor: grabbing; }
.sea { fill: #dde6ec; }
.route { fill: none; stroke-linecap: round; }
.route.done { stroke: #5b7693; opacity: .9; }
.route.todo { stroke: #7f97ae; animation: flow 1.4s linear infinite; }
.route.air { stroke: #8f7bb0; }
.route.planned { stroke: #9aa1ab; opacity: .8; }
.route.sel { stroke: var(--ink); opacity: 1; }
@keyframes flow { to { stroke-dashoffset: calc(-1 * var(--dash, 10px)); } }
.road { stroke: var(--amber); }
.port { fill: #7d8592; stroke: #fff; stroke-width: .6; }
.portlabel { font-family: Inter, sans-serif; font-weight: 500; fill: #545b68; paint-order: stroke; stroke: rgba(241,239,233,.85); stroke-width: 2.5px; }
.regionmark { fill: var(--ink); }
.regionglyph { fill: #fff; }
.regionname { font: 700 13px Inter, sans-serif; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; }
.regionsub { font: 600 10.5px Inter, sans-serif; fill: var(--ink-soft); text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; }
.site { fill: var(--sage-dk); stroke: #fff; }
.site.HND { fill: var(--sage); }
.sitelabel { font-family: Inter, sans-serif; font-weight: 700; fill: var(--sage-dk); paint-order: stroke; stroke: rgba(255,255,255,.8); stroke-width: 3px; }
.boat { cursor: pointer; outline: none; }
.boat .hit { fill: transparent; }
.boat .icon { fill: #4f6c8a; stroke: #fff; stroke-width: 1.3; }
.boat.w-origin .icon { fill: #8a8f9c; }
.boat.w-port .icon, .boat.w-road .icon { fill: var(--amber); }
.boat.w-dock .icon { fill: var(--danger); }
.boat.soon .icon { fill: #2f6f8f; }
.boat:hover .icon, .boat:focus .icon, .boat.sel .icon { stroke: var(--ink); stroke-width: 2; }
.boat .badge { fill: var(--ink); }
.boat.sel .badge { fill: var(--danger); }
.boat .badgetext { font: 700 10px Inter, sans-serif; fill: #fff; text-anchor: middle; }
.boat .pulse { fill: none; stroke: #2f6f8f; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }
.insetframe { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; }
.insetsrc { fill: none; stroke: var(--ink-soft); stroke-width: .8; stroke-dasharray: 2 2; }
.insetlead { stroke: var(--ink-soft); stroke-width: .6; stroke-dasharray: 2 3; }
.insetcap { font-family: Inter, sans-serif; font-weight: 600; fill: var(--ink-soft); }
.mapviews { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; flex-wrap: wrap; background: rgba(255,254,251,.92);
            border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: var(--shadow); }
.mapviews button { border: 0; background: none; font: 600 12px Inter, sans-serif; color: var(--ink-soft); padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.mapviews button.on { background: var(--ink); color: #fff; }
.maphint { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: var(--muted); pointer-events: none; }
.maplegend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 14px; font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line); background: var(--surface); }
.maplegend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg.boat { background: #4f6c8a; } .lg.soon { background: #2f6f8f; box-shadow: 0 0 0 3px rgba(47,111,143,.25); } .lg.origin { background: #8a8f9c; }
.lg.port { background: var(--amber); } .lg.road { background: var(--amber); opacity: .6; } .lg.dock { background: var(--danger); }
.mappanel { position: absolute; top: 12px; right: 12px; width: 330px; max-height: calc(100% - 64px); overflow: auto;
            background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(31,35,48,.14); padding: 16px; }
.panelclose { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer; }
.panelref { font-size: 18px; font-weight: 700; }
.panelstatus { display: inline-block; margin: 4px 0 10px; font-size: 12px; font-weight: 600; color: var(--blue); }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid #f0eee8; }
.kv .k { color: var(--muted); }
.progress { height: 6px; background: #efeeea; border-radius: 99px; margin: 10px 0 4px; overflow: hidden; }
.progressbar { height: 100%; background: #4f6c8a; }
.paneltable { margin: 10px 0 12px; }
.paneltable .pn { font-weight: 600; }
.paneltable .desc { color: var(--muted); font-size: 11.5px; }
@media screen and (max-width: 700px) { .mappanel { position: static; width: auto; margin: 10px; } .maphint { display: none; } }

/* ── wall display ── */
body.display-mode { background: #f1efe9; }
body.display-mode .wrap { max-width: none; margin: 0; padding: 14px 18px; }
.displayhead { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.displayhead h1 { font-size: 24px; }
.mapwrap.display .mappanel { width: 380px; font-size: 15px; }
.arrivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.arrival { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.arrival .r { font-weight: 700; } .arrival .d { color: var(--ink-soft); font-size: 13px; }

.insetframe { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; }
.insetsea { fill: #f1efe9; }
.insetsrc { fill: none; stroke: var(--ink-soft); stroke-width: .8; stroke-dasharray: 2 2; }
.insetlead { stroke: var(--ink-soft); stroke-width: .6; stroke-dasharray: 2 3; }
.insetcap { font: 600 11px Inter, sans-serif; fill: var(--ink-soft); }
td.nowrap, .nowrap { white-space: nowrap; }

.pill.demo { background: #ede7f3; color: #6d5a86; }

/* ── workflow ── */
.wf-card { padding: 0; }
.wf-scroll { overflow-x: auto; padding: 16px; }
.wf-grid { display: grid; gap: 8px 8px; min-width: 1020px; position: relative; }
.wf-colhead { position: relative; display: flex; justify-content: center; align-items: center; }
.wf-colhead span { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
                   display: grid; place-items: center; position: relative; z-index: 1; }
.wf-colhead::after { content: ""; position: absolute; left: 50%; right: -50%; top: 50%; border-top: 2px solid var(--ink-soft); }
.wf-colhead::before { content: ""; position: absolute; right: -54%; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid var(--ink-soft); z-index: 1; }
.wf-colhead.last::after, .wf-colhead.last::before { display: none; }
.wf-lanehead { display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; border-radius: 10px; font-size: 13px; z-index: 1; }
.wf-lanehead span { font-size: 11.5px; color: var(--ink-soft); }
.wf-lanebg { border-radius: 10px; opacity: .45; z-index: 0; min-height: 74px; }
.lane-ops.wf-lanehead, .lane-ops.wf-lanebg { background: #e7efe6; }
.lane-logistics.wf-lanehead, .lane-logistics.wf-lanebg { background: #e4ebf2; }
.lane-portal.wf-lanehead, .lane-portal.wf-lanebg { background: #efeae0; }
.lane-dock.wf-lanehead, .lane-dock.wf-lanebg { background: #f3e6e2; }
.wf-lanehead { opacity: 1 !important; }
.wf-box { position: relative; z-index: 1; margin: 8px 0; display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1.5px solid var(--line);
          border-radius: 10px; padding: 8px 8px 7px; color: var(--ink); box-shadow: var(--shadow); min-height: 58px; }
.wf-box:hover { text-decoration: none; border-color: var(--ink-soft); }
.wf-box.lane-ops { border-left: 5px solid var(--sage); }
.wf-box.lane-logistics { border-left: 5px solid var(--blue); }
.wf-box.lane-dock { border-left: 5px solid var(--danger); }
.wf-box.critical { border-color: var(--ink); border-width: 2px; }
.wf-box.critical.lane-ops { border-left: 5px solid var(--sage); }
.wf-box.critical.lane-logistics { border-left: 5px solid var(--blue); }
.wf-box.critical.lane-dock { border-left: 5px solid var(--danger); }
.wf-n { font-size: 11px; font-weight: 800; color: var(--muted); }
.wf-t { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.wf-due { font-size: 11px; font-weight: 600; color: var(--amber); }
.wf-alert { z-index: 1; align-self: center; justify-self: center; display: flex; align-items: center; gap: 4px; font-size: 10.5px; line-height: 1.2; font-weight: 600; color: var(--amber);
            background: var(--surface); border: 1px solid #e7dcbf; border-radius: 99px; padding: 4px 9px; margin: 8px 0; max-width: 100%; }
.wf-alert svg { width: 14px; height: 14px; flex: none; }
.wf-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); align-items: center; }
.wf-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--ink); }
.wf-key.due { border-color: var(--amber); background: #f6efe1; }
.wf-owners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wf-owners p { margin: 0; font-size: 13px; color: var(--ink-soft); }
@media screen and (max-width: 900px) { .wf-owners { grid-template-columns: 1fr; } }
.wf-step { border-left: 5px solid var(--line); scroll-margin-top: 70px; }
.wf-step.lane-ops { border-left-color: var(--sage); }
.wf-step.lane-logistics { border-left-color: var(--blue); }
.wf-step.lane-dock { border-left-color: var(--danger); }
.wf-stephead { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.wf-stephead h2 { margin: 0; font-size: 17px; }
.wf-bignum { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.wf-owner { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.wf-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.wf-cols ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.wf-cols li { margin: 0 0 5px; }
.wf-gate li::marker { content: "\25A2  "; }
@media screen and (max-width: 800px) { .wf-cols { grid-template-columns: 1fr; } }
@media print { .topbar, .no-print { display: none; } .wf-scroll { overflow: visible; } .wf-grid { min-width: 0; } .wf-step { break-inside: avoid; } }