/* Poeldijk customer portal v2 — the page's complete look.
Part 1 is the portal stylesheet as served on the live site, verbatim.
Part 2 is everything the approved mockup added on top of it.
Kept in one file so the portal cannot drift when the shared sheets change. */
/* ==================== part 1: the live portal stylesheet ==================== */
/* The DARK palette, measured from the approved page rather than copied from a
stylesheet, so this file reproduces it exactly and does not depend on the shared
theme file. The portal's own light palette below overrides these under
:root[data-theme="light"]. */
:root {
--accent-blue: #38bdf8;
--accent-green: #22c55e;
--accent-orange: #f97316;
--accent-orange-dim: #c2410c;
--accent-purple: #a855f7;
--accent-red: #ef4444;
--accent-teal: #14b8a6;
--accent-yellow: #facc15;
--bg-hover: #232d3b;
--bg-primary: #0a0e14;
--bg-row-alt: #1a2336;
--bg-row-hover: #243049;
--bg-secondary: #121820;
--bg-tertiary: #1a222d;
--border-color: #2a3545;
--border-highlight: #3d4f66;
--card-bg: #1e293b;
--card-border: #334155;
--cell-focus: rgba(147, 197, 253, 0.2);
--font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', Consolas, 'Cascadia Mono', monospace;
--input-bg: #1e293b;
--input-border: #334155;
--input-placeholder: #64748b;
--input-text: #f1f5f9;
--modal-bg: #1e293b;
--modal-overlay: rgba(0, 0, 0, 0.7);
--na-border-strong: #475569;
--na-font-mono: 'JetBrains Mono', ui-monospace, monospace;
--na-font-sans: 'Inter', 'Space Grotesk', system-ui, sans-serif;
--na-navy: #3b82f6;
--na-navy-tint: rgba(59, 130, 246, 0.14);
--na-radius-xs: 3px;
--na-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.25);
--portal-marine: #16213e;
--portal-marine-soft: #1e3a5f;
--portal-marine-tint: rgba(22, 33, 62, 0.06);
--radius-lg: 12px;
--radius-md: 8px;
--radius-sm: 4px;
--row-alt: #f8fafc;
--row-white: #ffffff;
--sev-comp: #8b5cf6;
--sev-comp-tint: rgba(139, 92, 246, 0.18);
--sev-crit: #ef4444;
--sev-crit-tint: rgba(239, 68, 68, 0.18);
--sev-docs: #eab308;
--sev-docs-tint: rgba(234, 179, 8, 0.18);
--sev-imm: #f97316;
--sev-imm-tint: rgba(249, 115, 22, 0.18);
--sev-stock: #14b8a6;
--sev-stock-tint: rgba( 20, 184, 166, 0.18);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--skf-amber: #fbbf24;
--skf-cyan: #06b6d4;
--skf-green: #4ade80;
--skf-orange: #f97316;
--skf-pink: #ec4899;
--skf-purple: #8b5cf6;
--skf-red: #f87171;
--skf-teal: #14b8a6;
--spacing-lg: 1.5rem;
--spacing-md: 1rem;
--spacing-sm: 0.5rem;
--spacing-xl: 2rem;
--spacing-xs: 0.25rem;
--table-header-bg: #334155;
--table-row-bg: #ffffff;
--table-row-hover: #a4dda4;
--table-row-text: #1e293b;
--text-dark: #1e293b;
--text-muted: #6e7681;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
}
/* ============================================================
SHIP SUPPLY CUSTOMER PORTAL
Visual language: pages/skf-portal.html (same sp-* component set).
Base tokens (--bg-*, --text-*, --border-color) come from themes.css;
only the accent palette + the page's light-theme marine overrides
are declared here.
============================================================ */
:root {
--skf-cyan: #06b6d4; --skf-teal: #14b8a6; --skf-orange: #f97316;
--skf-purple: #8b5cf6; --skf-green: #4ade80; --skf-red: #f87171;
--skf-amber: #fbbf24; --skf-pink: #ec4899;
--portal-marine: #16213e; --portal-marine-soft: #1e3a5f;
--portal-marine-tint: rgba(22, 33, 62, 0.06);
--font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', Consolas, 'Cascadia Mono', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-primary); color: var(--text-primary);
font-family: var(--font-display); font-size: 15px; min-height: 100vh;
}
:root[data-theme="light"] body {
background:
radial-gradient(ellipse 80% 60% at 50% -20%, rgba(22, 33, 62, 0.05), transparent 70%),
linear-gradient(180deg, #f1f5f9 0%, #eef2f7 100%);
color: #0f172a;
}
/* ============== Top nav (template top-nav) ============== */
.top-nav {
display: flex; align-items: center; justify-content: space-between;
padding: 0.6rem 1.4rem;
background: linear-gradient(135deg, #1a1a2e, #16213e);
border-bottom: 1px solid rgba(6, 182, 212, 0.25);
position: sticky; top: 0; z-index: 50;
}
.nav-brand { display: flex; align-items: center; gap: 0.55rem; color: #fff; }
.nav-brand .brand-icon { display: inline-flex; align-items: center; }
.ship-ico { width: 1.5em; height: 1.5em; fill: currentColor; color: #fff; }
.brand-text { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.2px; }
.brand-text span { color: var(--skf-cyan); font-weight: 600; }
.nav-user { display: flex; align-items: center; gap: 0.8rem; }
.nav-theme-toggle, .sp-nav-btn {
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 0.9rem;
color: #fff; transition: background 0.12s ease;
}
.nav-theme-toggle:hover, .sp-nav-btn:hover { background: rgba(255,255,255,0.16); }
.nav-user-info { display: flex; align-items: center; gap: 0.55rem; color: #fff; }
.nav-user-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, var(--skf-cyan), #0891b2);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 0.85rem;
}
.nav-user-details { display: flex; flex-direction: column; line-height: 1.2; }
.nav-user-name { font-size: 0.8rem; font-weight: 700; }
.nav-user-role { font-size: 0.66rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.4px; }
/* ============== Layout shell ============== */
/* Wider shell (owner 2026-08-06): prod IDs / pallet nos / PO refs are long —
1400px forced ugly wraps. Wide screens now get up to 1780px. */
.sp-wrap { padding: 1.25rem 1.5rem 3rem; max-width: min(1780px, 97vw); margin: 0 auto; }
/* THE STOCK TABLE CARRIES 15 COLUMNS AND THE GUTTERS COST IT ~90px.
On a 1280 screen the 96vw cap plus 1.5rem gutters left 1165px for a table
that wants 1257 - so MR and Files fell off the right of .table-scroll and
read as missing columns. Below 1500px the page is width-starved, not
width-rich: give the gutters back to the data. */
@media (max-width: 1500px) {
.sp-wrap { max-width: 99vw; padding-left: 0.75rem; padding-right: 0.75rem; }
}
/* ============== Hero ============== */
.sp-hero {
background: linear-gradient(135deg, #0c4a6e, #155e75 65%, #134e4a);
border: 1px solid rgba(6, 182, 212, 0.35);
border-radius: 14px; padding: 1.1rem 1.4rem; margin-bottom: 1.25rem;
color: #f0f9ff; display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 1rem;
box-shadow: 0 8px 24px rgba(8, 47, 73, 0.30);
}
.sp-hero-title {
font-family: var(--font-display);
font-size: 1.35rem; font-weight: 800; margin: 0;
display: flex; align-items: center; gap: 0.6rem; letter-spacing: -0.3px;
}
.sp-hero-title .ship-ico { width: 1.15em; height: 1.15em; }
.sp-hero-sub { font-size: 0.84rem; opacity: 0.78; margin-top: 0.15rem; }
/* Right-hand hero cluster: the staff customer switcher (hidden for customer
accounts) sits next to the customer badge. */
.sp-hero-right { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: flex-end; }
/* Same geometry / focus ring as the tab-bar selects, so the switcher reads as
"one of the page's selects" — it just lives on the hero. */
.sp-hero-select {
padding: 6px 10px; height: 34px; border-radius: 6px;
border: 1px solid var(--border-color); background: var(--bg-secondary);
color: var(--text-primary); font-size: 0.85rem; font-family: inherit;
line-height: 1.2; min-width: 210px; max-width: 320px; cursor: pointer;
}
.sp-hero-select:focus {
outline: none; border-color: var(--skf-cyan);
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
/* Belt-and-braces (same lesson as .sp-operator-flag below): keep [hidden]
authoritative even though nothing here sets `display`. */
.sp-hero-select[hidden] { display: none; }
.sp-hero-switch-lbl {
font-size: 0.6rem; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase;
font-family: var(--font-mono); color: rgba(255,255,255,0.72); margin-right: -0.35rem;
}
.sp-hero-switch-lbl[hidden] { display: none; }
.sp-hero-customer {
background: rgba(255,255,255,0.10); padding: 0.55rem 0.95rem; border-radius: 8px;
font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.3px; border: 1px solid rgba(255,255,255,0.18);
}
.sp-operator-flag {
display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 4px;
background: rgba(249, 115, 22, 0.22); border: 1px solid rgba(249, 115, 22, 0.55);
color: #fed7aa; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.6px;
text-transform: uppercase; font-family: var(--font-mono);
}
/* The class's `display` beats the UA stylesheet's [hidden]{display:none}, so
loadMe()'s `heroOperatorFlag.hidden = !viewing_as_operator` had no effect and
every real customer was told they were a staff member looking at their
account. (Server says viewing_as_operator:false for a customer-bound user.) */
.sp-operator-flag[hidden] { display: none; }
/* ============== KPI tiles ============== */
.sp-kpis { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.5rem; }
.sp-kpi {
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-radius: 10px; padding: 0.9rem 1.05rem;
display: flex; flex-direction: column; gap: 0.25rem;
position: relative; overflow: hidden;
}
.sp-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--skf-cyan); }
.sp-kpi.orange::before { background: var(--skf-orange); }
.sp-kpi.green::before { background: var(--skf-green); }
.sp-kpi.teal::before { background: var(--skf-teal); }
.sp-kpi.red::before { background: var(--skf-red); }
.sp-kpi-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
.sp-kpi-value { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sp-kpi-hint { font-size: 0.7rem; color: var(--text-muted); }
.sp-kpi-value.in { color: var(--skf-green); }
.sp-kpi-value.out { color: var(--skf-orange); }
.sp-kpi-value .arrow { display: inline-block; margin-right: 4px; font-size: 1.2rem; vertical-align: -1px; }
/* ============== Tabs + unified tabbar ============== */
.sp-tabbar { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sp-tabs {
display: flex; gap: 2px; padding: 4px;
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-radius: 10px; width: fit-content; flex-wrap: wrap;
}
.sp-tab {
background: transparent; border: 0; padding: 7px 14px; cursor: pointer;
color: var(--text-muted); font-weight: 700; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.4px; border-radius: 6px;
font-family: inherit;
transition: background 0.12s ease, color 0.12s ease;
}
.sp-tab.active {
background: linear-gradient(135deg, var(--skf-cyan), #0891b2);
color: #fff; box-shadow: 0 2px 8px rgba(6, 182, 212, 0.35);
}
.sp-tab:hover:not(.active) { color: var(--text-primary); background: rgba(148, 163, 184, 0.08); }
.tab-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; padding: 0 7px; margin-left: 8px;
border-radius: 12px; background: linear-gradient(135deg, var(--skf-orange), #ea580c);
color: #fff; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 800;
box-shadow: 0 2px 6px rgba(249, 115, 22, 0.5); vertical-align: -2px;
}
.tab-badge[hidden] { display: none; }
.sp-tab.active .tab-badge { background: rgba(255, 255, 255, 0.25); box-shadow: none; }
:root[data-theme="light"] .tab-badge { background: linear-gradient(135deg, #ea580c, #c2410c); }
:root[data-theme="light"] .sp-tab.active .tab-badge { background: rgba(255, 255, 255, 0.25); }
.sp-tab-controls { display: flex; gap: 0.6rem; align-items: center; }
.sp-tab-controls > [data-controls-for] {
display: none; gap: 0.7rem; align-items: center; flex-wrap: wrap;
padding-left: 0.85rem; border-left: 1px solid var(--border-color); min-height: 38px;
}
.sp-tab-controls > [data-controls-for].active { display: flex; }
.sp-tab-controls input, .sp-tab-controls select {
padding: 6px 10px; height: 34px; border-radius: 6px;
border: 1px solid var(--border-color); background: var(--bg-secondary);
color: var(--text-primary); font-size: 0.85rem; font-family: inherit;
line-height: 1.2; min-width: 180px;
}
.sp-tab-controls input { min-width: 240px; cursor: text; }
.sp-tab-controls input[type="date"] { min-width: 150px; cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; }
.date-range-lbl { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.brand-logo { height: 24px; width: auto; display: block; }
.sp-tab-controls input:focus, .sp-tab-controls select:focus {
outline: none; border-color: var(--skf-cyan);
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.sp-tab-controls .hint { color: var(--text-muted); font-size: 0.72rem; }
.sp-panel { display: none; }
.sp-panel.active { display: block; }
.sp-btn {
padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 0.82rem;
cursor: pointer; border: 1px solid var(--border-color);
background: transparent; color: var(--text-primary); font-family: inherit;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.sp-btn:hover { background: rgba(6, 182, 212, 0.06); border-color: var(--skf-cyan); color: var(--skf-cyan); }
.sp-btn.primary {
background: linear-gradient(135deg, var(--skf-cyan), #0891b2);
border-color: transparent; color: #fff;
box-shadow: 0 2px 6px rgba(6, 182, 212, 0.30);
}
.sp-btn.primary:hover { filter: brightness(1.1); background: linear-gradient(135deg, #0891b2, #0e7490); color: #fff; }
.sp-btn--compact { height: 30px; padding: 0 12px; font-size: 0.76rem; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sp-btn:disabled:hover { background: transparent; border-color: var(--border-color); color: var(--text-primary); }
/* ============== Stock table ============== */
.table-scroll { overflow-x: auto; border-radius: 10px; }
.sp-table {
width: 100%; border-collapse: collapse;
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-radius: 10px; overflow: hidden; min-width: 1180px;
}
.sp-table th, .sp-table td {
padding: 10px 12px; text-align: left;
border-bottom: 1px solid var(--border-color); font-size: 0.84rem;
}
.sp-table th {
background: rgba(148, 163, 184, 0.06); color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.5px;
font-size: 0.66rem; font-weight: 700; white-space: nowrap;
}
.sp-table tbody tr:last-child td { border-bottom: none; }
/* THE STOCK TABLE'S WIDTH BUDGET - MEASURED, NOT GUESSED (2026-09-08).
Fifteen columns have to fit a 1280px screen, and AUTO table layout could not
do it: there, max-width on a is only a HINT. A 38-char pallet ref blew
straight past its 90px cap to 156px, and the clipped span inside it then
spilled over the PO Ref cell - the two columns visibly OVERLAPPED.
table-layout:fixed makes these widths AUTHORITATIVE. The browser honours
them, shares any spare width proportionally, and - the part that matters -
the table can no longer outgrow its scroller, so MR and Files cannot drop
off the right edge again.
The numbers come from Seven Seas' 138 live rows:
MYO-REF max 13 chars 'SH-002391' (avg 9)
Pallet No max 38 chars 52/138 filled -> truncates, full value on hover
PO Ref max 38 chars 52/138 filled -> the largest share; it needs it
Description max 10 chars 'SHIP PARTS'
Dim. (cm) max 11 chars '120x100x140'
Type max 12 chars 'wooden_crate'
Units max 1 char every row is 1 -> gets the minimum
Gross kg max 7 chars '1933.00'
They sum to 1180px = .sp-table's min-width, so at that width they are exact
and above it every column grows in proportion. */
.sp-table.stock-table { table-layout: fixed; }
.sp-table.stock-table th, .sp-table.stock-table td { padding-left: 8px; padding-right: 8px; }
/* Under fixed layout a cell simply clips; the row keeps the full value in its
title attribute, so truncation never loses anything. */
.sp-table.stock-table td { overflow: hidden; text-overflow: ellipsis; }
.sp-table.stock-table .clip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-table .clip-po { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* MARKER_PORTAL_EXPECTED_POREFS */
/* Only the first row's widths are read under fixed layout, so the set is
the whole budget. */
/* 2026-09-09 (owner): Pallet No is gone from the table and Take-out Ref sits
right after PO Ref, inheriting Pallet No's 116px so the 1180px budget and
every index after column 3 stay exactly as they were. */
.sp-table.stock-table th:nth-child(1) { width: 94px; } /* MYO-REF */
.sp-table.stock-table th:nth-child(2) { width: 138px; } /* PO Ref */ /* MARKER_PORTAL_DG: -14 for the DG column */
.sp-table.stock-table th:nth-child(3) { width: 106px; } /* Take-out Ref */ /* MARKER_PORTAL_DG: -10 */
.sp-table.stock-table th:nth-child(4) { width: 78px; } /* Description */
.sp-table.stock-table th:nth-child(5) { width: 82px; } /* Dim. (cm) */
.sp-table.stock-table th:nth-child(6) { width: 78px; } /* Type */
.sp-table.stock-table th:nth-child(7) { width: 44px; } /* Units */
.sp-table.stock-table th:nth-child(8) { width: 62px; } /* Chgbl. kg */
.sp-table.stock-table th:nth-child(9) { width: 68px; } /* Gross kg */
.sp-table.stock-table th:nth-child(10) { width: 92px; text-align: center; } /* ATA */
.sp-table.stock-table th:nth-child(11) { width: 36px; } /* Days */
.sp-table.stock-table th:nth-child(12) { width: 66px; } /* Customs */
.sp-table.stock-table th:nth-child(13) { width: 74px; } /* Status */
.sp-table.stock-table th:nth-child(14) { width: 34px; text-align: center; } /* DG */ /* MARKER_PORTAL_DG */
.sp-table.stock-table th:nth-child(15) { width: 38px; text-align: center; } /* MR */
.sp-table.stock-table th:nth-child(16) { width: 78px; text-align: center; } /* Files */ /* MARKER_PORTAL_DG: -10 */
/* MARKER_PORTAL_DG (owner, 2026-09-15): DG flag (Y red / N grey) + DG badge on the description. */
.dg-flag { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; line-height: 1.3; text-align: center; letter-spacing: 0.02em; }
.dg-y { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.45); }
.dg-n { background: rgba(148, 163, 184, 0.12); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.28); }
.dg-badge { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 5px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; vertical-align: middle; background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.45); }
:root[data-theme="light"] .dg-y, :root[data-theme="light"] .dg-badge { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
:root[data-theme="light"] .dg-n { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.sp-table.stock-table td:nth-child(2), .sp-table.stock-table td:nth-child(3) { text-align: left; }
.sp-table.stock-table td:nth-child(14) { text-align: center; }
/* Three cells were CLIPPING at 1280 because their own content was wider than
any sane column: the caret ate 18px of the MYO-REF cell, the dimensions ran
at 0.78rem, and the Files button carried two emoji at full size. Shrinking
the content is cheaper than widening the columns - it leaves the width for
PO Ref, which is the only column holding genuinely long values. */
/* Days / Customs / Status / MR carry the SHORTEST data in the table - every
live row reads "In Stock", the customs chip is at most "RE-EXPORT", Days is
"12d" and MR is a 22px seal. Their 244px went to Pallet No, whose refs run to
38 characters. The chips give up side padding so they still fit. */
.sp-table.stock-table .st-chip, .sp-table.stock-table .cx-chip {
padding-left: 6px; padding-right: 6px; letter-spacing: 0;
}
.sp-table.stock-table .row-caret { margin-right: 4px; font-size: 0.62rem; }
.sp-table.stock-table td.dim { font-size: 0.72rem; }
.sp-table.stock-table .files-btn { padding-left: 6px; padding-right: 6px; gap: 2px; font-size: 0.66rem; }
.sp-table tbody tr:hover { background: rgba(6, 182, 212, 0.05); }
/* MYO-REF / PO Ref / Take-out Ref must stay on ONE line — long refs scroll the
table horizontally (.table-scroll) instead of wrapping unreadably. */
.sp-table td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-table td.qty { text-align: right; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-table td.dim { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
.sp-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.88rem; }
.sp-empty i { display: block; font-size: 1.6rem; margin-bottom: 0.4rem; opacity: 0.55; font-style: normal; }
.sp-empty.err, .sp-err { color: var(--skf-red); }
/* ---- Status chips — full ship-supply lifecycle ---- */
.st-chip {
padding: 3px 10px; border-radius: 3px; font-size: 0.62rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.5px;
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.st-expected { background: transparent; color: var(--text-muted); border: 1px dashed rgba(148,163,184,0.55); }
.st-unload_ok { background: rgba(20, 184, 166, 0.18); color: #2dd4bf; }
.st-checkin { background: rgba(6, 182, 212, 0.18); color: var(--skf-cyan); }
.st-screening { background: rgba(139, 92, 246, 0.20); color: #a78bfa; }
/* Two-line chip (STEP 2): label over a smaller wrapped qualifier. */
.st-chip.st-chip-stack {
flex-direction: column; align-items: flex-start; gap: 1px;
line-height: 1.15; white-space: normal; padding: 3px 9px;
}
.st-chip .st-sub { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.3px; text-transform: none; opacity: 0.92; }
.st-in_stock { background: rgba(74, 222, 128, 0.20); color: var(--skf-green); }
.st-in_order { background: rgba(251, 191, 36, 0.18); color: var(--skf-amber); }
.st-picked { background: rgba(249, 115, 22, 0.20); color: #fb923c; }
.st-dispatched { background: rgba(100, 116, 139, 0.20); color: #94a3b8; }
/* ---- Expected shipments — ETA WHS + announcement status ---- */
.eta-cell { font-family: var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eta-cell .d { font-weight: 700; }
.eta-cell .t { color: var(--skf-cyan); font-weight: 800; margin-left: 6px; }
.eta-today {
display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 3px;
background: rgba(74, 222, 128, 0.2); color: var(--skf-green);
font-size: 0.56rem; font-weight: 900; letter-spacing: 0.6px; vertical-align: 2px;
}
.ex-announced { background: rgba(148, 163, 184, 0.16); color: #94a3b8; }
.ex-confirmed { background: rgba(6, 182, 212, 0.18); color: var(--skf-cyan); }
.ex-delayed { background: rgba(248, 113, 113, 0.18); color: var(--skf-red); }
.ex-arrived { background: rgba(74, 222, 128, 0.2); color: var(--skf-green); }
:root[data-theme="light"] .eta-cell .t { color: #0e7490; }
:root[data-theme="light"] .eta-today { background: #dcfce7; color: #166534; }
:root[data-theme="light"] .ex-announced { background: #e2e8f0; color: #475569; }
:root[data-theme="light"] .ex-confirmed { background: #cffafe; color: #0e7490; }
:root[data-theme="light"] .ex-delayed { background: #fee2e2; color: #991b1b; }
:root[data-theme="light"] .ex-arrived { background: #dcfce7; color: #166534; }
/* ---- Customs chips ---- */
.cx-chip {
padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono);
font-size: 0.64rem; font-weight: 800; letter-spacing: 0.4px; white-space: nowrap;
}
.cx-t1 { background: rgba(251, 191, 36, 0.14); color: var(--skf-amber); border: 1px solid rgba(251, 191, 36, 0.35); }
.cx-cleared { background: rgba(74, 222, 128, 0.14); color: var(--skf-green); border: 1px solid rgba(74, 222, 128, 0.35); }
.cx-exa { background: rgba(96, 165, 250, 0.14); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.35); }
.cx-none { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); border: 1px solid rgba(148, 163, 184, 0.30); }
:root[data-theme="light"] .cx-none { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }
/* SLICE C — partial per-line release (amber, stronger + dashed vs BONDED). */
.cx-partial { background: rgba(251, 191, 36, 0.20); color: var(--skf-amber); border: 1px dashed rgba(251, 191, 36, 0.60); }
/* ---- MR (Material Receipt) column — certificate w/ red wax seal ---- */
.mr-seal { width: 22px; height: 22px; vertical-align: middle; cursor: help; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.mr-seal.sm { width: 15px; height: 15px; vertical-align: -2px; }
.mr-na { color: var(--text-muted); opacity: 0.5; font-size: 0.7rem; font-family: var(--font-mono); font-weight: 700; }
/* ---- ATA stamp (check-in moment) + days in stock ---- */
.ata-stamp {
display: inline-block;
padding: 3px 7px; border: 1.5px dashed rgba(6, 182, 212, 0.5); border-radius: 6px;
font-family: var(--font-mono); font-size: 0.64rem; font-weight: 800;
color: var(--skf-cyan); line-height: 1.25; letter-spacing: 0.02em;
text-transform: uppercase; white-space: nowrap; cursor: help;
}
.days-chip { font-family: var(--font-mono); font-weight: 800; font-size: 0.74rem; white-space: nowrap; }
.days-chip .u { font-size: 0.6rem; font-weight: 600; color: var(--text-muted); margin-left: 1px; }
.cell-dash { opacity: 0.4; }
/* ---- Stock row expansion (units detail) ---- */
tr.has-detail { cursor: pointer; }
.row-caret {
display: inline-block; margin-right: 7px; color: var(--text-muted);
font-family: var(--font-mono); font-size: 0.7rem;
transition: transform 0.15s ease, color 0.12s ease;
}
tr.open .row-caret { transform: rotate(90deg); color: var(--skf-cyan); }
tr.unit-detail-row > td {
background: rgba(6, 182, 212, 0.04);
padding: 10px 16px 16px;
border-bottom: 1px solid var(--border-color);
}
.unit-detail-title {
font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-muted); margin-bottom: 7px;
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.unit-detail-title .wmr { color: var(--skf-green); font-family: var(--font-mono); font-size: 0.72rem; }
:root[data-theme="light"] tr.unit-detail-row > td { background: rgba(22, 33, 62, 0.03); border-bottom-color: #e2e8f0; }
/* ---- Files / documentation cell button ---- */
.files-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border-color); background: rgba(6, 182, 212, 0.05);
color: var(--text-primary); font-size: 0.74rem; font-weight: 700;
font-family: var(--font-mono); white-space: nowrap;
transition: background 0.12s ease, border-color 0.12s ease;
}
.files-btn:hover { border-color: var(--skf-cyan); background: rgba(6, 182, 212, 0.12); color: var(--skf-cyan); }
.files-btn .cnt { color: var(--skf-cyan); }
.files-btn.none { opacity: 0.45; cursor: default; background: transparent; }
.files-btn.none:hover { border-color: var(--border-color); color: var(--text-primary); }
/* ============== Order History — expandable cards ============== */
.order-card {
background: var(--bg-secondary); border: 1px solid var(--border-color);
border-left: 4px solid var(--skf-cyan); border-radius: 10px;
margin-bottom: 0.65rem; overflow: hidden;
transition: border-left-color 0.15s ease, box-shadow 0.15s ease;
}
.order-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.30); }
.order-card.status-placed { border-left-color: #fde68a; background: linear-gradient(180deg, rgba(254, 240, 138, 0.06), var(--bg-secondary)); }
.order-card.status-picking { position: relative; border-left-color: #60a5fa; transition: border-left-color 0.45s ease; }
.order-card.status-picking::before {
content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
background: linear-gradient(90deg, rgba(96,165,250,0) 0%, rgba(96,165,250,0.18) 50%, rgba(96,165,250,0) 100%);
animation: pickingShimmer 2.8s linear infinite;
pointer-events: none; z-index: 0; opacity: 1; transition: opacity 0.45s ease;
}
.order-card.status-picking .order-card-head,
.order-card.status-picking .order-card-body { position: relative; z-index: 1; }
@keyframes pickingShimmer { 0% { left: -40%; } 100% { left: 100%; } }
.order-card.status-picking.expanded { border-left-color: var(--border-color); }
.order-card.status-picking.expanded::before { opacity: 0; animation-play-state: paused; }
.order-card.status-packing { border-left-color: var(--skf-orange); }
.order-card.status-ready { border-left-color: var(--skf-green); background: linear-gradient(180deg, rgba(74, 222, 128, 0.05), var(--bg-secondary)); }
.order-card.status-dispatched {
border-left-color: #64748b;
background: linear-gradient(180deg, rgba(100, 116, 139, 0.04), var(--bg-secondary));
}
.order-card.status-cancelled { border-left-color: var(--skf-red); }
.order-card.status-returned { border-left-color: var(--skf-amber); }
.order-card-head {
display: grid; grid-template-columns: 24px 1fr auto;
align-items: center; gap: 1rem; padding: 0.95rem 1.15rem;
cursor: pointer; user-select: none;
}
.order-card-head:hover { background: rgba(6,182,212,0.04); }
.order-card-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.order-card-id-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-ref { font-family: var(--font-mono); font-weight: 800; font-size: 1.05rem; color: var(--text-primary); letter-spacing: 0.2px; }
.order-id { font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; color: var(--text-muted); padding-left: 4px; }
.order-meta { font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.order-meta-piece { display: inline-flex; align-items: baseline; gap: 5px; }
.order-meta-piece .lbl { opacity: 0.7; text-transform: uppercase; letter-spacing: 0.4px; font-size: 0.7rem; font-weight: 700; }
.order-meta-piece .val { font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; }
.order-meta-piece.dispatched .val { color: var(--skf-green); }
.order-meta-piece.pack .val { color: var(--skf-cyan); }
.order-meta-piece.pack .kg { color: var(--skf-orange); font-weight: 800; }
.order-chevron {
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); color: var(--text-muted); font-size: 0.85rem;
transition: transform 0.18s ease, color 0.12s ease;
}
.order-card.expanded .order-chevron { transform: rotate(90deg); color: var(--skf-cyan); }
.order-card-body {
display: none; padding: 0 1.15rem 1.15rem;
border-top: 1px dashed var(--border-color);
animation: orderExpand 0.16s ease-out;
}
@keyframes orderExpand { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
.order-card.expanded .order-card-body { display: block; }
.order-section-title {
font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-muted); margin: 1rem 0 0.5rem;
display: flex; align-items: center; justify-content: space-between;
}
.order-section-title span { font-weight: 500; color: var(--text-muted); font-size: 0.74rem; text-transform: none; letter-spacing: 0; }
.order-items-table {
width: 100%; border-collapse: collapse;
background: rgba(148, 163, 184, 0.04);
border-radius: 8px; overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.10);
}
.order-items-table th, .order-items-table td {
padding: 9px 11px; font-size: 0.8rem; text-align: left;
border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}
.order-items-table tbody tr:last-child td { border-bottom: 0; }
.order-items-table th { color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.5px; white-space: nowrap; }
.order-items-table td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.order-items-table td.right { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.order-items-table tr.done td { opacity: 0.65; }
.order-items-table .check { color: var(--skf-green); }
.pkg-type-chip {
display: inline-block; padding: 2px 8px; border-radius: 4px;
font-family: var(--font-mono); font-weight: 800; font-size: 0.66rem;
text-transform: uppercase; letter-spacing: 0.4px;
background: rgba(6, 182, 212, 0.12); color: var(--skf-cyan);
border: 1px solid rgba(6, 182, 212, 0.25); white-space: nowrap;
}
.pkg-type-chip.drum { background: rgba(139, 92, 246, 0.12); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); }
.pkg-type-chip.crate { background: rgba(217, 119, 6, 0.14); color: #fbbf24; border-color: rgba(217, 119, 6, 0.35); }
.pkg-type-chip.box { background: rgba(20, 184, 166, 0.12); color: #2dd4bf; border-color: rgba(20, 184, 166, 0.3); }
.pkg-type-chip.pkg { background: rgba(148, 163, 184, 0.12); color: #94a3b8; border-color: rgba(148, 163, 184, 0.3); }
.order-remarks {
font-size: 0.8rem; color: var(--text-muted); font-style: italic;
padding: 8px 12px; border-left: 2px solid var(--skf-cyan);
background: rgba(6,182,212,0.05); border-radius: 0 6px 6px 0;
}
/* ---- 4-dot lifecycle tracker ---- */
.order-dots {
display: flex; align-items: flex-start; gap: 0; margin-top: 4px;
justify-content: space-between; max-width: 280px; margin-left: auto; position: relative;
}
.order-dots .dot-step {
display: flex; flex-direction: column; align-items: center; gap: 6px;
flex: 0 0 auto; min-width: 50px; position: relative; cursor: help;
}
.order-dots .dot {
width: 25px; height: 25px; border-radius: 50%;
background: #e2e8f0; border: 2px solid #cbd5e1;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.95rem; font-weight: 800; color: #fff; line-height: 1;
transition: background 0.25s ease, border-color 0.25s ease;
position: relative; z-index: 2;
}
.order-dots .dot-step.is-done .dot { background: #16a34a; border-color: #15803d; }
.order-dots .dot-step.is-done .dot::after { content: '✓'; color: #fff; font-size: 0.92rem; font-weight: 900; line-height: 1; }
.order-dots .dot-lbl {
font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.4px;
color: #94a3b8; font-weight: 700; white-space: nowrap;
}
.order-dots .dot-step.is-done .dot-lbl { color: #16a34a; }
.order-dots .dot-step + .dot-step::before {
content: ''; position: absolute; left: -50%; width: 100%;
top: 12px; height: 2px; background: #e2e8f0; z-index: 1;
transition: background 0.25s ease;
}
.order-dots .dot-step.connector-done::before { background: #16a34a; }
.order-dots .dot-step .dot-tip { display: none; }
.order-dot-tooltip {
position: fixed; top: 0; left: 0;
background: linear-gradient(180deg, #1e293b, #0f172a);
color: #f1f5f9; font-size: 0.72rem; font-weight: 600; line-height: 1.4;
padding: 8px 11px; border-radius: 7px; min-width: 160px; max-width: 260px;
text-align: left;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
opacity: 0; pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease;
transform: translateY(-4px); z-index: 99999; visibility: hidden; white-space: normal;
}
.order-dot-tooltip.show { opacity: 1; transform: translateY(0); visibility: visible; }
.order-dot-tooltip .tip-title {
display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px;
color: #94a3b8; font-weight: 800; margin-bottom: 4px;
}
.order-dot-tooltip .tip-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 0.72rem; }
.order-dot-tooltip .tip-row .k { color: #94a3b8; font-weight: 500; }
.order-dot-tooltip .tip-row .v { color: #f1f5f9; font-weight: 700; text-align: right; }
/* A truncated cell hands its FULL value to the same card. Native title= is
deliberately not used: it is slow to appear, cannot be styled, and the two
would show at once. */
.order-dot-tooltip .tip-val {
display: block; font-family: var(--font-mono); font-size: 0.76rem;
font-weight: 700; color: #f1f5f9; word-break: break-word; line-height: 1.35;
}
/* ============== Documentation ribbon (segmented toggle) ============== */
.doc-ribbon {
display: flex; gap: 2px; padding: 3px; margin-top: 1rem;
background: rgba(148, 163, 184, 0.08);
border: 1px solid var(--border-color); border-radius: 8px; width: fit-content;
}
.doc-ribbon button {
background: transparent; border: 0; padding: 6px 14px; cursor: pointer;
color: var(--text-muted); font-weight: 700; font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.4px; border-radius: 5px;
font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
transition: background 0.12s ease, color 0.12s ease;
}
.doc-ribbon button.active {
background: linear-gradient(135deg, var(--skf-cyan), #0891b2);
color: #fff; box-shadow: 0 2px 6px rgba(6, 182, 212, 0.3);
}
.doc-ribbon button:hover:not(.active) { color: var(--text-primary); }
.doc-pane { display: none; }
.doc-pane.active { display: block; }
/* ---- Documentation panel: doc cards ---- */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.7rem; margin-top: 0.6rem; }
.doc-card {
padding: 12px 14px; border-radius: 9px;
background: rgba(148, 163, 184, 0.05);
border: 1px solid rgba(148, 163, 184, 0.14);
display: flex; flex-direction: column; gap: 8px;
}
.doc-card-head { display: flex; align-items: center; gap: 9px; }
.doc-card-ico {
width: 36px; height: 36px; border-radius: 8px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.25);
}
.doc-card-ico.cmr { background: rgba(224, 123, 57, 0.14); border-color: rgba(224, 123, 57, 0.35); }
.doc-card-title { font-weight: 800; font-size: 0.86rem; }
.doc-card-sub { font-size: 0.7rem; color: var(--text-muted); }
.doc-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.doc-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); cursor: pointer; user-select: none; }
.doc-opt input { accent-color: var(--skf-cyan); }
/* ---- Proof of dispatch / photo gallery grid ---- */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 0.6rem; }
.gal-thumb {
position: relative; border-radius: 9px; overflow: hidden; cursor: zoom-in;
aspect-ratio: 4 / 3; border: 2px solid transparent;
background: var(--bg-tertiary);
transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.15s ease;
}
.gal-thumb:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
.gal-thumb.sel { border-color: var(--skf-cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25); }
.gal-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumb .ph {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 2rem;
}
.gal-thumb .nm {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 4px 7px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.01em;
background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.72)); color: #ffffff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.gal-thumb .ck {
position: absolute; top: 6px; left: 6px; z-index: 3;
width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: rgba(15, 23, 42, 0.65); border: 1.5px solid rgba(255,255,255,0.6);
color: transparent; font-size: 0.8rem; font-weight: 900;
transition: background 0.1s ease, color 0.1s ease;
}
.gal-thumb.sel .ck { background: var(--skf-cyan); border-color: var(--skf-cyan); color: #fff; }
.gal-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 0.7rem; font-size: 0.76rem; color: var(--text-muted);
}
.gal-bar b { color: var(--skf-cyan); font-family: var(--font-mono); }
.proof-locked {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-radius: 9px; margin-top: 0.6rem;
border: 1px dashed var(--border-color);
color: var(--text-muted); font-size: 0.8rem;
}
/* ============== Modals ============== */
.modal-mask {
position: fixed; inset: 0; background: rgba(0,0,0,0.65);
z-index: 100; display: none; align-items: center; justify-content: center;
backdrop-filter: blur(3px); padding: 20px;
}
.modal-mask.show { display: flex; }
.modal-card {
background: var(--bg-primary); border: 1px solid var(--border-color);
border-radius: 12px; padding: 1.25rem 1.5rem;
min-width: 340px; max-width: min(860px, 94vw); width: 100%;
max-height: 86vh; overflow-y: auto;
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
/* ── Dispatch-request wizard modal (2026-09-10) ────────────────────
Hosts pages/create-order.html in an iframe rather than maintaining a second
order form here — the same thing orders.html does for the backoffice. The
wizard already locks itself to a customer-bound session, so the customer
never picks a customer and never sees anyone else's stock.
Near-fullscreen because it is a full three-step wizard, not a dialog. */
.req-wiz-card {
background: var(--bg-primary); border: 1px solid var(--border-color);
border-radius: 12px; width: min(1400px, 97vw); height: min(94vh, 1000px);
display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.65);
}
.req-wiz-head {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-color);
background: var(--bg-secondary); flex: 0 0 auto;
}
.req-wiz-head h3 {
font-family: var(--font-mono); margin: 0; font-size: 1rem;
color: var(--skf-cyan); text-transform: uppercase; letter-spacing: 0.4px;
}
.req-wiz-sub { font-size: 0.75rem; color: var(--text-muted); }
.req-wiz-close {
margin-left: auto; background: transparent; border: 1px solid var(--border-color);
color: var(--text-primary); border-radius: 8px; cursor: pointer;
font-size: 1.1rem; line-height: 1; padding: 0.35rem 0.6rem;
}
.req-wiz-close:hover { background: var(--bg-tertiary); }
.req-wiz-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: var(--bg-primary); }
.modal-card h3 {
font-family: var(--font-mono); margin: 0 0 0.35rem; font-size: 1.15rem;
color: var(--skf-cyan); text-transform: uppercase; letter-spacing: 0.4px;
}
.modal-meta {
font-size: 0.76rem; color: var(--text-muted);
margin-bottom: 0.9rem; padding-bottom: 0.6rem;
border-bottom: 1px solid var(--border-color);
display: flex; gap: 14px; flex-wrap: wrap;
}
.modal-meta b { color: var(--text-primary); font-family: var(--font-mono); font-weight: 700; }
.modal-close {
float: right; background: transparent; border: 0;
color: var(--text-muted); cursor: pointer;
font-size: 1.6rem; line-height: 1; padding: 0;
}
.modal-close:hover { color: var(--skf-cyan); }
.modal-section-title {
font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--text-muted); margin: 1rem 0 0.2rem;
display: flex; align-items: center; gap: 8px;
}
.modal-section-title .n { color: var(--skf-cyan); font-family: var(--font-mono); }
.doc-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 0.5rem; }
.doc-file-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: 8px;
background: rgba(148, 163, 184, 0.05); border: 1px solid rgba(148, 163, 184, 0.12);
font-size: 0.8rem;
}
.doc-file-row .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.doc-file-row .fn { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file-row .sub { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file-row .fs { color: var(--text-muted); font-size: 0.68rem; font-family: var(--font-mono); white-space: nowrap; }
/* ---- Gallery viewer (layer above doc modal) ---- */
.viewer-mask {
position: fixed; inset: 0; background: rgba(2, 6, 23, 0.88);
z-index: 200; display: none; align-items: center; justify-content: center;
backdrop-filter: blur(4px);
}
.viewer-mask.show { display: flex; }
.viewer-box { width: min(860px, 94vw); display: flex; flex-direction: column; gap: 10px; }
.viewer-stage {
position: relative; border-radius: 14px; overflow: hidden;
aspect-ratio: 4 / 3; max-height: 68vh; background: #0b1220;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.viewer-stage .big-icon { font-size: 5rem; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45)); }
.viewer-cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 10px 16px; background: linear-gradient(0deg, rgba(2,6,23,0.82), transparent);
display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
color: #e2e8f0;
}
.viewer-cap .fn { font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; }
.viewer-cap .mt { font-size: 0.68rem; color: #94a3b8; font-family: var(--font-mono); }
.viewer-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
background: rgba(15, 23, 42, 0.55); color: #fff; font-size: 1.1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.12s ease; z-index: 4;
}
.viewer-nav:hover { background: rgba(6, 182, 212, 0.55); }
.viewer-nav.prev { left: 12px; }
.viewer-nav.next { right: 12px; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.viewer-bar .idx { font-family: var(--font-mono); color: #94a3b8; font-size: 0.78rem; }
.viewer-bar .acts { display: flex; gap: 8px; }
.viewer-bar .sp-btn { background: rgba(15, 23, 42, 0.6); }
/* ============== CMR preview sheet ============== */
.cmr-wrap { max-width: 720px; margin: 0 auto; }
.cmr-sheet {
--cmr: #e07b39; --cmr-soft: #f4b183; --cmr-fill: #fdf3ea; --cmr-ink: #1f2937;
background: #fffdfa; color: var(--cmr-ink); border-radius: 6px;
border: 1.5px solid var(--cmr); padding: 14px; position: relative; overflow: hidden;
font-size: 0.72rem; box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.cmr-sheet.no-bg { --cmr: #6b7280; --cmr-soft: #9ca3af; --cmr-fill: #fafafa; }
.cmr-sheet::before {
content: 'CMR'; position: absolute; top: 34%; left: 50%;
transform: translate(-50%, -50%) rotate(-24deg);
font-size: 9rem; font-weight: 900; color: var(--cmr);
opacity: 0.06; pointer-events: none; letter-spacing: 10px;
}
.cmr-sheet.no-bg::before { opacity: 0.03; }
.cmr-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
border-bottom: 2px solid var(--cmr); padding-bottom: 8px; margin-bottom: 8px;
}
.cmr-head .t1 { font-weight: 900; font-size: 1.15rem; color: var(--cmr); letter-spacing: 2px; }
.cmr-head .t2 { font-size: 0.62rem; color: #6b7280; max-width: 380px; line-height: 1.35; }
.cmr-no { font-family: var(--font-mono); font-weight: 800; font-size: 0.8rem; color: var(--cmr); border: 1.5px solid var(--cmr); padding: 4px 10px; border-radius: 4px; background: var(--cmr-fill); }
.cmr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmr-box {
border: 1px solid var(--cmr-soft); border-radius: 3px;
padding: 6px 8px 7px; background: rgba(255,255,255,0.75); min-height: 52px;
}
.cmr-box.full { grid-column: 1 / -1; }
.cmr-box .bx-lbl {
font-size: 0.56rem; font-weight: 800; color: var(--cmr);
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;
display: flex; gap: 5px; align-items: baseline;
}
.cmr-box .bx-lbl .no { font-family: var(--font-mono); }
.cmr-box .bx-val { font-size: 0.74rem; line-height: 1.4; font-weight: 600; }
.cmr-box .bx-val small { display: block; color: #6b7280; font-weight: 500; }
.cmr-table { width: 100%; border-collapse: collapse; margin-top: 2px; }
.cmr-table th, .cmr-table td { border: 1px solid var(--cmr-soft); padding: 4px 7px; font-size: 0.66rem; text-align: left; }
.cmr-table th { background: var(--cmr-fill); color: var(--cmr); font-weight: 800; text-transform: uppercase; font-size: 0.56rem; letter-spacing: 0.4px; }
.cmr-table td.r { text-align: right; font-family: var(--font-mono); }
.cmr-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.cmr-sign .cmr-box { min-height: 64px; }
.cmr-sign .sig { font-family: 'Segoe Script', cursive; color: #1e40af; font-size: 0.9rem; opacity: 0.8; }
.cmr-stamp {
display: inline-block; border: 2px solid #1e40af; color: #1e40af; border-radius: 5px;
padding: 2px 8px; font-size: 0.56rem; font-weight: 800; text-transform: uppercase;
transform: rotate(-6deg); opacity: 0.75; margin-top: 3px; letter-spacing: 0.5px;
}
/* ============== Settings modal ============== */
.set-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.set-field { display: flex; flex-direction: column; gap: 4px; }
.set-field label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.set-field input {
padding: 8px 11px; border-radius: 6px; border: 1px solid var(--border-color);
background: var(--bg-secondary); color: var(--text-primary);
font-size: 0.86rem; font-family: inherit;
}
.set-field input:focus { outline: none; border-color: var(--skf-cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); }
.pw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.7rem; }
.notif-table { width: 100%; border-collapse: collapse; border: 1px solid rgba(148,163,184,0.14); border-radius: 8px; overflow: hidden; background: rgba(148,163,184,0.04); }
.notif-table th, .notif-table td { padding: 8px 10px; font-size: 0.76rem; border-bottom: 1px solid rgba(148,163,184,0.12); text-align: left; }
.notif-table th { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); white-space: nowrap; }
.notif-table th.c, .notif-table td.c { text-align: center; }
.notif-table tbody tr:last-child td { border-bottom: 0; }
.notif-table input[type="checkbox"] { accent-color: var(--skf-cyan); width: 15px; height: 15px; cursor: pointer; }
.notif-table .who { display: flex; flex-direction: column; gap: 1px; min-width: 150px; }
.notif-table .who .nm2 { font-weight: 700; }
.notif-table .who .em { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); }
.you-badge {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 3px;
background: rgba(6, 182, 212, 0.18); color: var(--skf-cyan);
font-size: 0.56rem; font-weight: 900; letter-spacing: 0.5px; vertical-align: 1px;
}
.contact-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 0.7rem; }
.contact-add .set-field { flex: 1; min-width: 160px; }
.rm-btn { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 4px; }
.rm-btn:hover { color: var(--skf-red); background: rgba(248, 113, 113, 0.1); }
:root[data-theme="light"] .notif-table { background: #ffffff; border-color: #e2e8f0; }
:root[data-theme="light"] .notif-table th, :root[data-theme="light"] .notif-table td { border-bottom-color: #e2e8f0; }
:root[data-theme="light"] .set-field input { background: #ffffff; border-color: #cbd5e1; }
:root[data-theme="light"] .you-badge { background: #cffafe; color: #0e7490; }
/* ============== New Request panel ============== */
.req-card {
max-width: 680px; margin: 1rem auto; padding: 1.5rem 1.75rem;
background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(20,184,166,0.04));
border: 1px solid #06b6d4; border-radius: 14px;
}
.req-card ol { font-size: 0.85rem; color: var(--text-primary); padding-left: 1.3rem; margin: 0 0 1rem; line-height: 1.8; }
.req-foot { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--border-color); font-size: 0.78rem; color: var(--text-muted); }
/* ============== Toast ============== */
.sp-toast {
position: fixed; bottom: 20px; right: 20px;
padding: 0.85rem 1.15rem; border-radius: 8px;
background: var(--bg-secondary); border: 1px solid var(--skf-cyan);
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
font-size: 0.84rem; font-weight: 600; z-index: 1000;
transform: translateY(20px); opacity: 0; transition: all 0.25s;
max-width: 90vw;
}
.sp-toast.show { transform: translateY(0); opacity: 1; }
.sp-toast.ok { border-color: var(--skf-green); }
.sp-toast.err { border-color: var(--skf-red); }
/* ============================================================
LIGHT THEME — marine palette (template parity)
============================================================ */
:root[data-theme="light"] {
--bg-primary: #f1f5f9; --bg-secondary: #ffffff; --bg-tertiary: #e2e8f0;
--border-color: #e2e8f0;
--text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b;
--skf-cyan: #0e7490; --skf-teal: #0f766e; --skf-orange: #d97706;
--skf-purple: #6d28d9; --skf-green: #16a34a; --skf-red: #dc2626;
--skf-amber: #b45309; --skf-pink: #be185d;
}
:root[data-theme="light"] .pkg-type-chip { background: #cffafe; color: #0e7490; border-color: #67e8f9; }
:root[data-theme="light"] .pkg-type-chip.drum { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
:root[data-theme="light"] .pkg-type-chip.crate { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
:root[data-theme="light"] .pkg-type-chip.box { background: #ccfbf1; color: #0f766e; border-color: #5eead4; }
:root[data-theme="light"] .pkg-type-chip.pkg { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }
:root[data-theme="light"] .st-unload_ok { background: #ccfbf1; color: #0f766e; }
:root[data-theme="light"] .st-checkin { background: #cffafe; color: #0e7490; }
:root[data-theme="light"] .st-screening { background: #ede9fe; color: #6d28d9; }
:root[data-theme="light"] .st-in_stock { background: #dcfce7; color: #166534; }
:root[data-theme="light"] .st-in_order { background: #fef3c7; color: #92400e; }
:root[data-theme="light"] .st-picked { background: #fed7aa; color: #9a3412; }
:root[data-theme="light"] .unit-detail-title .wmr { color: #16a34a; }
:root[data-theme="light"] .viewer-bar .sp-btn {
background: rgba(15, 23, 42, 0.6); border-color: rgba(255,255,255,0.25); color: #f1f5f9;
}
:root[data-theme="light"] .viewer-bar .sp-btn:hover { border-color: #67e8f9; color: #67e8f9; background: rgba(15, 23, 42, 0.75); }
:root[data-theme="light"] .sp-hero {
background:
radial-gradient(ellipse 70% 90% at 80% 50%, rgba(6, 182, 212, 0.10), transparent 60%),
linear-gradient(135deg, #0c4a6e 0%, #155e75 30%, #16213e 70%, #1e293b 100%);
border: 1px solid rgba(22, 33, 62, 0.30);
box-shadow: 0 12px 32px -8px rgba(22, 33, 62, 0.30), 0 4px 12px -2px rgba(22, 33, 62, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: #f0f9ff;
}
:root[data-theme="light"] .sp-kpi {
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(22, 33, 62, 0.04), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
:root[data-theme="light"] .sp-kpi:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px -8px rgba(22, 33, 62, 0.14), 0 4px 12px -4px rgba(22, 33, 62, 0.08);
border-color: rgba(22, 33, 62, 0.18);
}
:root[data-theme="light"] .sp-kpi-label { color: #64748b; }
:root[data-theme="light"] .sp-kpi-value { color: var(--portal-marine); }
:root[data-theme="light"] .sp-kpi-hint { color: #94a3b8; }
:root[data-theme="light"] .sp-kpi-value.in { color: #16a34a; }
:root[data-theme="light"] .sp-kpi-value.out { color: #d97706; }
:root[data-theme="light"] .sp-tabs {
background: linear-gradient(180deg, #ffffff, #f8fafc);
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(22, 33, 62, 0.04);
}
:root[data-theme="light"] .sp-tab { color: #64748b; }
:root[data-theme="light"] .sp-tab:hover:not(.active) { color: var(--portal-marine); background: var(--portal-marine-tint); }
:root[data-theme="light"] .sp-tab.active {
background: linear-gradient(135deg, #16213e 0%, #1e3a5f 100%); color: #fff;
box-shadow: 0 2px 8px rgba(22, 33, 62, 0.30);
}
:root[data-theme="light"] .sp-tab-controls > [data-controls-for] { border-left-color: #e2e8f0; }
:root[data-theme="light"] .sp-tab-controls input,
:root[data-theme="light"] .sp-tab-controls select {
background: linear-gradient(180deg, #ffffff, #fbfcfe); border: 1px solid #cbd5e1; color: #0f172a;
}
:root[data-theme="light"] .sp-tab-controls input:focus,
:root[data-theme="light"] .sp-tab-controls select:focus {
border-color: #16213e; box-shadow: 0 0 0 3px rgba(22, 33, 62, 0.12);
}
:root[data-theme="light"] .sp-btn { background: linear-gradient(180deg, #ffffff, #f8fafc); border-color: #cbd5e1; color: #1e293b; }
:root[data-theme="light"] .sp-btn:hover { background: var(--portal-marine-tint); border-color: var(--portal-marine); color: var(--portal-marine); }
:root[data-theme="light"] .sp-btn.primary {
background: linear-gradient(135deg, var(--portal-marine), var(--portal-marine-soft));
border-color: var(--portal-marine); color: #fff;
}
:root[data-theme="light"] .sp-table {
background: linear-gradient(180deg, #ffffff, #fbfcfe); border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(22, 33, 62, 0.04);
}
:root[data-theme="light"] .sp-table th { background: #f1f5f9; color: #475569; border-bottom-color: #e2e8f0; }
:root[data-theme="light"] .sp-table td { border-bottom-color: #e2e8f0; color: #0f172a; }
:root[data-theme="light"] .sp-table tbody tr:hover { background: rgba(22, 33, 62, 0.03); }
:root[data-theme="light"] .sp-table tbody tr:nth-child(even) { background: rgba(248, 250, 252, 0.5); }
:root[data-theme="light"] .sp-table tbody tr:nth-child(even):hover { background: rgba(22, 33, 62, 0.04); }
:root[data-theme="light"] .sp-table td.dim { color: #475569; }
:root[data-theme="light"] .st-expected { color: #64748b; border-color: #94a3b8; }
:root[data-theme="light"] .st-dispatched { background: #e2e8f0; color: #475569; }
:root[data-theme="light"] .cx-t1 { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
:root[data-theme="light"] .cx-cleared { background: #dcfce7; color: #166534; border-color: #86efac; }
:root[data-theme="light"] .cx-exa { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
:root[data-theme="light"] .cx-partial { background: #fde68a; color: #92400e; border-color: #f59e0b; }
:root[data-theme="light"] .files-btn { background: #ffffff; border-color: #cbd5e1; color: #1e293b; }
:root[data-theme="light"] .files-btn:hover { border-color: var(--portal-marine); background: var(--portal-marine-tint); color: var(--portal-marine); }
:root[data-theme="light"] .files-btn .cnt { color: #0e7490; }
:root[data-theme="light"] .order-card {
background: #ffffff; border: 1px solid #e2e8f0; border-left-width: 4px;
box-shadow: 0 1px 2px rgba(22, 33, 62, 0.04);
transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
:root[data-theme="light"] .order-card:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(22, 33, 62, 0.18), 0 4px 12px -4px rgba(22, 33, 62, 0.08);
border-color: rgba(22, 33, 62, 0.22);
}
:root[data-theme="light"] .order-card.status-placed { background: #ffffff; border-left-color: #eab308; }
:root[data-theme="light"] .order-card.status-picking { background: #ffffff; border-left-color: #60a5fa; }
:root[data-theme="light"] .order-card.status-picking::before {
background: linear-gradient(90deg, rgba(96,165,250,0) 0%, rgba(96,165,250,0.28) 50%, rgba(96,165,250,0) 100%);
}
:root[data-theme="light"] .order-card.status-picking.expanded { border-left-color: #e2e8f0; }
:root[data-theme="light"] .order-card.status-ready { background: #ffffff; border-left-color: #16a34a; }
:root[data-theme="light"] .order-card.status-dispatched {
background: linear-gradient(180deg, #f8fafc, #ffffff); border-left-color: #94a3b8;
box-shadow: 0 1px 2px rgba(22, 33, 62, 0.03);
}
:root[data-theme="light"] .order-card.status-dispatched:hover { transform: none; }
:root[data-theme="light"] .order-card-head:hover { background: linear-gradient(180deg, rgba(22, 33, 62, 0.025), rgba(22, 33, 62, 0.05)); }
:root[data-theme="light"] .order-ref { color: var(--portal-marine); }
:root[data-theme="light"] .order-id, :root[data-theme="light"] .order-meta { color: #64748b; }
:root[data-theme="light"] .order-meta-piece .val { color: #1e293b; }
:root[data-theme="light"] .order-meta-piece.dispatched .val { color: #16a34a; }
:root[data-theme="light"] .order-meta-piece.pack .val { color: var(--portal-marine); }
:root[data-theme="light"] .order-meta-piece.pack .kg { color: #d97706; }
:root[data-theme="light"] .order-chevron { color: var(--portal-marine); }
:root[data-theme="light"] .order-card-body { background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%); border-top-color: #e2e8f0; }
:root[data-theme="light"] .order-section-title { color: #475569; }
:root[data-theme="light"] .order-items-table { background: #ffffff; border-color: #e2e8f0; }
:root[data-theme="light"] .order-items-table th { background: #f1f5f9; color: #64748b; }
:root[data-theme="light"] .order-items-table th, :root[data-theme="light"] .order-items-table td { border-bottom-color: #e2e8f0; }
:root[data-theme="light"] .order-remarks {
background: linear-gradient(180deg, rgba(6, 182, 212, 0.06), rgba(6, 182, 212, 0.03));
border-left: 3px solid #0891b2; color: #475569;
}
:root[data-theme="light"] .order-dots .dot-step.is-pending .dot { background: #f1f5f9; border-color: #cbd5e1; }
:root[data-theme="light"] .order-dot-tooltip {
background: #ffffff; color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .order-dot-tooltip .tip-title { color: #1e3a5f; }
:root[data-theme="light"] .order-dot-tooltip .tip-row .k { color: #64748b; }
:root[data-theme="light"] .order-dot-tooltip .tip-row .v { color: #0f172a; }
:root[data-theme="light"] .order-dot-tooltip .tip-val { color: #0f172a; }
:root[data-theme="light"] .doc-ribbon { background: #ffffff; border-color: #e2e8f0; }
:root[data-theme="light"] .doc-ribbon button { color: #64748b; }
:root[data-theme="light"] .doc-ribbon button.active {
background: linear-gradient(135deg, var(--portal-marine), var(--portal-marine-soft)); color: #fff;
box-shadow: 0 2px 6px rgba(22, 33, 62, 0.25);
}
:root[data-theme="light"] .doc-ribbon button:hover:not(.active) { color: var(--portal-marine); }
:root[data-theme="light"] .doc-card { background: linear-gradient(180deg, #ffffff, #f8fafc); border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(22, 33, 62, 0.04); }
:root[data-theme="light"] .doc-card-sub { color: #64748b; }
:root[data-theme="light"] .doc-file-row { background: #ffffff; border-color: #e2e8f0; }
:root[data-theme="light"] .proof-locked { border-color: #cbd5e1; color: #64748b; }
:root[data-theme="light"] .modal-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 20px 40px rgba(22, 33, 62, 0.20); }
:root[data-theme="light"] .modal-card h3 { color: var(--portal-marine); }
:root[data-theme="light"] .modal-meta { color: #64748b; border-bottom-color: #e2e8f0; }
:root[data-theme="light"] .modal-meta b { color: #0f172a; }
:root[data-theme="light"] .modal-section-title { color: #64748b; }
:root[data-theme="light"] .modal-section-title .n { color: #0e7490; }
:root[data-theme="light"] .modal-close { color: #64748b; }
:root[data-theme="light"] .modal-close:hover { color: var(--portal-marine); }
:root[data-theme="light"] .req-card { background: linear-gradient(135deg, rgba(22,33,62,0.04), rgba(6,182,212,0.05)); border-color: #16213e; }
:root[data-theme="light"] .sp-toast { background: #ffffff; border-color: var(--portal-marine); color: #1e293b; box-shadow: 0 6px 20px rgba(22, 33, 62, 0.15); }
:root[data-theme="light"] .sp-empty { color: #64748b; }
:root[data-theme="light"] .gal-thumb { background: #e2e8f0; }
:root[data-theme="light"] .ata-stamp { color: var(--portal-marine); border-color: rgba(22, 33, 62, 0.4); }
/* The caption sits on a dark scrim ON TOP OF THE PHOTO in both themes, so it
must stay white - themes.css pushes body text to near-black in light mode,
which left it dark-on-dark and unreadable. Same reasoning as .viewer-nav. */
:root[data-theme="light"] .gal-thumb .nm {
color: #ffffff !important;
background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,0.82)) !important;
}
:root[data-theme="light"] .doc-file-row .sub { color: #64748b; }
:root[data-theme="light"] .gal-bar { color: #64748b; }
:root[data-theme="light"] .gal-bar b { color: var(--portal-marine); }
/* ============================================================
LIGHT THEME — overrides that must beat themes.css
themes.css declares, for the whole document:
[data-theme="light"] button { background:#fff!important;
color:#102033!important;
border:1px solid #b9cedb!important }
Every tab, pill and toolbar control here is a , so their
light skin only survives with !important of its own. Keep this
block LAST so it also wins on equal specificity.
============================================================ */
:root[data-theme="light"] .sp-tab {
background: transparent !important; border: 0 !important; color: #64748b !important;
}
:root[data-theme="light"] .sp-tab:hover:not(.active) {
background: var(--portal-marine-tint) !important; color: var(--portal-marine) !important;
}
:root[data-theme="light"] .sp-tab.active {
background: linear-gradient(135deg, #16213e 0%, #1e3a5f 100%) !important;
color: #fff !important; border: 0 !important;
}
:root[data-theme="light"] .tab-badge { color: #fff !important; }
:root[data-theme="light"] .sp-btn {
background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
border: 1px solid #cbd5e1 !important; color: #1e293b !important;
}
:root[data-theme="light"] .sp-btn:hover:not(:disabled) {
background: var(--portal-marine-tint) !important;
border-color: var(--portal-marine) !important; color: var(--portal-marine) !important;
}
:root[data-theme="light"] .sp-btn.primary {
background: linear-gradient(135deg, var(--portal-marine), var(--portal-marine-soft)) !important;
border-color: var(--portal-marine) !important; color: #fff !important;
}
:root[data-theme="light"] .files-btn {
background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #1e293b !important;
}
:root[data-theme="light"] .files-btn:hover {
border-color: var(--portal-marine) !important;
background: var(--portal-marine-tint) !important; color: var(--portal-marine) !important;
}
:root[data-theme="light"] .files-btn.none { background: transparent !important; }
:root[data-theme="light"] .doc-ribbon button {
background: transparent !important; border: 0 !important; color: #64748b !important;
}
:root[data-theme="light"] .doc-ribbon button.active {
background: linear-gradient(135deg, var(--portal-marine), var(--portal-marine-soft)) !important;
color: #fff !important;
}
:root[data-theme="light"] .modal-close,
:root[data-theme="light"] .rm-btn {
background: transparent !important; border: 0 !important; color: #64748b !important;
}
:root[data-theme="light"] .modal-close:hover { color: var(--portal-marine) !important; }
:root[data-theme="light"] .rm-btn:hover { color: #dc2626 !important; background: rgba(220, 38, 38, 0.08) !important; }
/* The viewer sits on a near-black overlay in BOTH themes — its controls
must stay dark-styled or they glow white on the photo. */
:root[data-theme="light"] .viewer-nav {
background: rgba(15, 23, 42, 0.55) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #fff !important;
}
:root[data-theme="light"] .viewer-nav:hover { background: rgba(6, 182, 212, 0.55) !important; }
:root[data-theme="light"] .viewer-bar .sp-btn {
background: rgba(15, 23, 42, 0.60) !important;
border-color: rgba(255, 255, 255, 0.25) !important; color: #f1f5f9 !important;
}
/* Nav buttons sit on the navy bar in both themes — frosted, never white. */
:root[data-theme="light"] .sp-nav-btn,
:root[data-theme="light"] .nav-theme-toggle {
background: rgba(255, 255, 255, 0.10) !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important; color: #fff !important;
}
:root[data-theme="light"] .sp-nav-btn:hover,
:root[data-theme="light"] .nav-theme-toggle:hover { background: rgba(255, 255, 255, 0.20) !important; }
/* Hero sits on the navy gradient in light mode — main.css white fills off. */
:root[data-theme="light"] .sp-hero > div,
:root[data-theme="light"] .sp-hero h1,
:root[data-theme="light"] .sp-hero-title,
:root[data-theme="light"] .sp-hero-sub { background: transparent !important; }
:root[data-theme="light"] .sp-hero-title { color: #ffffff !important; }
:root[data-theme="light"] .sp-hero-sub { color: rgba(255, 255, 255, 0.82) !important; }
:root[data-theme="light"] .sp-hero-customer {
background: rgba(255, 255, 255, 0.10) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
/* The switcher keeps the light-theme select skin (white field, dark text) in
BOTH themes' light mode — a translucent field would render its native option
popup white-on-white on Windows. */
:root[data-theme="light"] .sp-hero-select {
background: linear-gradient(180deg, #ffffff, #fbfcfe) !important;
border: 1px solid #cbd5e1 !important; color: #0f172a !important;
}
:root[data-theme="light"] .sp-hero-select:focus {
border-color: #16213e !important; box-shadow: 0 0 0 3px rgba(22, 33, 62, 0.12) !important;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
@media (max-width: 720px) {
.sp-wrap { padding: 1rem 0.8rem 3rem; }
.order-card-head { grid-template-columns: 18px 1fr; }
.order-card-r-outer { display: none; }
}
/* ==================== part 2: portal v2 additions ==================== */
/* ======================================================================
Poeldijk round 2 -- the shipment-level My Stock, the packing-list ribbon,
the log column and the two Poeldijk-only statuses. Everything else on this
page is the live Schiphol design, untouched.
====================================================================== */
/* --- My Stock: ELEVEN columns, fixed layout, so these widths ARE the budget ---
Every one of them must be named: the Schiphol block higher up this file sets
nth-child(11) to 36px for its own table, and an unnamed column here would
silently take it. */
.sp-table.stock-table th:nth-child(1) { width: 114px; } /* MYO-REF */
.sp-table.stock-table th:nth-child(2) { width: 146px; } /* Shipper */
.sp-table.stock-table th:nth-child(3) { width: 116px; } /* BL */
.sp-table.stock-table th:nth-child(4) { width: 138px; } /* Container */
.sp-table.stock-table th:nth-child(5) { width: 150px; } /* Vessel */
.sp-table.stock-table th:nth-child(6) { width: 180px; } /* Product */
.sp-table.stock-table th:nth-child(7) { width: 90px; } /* Boxes */
.sp-table.stock-table th:nth-child(8) { width: 138px; } /* Days in stock */
.sp-table.stock-table th:nth-child(9) { width: 94px; } /* Packages */
.sp-table.stock-table th:nth-child(10) { width: 104px; } /* Weight */
.sp-table.stock-table th:nth-child(11) { width: 104px; } /* Status */
.sp-table.stock-table th:nth-child(12) { width: 168px; } /* Files & log */
/* --- Product over brand, the way Vessel stacks the voyage under the name --- */
.prd, .brd { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prd { font-weight: 600; }
.brd { font-family: var(--font-mono); font-size: 0.66rem; opacity: 0.6; }
.pb-more {
display: inline-block; margin-left: 5px; padding: 0 5px;
border-radius: 7px; font-family: var(--font-mono); font-size: 0.6rem;
font-weight: 700; color: var(--skf-cyan);
background: rgba(6, 182, 212, 0.12);
}
/* The Expected table lays itself out, so its product cell needs a ceiling. */
.sp-table td.pb { max-width: 210px; }
/* Order details moved up beside the Picking list label. */
.ost-l { display: inline-flex; align-items: center; gap: 0.6rem; }
.ost-l .sp-btn { text-transform: none; letter-spacing: 0; font-weight: 700; }
/* The Order History empty state explains the tab's default rather than implying
the customer has no orders at all. */
.oh-empty-sub { display: block; margin-top: 0.3rem; font-size: 0.74rem; opacity: 0.75; }
/* Gross over net, each on its own line, so a five-figure weight never widens the row. */
.wt-g, .wt-n { display: block; font-family: var(--font-mono); white-space: nowrap; }
.wt-g { font-size: 0.78rem; font-weight: 800; color: var(--skf-orange); }
.wt-n { font-size: 0.62rem; opacity: 0.6; margin-top: 1px; }
.wt-g .u, .wt-n .u { margin-left: 3px; font-size: 0.56rem; font-weight: 600; opacity: 0.7; }
/* Our own order number, kept beside the customer's in the modal heading. */
.ord-ours {
margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.62rem;
font-weight: 700; opacity: 0.55; letter-spacing: 0.3px;
}
/* --- The documents folder view, behind the Files button --------------------
Folders, never a flat grid; arrival on top; a count and a zip on every folder header;
download-all in the toolbar. Same shape as the backoffice Documents tab, so the office
and the customer are reading the same thing. */
.dv-toolbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0.5rem 0 0.9rem;
}
.dv-toolbar > * { flex: 0 0 auto; white-space: nowrap; }
.dv-hint { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 0.68rem; opacity: 0.5; }
.dv-sel-count { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.72; }
.dv-card {
border: 1px solid var(--border-color); border-radius: 10px;
padding: 0.65rem 0.75rem 0.75rem; margin-bottom: 0.7rem; background: var(--bg-tertiary);
}
.dv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-ico { font-size: 0.95rem; }
.dv-name { font-weight: 800; font-size: 0.82rem; }
.dv-meta, .dv-stamp {
font-family: var(--font-mono); font-size: 0.64rem; opacity: 0.58; white-space: nowrap;
}
.dv-all {
margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
font-size: 0.66rem; font-weight: 700; opacity: 0.75; cursor: pointer;
white-space: nowrap; user-select: none;
}
.dv-all:hover { opacity: 1; }
.dv-all input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: #06b6d4; }
.dv-zip { margin-left: 8px; }
:root[data-theme="light"] .dv-all input { accent-color: #0e7490; }
.dv-card .gal-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.dv-note {
display: none; margin-top: 0.4rem; padding: 0.6rem 0.7rem; border-radius: 8px;
font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.5;
background: rgba(6, 182, 212, 0.10); border: 1px solid rgba(6, 182, 212, 0.35);
}
.dv-note.show { display: block; }
.dv-note b { color: var(--skf-cyan); }
:root[data-theme="light"] .dv-card { background: #f8fbfd; }
:root[data-theme="light"] .dv-note { background: #e6f3f8; border-color: #9cc9dd; }
:root[data-theme="light"] .dv-note b { color: #0e7490; }
/* --- Temperature, the MRN header and the report sheet --------------------- */
.temp-val { font-family: var(--font-mono); font-weight: 800; color: #38bdf8; white-space: nowrap; }
.temp-val .u { margin-left: 2px; font-size: 0.62rem; font-weight: 600; opacity: 0.75; }
:root[data-theme="light"] .temp-val { color: #0369a1 !important; }
.unit-detail-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mrn-btn {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px;
font-size: 0.66rem; font-weight: 800; cursor: pointer;
border: 1px solid rgba(6, 182, 212, 0.45); background: rgba(6, 182, 212, 0.12);
color: var(--skf-cyan); white-space: nowrap;
}
.mrn-btn:hover { background: rgba(6, 182, 212, 0.25); }
.mrn-last { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mrn-type {
padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono);
font-size: 0.6rem; font-weight: 800; letter-spacing: 0.4px;
}
.mrn-t1, .mrn-t2 { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.mrn-exa { background: rgba(139, 92, 246, 0.18); color: #a78bfa; }
.mrn-clearance { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.mrn-no { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; opacity: 0.85; }
.mrn-seal {
font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
padding: 1px 6px; border-radius: 4px;
background: rgba(148, 163, 184, 0.16); opacity: 0.9;
}
.mrn-none { font-size: 0.66rem; opacity: 0.5; font-style: italic; }
:root[data-theme="light"] .mrn-t1, :root[data-theme="light"] .mrn-t2 { background: #fef3c7; color: #92400e !important; }
:root[data-theme="light"] .mrn-exa { background: #ede9fe; color: #5b21b6 !important; }
:root[data-theme="light"] .mrn-clearance { background: #dcfce7; color: #166534 !important; }
:root[data-theme="light"] .mrn-btn {
background: #cffafe !important; border: 1px solid #67e8f9 !important; color: #0e7490 !important;
}
.rep-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0.5rem 0 0.8rem; }
.rep-hint, .rep-note { font-size: 0.68rem; opacity: 0.6; font-family: var(--font-mono); }
.rep-note { color: var(--skf-cyan); opacity: 0.95; }
.rep-sheet {
background: #ffffff; color: #1b2733; border-radius: 10px; padding: 1.4rem 1.5rem;
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45); font-size: 0.78rem; line-height: 1.55;
}
.rep-head { border-bottom: 2px solid #1b2733; padding-bottom: 0.6rem; margin-bottom: 0.9rem; }
.rep-brand { font-weight: 800; letter-spacing: 0.4px; font-size: 0.82rem; }
.rep-title { font-size: 1.05rem; font-weight: 800; margin-top: 2px; }
.rep-meta { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.65; margin-top: 2px; }
.rep-block { margin-bottom: 1rem; }
.rep-block-head {
font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px;
opacity: 0.6; border-bottom: 1px solid #d6e2ea; padding-bottom: 3px; margin-bottom: 6px;
}
.rep-table { width: 100%; border-collapse: collapse; }
.rep-table th {
text-align: left; font-weight: 700; width: 34%; padding: 3px 8px 3px 0;
vertical-align: top; color: #47586a;
}
.rep-table td { padding: 3px 0; }
.rep-grid th { width: auto; border-bottom: 1px solid #d6e2ea; padding-bottom: 4px; }
.rep-grid td { border-bottom: 1px solid #eef4f8; }
.rep-foot {
margin-top: 1rem; border-top: 1px solid #d6e2ea; padding-top: 0.5rem;
font-size: 0.66rem; opacity: 0.55;
}
@media print {
body > *:not(.modal-mask) { display: none !important; }
.modal-mask:not(.show) { display: none !important; }
.modal-mask.show { position: static; background: none; display: block !important; }
.modal-close, .rep-actions, .modal-meta, .modal-card > h3 { display: none !important; }
.modal-card { box-shadow: none !important; border: none !important; max-width: none !important; }
.rep-sheet { box-shadow: none; padding: 0; }
}
/* The proof gallery has no real photos in a mockup: .ph is the portal's own placeholder. */
.gal-thumb .ph { opacity: 0.35; transition: opacity 0.12s ease, transform 0.12s ease; }
.gal-thumb:hover .ph { opacity: 0.6; transform: scale(1.08); }
/* The tick is the only thing that selects, so give it a real hit area and say so. */
.gal-thumb .ck { cursor: pointer; }
.gal-thumb::after {
content: '\2921'; position: absolute; top: 6px; right: 6px; z-index: 2;
width: 20px; height: 20px; border-radius: 5px; display: flex;
align-items: center; justify-content: center; font-size: 0.7rem;
background: rgba(15, 23, 42, 0.55); color: #e2e8f0; opacity: 0; transition: opacity 0.12s ease;
}
.gal-thumb:hover::after { opacity: 1; }
.proof-locked {
margin-top: 0.6rem; padding: 0.8rem 0.9rem; border-radius: 9px;
border: 1px dashed var(--border-color); font-size: 0.78rem; opacity: 0.72;
}
/* The shipper's name is the one cell here that can genuinely outrun its column. */
.shp {
display: block; font-weight: 600; max-width: 180px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A shipment row is clickable, and says so. */
.sp-table.stock-table tr.has-detail { cursor: pointer; }
.sp-table.stock-table tr.has-detail.is-open .row-caret { transform: rotate(90deg); }
.row-caret { display: inline-block; transition: transform 0.14s ease; }
/* Vessel over voyage, so a long vessel name never pushes the row taller. */
.vsl, .voy { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsl { font-weight: 600; }
.voy { font-family: var(--font-mono); font-size: 0.66rem; opacity: 0.6; }
/* Days in stock carries the ETA WHS stamp under it -- one column, both facts. */
.eta-stamp {
display: block; margin-top: 1px; font-family: var(--font-mono);
font-size: 0.64rem; opacity: 0.62; white-space: nowrap;
}
.eta-t { color: var(--skf-cyan); }
/* "1 / 22" -- what is in store, over what the shipment brought. */
.pal-frac { display: block; font-family: var(--font-mono); font-size: 0.86rem; font-weight: 800; }
.pal-frac b { font-weight: 800; color: var(--skf-cyan); }
.pal-frac .sl { opacity: 0.45; margin: 0 1px; }
.pal-unit { display: block; font-size: 0.6rem; text-transform: uppercase;
letter-spacing: 0.4px; opacity: 0.55; }
/* --- The log: a button on the line, the cycle in a modal --- */
.acts { white-space: nowrap; }
.acts .files-btn { margin-right: 4px; }
.log-btn {
display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px;
border-radius: 6px; cursor: pointer; font-size: 0.66rem; font-weight: 700;
border: 1px solid var(--border-color); background: rgba(148, 163, 184, 0.10);
color: var(--text-primary);
}
.log-btn:hover { border-color: var(--skf-cyan); color: var(--skf-cyan); }
.log-btn.has-flag { border-color: rgba(251, 191, 36, 0.55); color: #fbbf24; }
.log-btn.has-flag .cnt {
background: rgba(251, 191, 36, 0.22); color: #fbbf24; border-radius: 999px;
padding: 0 5px; font-family: var(--font-mono); font-size: 0.6rem;
}
.log-btn.none { opacity: 0.4; cursor: default; border: none; background: none; }
/* The cycle itself: oldest first, the lines that needed a decision picked out. */
.lg-table .lg-when { white-space: nowrap; opacity: 0.8; }
.lg-table .lg-note { font-size: 0.78rem; opacity: 0.85; }
.lg-table tr.is-flag > td { background: rgba(251, 191, 36, 0.07); }
.lg-table tr.is-flag > td:first-child { box-shadow: inset 2px 0 0 #fbbf24; }
.log-chip, .log-more {
display: inline-block; padding: 2px 6px; border-radius: 4px;
font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800;
letter-spacing: 0.3px; white-space: nowrap; border: 1px solid transparent; cursor: help;
}
.log-scan { background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.4); }
.log-step { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.34); }
.log-ok { background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.36); }
.log-block { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.45); }
.log-hold { background: rgba(249, 115, 22, 0.16); border-color: rgba(249, 115, 22, 0.42); }
.log-return { background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.42); }
.log-more { background: rgba(148, 163, 184, 0.18); border-color: rgba(148, 163, 184, 0.4); }
.log-scan { color: #fbbf24; }
.log-block { color: #f87171; }
.log-hold { color: #fb923c; }
.log-return { color: #a78bfa; }
.log-more { color: #cbd5e1; }
.log-step { color: #cbd5e1; }
.log-ok { color: #4ade80; }
/* A container number is one token -- never wrap it. */
.cnr { white-space: nowrap; }
/* --- Tooltips -------------------------------------------------------------
The browser's own tooltip is a black box that cannot be styled, waits about a second
and truncates. Every `title` is rewritten to `data-tip` at build time, which switches
the native one off, and one element at level renders them instead.
It is positioned from script rather than with ::after on purpose: the stock table runs
table-layout: fixed with `overflow: hidden` on the cells, so a pseudo-element tooltip
would be clipped by the very cell it belongs to. */
.tip {
position: fixed; top: 0; left: 0; z-index: 4000;
max-width: 300px; padding: 8px 11px; border-radius: 9px;
background: var(--bg-secondary); color: var(--text-primary);
border: 1px solid var(--border-color);
font-family: var(--font-sans, inherit); font-size: 0.72rem; font-weight: 600;
line-height: 1.5; text-align: left; white-space: normal;
box-shadow: 0 12px 30px rgba(2, 6, 23, 0.55);
opacity: 0; pointer-events: none; transform: translateY(3px);
transition: opacity 0.12s ease, transform 0.12s ease;
}
.tip.show { opacity: 1; transform: translateY(0); }
.tip::after {
content: ''; position: absolute; left: var(--ax, 50%); margin-left: -6px;
border: 6px solid transparent; border-top-color: var(--border-color);
top: 100%;
}
.tip.below::after {
top: auto; bottom: 100%;
border-top-color: transparent; border-bottom-color: var(--border-color);
}
[data-tip] { cursor: help; }
a[data-tip], button[data-tip], .files-btn[data-tip], .log-btn[data-tip],
.ord-link[data-tip], .gal-thumb[data-tip], tr[data-tip], .sp-tab[data-tip] { cursor: pointer; }
.gal-thumb[data-tip] { cursor: zoom-in; }
:root[data-theme="light"] .tip {
background: #ffffff; color: #1d2c3b; border-color: #cbd5e1;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .tip::after { border-top-color: #cbd5e1; }
:root[data-theme="light"] .tip.below::after { border-bottom-color: #cbd5e1; }
/* The dashboard's "selected for customs" mark, on the container line. */
.cust-flag {
display: inline-flex; align-items: center; vertical-align: -2px;
margin-left: 5px; color: #fbbf24; cursor: help;
}
.warn-tri {
width: 14px; height: 14px; display: block;
filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.45));
}
.cust-flag:hover .warn-tri { filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.8)); }
/* --- Two statuses Schiphol does not have, in the portal's own chip idiom --- */
.st-in_transit { background: rgba(56, 189, 248, 0.18); color: #38bdf8; }
.st-on_hold { background: rgba(249, 115, 22, 0.20); color: #fb923c; }
.st-returned { background: rgba(139, 92, 246, 0.18); color: #a78bfa; }
/* --- The packing-list ribbon --- */
tr.unit-detail-row > td { padding: 0.55rem 0.75rem 0.7rem; }
.unit-detail-title .wmr { margin-left: 0.6rem; font-weight: 700; opacity: 0.7; }
.order-items-table .right { text-align: right; }
/* An allocated pallet's order reference, which opens the order. */
.ord-link {
font-family: var(--font-mono); font-size: 0.66rem; font-weight: 800;
padding: 2px 7px; border-radius: 4px; cursor: pointer; white-space: nowrap;
background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.4);
color: var(--skf-cyan);
}
.ord-link:hover { background: rgba(6, 182, 212, 0.24); }
/* --- The mini order modal --- */
.ord-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0.55rem 1.1rem; margin: 0.4rem 0 0.9rem;
}
.ord-grid > div { display: flex; flex-direction: column; gap: 2px; }
.ord-grid .k {
font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.6;
}
.ord-grid .v { font-size: 0.82rem; font-weight: 600; }
/* --- Description cells keep the produce identity on one clipped line --- */
.sp-table td.desc { white-space: normal; }
td.desc > .clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --- Light theme ---------------------------------------------------------
themes.css carries `[data-theme="light"] span { color: inherit !important }`, which
beats every chip colour the portal itself defines for light mode -- so in light theme
a CLEARED chip, a T1 chip and a "blocked by NVWA" chip all render the same dark text
and the colour stops meaning anything. The rule is aimed at stray spans in body copy,
so it is scoped off the chip families here. This is a bug on the live site today, not
something this mockup introduced. */
:root[data-theme="light"] span.st-chip,
:root[data-theme="light"] span.cx-chip,
:root[data-theme="light"] span.pkg-type-chip,
:root[data-theme="light"] span.dg-flag,
:root[data-theme="light"] span.log-chip,
:root[data-theme="light"] span.log-more,
:root[data-theme="light"] span.log-step,
:root[data-theme="light"] span.log-ok,
:root[data-theme="light"] span.ata-stamp,
:root[data-theme="light"] .pal-frac b,
:root[data-theme="light"] span.cust-flag { color: revert-layer; }
/* Restated explicitly, because `revert-layer` cannot beat an !important declaration:
each chip family gets its light-mode colour back with the same weight. */
:root[data-theme="light"] .st-in_stock { color: #166534 !important; }
:root[data-theme="light"] .st-picked { color: #9a3412 !important; }
:root[data-theme="light"] .st-in_order { color: #92400e !important; }
:root[data-theme="light"] .st-dispatched { color: #1e293b !important; }
:root[data-theme="light"] .st-expected { color: #475569 !important; }
:root[data-theme="light"] .st-unload_ok { color: #0f766e !important; }
:root[data-theme="light"] .st-in_transit { color: #0369a1 !important; }
:root[data-theme="light"] .st-on_hold { color: #9a3412 !important; }
:root[data-theme="light"] .st-returned { color: #5b21b6 !important; }
:root[data-theme="light"] .cx-cleared { color: #166534 !important; }
:root[data-theme="light"] .cx-t1 { color: #92400e !important; }
:root[data-theme="light"] .pkg-type-chip { color: #0e7490 !important; }
:root[data-theme="light"] .pkg-type-chip.pkg { color: #475569 !important; }
:root[data-theme="light"] .dg-flag.dg-y { color: #b91c1c !important; }
:root[data-theme="light"] .dg-flag.dg-n { color: #64748b !important; }
:root[data-theme="light"] .ata-stamp { color: #0e7490 !important; }
:root[data-theme="light"] .pal-frac b { color: #0e7490 !important; }
:root[data-theme="light"] .log-scan { color: #92400e !important; }
:root[data-theme="light"] .log-block { color: #b91c1c !important; }
:root[data-theme="light"] .log-hold { color: #9a3412 !important; }
:root[data-theme="light"] .log-return { color: #5b21b6 !important; }
:root[data-theme="light"] .log-more { color: #475569 !important; }
:root[data-theme="light"] .log-step { color: #475569 !important; }
:root[data-theme="light"] .log-ok { color: #166534 !important; }
/* --- Light theme: the same colours, on light grounds --- */
:root[data-theme="light"] .log-scan { background: #fef3c7; border-color: #fcd34d; }
:root[data-theme="light"] .log-block { background: #fee2e2; border-color: #fca5a5; }
:root[data-theme="light"] .log-hold { background: #ffedd5; border-color: #fdba74; }
:root[data-theme="light"] .log-return { background: #ede9fe; border-color: #c4b5fd; }
:root[data-theme="light"] .log-more { background: #e2e8f0; border-color: #cbd5e1; }
:root[data-theme="light"] .log-step { background: #e2e8f0; border-color: #cbd5e1; }
:root[data-theme="light"] .log-ok { background: #dcfce7; border-color: #86efac; }
:root[data-theme="light"] .log-btn {
background: #ffffff !important; border: 1px solid #b9cedb !important; color: #1e293b !important;
}
:root[data-theme="light"] .log-btn:hover {
border-color: #0f7ea2 !important; color: #0f7ea2 !important;
}
:root[data-theme="light"] .log-btn.has-flag {
border-color: #f59e0b !important; color: #92400e !important;
}
:root[data-theme="light"] .lg-table tr.is-flag > td { background: #fffbeb; }
:root[data-theme="light"] .st-in_transit { background: #e0f2fe; }
:root[data-theme="light"] .st-on_hold { background: #ffedd5; }
:root[data-theme="light"] .st-returned { background: #ede9fe; }
:root[data-theme="light"] .cust-flag { color: #b45309 !important; }
:root[data-theme="light"] .warn-tri { filter: none; }
/* themes.css paints every light-mode white with !important, so the order
reference needs the same weight to stay recognisable as a link to the order. */
:root[data-theme="light"] .ord-link {
background: #cffafe !important; border: 1px solid #67e8f9 !important; color: #0e7490 !important;
}
:root[data-theme="light"] .ord-link:hover {
background: #a5f3fc !important; border-color: #0e7490 !important;
}
@media (max-width: 760px) {
.ord-grid { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------------
Local-drift guard. This repo's shared stylesheets are NOT the ones the design
was approved on (components.css 25.6 KB here vs 38.9 KB there, themes.css 56.8
vs 52.9), and their light-theme rules reach a few elements this file otherwise
leaves alone. These five declarations pin the approved values, measured from
the signed-off page. Without them the light theme drifts.
--------------------------------------------------------------------------- */
:root[data-theme="light"] .sp-table.stock-table,
:root[data-theme="light"] .sp-table.stock-table tbody tr { color: #102033; }
:root[data-theme="light"] .unit-detail-title {
color: #64748b;
background: transparent;
}
:root[data-theme="light"] .sp-panel,
:root[data-theme="light"] .table-scroll { background: transparent; }
/* ---------------------------------------------------------------------------
LIGHT THEME: the overlays must stay dark.
themes.css has `[data-theme="light"] div { background-color: inherit }` at
(0,1,1), which beats `.modal-mask` at (0,1,0). Every overlay div therefore
inherited the page's white background in light mode: modals sat on a solid
white sheet instead of floating over the portal, and the photo viewer showed
dispatch photos and CMR scans on white instead of black.
Pinned here rather than in themes.css, which the whole WMS shares.
--------------------------------------------------------------------------- */
:root[data-theme="light"] .modal-mask { background: rgba(15, 23, 42, 0.55) !important; }
:root[data-theme="light"] .viewer-mask { background: rgba(2, 6, 23, 0.90) !important; }
:root[data-theme="light"] .viewer-stage {
background: #0b1220 !important;
color: #e6edf3 !important;
}
:root[data-theme="light"] .viewer-cap,
:root[data-theme="light"] .viewer-box { background: transparent !important; }
:root[data-theme="light"] .viewer-cap .fn { color: #e6edf3 !important; }
:root[data-theme="light"] .viewer-cap .mt,
:root[data-theme="light"] .viewer-bar .idx { color: #94a3b8 !important; }
:root[data-theme="light"] .viewer-nav {
background: rgba(15, 23, 42, 0.62) !important;
color: #e6edf3 !important;
}
:root[data-theme="light"] .viewer-nav:hover { background: rgba(6, 182, 212, 0.55) !important; }
/* "showing 1,000 of 1,069" — only appears when a list really was cut short. */
.tab-count {
font-size: 0.68rem; opacity: 0.7; font-family: var(--font-mono);
color: #fbbf24; white-space: nowrap;
}
:root[data-theme="light"] .tab-count { color: #92400e; }
/* ============== Order History pager ==============
The tab renders thirty orders at a time. Before this it built a card for every
order a customer had ever placed — 2,191 of them for Citrozone BV — and the
server's 1,000-row cap meant the oldest were unreachable however long you waited. */
.oh-pager {
display: flex; align-items: center; justify-content: center;
gap: 8px; flex-wrap: wrap;
margin: 0.9rem 0 0.2rem; padding-top: 0.8rem;
border-top: 1px solid var(--border-color);
}
.oh-pager .sp-btn { min-width: 0; }
.oh-pager .sp-btn[disabled] { opacity: 0.38; cursor: default; }
.oh-pager .sp-btn[disabled]:hover {
background: transparent; border-color: var(--border-color); color: var(--text-primary);
}
.oh-pager-txt {
font-size: 0.74rem; color: var(--text-muted);
font-family: var(--font-mono); white-space: nowrap;
padding: 0 4px;
}
/* themes.css turns every span's colour to `inherit !important` in light mode, which
would drop this to the body colour and lose its secondary weight. */
:root[data-theme="light"] .oh-pager-txt { color: #5b6b7c !important; }
/* ============== Folder tiles: the real photo ==============
Every tile used to draw the same camera glyph. The