/* Fusion Flow Workbench: the Fusion theme (Common/Common/Branding/fusion_theme.css, loaded first at
   /branding/fusion_theme.css) with the shell and the few components this site adds. Tokens are the
   brand's (fusion_design_tokens.json); nothing here redefines a colour the theme already names. */
@font-face { font-family: "Codec Pro"; src: url("/branding/CodecPro-Regular%20(1).ttf") format("truetype"); font-display: swap; }
:root { --wb-sidebar: 14.5rem; }   /* 232px at the default size; the sidebar grows with the text */
/* Text size (text-size.js): every size is in rem; the root follows the screen width, the user's choice multiplies it */
html { --text-base: clamp(14px, .35vw + 11.5px, 17px); --text-scale: 1; font-size: calc(var(--text-base) * var(--text-scale)); }
html[data-text-size="85"] { --text-scale: .85; }
html[data-text-size="115"] { --text-scale: 1.15; }
html[data-text-size="130"] { --text-scale: 1.3; }
html[data-text-size="150"] { --text-scale: 1.5; }
html[data-text-size="175"] { --text-scale: 1.75; }
.textsize { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 2px; white-space: nowrap; margin-top: 10px; }
.textsize .ts-btn { font: inherit; font-size: .75rem; font-weight: 800; line-height: 1; border: 0; background: none; color: #fff; width: 1.9em; height: 1.9em; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.textsize .ts-btn:hover { background: rgba(0,196,180,0.25); }
.textsize .ts-btn:disabled { opacity: .35; cursor: default; background: none; }
.textsize .ts-val { font-size: .6875rem; font-weight: 700; color: var(--teal, #00C4B4); min-width: 3.2em; text-align: center; cursor: pointer; }
.textsize.floating { position: fixed; top: 12px; left: 12px; z-index: 60; margin: 0; background: var(--navy, #0B1D3A); }
html, body { height: 100%; }
body { margin: 0; background: var(--bg, #F0F4FF); color: var(--text, #1E2A3A); font-family: 'Montserrat', 'Codec Pro', 'Segoe UI', sans-serif; font-size: 0.8125rem; }
a { color: var(--teal-deep, #00A99B); }
.wb-shell { display: flex; min-height: 100vh; }
.wb-sidebar { width: var(--wb-sidebar); background: var(--navy, #0B1D3A); color: #fff; position: fixed; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; z-index: 20; }
.wb-brand { padding: 18px 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.wb-brand img { display: block; width: 100%; max-height: 54px; object-fit: contain; background: #fff; border-radius: 6px; padding: 6px 8px; }
.wb-brand .name { font-size: 0.8125rem; font-weight: 800; letter-spacing: .3px; margin-top: 10px; }
.wb-brand .tag { font-size: 0.5625rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--teal, #00C4B4); margin-top: 3px; }
.wb-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.wb-nav .group { font-size: 0.5625rem; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 12px 20px 4px; }
.wb-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: rgba(255,255,255,0.68); text-decoration: none; font-size: 0.75rem; font-weight: 500; border-left: 3px solid transparent; }
.wb-nav a:hover { background: rgba(0,196,180,0.08); color: #fff; }
.wb-nav a.active { background: rgba(0,196,180,0.12); color: var(--teal, #00C4B4); border-left-color: var(--teal, #00C4B4); }
.wb-nav form.see-as { margin: 0; }
.wb-nav form.see-as button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 20px; color: rgba(255,255,255,0.68); background: none; border: 0; border-left: 3px solid transparent; font: inherit; font-size: 0.75rem; font-weight: 500; text-align: left; cursor: pointer; }
.wb-nav form.see-as button::before { content: '👁'; font-size: 0.75rem; opacity: .7; }
.wb-nav form.see-as button:hover { background: rgba(0,196,180,0.08); color: #fff; }
.wb-topbar form.see-as-bar { display: flex; align-items: center; gap: 8px; }
.wb-nav .n { margin-left: auto; font-size: 0.625rem; background: rgba(255,255,255,0.12); border-radius: 10px; padding: 1px 7px; }
.wb-footer { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.625rem; color: rgba(255,255,255,0.5); }
.wb-footer img { display: block; width: 100%; max-height: 28px; object-fit: contain; background: #fff; border-radius: 4px; padding: 3px 6px; margin-bottom: 6px; }
.wb-main { margin-left: var(--wb-sidebar); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wb-topbar { background: var(--surface, #fff); border-bottom: 1px solid var(--border, #D8E0EE); min-height: 56px; padding: 0 28px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow); }
.wb-topbar .title { font-size: 0.875rem; font-weight: 600; color: var(--navy, #0B1D3A); }
.wb-topbar .spacer { flex: 1; }
.wb-topbar .client img { height: 26px; width: auto; object-fit: contain; }
.wb-topbar form { margin: 0; }
.wb-topbar .who { font-size: 0.75rem; color: var(--muted, #6B7A8D); text-decoration: none; }
.wb-topbar a.who:hover, .wb-topbar a.who.active { color: var(--teal, #00C4B4); text-decoration: underline; }
.wb-content { padding: 24px 28px 48px; max-width: none; }   /* the whole width of the screen (user, 2026-10-20) */
.card { background: var(--surface, #fff); border: 1px solid var(--border, #D8E0EE); border-radius: 10px; box-shadow: var(--shadow); padding: 18px 22px; margin-bottom: 18px; }
.card h2, .card h3 { margin: 0 0 12px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #6B7A8D); }
.card h3.plain { text-transform: none; letter-spacing: 0; font-size: 0.875rem; color: var(--navy); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface, #fff); border: 1px solid var(--border, #D8E0EE); border-left: 4px solid var(--sky, #0EA5E9); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; }
.kpi .v { font-size: 1.625rem; font-weight: 700; color: var(--navy, #0B1D3A); line-height: 1.1; }
.kpi .l { font-size: 0.6875rem; color: var(--muted, #6B7A8D); margin-top: 4px; }
.kpi.green { border-left-color: var(--green, #198754); } .kpi.amber { border-left-color: var(--amber, #F97316); } .kpi.rose { border-left-color: var(--rose, #DC3545); } .kpi.violet { border-left-color: var(--violet, #7C3AED); } .kpi.teal { border-left-color: var(--teal, #00C4B4); }
table.grid { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
table.grid th { text-align: left; font-size: 0.625rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #6B7A8D); padding: 8px 10px; border-bottom: 1px solid var(--border, #D8E0EE); white-space: nowrap; }
table.grid td { padding: 8px 10px; border-bottom: 1px solid #EEF2F8; vertical-align: top; }
table.grid tr:hover td { background: #F7FAFF; }
table.grid td.num, table.grid th.num { text-align: right; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 0.625rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; background: #E9EEF7; color: var(--navy, #0B1D3A); white-space: nowrap; }
.pill.ok, .pill.READY, .pill.VALIDATED, .pill.SUCCEEDED, .pill.Authorised, .pill.Arrived, .pill.Completed { background: #DDF5EA; color: #0F6B3F; }
.pill.warn, .pill.STAGED, .pill.PARTIAL, .pill.Submitted, .pill.Processing, .pill.Draft { background: #FFEFE0; color: #9A4A05; }
.pill.bad, .pill.FAILED, .pill.Cancelled { background: #FBE3E6; color: #9B1C2A; }
.pill.info, .pill.POSTED, .pill.SUBMITTED, .pill.RUNNING { background: #E7E1FB; color: #4C2DA8; }
.pill.lock { background: var(--navy, #0B1D3A); color: #fff; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 0.75rem; }
.flash.ok { background: #DDF5EA; color: #0F6B3F; border: 1px solid #B6E7CF; }
.flash.error { background: #FBE3E6; color: #9B1C2A; border: 1px solid #F3C2C9; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-block; border: 1px solid var(--border, #D8E0EE); background: var(--surface, #fff); color: var(--navy, #0B1D3A); padding: 7px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; }
.btn:hover { border-color: var(--teal, #00C4B4); }
.btn.primary { background: var(--teal, #00C4B4); border-color: var(--teal, #00C4B4); color: #042A26; }
.btn.submit { background: var(--accent, #F97316); border-color: var(--accent, #F97316); color: #fff; }
.btn.danger { color: var(--rose, #DC3545); }
.btn.small { padding: 4px 10px; font-size: 0.6875rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: 0.6875rem; color: var(--muted, #6B7A8D); }
.field .l { font-weight: 600; }
.field .req { color: var(--accent, #F97316); }
.field input, .field select, .field textarea { font: inherit; font-size: 0.75rem; color: var(--text, #1E2A3A); padding: 6px 8px; border: 1px solid var(--border, #D8E0EE); border-radius: 6px; background: #fff; }
.field input:focus, .field select:focus { outline: 2px solid rgba(0,196,180,0.35); border-color: var(--teal, #00C4B4); }
.field.bad input, .field.bad select { border-color: var(--rose, #DC3545); }
.field .err { color: var(--rose, #DC3545); font-size: 0.625rem; }
.field .warn { color: #9A4A05; font-size: 0.625rem; }
.muted { color: var(--muted, #6B7A8D); }
.mono { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.7188rem; }
.goods-line { background: #F7FAFF; border: 1px solid var(--border, #D8E0EE); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.goods-line .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: 0.75rem; }
.linkbtn { background: none; border: none; color: var(--teal-deep, #00A99B); cursor: pointer; font: inherit; font-size: 0.75rem; padding: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two > * { min-width: 0; }   /* a long path in one card never squeezes the other */
.wb-content .mono { overflow-wrap: anywhere; } @media (max-width: 1000px) { .two { grid-template-columns: 1fr; } }
.party { border: 1px solid var(--border, #D8E0EE); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.party h4 { margin: 0 0 8px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.findings li { margin: 3px 0; font-size: 0.75rem; } .findings .ERROR { color: var(--rose, #DC3545); } .findings .WARNING { color: #9A4A05; }
.chart { width: 100%; height: 340px; }
.range { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.range input[type=date] { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.range input[type=range] { width: 100%; }
.slider-wrap { flex: 1 1 320px; }
.slider-wrap .labels { display: flex; justify-content: space-between; font-size: 0.625rem; color: var(--muted); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 20% -10%, rgba(0,196,180,0.25), transparent), var(--navy, #0B1D3A); }
.login-card { width: 380px; background: #fff; border-radius: 14px; padding: 28px 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-card img { display: block; max-height: 64px; margin: 0 auto 10px; object-fit: contain; }
.login-card h1 { font-size: 1rem; margin: 0 0 4px; color: var(--navy); text-align: center; }
.login-card p.sub { text-align: center; color: var(--muted); font-size: 0.6875rem; margin: 0 0 18px; }
.login-card .field { margin-bottom: 12px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--border); text-decoration: none; color: var(--navy); font-size: 0.75rem; font-weight: 600; }
.tabs a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.scroll { overflow-x: auto; }
.tiny { font-size: 0.625rem; }
details summary { cursor: pointer; color: var(--teal-deep); font-size: 0.75rem; }
.logo-fallback { font-weight: 800; color: var(--navy); font-size: 0.875rem; }
@media (max-width: 900px) { .wb-sidebar { position: static; width: 100%; } .wb-main { margin-left: 0; } .wb-shell { flex-direction: column; } }

.field.tmpl-hidden { display: none; }
.field .hint { display: block; font-size: 0.6875rem; color: var(--muted, #667); margin-top: 2px; }
.field.needed { outline: 2px solid #f0c36d; outline-offset: 2px; border-radius: 6px; }
.field.needed .req-dyn { display: inline !important; }

/* Report issue (every page: the top bar button, Help > Report issue, the error pages) */
.wb-topbar .issue-btn { border-color: var(--accent, #F97316); color: var(--accent, #F97316); }
.wb-topbar .issue-btn:hover { background: var(--accent, #F97316); color: #fff; }
.issue-modal { position: fixed; inset: 0; background: rgba(11,29,58,0.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.issue-modal[hidden] { display: none; }
.issue-card { background: var(--surface, #fff); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); width: min(720px, 100%); max-height: 92vh; overflow: auto; padding: 22px 26px; }
.issue-card h2 { margin: 0 0 6px; font-size: 1rem; color: var(--navy, #0B1D3A); }
.issue-card > p.muted { font-size: 0.75rem; margin: 0 0 12px; }
.issue-context { display: grid; grid-template-columns: 1fr; gap: 4px 12px; font-size: 0.75rem; background: #F7FAFF; border: 1px solid var(--border, #D8E0EE); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.issue-context > div { display: grid; grid-template-columns: 140px 1fr; gap: 8px; }
.issue-context .l { font-weight: 700; color: var(--muted, #6B7A8D); text-transform: uppercase; font-size: 0.625rem; letter-spacing: .4px; padding-top: 2px; }
.issue-context .v { word-break: break-word; }
.issue-card .field textarea { font: inherit; font-size: 0.8125rem; color: var(--text, #1E2A3A); padding: 8px 10px; border: 1px solid var(--border, #D8E0EE); border-radius: 6px; resize: vertical; }
.issue-feedback { padding: 9px 12px; border-radius: 8px; font-size: 0.75rem; margin: 10px 0; }
.issue-feedback.ok { background: #DDF5EA; color: #0F6B3F; border: 1px solid #B6E7CF; }
.issue-feedback.error { background: #FBE3E6; color: #9B1C2A; border: 1px solid #F3C2C9; }
body.issue-open { overflow: hidden; }