/* ============================================================================
   FOLLOW-UP TASKS (js/follow-up-tasks.js) — Shipments Register, Poeldijk

   Everything is prefixed fut-. Colours are declared as --fut-* tokens on the
   module's own roots and applied with !important, because the light theme
   carries blanket rules ([data-theme="light"] div {background:inherit},
   button {background:#fff !important; ...}) that would otherwise turn the
   panel see-through and flatten every button. The dark values are the default
   (the app's default theme); the light block below overrides the tokens only.

   Look approved on the mockup: navy header, grey ground, white cards, amber as
   the accent (count chip, active switch, floating button), purple for Missing.
   ============================================================================ */
.fut-panel.fut-panel.fut-panel, .fut-button.fut-button.fut-button, .fut-ov.fut-ov.fut-ov, .fut-thread.fut-thread.fut-thread, .fut-miss.fut-miss.fut-miss, .fut-tabs.fut-tabs.fut-tabs, .fut-regtab.fut-regtab.fut-regtab,
.fut-tl.fut-tl.fut-tl, .fut-rps.fut-rps.fut-rps, .fut-rp.fut-rp.fut-rp, .fut-target.fut-target.fut-target {
    --fut-surface: #121820; --fut-surface2: #1a222d; --fut-ground: #0c1117; --fut-hover: #232d3b;
    --fut-line: #2a3545; --fut-line2: #3d4f66;
    --fut-ink: #e6edf3; --fut-ink2: #b6c2cf; --fut-muted: #8b949e;
    --fut-navy1: #101d36; --fut-navy2: #1a3156;
    --fut-myo: #24508c; --fut-myo-line: #3d6fb3;
    --fut-amber: #f59e0b; --fut-amber-strong: #fdba74; --fut-amber-bg: rgba(245, 158, 11, .14); --fut-amber-ink: #2a1700;
    --fut-ok: #22c55e; --fut-ok-bg: rgba(34, 197, 94, .16);
    --fut-warn: #facc15; --fut-warn-bg: rgba(250, 204, 21, .14);
    --fut-bad: #ef4444; --fut-bad-bg: rgba(239, 68, 68, .16);
    --fut-purple: #7c5fd0; --fut-purple-bg: rgba(168, 85, 247, .16);
    --fut-pri: #f97316; --fut-pri2: #c2410c;
    --fut-shadow: 0 14px 40px rgba(0, 0, 0, .55);
    --fut-skel1: #1c2633; --fut-skel2: #2b394b;
    --fut-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fut-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --fut-disp: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
[data-theme="light"] .fut-panel.fut-panel.fut-panel, [data-theme="light"] .fut-button.fut-button.fut-button, [data-theme="light"] .fut-ov.fut-ov.fut-ov,
[data-theme="light"] .fut-thread.fut-thread.fut-thread, [data-theme="light"] .fut-miss.fut-miss.fut-miss, [data-theme="light"] .fut-tabs.fut-tabs.fut-tabs,
[data-theme="light"] .fut-regtab.fut-regtab.fut-regtab, [data-theme="light"] .fut-tl.fut-tl.fut-tl, [data-theme="light"] .fut-rps.fut-rps.fut-rps,
[data-theme="light"] .fut-rp.fut-rp.fut-rp, [data-theme="light"] .fut-target.fut-target.fut-target {
    --fut-surface: #ffffff; --fut-surface2: #eef4f8; --fut-ground: #e7ebef; --fut-hover: #e6f3f8;
    --fut-line: #d6e2ea; --fut-line2: #b9cedb;
    --fut-ink: #102033; --fut-ink2: #33465a; --fut-muted: #536579;
    --fut-navy1: #0b2545; --fut-navy2: #16386b;
    --fut-myo: #16386b; --fut-myo-line: #16386b;
    --fut-amber-strong: #b45309; --fut-amber-bg: #fff5e1;
    --fut-ok: #2c8c62; --fut-ok-bg: #e3f3eb;
    --fut-warn: #c47a14; --fut-warn-bg: #faf1de;
    --fut-bad: #c94136; --fut-bad-bg: #f8e4e1;
    --fut-purple: #6a59b0; --fut-purple-bg: #efecf8;
    --fut-pri: #0f7ea2; --fut-pri2: #0b6d8e;
    --fut-shadow: 0 14px 38px rgba(23, 45, 64, .16);
    --fut-skel1: #e2e8ee; --fut-skel2: #f3f6f9;
}

/* ---------- floating panel ---------- */
.fut-panel.fut-panel.fut-panel {
    position: fixed; z-index: 990; right: 16px; top: 56px; bottom: 148px; width: 372px; max-width: calc(100vw - 32px);
    display: none; flex-direction: column; overflow: hidden;
    background: var(--fut-surface) !important; color: var(--fut-ink) !important;
    border: 1px solid var(--fut-navy1) !important; border-radius: 12px; box-shadow: var(--fut-shadow);
    font-family: var(--fut-sans); font-size: 13px; line-height: 1.4;
}
.fut-panel.fut-panel.fut-panel.fut-open { display: flex !important; }
.fut-panel.fut-panel.fut-panel.fut-hello { animation: fut-hello .9s ease 1; }
@keyframes fut-hello { 0% { transform: translateX(40px); opacity: 0; } 60% { box-shadow: 0 0 0 5px rgba(22, 56, 107, .3), var(--fut-shadow); } }
.fut-panel.fut-panel.fut-panel * { box-sizing: border-box; }
.fut-hd.fut-hd.fut-hd {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none;
    background: linear-gradient(135deg, var(--fut-navy1), var(--fut-navy2)) !important; color: #fff !important;
}
.fut-hd.fut-hd.fut-hd b { font-family: var(--fut-disp); font-size: 15px; color: #fff !important; background: transparent !important; }
.fut-cnt.fut-cnt.fut-cnt {
    font: 700 11px var(--fut-mono); border-radius: 10px; padding: 1px 8px;
    background: var(--fut-amber) !important; color: var(--fut-amber-ink) !important;
}
.fut-panel.fut-panel.fut-panel .fut-min {
    margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, .14) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .25) !important;
}
.fut-panel.fut-panel.fut-panel .fut-min:hover { background: rgba(255, 255, 255, .26) !important; }
.fut-bar.fut-bar.fut-bar {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px; flex: none;
    background: var(--fut-surface) !important; border-bottom: 1px solid var(--fut-line2);
}
.fut-seg.fut-seg.fut-seg { display: flex; flex: 1; background: transparent !important; }
.fut-panel.fut-panel.fut-panel .fut-seg button {
    flex: 1; padding: 4px 6px; font: 600 11px var(--fut-sans); cursor: pointer;
    background: var(--fut-surface) !important; color: var(--fut-ink2) !important; border: 1px solid var(--fut-line2) !important;
}
.fut-panel.fut-panel.fut-panel .fut-seg button:first-child { border-radius: 6px 0 0 6px; }
.fut-panel.fut-panel.fut-panel .fut-seg button:last-child { border-radius: 0 6px 6px 0; border-left: 0 !important; }
.fut-panel.fut-panel.fut-panel .fut-seg button[aria-pressed="true"] {
    background: var(--fut-amber) !important; border-color: var(--fut-amber) !important; color: var(--fut-amber-ink) !important;
}
.fut-pager.fut-pager.fut-pager { display: flex; align-items: center; gap: 4px; white-space: nowrap; background: transparent !important;
    font: 600 10.5px var(--fut-mono); color: var(--fut-ink2) !important; font-variant-numeric: tabular-nums; }
