:root { --bg:#f5f6f8; --card:#fff; --ink:#1f2a37; --muted:#6b7280; --accent:#2563eb; --line:#e5e7eb; --ok:#16a34a; --warn:#d97706; --off:#9ca3af; --sidebar-bg:#0f172a; --sidebar-accent:#60a5fa; --sidebar-text:rgba(255,255,255,.72); --sidebar-muted:#94a3b8; --topbar-h:56px; --z-topbar:50; --z-board-overlay:30; }
* { box-sizing: border-box; }
body { margin:0; font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; }
a { color:var(--accent); text-decoration:none; }
.container { max-width:960px; margin:0 auto; padding:2rem 1.5rem; }
.auth-card { max-width:360px; margin:8vh auto; background:var(--card); padding:2rem; border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.brand { font-size:1.5rem; margin:0 0 1.5rem; text-align:center; }
.brand span { color:var(--muted); font-size:1rem; }
.auth-card label { display:block; margin-bottom:1rem; font-size:.9rem; color:var(--muted); }
.auth-card input { width:100%; margin-top:.3rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px; font-size:1rem; font-family:inherit; }
.auth-card button { width:100%; padding:.7rem; background:var(--accent); color:#fff; border:0; border-radius:8px; font-size:1rem; cursor:pointer; }
.auth-card button:hover { background:#1d4ed8; }
.flash { background:#fef3c7; border:1px solid #fcd34d; padding:.75rem 1rem; border-radius:8px; margin-bottom:1rem; }
.flash p { margin:.2rem 0; }
.layout { display:flex; min-height:100vh; }
.sidebar { width:232px; background:var(--sidebar-bg); color:var(--sidebar-text); display:flex; flex-direction:column; padding:16px 0; flex-shrink:0; }
.sidebar .logo { display:flex; align-items:center; gap:8px; padding:0 16px 16px; color:#fff; font-weight:700; font-size:1.22rem; }
.sidebar .logo .ic { width:20px; height:20px; color:var(--sidebar-accent); }
.sidebar .logo-sub { color:rgba(255,255,255,.5); font-size:.7rem; margin-left:.3rem; font-weight:400; }
.sidebar nav { flex:1; display:flex; flex-direction:column; padding:0 8px; gap:2px; }
.nav-group { color:var(--sidebar-muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:14px 8px 4px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; color:var(--sidebar-text); font-size:14.5px; border-left:3px solid transparent; }
.nav-item .ic { width:16px; height:16px; flex-shrink:0; }
.nav-item:hover { background:rgba(255,255,255,.05); color:#fff; }
.nav-item.active { background:rgba(255,255,255,.06); color:#fff; font-weight:500; border-left-color:var(--sidebar-accent); }
.nav-item:focus-visible { outline:2px solid var(--sidebar-accent); outline-offset:-2px; }
.sidebar-foot { padding:12px 16px 0; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:.4rem; }
.sidebar-foot .who { color:#fff; font-size:14px; }
.sidebar-foot .logout { display:flex; align-items:center; gap:8px; color:var(--sidebar-muted); font-size:14px; }
.sidebar-foot .logout .ic { width:16px; height:16px; }
.sidebar-foot .logout:hover { color:#f87171; }
.sidebar-foot .logout:focus-visible { outline:2px solid var(--sidebar-accent); outline-offset:2px; }
.main-wrap { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:var(--topbar-h); background:#fff; border-bottom:.5px solid var(--line); display:flex; align-items:center; gap:12px; padding:0 20px; position:sticky; top:0; z-index:var(--z-topbar); }
.topbar-title { font-size:15px; font-weight:600; color:var(--ink); margin:0; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar-actions button, .topbar-actions .btn-primary { background:var(--accent); color:#fff; border:0; padding:.45rem .9rem; border-radius:8px; cursor:pointer; font-size:.9rem; }
.topbar-actions button:hover, .topbar-actions .btn-primary:hover { background:#1d4ed8; }
.topbar-actions button:disabled { opacity:.5; cursor:default; }
.topbar-actions .btn-link, .topbar-actions a:not(.btn-primary) { color:var(--accent); font-size:.9rem; padding:.4rem .55rem; border-radius:6px; }
.topbar-actions .btn-link:hover, .topbar-actions a:not(.btn-primary):hover { background:#eff4fe; }
.topbar-actions button:focus-visible, .topbar-actions a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.content { flex:1; padding:2rem 3rem; max-width:1320px; }
.content.content-wide { max-width:none; }   /* data-dense pages (board) fill the screen width */
.home-greeting { font-size:1.7rem; font-weight:700; color:var(--ink); margin:.2rem 0 .5rem; }
.dept { color:var(--accent); font-weight:600; }
.hint { color:var(--muted); font-size:.95rem; }
table.data { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.data th, table.data td { padding:.65rem .85rem; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem; vertical-align:middle; }
table.data th { background:#f9fafb; color:var(--muted); font-weight:600; }
table.data tr:last-child td { border-bottom:0; }
.badge { display:inline-block; padding:.1rem .5rem; border-radius:6px; font-size:.78rem; margin-right:.3rem; }
.badge.ok { background:#dcfce7; color:var(--ok); }
.badge.warn { background:#fef3c7; color:var(--warn); }
.badge.off { background:#f3f4f6; color:var(--off); }
.actions { display:flex; gap:.4rem; }
.actions form { margin:0; }
button.mini { font-size:.8rem; padding:.25rem .6rem; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; }
button.mini:hover { background:#f3f4f6; }
.inline-roles { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0; }
.inline-roles label { font-size:.82rem; }
dialog { border:0; border-radius:12px; padding:1.5rem; box-shadow:0 10px 40px rgba(0,0,0,.2); max-width:420px; width:90%; }
dialog h2 { margin:0 0 1rem; }
dialog label { display:block; margin-bottom:1rem; font-size:.9rem; }
dialog select, dialog input { width:100%; margin-top:.3rem; padding:.5rem; border:1px solid var(--line); border-radius:8px; font-family:inherit; }
.role-checks { display:flex; gap:.8rem; margin-top:.3rem; }
.role-checks label.inline { display:inline-flex; align-items:center; gap:.2rem; width:auto; margin:0; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
.dialog-actions button { padding:.5rem 1rem; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.dialog-actions button[type=submit] { background:var(--accent); color:#fff; border:0; }
.filters { display:flex; gap:.6rem; margin-bottom:1rem; }
.filters select { padding:.4rem .6rem; border:1px solid var(--line); border-radius:8px; font-family:inherit; }
.role-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.2rem; }
.card h3 { margin:0 0 .3rem; }
.caps { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.6rem; }

/* ===== SK Cargo module ===== */
.muted-num { color:var(--muted); }
.warn-num { color:var(--warn); font-weight:600; }
.lane { color:var(--accent); font-weight:600; white-space:nowrap; }

/* --- Readiness Board --- */
.board-toolbar { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.board-toolbar .cursor-readout { font-size:.9rem; color:var(--muted); }
.board-toolbar .cursor-readout b { color:var(--ink); }
.board-legend { display:flex; gap:1rem; margin-left:auto; font-size:.8rem; color:var(--muted); }
.board-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.board-legend i { width:.7rem; height:.7rem; border-radius:3px; display:inline-block; }
.board-legend i.ready { background:#bbf7d0; border:1px solid var(--ok); }
.board-legend i.pending { background:#e5e7eb; border:1px solid var(--off); }
.board-legend i.cursor { width:2px; height:.9rem; border-radius:0; background:var(--accent); }

.board-filters { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.board-filters .filter-lead { font-size:.78rem; color:var(--muted); margin-right:.1rem; }
.filter-dd { position:relative; }
.filter-btn { font-size:.82rem; padding:.35rem .7rem; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; }
.filter-btn.active { border-color:var(--accent); color:var(--accent); }
.filter-btn .badge { background:var(--accent); color:#fff; font-size:.7rem; line-height:1; padding:.1rem .4rem; border-radius:10px; }
.filter-btn .caret { font-style:normal; font-size:.7rem; color:var(--muted); }
.filter-panel { position:absolute; top:calc(100% + 4px); left:0; min-width:180px; max-height:280px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12); padding:.3rem; z-index:var(--z-board-overlay); }
.filter-opt { display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem; font-size:.82rem; border-radius:6px; cursor:pointer; white-space:nowrap; }
.filter-opt:hover { background:#f3f4f6; }
.filter-opt-group { font-weight:600; }
.filter-opt-child { padding-left:1.4rem; color:#374151; font-weight:400; }
.filter-clear { font-size:.78rem; color:var(--accent); cursor:pointer; display:inline-flex; align-items:center; gap:.2rem; }
.filter-clear .ti-x { font-style:normal; }
.filter-count { margin-left:auto; font-size:.78rem; color:var(--muted); }

.board { position:relative; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
/* column model: port label | Ready | timeline (flexible) | Unknown */
.board-col-label { width:260px; }
.board-col-fixed { width:160px; }

.board-axis { display:flex; align-items:stretch; border-bottom:1px solid var(--line); background:#f9fafb; }
.board-axis .axis-label,
.board-axis .axis-fixed { flex:none; padding:.55rem .8rem; font-size:.78rem; font-weight:600; color:var(--muted); border-right:1px solid var(--line); display:flex; align-items:center; }
.board-axis .axis-label { width:260px; }
.board-axis .axis-fixed { width:160px; justify-content:center; }
.board-axis .axis-fixed.unknown { border-right:0; }
.board-track-head { flex:1; position:relative; min-width:0; }
.board-track-head .tick { position:absolute; top:0; bottom:0; padding:.55rem 0 0 .4rem; font-size:.72rem; color:var(--muted); border-left:1px solid var(--line); white-space:nowrap; }

.region-head { display:flex; align-items:center; gap:.5rem; padding:.45rem .8rem; background:#eef2f7; border-bottom:1px solid var(--line); }
.region-head .code { font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--accent); background:#dbeafe; padding:.05rem .45rem; border-radius:4px; }
.region-head .name { font-size:.82rem; color:var(--muted); }

.port-row { display:flex; align-items:stretch; border-bottom:1px solid var(--line); min-height:48px; }
.port-row:last-child { border-bottom:0; }
.port-label { width:260px; flex:none; padding:.5rem .8rem; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:.1rem; }
.port-label .pname { font-size:.82rem; font-weight:600; color:var(--muted); letter-spacing:.01em; }
.port-label .ptotal { line-height:1.1; }
.port-label .ptotal .sum-val { font-size:1.35rem; font-weight:700; color:var(--ok); font-variant-numeric:tabular-nums; }
.port-label .ptotal .unit { font-size:.7rem; color:var(--muted); margin-left:.15rem; }
.port-label .pcargo { display:flex; flex-wrap:wrap; gap:.25rem .5rem; margin-top:.1rem; }
.port-label .pcargo .cg { font-size:.72rem; color:var(--muted); white-space:nowrap; }
.port-label .pcargo .cg-name { color:var(--ink); }
.port-label .pcargo .cg-val { font-variant-numeric:tabular-nums; font-weight:600; }
.port-label .pcargo:empty::before { content:'—'; color:var(--off); font-size:.72rem; }
.port-zone { width:160px; flex:none; border-right:1px solid var(--line); padding:.4rem .45rem; display:flex; flex-direction:column; gap:.3rem; justify-content:center; align-items:stretch; }
.port-zone.unknown { border-right:0; }
.port-track { flex:1; position:relative; min-width:0; }
.port-track .gridline { position:absolute; top:0; bottom:0; border-left:1px solid #f1f3f5; }
.port-track .gridline.week { border-left-color:var(--line); }

/* batch chip */
.chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; line-height:1; padding:.25rem .5rem; border-radius:6px; border:1px solid; white-space:nowrap; }
.chip .mts { font-variant-numeric:tabular-nums; }
.chip.ready { background:#dcfce7; border-color:var(--ok); color:#14532d; }
.chip.pending { background:#f3f4f6; border-color:var(--off); color:#374151; }
/* Two-line chip layout shared by timeline, Ready and Unknown chips:
   qty+cargo (hero) over customer + optional POD deadline. */
.port-track .chip, .port-zone .chip { flex-direction:column; align-items:flex-start; gap:.1rem; padding:.2rem .45rem; line-height:1.2; }
.port-track .chip { position:absolute; top:0; max-width:260px; }   /* left/top set inline by layoutLanes() */
.port-zone .chip { width:100%; }
.chip .c-l1 { white-space:nowrap; }
.chip .c-l1 .c-qty { font-weight:700; font-variant-numeric:tabular-nums; }
.chip .c-l1 .c-cargo { font-size:.7rem; }
.chip .c-l2 { font-size:.68rem; opacity:.8; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip .c-by { font-weight:600; }

/* draggable query-date cursor */
.board-cursor { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); z-index:5; pointer-events:none; }
.board-cursor .grip { position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:14px; height:16px; background:var(--accent); border-radius:0 0 4px 4px; cursor:ew-resize; pointer-events:auto; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.board-cursor .grip::after { content:''; position:absolute; top:4px; left:50%; transform:translateX(-50%); width:2px; height:7px; background:rgba(255,255,255,.85); border-radius:1px; }

.board-eta { position:absolute; top:0; bottom:0; width:0; border-left:2px dashed #f59e0b; z-index:5; pointer-events:none; }
.board-eta .eta-label { position:absolute; top:-2px; left:3px; font-size:.68rem; color:#b45309; background:#fffbeb; padding:0 .25rem; border-radius:3px; white-space:nowrap; }

.board-empty { padding:2rem .8rem; text-align:center; color:var(--muted); font-size:.9rem; }

/* --- batch sub-list under a booking (Bookings page, Task 10) --- */
.subrow td { background:#fafbfc; padding:.4rem .8rem .7rem 2rem; }
.batch-list { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.batch-list .empty { color:var(--muted); font-size:.82rem; }

/* --- Add cargo modal (Task 7) --- */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background:#fff; border-radius:10px; padding:1.2rem 1.4rem; max-width:560px; width:90%; max-height:80vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.modal h3 { margin:0 0 .8rem; font-size:1rem; }
.pick-search { width:100%; padding:.4rem .6rem; margin-bottom:.6rem; border:1px solid var(--line); border-radius:6px; font-size:.85rem; box-sizing:border-box; }
.pick-row { display:flex; align-items:center; gap:.6rem; padding:.4rem .3rem; font-size:.85rem; border-bottom:1px solid var(--line); cursor:pointer; }
.pick-row:hover { background:#f3f4f6; }
.pick-group { margin-bottom:.6rem; }
.pick-group .pick-row:first-child { font-weight:600; }
.pick-row-child { padding-left:1.6rem; font-weight:400; color:var(--muted, #555); }
.modal-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }

/* chip 點擊小卡（Edit in Bookings / Remove / Move） */
.chip-pop { position:fixed; z-index:120; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.18); padding:.6rem .7rem; min-width:200px; font-size:.82rem; }
.chip-pop-info { margin-bottom:.5rem; color:#374151; }
.chip-pop-link { display:inline-block; margin-bottom:.4rem; color:var(--accent); }
.chip-pop-btn { display:block; width:100%; text-align:left; padding:.3rem .4rem; background:#f3f4f6; border:0; border-radius:6px; cursor:pointer; margin-top:.25rem; }
.chip-pop-move select { width:100%; margin-top:.4rem; }