/* 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: 232px; }
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: 13px; }
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: 13px; font-weight: 800; letter-spacing: .3px; margin-top: 10px; }
.wb-brand .tag { font-size: 9px; 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: 9px; 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: 12px; 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 .n { margin-left: auto; font-size: 10px; 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: 10px; 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); 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: 14px; 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: 12px; color: var(--muted, #6B7A8D); }
.wb-content { padding: 24px 28px 48px; max-width: 1480px; }
.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: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #6B7A8D); }
.card h3.plain { text-transform: none; letter-spacing: 0; font-size: 14px; 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: 26px; font-weight: 700; color: var(--navy, #0B1D3A); line-height: 1.1; }
.kpi .l { font-size: 11px; 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: 12px; }
table.grid th { text-align: left; font-size: 10px; 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: 10px; 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: 12px; }
.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: 12px; 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: 11px; }
.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: 11px; 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: 12px; 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: 10px; }
.field .warn { color: #9A4A05; font-size: 10px; }
.muted { color: var(--muted, #6B7A8D); }
.mono { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11.5px; }
.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: 12px; }
.linkbtn { background: none; border: none; color: var(--teal-deep, #00A99B); cursor: pointer; font: inherit; font-size: 12px; padding: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @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: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.findings li { margin: 3px 0; font-size: 12px; } .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: 10px; 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: 16px; margin: 0 0 4px; color: var(--navy); text-align: center; }
.login-card p.sub { text-align: center; color: var(--muted); font-size: 11px; 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: 12px; font-weight: 600; }
.tabs a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.scroll { overflow-x: auto; }
.tiny { font-size: 10px; }
details summary { cursor: pointer; color: var(--teal-deep); font-size: 12px; }
.logo-fallback { font-weight: 800; color: var(--navy); font-size: 14px; }
@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: 11px; 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: 16px; color: var(--navy, #0B1D3A); }
.issue-card > p.muted { font-size: 12px; margin: 0 0 12px; }
.issue-context { display: grid; grid-template-columns: 1fr; gap: 4px 12px; font-size: 12px; 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: 10px; letter-spacing: .4px; padding-top: 2px; }
.issue-context .v { word-break: break-word; }
.issue-card .field textarea { font: inherit; font-size: 13px; 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: 12px; 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; }