.fut-pager.fut-pager.fut-pager span { color: var(--fut-ink2) !important; background: transparent !important; }
.fut-panel.fut-panel.fut-panel .fut-pager button {
    width: 22px; height: 22px; border-radius: 6px; padding: 0; font-size: 14px; line-height: 1; cursor: pointer;
    background: var(--fut-surface) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-line2) !important;
}
.fut-panel.fut-panel.fut-panel .fut-pager button:hover:not(:disabled) { border-color: var(--fut-amber) !important; background: var(--fut-amber-bg) !important; }
.fut-panel.fut-panel.fut-panel .fut-pager button:disabled { opacity: .35; cursor: default; }
.fut-body.fut-body.fut-body {
    flex: 1; min-height: 0; overflow: auto; padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 16px;
    background: var(--fut-ground) !important;
}
.fut-teamcap.fut-teamcap.fut-teamcap {
    font: 600 10.5px var(--fut-sans); border-radius: 7px; padding: 5px 9px; margin-bottom: -8px;
    background: var(--fut-surface) !important; color: var(--fut-ink2) !important; border: 1px solid var(--fut-line2);
}
.fut-search.fut-search.fut-search { position: relative; display: flex; align-items: center; background: transparent !important; }
.fut-search.fut-search.fut-search input {
    width: 100%; height: 32px; font: 500 12.5px var(--fut-sans); border-radius: 8px; padding: 6px 30px 6px 10px;
    background: var(--fut-surface) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-line2) !important;
}
.fut-search.fut-search.fut-search input:focus { outline: 0; border-color: var(--fut-amber) !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); }
.fut-panel.fut-panel.fut-panel .fut-clr {
    position: absolute; right: 6px; width: 20px; height: 20px; border-radius: 50%; padding: 0; line-height: 1; cursor: pointer;
    background: var(--fut-surface2) !important; color: var(--fut-ink2) !important; border: 0 !important;
}
.fut-sugg.fut-sugg.fut-sugg {
    display: flex; flex-direction: column; overflow: hidden; border-radius: 7px; z-index: 6;
    background: var(--fut-surface) !important; border: 1px solid var(--fut-amber); box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.fut-sugg.fut-sugg.fut-sugg[hidden] { display: none !important; }
.fut-search.fut-search.fut-search .fut-sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; }
.fut-sugg-float.fut-sugg-float.fut-sugg-float { position: absolute; }
.fut-panel.fut-panel.fut-panel .fut-sugg button, .fut-ov.fut-ov.fut-ov .fut-sugg button {
    display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 9px; cursor: pointer;
    font: 500 12.5px var(--fut-sans);
    background: var(--fut-surface) !important; color: var(--fut-ink) !important;
    border: 0 !important; border-top: 1px solid var(--fut-line) !important; border-radius: 0;
}
.fut-panel.fut-panel.fut-panel .fut-sugg button:first-child, .fut-ov.fut-ov.fut-ov .fut-sugg button:first-child { border-top: 0 !important; }
.fut-panel.fut-panel.fut-panel .fut-sugg button.fut-on, .fut-ov.fut-ov.fut-ov .fut-sugg button.fut-on { background: var(--fut-amber-bg) !important; font-weight: 700; }
.fut-sugg.fut-sugg.fut-sugg b { font-family: var(--fut-mono); font-size: 11.5px; color: var(--fut-ink) !important; background: transparent !important; }
.fut-sugg.fut-sugg.fut-sugg span { color: var(--fut-muted) !important; background: transparent !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fut-sugg.fut-sugg.fut-sugg kbd {
    margin-left: auto; font: 600 9.5px var(--fut-mono); border-radius: 4px; padding: 0 5px;
    background: var(--fut-surface2) !important; color: var(--fut-muted) !important; border: 1px solid var(--fut-line2);
}
.fut-empty.fut-empty.fut-empty { text-align: center; padding: 18px 8px; font-size: 12px; color: var(--fut-muted) !important; background: transparent !important; }
.fut-donecap.fut-donecap.fut-donecap { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 0 2px; margin-bottom: -8px;
    color: var(--fut-ink2) !important; background: transparent !important; }

/* shipment card */
.fut-grp.fut-grp.fut-grp {
    position: relative; border-radius: 8px; flex: none;
    background: var(--fut-surface) !important; border: 1px solid var(--fut-line2); box-shadow: 0 1px 2px rgba(11, 37, 69, .10);
}
.fut-by.fut-by.fut-by {
    position: absolute; top: -9px; right: 10px; z-index: 1; white-space: nowrap;
    font: 400 9px/15px var(--fut-sans); border-radius: 9px; padding: 0 7px;
    background: var(--fut-surface) !important; color: var(--fut-muted) !important; border: 1px solid var(--fut-line2); box-shadow: 0 1px 2px rgba(42, 23, 0, .12);
}
.fut-by.fut-by.fut-by b { font-weight: 700; color: var(--fut-ink) !important; background: transparent !important; }
.fut-gh.fut-gh.fut-gh {
    display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px 7px 0 0; min-width: 0;
    background: var(--fut-surface) !important; border-bottom: 1px solid var(--fut-line);
}
.fut-myo.fut-myo.fut-myo {
    font: 700 10.5px/1.5 var(--fut-mono); border-radius: 4px; padding: 1px 6px; white-space: nowrap; flex: none; text-decoration: none;
    background: var(--fut-myo) !important; color: #fff !important; border: 1px solid var(--fut-myo-line) !important;
}
.fut-myo.fut-myo.fut-myo:hover { text-decoration: underline; filter: brightness(1.15); }
.fut-cu.fut-cu.fut-cu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 11.5px;
    color: var(--fut-ink) !important; background: transparent !important; }
.fut-eta.fut-eta.fut-eta { font: 500 10px var(--fut-mono); white-space: nowrap; color: var(--fut-muted) !important; background: transparent !important; }
.fut-eta-soon.fut-eta-soon.fut-eta-soon { color: var(--fut-bad) !important; font-weight: 700; }
.fut-eta-arr.fut-eta-arr.fut-eta-arr { font: 700 10.5px var(--fut-sans); border-radius: 9px; padding: 1px 8px; background: var(--fut-ok-bg) !important; color: var(--fut-ok) !important; }
.fut-trow.fut-trow.fut-trow {
    display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; font-size: 13px;
    background: var(--fut-surface) !important; border-top: 1px solid var(--fut-line);
}
.fut-gh.fut-gh.fut-gh + .fut-trow { border-top: 0; }
.fut-trow.fut-trow.fut-trow:last-child { border-radius: 0 0 7px 7px; }
.fut-trow.fut-trow.fut-trow:hover { background: var(--fut-amber-bg) !important; }
.fut-trow.fut-trow.fut-trow.fut-just { animation: fut-just 2.2s ease 1; }
@keyframes fut-just { 0%, 55% { box-shadow: inset 0 0 0 100px var(--fut-ok-bg); } 100% { box-shadow: inset 0 0 0 100px transparent; } }
.fut-ck.fut-ck.fut-ck {
    width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 2px; display: grid; place-items: center;
    font-size: 10px; line-height: 1; cursor: default;
    background: var(--fut-surface) !important; color: #fff !important; border: 1.5px solid var(--fut-amber);
}
.fut-done.fut-done.fut-done .fut-ck { background: var(--fut-ok) !important; border-color: var(--fut-ok); }
.fut-panel.fut-panel.fut-panel .fut-ck-add {
    padding: 0; font-weight: 700; font-size: 12px; cursor: pointer;
    background: var(--fut-surface) !important; color: var(--fut-muted) !important; border: 1.5px dashed var(--fut-muted) !important;
}
.fut-panel.fut-panel.fut-panel .fut-ck-add:hover { border-color: var(--fut-amber) !important; color: var(--fut-amber-strong) !important; background: var(--fut-amber-bg) !important; }
.fut-panel.fut-panel.fut-panel .fut-go {
    flex: 1; min-width: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 1px; cursor: pointer;
    background: transparent !important; border: 0 !important; color: var(--fut-ink) !important; font: inherit;
}
.fut-l.fut-l.fut-l { font-weight: 600; color: var(--fut-ink) !important; background: transparent !important; }
.fut-w.fut-w.fut-w { font-size: 11px; color: var(--fut-muted) !important; background: transparent !important; }
.fut-go.fut-go.fut-go:hover .fut-l { color: var(--fut-amber-strong) !important; text-decoration: underline; }
.fut-done.fut-done.fut-done .fut-l { text-decoration: line-through; opacity: .6; }
.fut-arrow.fut-arrow.fut-arrow { align-self: center; font-size: 12px; color: var(--fut-muted) !important; background: transparent !important; }
.fut-panel.fut-panel.fut-panel .fut-rm {
    align-self: center; flex: none; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; font-size: 12px; line-height: 1; cursor: pointer;
    background: transparent !important; color: var(--fut-muted) !important; border: 1px solid transparent !important; opacity: .55;
}
.fut-panel.fut-panel.fut-panel .fut-rm:hover { opacity: 1; border-color: var(--fut-bad) !important; color: var(--fut-bad) !important; }
.fut-panel.fut-panel.fut-panel .fut-rm.fut-armed { opacity: 1; font: 700 10px var(--fut-sans); padding: 0 7px; background: var(--fut-bad-bg) !important; color: var(--fut-bad) !important; border-color: var(--fut-bad) !important; }

.fut-dot.fut-dot.fut-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none; background: #f97316 !important; }
.fut-dot-high.fut-dot-high.fut-dot-high { background: #dc2626 !important; }
.fut-dot-low.fut-dot-low.fut-dot-low { background: #3b82f6 !important; }
.fut-age.fut-age.fut-age {
    font: 700 9.5px var(--fut-mono); border-radius: 9px; padding: 1px 7px; white-space: nowrap; flex: none; align-self: center;
    background: var(--fut-surface2) !important; color: var(--fut-muted) !important; border: 1px solid var(--fut-line);
}
.fut-age-a.fut-age-a.fut-age-a { background: var(--fut-warn-bg) !important; color: var(--fut-warn) !important; border-color: transparent; }
.fut-age-r.fut-age-r.fut-age-r { background: var(--fut-bad-bg) !important; color: var(--fut-bad) !important; border-color: transparent; }

/* ---------- floating button (compact, see-through until hovered) ---------- */
.fut-button.fut-button.fut-button {
    /* top right, directly under the 50px top menu, at the corner of the temperature tile */
    position: fixed; z-index: 990; right: 16px; top: 56px; display: flex; align-items: center; gap: 6px;
    padding: 4px 13px 4px 4px; border-radius: 999px; cursor: pointer; opacity: .5;
    /* Leaving the button: hold solid for 1.4 s, then ease to translucent over 0.9 s. */
    transition: opacity .9s ease 1.4s, box-shadow .25s ease;
    /* Appearing (panel minimised, page loaded): solid first, then settle the same way. */
    animation: fut-settle 2.6s ease 1;
    font: 600 12.5px/1.2 var(--fut-sans); letter-spacing: .01em;
    background: linear-gradient(180deg, #fdcb57 0%, #f59e0b 100%) !important; color: #2a1700 !important;
    border: 1px solid #c97a06 !important; box-shadow: 0 1px 2px rgba(42, 23, 0, .28);
}
.fut-button.fut-button.fut-button[hidden] { display: none !important; }
.fut-button.fut-button.fut-button:hover, .fut-button.fut-button.fut-button:focus-visible { opacity: 1; box-shadow: 0 3px 10px rgba(42, 23, 0, .30); transition: opacity .15s ease 0s, box-shadow .2s ease; }
@keyframes fut-settle { 0%, 60% { opacity: 1; } 100% { opacity: .5; } }
.fut-button.fut-button.fut-button:focus-visible { outline: 2px solid #2a1700; outline-offset: 3px; }
.fut-button.fut-button.fut-button.fut-ping { animation: fut-ping 1.4s ease 1; }
@keyframes fut-ping { 0%, 60% { opacity: 1; transform: translateY(3px); } }
.fut-bi.fut-bi.fut-bi { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #2a1700 !important; color: #fdcb57 !important; }
.fut-bi.fut-bi.fut-bi svg { width: 14px; height: 14px; }
.fut-bt.fut-bt.fut-bt { font-family: var(--fut-disp); font-weight: 700; font-size: 13.5px; color: #2a1700 !important; background: transparent !important; }
.fut-bn.fut-bn.fut-bn { font: 700 11.5px/19px var(--fut-mono); border-radius: 999px; padding: 0 8px; min-width: 24px; text-align: center; background: #2a1700 !important; color: #fff !important; }
.fut-bchip.fut-bchip.fut-bchip { font: 700 11px/19px var(--fut-sans); border-radius: 999px; padding: 0 9px; background: rgba(255, 255, 255, .88) !important; color: #8a4b00 !important; }
.fut-bchip-r.fut-bchip-r.fut-bchip-r { color: #b3261e !important; }

/* ---------- Missing checklist ---------- */
.fut-ov.fut-ov.fut-ov {
    position: fixed; inset: 0; z-index: 2150; display: grid; place-items: center; padding: 14px;
    background: rgba(8, 14, 22, .6) !important; font-family: var(--fut-sans);
}
.fut-ov.fut-ov.fut-ov * { box-sizing: border-box; }
.fut-modal.fut-modal.fut-modal {
    width: 480px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
    background: var(--fut-surface) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-line2); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.fut-mhd.fut-mhd.fut-mhd { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--fut-surface) !important; border-bottom: 1px solid var(--fut-line); }
.fut-mhd.fut-mhd.fut-mhd h3 { margin: 0; font: 700 16px var(--fut-disp); color: var(--fut-ink) !important; }
.fut-msub.fut-msub.fut-msub { font: 500 11px var(--fut-mono); margin-top: 2px; color: var(--fut-muted) !important; background: transparent !important; }
.fut-ov.fut-ov.fut-ov .fut-x { margin-left: auto; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
    background: transparent !important; border: 0 !important; color: var(--fut-muted) !important; }
.fut-mbd.fut-mbd.fut-mbd { padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; background: var(--fut-ground) !important; }
.fut-mft.fut-mft.fut-mft { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; padding: 11px 16px;
    background: var(--fut-surface) !important; border-top: 1px solid var(--fut-line); }
.fut-mft.fut-mft.fut-mft .fut-hint { margin-right: auto; }
.fut-hint.fut-hint.fut-hint { font-size: 10.5px; color: var(--fut-muted) !important; background: transparent !important; }
.fut-scan.fut-scan.fut-scan { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 12.5px; padding: 18px 4px; color: var(--fut-purple) !important; background: transparent !important; }
.fut-scan.fut-scan.fut-scan i { width: 14px; height: 14px; border: 2px solid var(--fut-purple); border-top-color: transparent; border-radius: 50%; animation: fut-spin .7s linear infinite; }
@keyframes fut-spin { to { transform: rotate(360deg); } }
.fut-allok.fut-allok.fut-allok { display: flex; gap: 8px; align-items: center; font-weight: 600; padding: 14px 4px; color: var(--fut-ok) !important; background: transparent !important; }
.fut-mgroup.fut-mgroup.fut-mgroup { display: flex; flex-direction: column; gap: 3px; background: transparent !important; }
.fut-mcap.fut-mcap.fut-mcap { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 2px 0; color: var(--fut-muted) !important; background: transparent !important; }
.fut-mi.fut-mi.fut-mi {
    display: flex; gap: 9px; align-items: flex-start; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12.5px;
    background: var(--fut-surface) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-line);
}
.fut-mi.fut-mi.fut-mi:hover { border-color: var(--fut-pri); }
.fut-mi.fut-mi.fut-mi span { color: inherit !important; background: transparent !important; }
.fut-mi.fut-mi.fut-mi input { margin-top: 2px; width: 15px; height: 15px; flex: none; accent-color: #7566b1; }
.fut-mi.fut-mi.fut-mi:has(input:checked) { border-color: var(--fut-purple); background: var(--fut-purple-bg) !important; }
.fut-mi.fut-mi.fut-mi.fut-has { opacity: .55; cursor: default; }
.fut-mi.fut-mi.fut-mi .fut-mw { display: block; font-size: 10.5px; color: var(--fut-muted) !important; }
.fut-mi.fut-mi.fut-mi .fut-tag { font: 700 9px var(--fut-mono); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
    background: var(--fut-surface2) !important; color: var(--fut-muted) !important; border: 1px solid var(--fut-line); }
.fut-asg.fut-asg.fut-asg { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; border-top: 1px solid var(--fut-line); padding-top: 10px; background: transparent !important; }
.fut-asg.fut-asg.fut-asg label { padding-top: 10px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--fut-muted) !important; }
.fut-asg.fut-asg.fut-asg .fut-hint { flex-basis: 100%; }
.fut-ta.fut-ta.fut-ta { flex: 1; min-width: 190px; background: transparent !important; }
.fut-ta.fut-ta.fut-ta input {
    width: 100%; height: 34px; font: 600 13px var(--fut-sans); border-radius: 7px; padding: 5px 9px;
    background: var(--fut-surface) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-amber) !important;
}
.fut-ta.fut-ta.fut-ta input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(245, 158, 11, .28); }
.fut-ta.fut-ta.fut-ta input.fut-bad { border-color: var(--fut-bad) !important; box-shadow: 0 0 0 3px var(--fut-bad-bg); }
.fut-ov.fut-ov.fut-ov .fut-btn {
    font: 600 12.5px var(--fut-mono); border-radius: 7px; padding: 7px 14px; cursor: pointer;
    background: var(--fut-surface) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-line2) !important;
}
.fut-ov.fut-ov.fut-ov .fut-btn:disabled { opacity: .45; cursor: not-allowed; }
.fut-ov.fut-ov.fut-ov .fut-btn-quiet { background: transparent !important; border-color: transparent !important; color: var(--fut-muted) !important; }
.fut-ov.fut-ov.fut-ov .fut-btn-quiet:hover { background: var(--fut-surface2) !important; border-color: var(--fut-line) !important; color: var(--fut-ink) !important; }
.fut-ov.fut-ov.fut-ov .fut-btn-amber { background: var(--fut-amber-bg) !important; border-color: var(--fut-amber) !important; color: var(--fut-amber-strong) !important; }
.fut-ov.fut-ov.fut-ov .fut-btn-amber:hover:not(:disabled) { background: var(--fut-amber) !important; color: var(--fut-amber-ink) !important; }
.fut-ov.fut-ov.fut-ov .fut-btn-pri { background: linear-gradient(180deg, var(--fut-pri), var(--fut-pri2)) !important; border-color: var(--fut-pri2) !important; color: #fff !important; }
.fut-ov.fut-ov.fut-ov .fut-btn-pri:hover:not(:disabled) { filter: brightness(1.08); }

/* ---------- Add-comment box ---------- */
.cell-comment-editor-panel .fut-miss.fut-miss.fut-miss {
    margin-right: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font: 700 11.5px var(--fut-sans); letter-spacing: .01em; border-radius: 999px; padding: 5px 13px;
    background: linear-gradient(180deg, #8b7ad6, var(--fut-purple)) !important; color: #fff !important;
    border: 1px solid var(--fut-purple) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.cell-comment-editor-panel .fut-miss.fut-miss.fut-miss:hover { filter: brightness(1.1); }
.cell-comment-editor-panel .cce-footer { display: flex; align-items: center; gap: 6px; }
.fut-thread.fut-thread.fut-thread {
    display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow: auto; margin-bottom: 8px;
    border-radius: 7px; padding: 7px 9px; font: 12px/1.4 var(--fut-sans);
    background: var(--fut-ground) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-line);
}
.fut-tcap.fut-tcap.fut-tcap { font: 700 9.5px var(--fut-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--fut-muted) !important; background: transparent !important; }
.fut-tc.fut-tc.fut-tc { color: var(--fut-ink) !important; background: transparent !important; white-space: pre-wrap; word-break: break-word; }
.fut-tc.fut-tc.fut-tc + .fut-tc { border-top: 1px solid var(--fut-line); padding-top: 6px; }
.fut-tmeta.fut-tmeta.fut-tmeta { display: flex; align-items: center; font-size: 10px; color: var(--fut-muted) !important; background: transparent !important; white-space: normal; }
.fut-tr.fut-tr.fut-tr { margin: 4px 0 0 4px; padding-left: 8px; border-left: 2px solid var(--fut-line2); background: transparent !important; color: var(--fut-ink) !important; }

/* ---------- comment bubble: tasks + replies (the bubble keeps its own surface) ---------- */
.cell-comment-tooltip-portal .fut-tl.fut-tl.fut-tl { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(128, 128, 128, .3); background: transparent !important; }
.fut-tlcap.fut-tlcap.fut-tlcap { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; background: transparent !important; }
.fut-tlcap.fut-tlcap.fut-tlcap span { background: transparent !important; color: inherit !important; }
.cell-comment-tooltip-portal .fut-tl.fut-tl.fut-tl button {
    display: flex; gap: 7px; align-items: center; text-align: left; padding: 3px 0; font: 12px var(--fut-sans); cursor: pointer;
    background: transparent !important; border: 0 !important; color: inherit !important;
}
.fut-tll.fut-tll.fut-tll { background: transparent !important; color: inherit !important; }
.cell-comment-tooltip-portal .fut-tl.fut-tl.fut-tl button:hover .fut-tll { text-decoration: underline; }
.fut-tk.fut-tk.fut-tk { width: 14px; height: 14px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 9px;
    border: 1.5px solid rgba(128, 128, 128, .7); background: transparent !important; color: #fff !important; }
.fut-tl.fut-tl.fut-tl .fut-done .fut-tk { background: var(--fut-ok) !important; border-color: var(--fut-ok); }
.fut-tl.fut-tl.fut-tl .fut-done .fut-tll { text-decoration: line-through; opacity: .6; }
.fut-asn.fut-asn.fut-asn { margin-left: auto; font: 700 10px var(--fut-sans); border-radius: 9px; padding: 0 7px; white-space: nowrap; flex: none;
    background: var(--fut-amber-bg) !important; color: var(--fut-amber-strong) !important; border: 1px solid var(--fut-amber); }
.fut-tl.fut-tl.fut-tl .fut-age { margin-left: auto; }
.fut-tl.fut-tl.fut-tl .fut-asn + .fut-age { margin-left: 5px; }
.fut-rps.fut-rps.fut-rps { display: flex; flex-direction: column; gap: 5px; margin: 7px 0 0 3px; padding-left: 9px; border-left: 2px solid rgba(128, 128, 128, .35); background: transparent !important; }
.fut-rpl.fut-rpl.fut-rpl { font-size: 12px; line-height: 1.4; background: transparent !important; color: inherit !important; white-space: pre-wrap; word-break: break-word; }
.fut-rpa.fut-rpa.fut-rpa { display: block; font-size: 10px; opacity: .65; background: transparent !important; color: inherit !important; }
.fut-rp.fut-rp.fut-rp { display: flex; gap: 5px; align-items: center; margin-top: 7px; background: transparent !important; }
.cell-comment-tooltip-portal .fut-rp.fut-rp.fut-rp input {
    flex: 1; min-width: 0; height: 26px; font: 12px var(--fut-sans); border-radius: 14px; padding: 4px 10px;
    background: transparent !important; color: inherit !important; border: 1px solid rgba(128, 128, 128, .45) !important;
}
.cell-comment-tooltip-portal .fut-rp.fut-rp.fut-rp input:focus { outline: 0; border-color: var(--fut-pri) !important; }
.cell-comment-tooltip-portal .fut-rp.fut-rp.fut-rp button {
    width: 26px; height: 26px; border-radius: 50%; padding: 0; font-size: 11px; flex: none; cursor: pointer;
    background: var(--fut-pri) !important; color: #fff !important; border: 0 !important;
}

/* ---------- Edit Position: tabs + Shipment register tab ---------- */
.fut-tabs.fut-tabs.fut-tabs { display: flex; gap: 2px; margin: -6px 0 14px; border-bottom: 1px solid var(--fut-line); background: transparent !important; }
#positionModal .fut-tabs.fut-tabs.fut-tabs button {
    padding: 8px 12px; font: 600 12px var(--fut-sans); cursor: pointer; white-space: nowrap; border-radius: 0;
    background: transparent !important; color: var(--fut-muted) !important; border: 0 !important; border-bottom: 2px solid transparent !important;
}
#positionModal .fut-tabs.fut-tabs.fut-tabs button[aria-selected="true"] { color: var(--fut-pri) !important; border-bottom-color: var(--fut-pri) !important; }
.fut-new.fut-new.fut-new { font: 700 9px var(--fut-mono); border-radius: 3px; padding: 1px 4px; margin-left: 6px; vertical-align: 1px; background: var(--fut-purple) !important; color: #fff !important; }
.fut-regtab.fut-regtab.fut-regtab .fut-wide { flex: 2; }
.fut-regtab.fut-regtab.fut-regtab select.fut-warn { background: #fbff00 !important; color: #f12121 !important; font-weight: 700; }
.fut-regtab.fut-regtab.fut-regtab input[readonly] { opacity: .7; }
.fut-target.fut-target.fut-target {
    position: relative; border-radius: 6px;
    outline: 2px solid var(--fut-amber); outline-offset: 5px;
    box-shadow: 0 0 0 5px var(--fut-amber-bg);
    background: var(--fut-amber-bg) !important;
    animation: fut-pulse 1.1s ease 2;
}
.fut-target.fut-target.fut-target label { color: var(--fut-amber-strong) !important; font-weight: 700 !important; }
.fut-target.fut-target.fut-target input, .fut-target.fut-target.fut-target select { border-color: var(--fut-amber) !important; }
.fut-target.fut-target.fut-target::after {
    content: "task: fill this"; position: absolute; top: -15px; right: 4px; z-index: 1;
    font: 700 9.5px var(--fut-mono); letter-spacing: .02em; border-radius: 4px; padding: 1px 6px;
    background: var(--fut-amber); color: var(--fut-amber-ink);
}
@keyframes fut-pulse { 50% { outline-color: transparent; box-shadow: 0 0 0 9px var(--fut-amber-bg); } }

/* The Shipment register tab sits on its own solid card: the app's light-theme modal is
   translucent, and form fields on a see-through ground are hard to read. */
.fut-regtab.fut-regtab.fut-regtab {
    background: var(--fut-surface) !important; border: 1px solid var(--fut-line2); border-radius: 10px;
    padding: 14px 14px 6px; margin-top: 2px;
}
.fut-regtab.fut-regtab.fut-regtab .form-section-title { color: var(--fut-ink2) !important; }
.fut-regtab.fut-regtab.fut-regtab label { color: var(--fut-muted) !important; }
.fut-regtab.fut-regtab.fut-regtab input, .fut-regtab.fut-regtab.fut-regtab select {
    background: var(--fut-surface) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-line2) !important;
}
.fut-regtab.fut-regtab.fut-regtab input[readonly] { background: var(--fut-surface2) !important; color: var(--fut-muted) !important; opacity: 1; }
.fut-regtab.fut-regtab.fut-regtab input:focus, .fut-regtab.fut-regtab.fut-regtab select:focus { outline: 0; border-color: var(--fut-pri) !important; box-shadow: 0 0 0 3px rgba(15, 126, 162, .18); }

/* ---------- hand a task over ---------- */
.fut-panel.fut-panel.fut-panel .fut-hand {
    align-self: center; flex: none; width: 22px; height: 22px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer;
    background: transparent !important; color: var(--fut-muted) !important; border: 1px solid transparent !important; opacity: .7;
}
.fut-panel.fut-panel.fut-panel .fut-hand:hover, .fut-trow.fut-trow.fut-trow.fut-handing .fut-hand {
    opacity: 1; background: var(--fut-amber-bg) !important; color: var(--fut-amber-strong) !important; border-color: var(--fut-amber) !important;
}
.fut-panel.fut-panel.fut-panel .fut-handall { width: auto; padding: 0 6px; gap: 3px; margin-left: 6px; display: inline-flex; align-items: center; opacity: .75; }
.fut-panel.fut-panel.fut-panel .fut-handall span { font: 700 9.5px var(--fut-sans); letter-spacing: .06em; text-transform: uppercase; color: inherit !important; background: transparent !important; }
.fut-panel.fut-panel.fut-panel .fut-gh:hover .fut-handall, .fut-panel.fut-panel.fut-panel .fut-gh.fut-handing .fut-handall { opacity: 1; }
.fut-handbox.fut-handbox.fut-handbox {
    display: flex; align-items: center; gap: 7px; padding: 7px 10px 9px 34px;
    background: var(--fut-amber-bg) !important; border-top: 1px dashed var(--fut-amber);
}
.fut-handlbl.fut-handlbl.fut-handlbl { font: 700 9.5px var(--fut-sans); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
    color: var(--fut-amber-strong) !important; background: transparent !important; }
.fut-handbox.fut-handbox.fut-handbox input {
    flex: 1; min-width: 0; height: 28px; font: 600 12.5px var(--fut-sans); border-radius: 7px; padding: 3px 9px;
    background: var(--fut-surface) !important; color: var(--fut-ink) !important; border: 1px solid var(--fut-amber) !important;
}
.fut-handbox.fut-handbox.fut-handbox input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(245, 158, 11, .28); }
.fut-handbox.fut-handbox.fut-handbox input.fut-bad { border-color: var(--fut-bad) !important; box-shadow: 0 0 0 3px var(--fut-bad-bg); }
.fut-panel.fut-panel.fut-panel .fut-handx {
    width: 22px; height: 22px; border-radius: 50%; padding: 0; line-height: 1; font-size: 14px; flex: none; cursor: pointer;
    background: var(--fut-surface) !important; color: var(--fut-muted) !important; border: 1px solid var(--fut-line2) !important;
}

/* ---------- saved → validating: the task that opened the modal shows it is being re-checked ---------- */
.fut-trow.fut-trow.fut-trow.fut-checking { position: relative; overflow: hidden; background: var(--fut-amber-bg) !important; }
.fut-trow.fut-trow.fut-trow.fut-checking::after {
    content: ""; position: absolute; left: -40%; bottom: 0; width: 40%; height: 2px; border-radius: 2px;
    background: var(--fut-amber); animation: fut-progress 1.1s ease-in-out infinite;
}
@keyframes fut-progress { 0% { left: -40%; } 100% { left: 100%; } }
.fut-ck.fut-ck.fut-ck-spin {
    background: transparent !important; border: 2px solid var(--fut-amber); border-top-color: transparent;
    animation: fut-spin .7s linear infinite;
}
.fut-saving.fut-saving.fut-saving { color: var(--fut-amber-strong) !important; font-weight: 600; background: transparent !important; }
.fut-saving.fut-saving.fut-saving i { font-style: normal; color: inherit !important; animation: fut-dots 1.2s infinite; }
.fut-saving.fut-saving.fut-saving i:nth-child(2) { animation-delay: .2s; }
.fut-saving.fut-saving.fut-saving i:nth-child(3) { animation-delay: .4s; }
@keyframes fut-dots { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.fut-okline.fut-okline.fut-okline { color: var(--fut-ok) !important; font-weight: 700; background: transparent !important; }
.fut-still.fut-still.fut-still { color: var(--fut-bad) !important; font-weight: 600; background: transparent !important; }

/* Shipment register tab: three compact columns, and which shipment this is on the tab line */
.fut-regtab.fut-regtab.fut-regtab .fut-row3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 10px; }
.fut-regtab.fut-regtab.fut-regtab .fut-row3 .form-group { margin: 0; min-width: 0; }
.fut-regtab.fut-regtab.fut-regtab .fut-row3 .fut-wide { grid-column: span 2; }
.fut-regtab.fut-regtab.fut-regtab .fut-row3 input, .fut-regtab.fut-regtab.fut-regtab .fut-row3 select { height: 34px; padding: 4px 8px; font-size: 13px; width: 100%; }
.fut-regtab.fut-regtab.fut-regtab .form-section-title { margin: 6px 0 8px; }
.fut-ident.fut-ident.fut-ident { margin-left: auto; align-self: center; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 7px; padding: 0 2px 6px;
    font: 500 11px var(--fut-sans); background: transparent !important; color: var(--fut-muted) !important; }
.fut-ident.fut-ident.fut-ident .fut-idk { font: 700 9.5px var(--fut-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--fut-muted) !important; background: transparent !important; }
.fut-ident.fut-ident.fut-ident b { font: 700 12px var(--fut-mono); color: var(--fut-ink) !important; background: var(--fut-surface2) !important;
    border: 1px solid var(--fut-line2); border-radius: 4px; padding: 1px 6px; margin-right: 6px; white-space: nowrap; }
.fut-mi.fut-mi.fut-mi.fut-opt { border-style: dashed; }
@media (max-width: 640px) { .fut-regtab.fut-regtab.fut-regtab .fut-row3 { grid-template-columns: 1fr; } .fut-regtab.fut-regtab.fut-regtab .fut-row3 .fut-wide { grid-column: auto; } }

/* ---------- loading skeleton (grey ghost cards with a slow shimmer) ---------- */
.fut-skel.fut-skel.fut-skel { display: flex; flex-direction: column; gap: 16px; background: transparent !important; }
.fut-skel-card.fut-skel-card.fut-skel-card {
    display: flex; flex-direction: column; gap: 11px; padding: 11px 10px 13px; border-radius: 8px;
    background: var(--fut-surface) !important; border: 1px solid var(--fut-line2);
}
.fut-skel-row.fut-skel-row.fut-skel-row { display: flex; align-items: center; gap: 9px; background: transparent !important; }
.fut-skel-bar.fut-skel-bar.fut-skel-bar, .fut-skel-dot.fut-skel-dot.fut-skel-dot {
    display: block; height: 10px; border-radius: 5px; flex: none;
    background-color: var(--fut-skel1) !important;
    background-image: linear-gradient(90deg, var(--fut-skel1) 25%, var(--fut-skel2) 37%, var(--fut-skel1) 63%) !important;
    background-size: 400% 100% !important; background-repeat: no-repeat !important;
    /* background-position is deliberately NOT !important: an important declaration outranks
       an animation and would freeze the shimmer. */
    background-position: 100% 50%;
    animation: fut-shimmer 1.3s ease-in-out infinite;
}
.fut-skel-dot.fut-skel-dot.fut-skel-dot { width: 16px; height: 16px; border-radius: 50%; }
.fut-skel-head.fut-skel-head.fut-skel-head { height: 16px; border-radius: 4px; }
@keyframes fut-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* the highlighted field keeps its amber border inside the register card */
.fut-regtab.fut-regtab.fut-regtab .fut-target input, .fut-regtab.fut-regtab.fut-regtab .fut-target select, .fut-target.fut-target.fut-target input, .fut-target.fut-target.fut-target select { border-color: var(--fut-amber) !important; }

@media (max-width: 640px) {
    .fut-panel.fut-panel.fut-panel { right: 8px; top: 56px; bottom: 120px; }
    .fut-button.fut-button.fut-button { right: 8px; }
    .fut-bchip.fut-bchip.fut-bchip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fut-panel.fut-panel.fut-panel.fut-hello, .fut-trow.fut-trow.fut-trow.fut-just, .fut-button.fut-button.fut-button.fut-ping, .fut-target.fut-target.fut-target, .fut-scan.fut-scan.fut-scan i, .fut-skel-bar.fut-skel-bar.fut-skel-bar, .fut-skel-dot.fut-skel-dot.fut-skel-dot, .fut-button.fut-button.fut-button, .fut-trow.fut-trow.fut-trow.fut-checking::after, .fut-ck.fut-ck.fut-ck-spin, .fut-saving.fut-saving.fut-saving i { animation: none; }
}