/* =========================================================================
   NuWayMind — Source to Pay
   "Operational ledger" design system · slate + burnt-orange brand
   ========================================================================= */

:root {
    /* Surfaces */
    --bg-app: #EEF1F4;
    --bg-sidebar: #000000;
    --bg-sidebar-hover: #1A1A1A;
    --bg-card: #FFFFFF;
    --bg-subtle: #F8FAFC;

    /* Ink */
    --text: #0F172A;
    --text-muted: #64748B;
    --text-on-dark: #C4CAD4;
    --text-on-dark-strong: #FFFFFF;

    /* Brand — burnt orange for interactive surfaces (AA with white),
       marigold for the logo / live accents */
    --primary: #FF8B1F;
    --primary-hover: #F07A0A;
    --primary-soft: #FFEAD3;
    --primary-ink: #6B3A05;
    --btn-bg: #FF8B1F;
    --btn-bg-hover: #F07A0A;
    --btn-text: #FFFFFF;
    --brand-orange: #FF8B1F;

    /* Lines */
    --line: #E2E8F0;
    --line-strong: #CBD5E1;

    /* Status */
    --ok: #15803D;        --ok-bg: #DCFCE7;
    --warn: #B45309;      --warn-bg: #FEF3C7;
    --bad: #B91C1C;       --bad-bg: #FEE2E2;
    --neutral: #475569;   --neutral-bg: #E2E8F0;
    --info: #1D4ED8;      --info-bg: #DBEAFE;

    /* Shape */
    --radius: 6px;
    --radius-sm: 4px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18);

    /* Type */
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-ui);
    background: var(--bg-app);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

button { font-family: inherit; }

[hidden] { display: none !important; }

/* Monospace for every document number and money amount — the ledger signature */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.docno { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; }

/* =========================================================================
   Sign-in screen
   ========================================================================= */
.auth-screen {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1100px 520px at 14% -8%, #21323F 0%, rgba(33,50,63,0) 60%),
        linear-gradient(160deg, #16222B 0%, #0E1820 100%);
    z-index: 100;
}
.auth-card {
    width: 100%;
    max-width: 396px;
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: pop 0.18s ease-out;
}
.auth-top {
    padding: 30px 32px 24px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
}
.auth-logo { width: 224px; max-width: 80%; height: auto; display: block; margin: 0 auto; }
.auth-tag {
    margin-top: 14px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-muted); font-weight: 600;
}
.auth-body { padding: 26px 32px 30px; }
.auth-body h1 { font-size: 18px; margin-bottom: 4px; }
.auth-body .lede { color: var(--text-muted); font-size: 13px; margin: 0 0 20px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-error {
    background: var(--bad-bg); color: var(--bad);
    border: 1px solid #FCA5A5; border-radius: var(--radius-sm);
    padding: 9px 12px; font-size: 12.5px; font-weight: 500;
}
.auth-form .btn-primary { width: 100%; justify-content: center; padding: 11px; margin-top: 4px; }
.auth-hint {
    margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line-strong);
    font-size: 12px; color: var(--text-muted); line-height: 1.7;
}
.auth-hint code {
    font-family: var(--font-mono); font-size: 11.5px;
    background: var(--bg-subtle); border: 1px solid var(--line);
    border-radius: 3px; padding: 1px 5px; color: var(--primary-ink);
}

/* =========================================================================
   Shell
   ========================================================================= */
.app-shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--bg-sidebar);
    color: var(--text-on-dark);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 20px 14px;
}

.brand {
    display: flex;
    align-items: center;
    padding: 4px 6px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 12px;
}
.brand-logo { width: 100%; max-width: 196px; height: auto; display: block; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
/* Keep the left menu scrollable when it runs out of height, but hide the scrollbar
   (Chrome/Edge/Safari use ::-webkit-scrollbar; Firefox/legacy Edge handled above). */
.nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.nav-group {
    color: #8A93A3;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 10px 6px;
}
/* Primary navigation areas: the seven top-level destinations of the redesigned IA */
.nav-area {
    color: var(--text-on-dark-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--text-on-dark);
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.nav-item:hover { background: var(--bg-sidebar-hover); color: var(--text-on-dark-strong); }
.nav-item.is-active { background: var(--bg-sidebar-hover); color: var(--text-on-dark-strong); font-weight: 600; }
.nav-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #5B6675; flex: none;
    transition: background 0.12s ease;
}
.nav-item.is-active .nav-dot { background: var(--brand-orange); }
.nav-item:hover .nav-dot { background: #8A93A3; }
.nav-badge {
    margin-left: auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-orange); color: #3A2206;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.nav-badge[hidden] { display: none !important; }

/* Signed-in account block */
.account {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 8px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    flex: none;
    display: grid; place-items: center;
    background: var(--brand-orange); color: #3A2206;
    font-weight: 700; font-size: 13px;
    font-family: var(--font-mono);
}
.account-info { min-width: 0; flex: 1; line-height: 1.25; }
.account-name {
    color: var(--text-on-dark-strong); font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-role {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: #8A93A3; font-weight: 600;
}
.logout-btn {
    border: 0; background: transparent; cursor: pointer;
    color: #8A93A3; padding: 6px; border-radius: var(--radius-sm);
    display: grid; place-items: center;
}
.logout-btn:hover { background: var(--bg-sidebar-hover); color: var(--text-on-dark-strong); }
.logout-btn svg { width: 16px; height: 16px; display: block; }

.sidebar-foot {
    padding: 12px 10px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-mono);
    font-size: 11px;
    color: #5B7283;
    display: flex; align-items: center; gap: 8px;
}
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); flex: none; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 32px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}
.topbar-titles h1 { font-size: 21px; }
.topbar-titles p { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }
.topbar-actions { display: flex; gap: 10px; }

.view { padding: 28px 32px 56px; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-text); font-weight: 600; }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-ghost { background: var(--bg-card); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-subtle); border-color: var(--text-muted); }
.btn-subtle { background: transparent; color: var(--text-muted); border-color: transparent; padding: 6px 8px; }
.btn-subtle:hover { color: var(--text); background: var(--bg-subtle); }
.btn-danger-ghost { background: var(--bg-card); color: var(--bad); border-color: var(--line-strong); }
.btn-danger-ghost:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn-sm { padding: 5px 9px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.icon-btn {
    border: 0; background: transparent; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--text-muted);
    width: 32px; height: 32px; border-radius: var(--radius-sm);
}
.icon-btn:hover { background: var(--bg-subtle); color: var(--text); }

/* =========================================================================
   Cards & metrics
   ========================================================================= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px 20px; }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.card-head h3 { font-size: 14px; }
.card-head .hint { color: var(--text-muted); font-size: 12px; }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.metric {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}
.metric::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--primary);
}
.metric.accent-amber::before { background: var(--warn); }
.metric.accent-blue::before { background: var(--info); }
.metric.accent-slate::before { background: var(--neutral); }
.metric-label { color: var(--text-muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.metric-value { font-family: var(--font-mono); font-size: 26px; font-weight: 600; margin-top: 8px; letter-spacing: -0.02em; }
.metric-foot { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.metric-foot strong { color: var(--text); font-weight: 600; }

/* =========================================================================
   Pipeline (signature element)
   ========================================================================= */
.pipeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 22px 20px;
    overflow-x: auto;
}
.stage {
    flex: 1 1 0;
    min-width: 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 6px;
}
.stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px;
    right: -10px;
    width: 20px; height: 2px;
    background: var(--line-strong);
}
.stage:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 22px;
    right: -12px;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--line-strong);
    z-index: 1;
}
.stage-num {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-family: var(--font-mono);
    font-size: 20px; font-weight: 600;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--line-strong);
}
.stage-idx {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 10px;
    letter-spacing: 0.04em;
}
.stage-name { font-size: 12.5px; font-weight: 600; margin-top: 2px; }

/* =========================================================================
   Tables
   ========================================================================= */
.table-wrap { overflow-x: auto; }
/* Document list views: header row + filter row + pager stay put; only records scroll */
.table-wrap.is-scrollable { overflow-y: auto; max-height: calc(100vh - 230px); }
.table-wrap.is-scrollable table.grid thead tr:first-child th {
    position: sticky; top: 0; z-index: 4; box-shadow: inset 0 -1px 0 var(--line);
}
.table-wrap.is-scrollable table.grid thead tr.filter-row th {
    position: sticky; top: var(--head-h, 38px); z-index: 3;
}
.table-wrap.is-scrollable table.grid tfoot .pager-cell {
    position: sticky; bottom: 0; z-index: 4; box-shadow: inset 0 1px 0 var(--line);
}
table.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.grid thead th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
    white-space: nowrap;
}
table.grid thead th.num { text-align: right; }
table.grid tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--bg-subtle); }
.cell-strong { font-weight: 600; color: var(--text); }
.cell-sub { color: var(--text-muted); font-size: 12px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
td .row-actions { min-width: max-content; }

/* =========================================================================
   Status pills
   ========================================================================= */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.pill.ok { color: var(--ok); background: var(--ok-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.bad { color: var(--bad); background: var(--bad-bg); }
.pill.neutral { color: var(--neutral); background: var(--neutral-bg); }
.pill.info { color: var(--info); background: var(--info-bg); }
.pill-sm { font-size: 10.5px; padding: 2px 7px; }

/* =========================================================================
   Forms & modal
   ========================================================================= */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 48px 16px;
    z-index: 50;
    overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }
.modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 760px;
    animation: pop 0.14s ease-out;
    display: flex; flex-direction: column;
}
@keyframes pop { from { transform: translateY(6px) scale(0.99); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--line); order: 0;
}
.modal-head h2 { font-size: 16px; }
.modal-head-actions { display: flex; align-items: center; gap: 10px; }

/* ===== Document side panel (approval flow / related documents / log / comments) ===== */
.doc-panel-rail { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; padding-right: 8px; border-right: 1px solid var(--line); }
/* #7 Check-requisition banner + header icon */
.pr-check-banner { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 36px 12px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.45; border: 1px solid var(--line); }
.pr-check-banner .pr-check-msg { flex: 1; }
.pr-check-banner ul { margin: 6px 0 0; padding-left: 18px; }
.pr-check-banner li { margin: 2px 0; }
.pr-check-ok { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.pr-check-bad { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.pr-check-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; opacity: .65; }
.pr-check-x:hover { opacity: 1; }
.pr-check-icon-inline { margin-left: 4px; }
/* In an inline (full-page) form the rail sits at the right of the card-head with nothing after it, so the divider border/padding is dropped. */
.doc-panel-rail-inline { margin-right: 0; padding-right: 0; border-right: 0; }
.doc-panel-icon { width: 30px; height: 30px; padding: 5px; color: var(--text-muted); border-radius: var(--radius-sm); }
.doc-panel-icon:hover { color: var(--primary); background: rgba(255, 139, 31, 0.10); }
.doc-panel-icon svg { width: 18px; height: 18px; }
.doc-panel-rail .doc-pdf-btn { width: auto; height: 30px; padding: 0 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--text-muted); }
.doc-panel-rail .doc-pdf-btn:hover { color: var(--primary); background: rgba(255, 139, 31, 0.10); }

.doc-drawer {
    position: fixed; right: 0; left: auto; top: 0; bottom: 0; width: 384px; max-width: 92vw; z-index: 60;
    background: var(--bg-card); border-left: 1px solid var(--line); box-shadow: -2px 0 24px rgba(15, 23, 42, 0.18);
    display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.2s ease;
}
.doc-drawer.open { transform: translateX(0); }
.doc-drawer[hidden] { display: none; }
.doc-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc-drawer-tabs { display: inline-flex; gap: 2px; }
.doc-drawer-tab { width: 34px; height: 34px; padding: 7px; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.doc-drawer-tab svg { width: 18px; height: 18px; }
.doc-drawer-tab:hover { color: var(--primary); background: rgba(255, 139, 31, 0.10); }
.doc-drawer-tab.active { color: var(--primary); background: rgba(255, 139, 31, 0.14); }
.doc-drawer-title2 { padding: 10px 16px 4px; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
.doc-drawer-body { flex: 1 1 auto; overflow-y: auto; }
.doc-drawer-pad { padding: 8px 16px 18px; }

/* Activity log, grouped by day */
.dlog-day { margin-bottom: 14px; }
.dlog-daylabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 6px 0 6px; }
.dlog-row { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dlog-time { flex: 0 0 42px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dlog-what { flex: 1 1 auto; color: var(--text); }
.dlog-action { font-weight: 600; }
.dlog-detail { color: var(--text-muted); }
.dlog-who { color: var(--text-muted); }

/* Related documents */
.drel-group { margin-bottom: 14px; }
.drel-gtitle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 4px 0 6px; }
.drel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; }
.drel-num { font-weight: 600; color: var(--text); }
.drel-status { font-size: 11px; color: var(--text-muted); }

/* Comments */
.dcom-wrap { display: flex; flex-direction: column; min-height: 100%; }
.dcom-list { flex: 1 1 auto; }
.dcom-item { padding: 8px 0; border-top: 1px solid var(--line); }
.dcom-item:first-child { border-top: 0; }
.dcom-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.dcom-author { font-weight: 600; font-size: 13px; color: var(--text); }
.dcom-when { font-size: 11px; color: var(--text-muted); }
.dcom-text { font-size: 13px; color: var(--text); white-space: normal; word-break: break-word; }
.dcom-at { color: var(--primary); font-weight: 600; }
.dcom-compose { position: relative; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dcom-input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.dcom-input:focus { outline: none; border-color: var(--primary); }
.dcom-mention-pop { position: absolute; left: 8px; right: 8px; bottom: 64px; max-height: 168px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16); z-index: 2; }
.dcom-mention-pop[hidden] { display: none; }
.dcom-mention-opt { padding: 7px 10px; font-size: 13px; cursor: pointer; }
.dcom-mention-opt:hover { background: rgba(255, 139, 31, 0.10); color: var(--primary); }
.dcom-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dcom-hint { font-size: 11px; color: var(--text-muted); }
.modal-body { padding: 22px; max-height: 66vh; overflow-y: auto; order: 2; }
/* action buttons (Save / Submit / Flip / Cancel …) sit at the TOP, just under the title */
.modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-bottom: 1px solid var(--line); order: 1;
    background: var(--bg-subtle);
}
.modal-foot:empty { display: none; }
.inline-form .card-pad { display: flex; flex-direction: column; }
.inline-form #__inl-foot { order: 0; }
.inline-form #__inl-body { order: 1; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.col-span { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 600; color: var(--text); }
.field label .req { color: var(--bad); margin-left: 2px; }
/* highlight a required field that blocked submission, until it gets a value */
.field.is-invalid > input, .field.is-invalid > select, .field.is-invalid > textarea,
.field.is-invalid .combo-control, .field.is-invalid .mcombo-control, .field.is-invalid .rt-wrap,
.field.is-invalid .cf-choice, .field.is-invalid .cf-att,
.cf-field.is-invalid input, .cf-field.is-invalid select, .cf-field.is-invalid textarea,
.cf-field.is-invalid .combo-control, .cf-field.is-invalid .mcombo-control, .cf-field.is-invalid .rt-wrap,
.cf-field.is-invalid .cf-choice, .cf-field.is-invalid .cf-att {
    border-color: var(--bad) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 22%, transparent);
}
.field.is-invalid > label, .cf-field.is-invalid > label { color: var(--bad); }
.field .help { font-size: 11.5px; color: var(--text-muted); }
.field input, .field select, .field textarea {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    width: 100%;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.field input.mono, .field input[inputmode="decimal"] { font-family: var(--font-mono); }
.field input[readonly], .field textarea[readonly] { background: var(--bg-app); color: var(--text-soft, var(--text)); cursor: default; }
.field input[readonly]:focus, .field textarea[readonly]:focus { border-color: var(--line-strong); box-shadow: none; }
.field textarea { resize: vertical; min-height: 70px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.section-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600;
    margin: 24px 0 10px;
    display: flex; align-items: center; justify-content: space-between;
}

/* Line item editor */
.lines { display: flex; flex-direction: column; gap: 8px; }
.line-row {
    display: grid;
    gap: 8px;
    align-items: end;
    padding: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.line-row .field label { font-size: 11px; color: var(--text-muted); }
.line-row .line-del {
    border: 1px solid var(--line-strong);
    background: var(--bg-card);
    color: var(--bad);
    border-radius: var(--radius-sm);
    height: 36px; cursor: pointer;
    font-size: 16px;
}
.line-row .line-del:hover { background: var(--bad-bg); border-color: var(--bad); }
.line-acts { display: flex; gap: 4px; align-items: end; }
.line-row .line-copy, .line-row .line-exp {
    border: 1px solid var(--line-strong);
    background: var(--bg-card);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    height: 36px; min-width: 30px; cursor: pointer; font-size: 15px;
}
.line-row .line-copy:hover, .line-row .line-exp:hover { background: var(--bg-subtle); color: var(--text); border-color: var(--brand); }
.line-block { display: flex; flex-direction: column; }
.line-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-top: 1px dashed var(--line-strong);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.line-detail .field { flex: 0 1 calc(25% - 8px); min-width: 150px; box-sizing: border-box; }
.line-detail .field label { font-size: 11px; color: var(--text-muted); }
.line-detail .field input, .line-detail .field select { width: 100%; box-sizing: border-box; }
.field-muted .na { color: var(--text-muted); font-size: 12px; padding: 9px 0; opacity: 0.55; }
.line-total {
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: right;
    color: var(--text);
    padding-bottom: 9px;
    font-weight: 500;
}
.lines-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px;
}
.totals { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); text-align: right; }
.totals .grand { color: var(--text); font-size: 16px; font-weight: 600; }

/* =========================================================================
   Match result panel
   ========================================================================= */
.match-panel { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; }
.match-pass { color: var(--ok); }
.match-fail { color: var(--bad); }

.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.detail-grid.col-3 { grid-template-columns: repeat(3, 1fr); }
.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-item .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
.detail-item .v { font-size: 13.5px; }

/* =========================================================================
   Approval workflow
   ========================================================================= */
.appr-summary {
    display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
    padding: 14px 16px; margin-bottom: 18px;
    background: var(--bg-subtle); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.timeline { display: flex; flex-direction: column; }
.tl-step {
    display: grid; grid-template-columns: 26px 1fr; gap: 12px;
    position: relative; padding-bottom: 16px;
}
.tl-step:not(:last-child)::before {
    content: ""; position: absolute; left: 12px; top: 24px; bottom: 0;
    width: 2px; background: var(--line-strong);
}
.tl-dot {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; z-index: 1;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong);
    background: var(--neutral-bg); color: var(--neutral);
}
.tl-dot.ok { background: var(--ok-bg); color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.tl-dot.bad { background: var(--bad-bg); color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.tl-dot.cur { background: var(--primary-soft); color: var(--primary-ink); box-shadow: 0 0 0 1px var(--primary); }

/* =========================================================================
   Attachments
   ========================================================================= */
.attach-list { display: flex; flex-direction: column; gap: 8px; }
.attach-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg-card);
}
.attach-ico {
    width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-ink);
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
}
.attach-meta { flex: 1; min-width: 0; }
.attach-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-sub { font-size: 11.5px; color: var(--text-muted); }

.attach-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--primary-ink); background: var(--primary-soft);
    border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
.attach-upload { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.attach-upload input[type="file"] { font-size: 12.5px; color: var(--text-muted); max-width: 100%; }

/* =========================================================================
   Approval flows — editor + history
   ========================================================================= */

/* Editor row */
.flow-step-edit {
    display: grid; grid-template-columns: 26px 1.2fr 1.4fr 36px; gap: 10px; align-items: center;
    padding: 8px; background: var(--bg-subtle);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.flow-step-num {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-ink);
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.flow-name, .flow-appr {
    font-family: var(--font-ui); font-size: 13px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 8px 10px; width: 100%;
}
.flow-step-edit .line-del {
    border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--bad);
    border-radius: var(--radius-sm); height: 34px; cursor: pointer; font-size: 16px;
}
.flow-step-edit .line-del:hover { background: var(--bad-bg); border-color: var(--bad); }

/* History row (approval timeline in the modal) */
.flow-step {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px; background: var(--bg-subtle);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.flow-step.is-active { background: var(--primary-soft); border-color: var(--primary); }
.flow-step-comment {
    font-size: 12.5px; margin-top: 5px; color: var(--text);
    background: var(--bg-card); border-left: 2px solid var(--line-strong);
    padding: 5px 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Connection test result (Setup → database) */
.test-result {
    margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
    font-size: 12.5px; font-family: var(--font-mono);
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-subtle); border: 1px solid var(--line); color: var(--text-muted);
}
.test-result[hidden] { display: none; }
.test-result.ok { background: var(--ok-bg); color: var(--ok); border-color: #86EFAC; }
.test-result.bad { background: var(--bad-bg); color: var(--bad); border-color: #FCA5A5; }

/* Small inline utilities used across Setup / Users / approvals */
.muted { font-size: 12.5px; color: var(--text-muted); padding: 6px 2px; }
.tag {
    display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--neutral); background: var(--neutral-bg);
    border-radius: var(--radius-sm); padding: 2px 8px;
}
.form-actions { display: flex; gap: 8px; margin-top: 16px; }

/* =========================================================================
   States
   ========================================================================= */
.empty {
    text-align: center;
    padding: 56px 20px;
    color: var(--text-muted);
}
.empty .empty-mark {
    width: 46px; height: 46px; border-radius: var(--radius);
    background: var(--bg-subtle); border: 1px solid var(--line);
    display: grid; place-items: center; margin: 0 auto 14px;
    font-family: var(--font-mono); color: var(--text-muted); font-size: 18px;
}
.empty h3 { color: var(--text); font-size: 15px; margin-bottom: 4px; }

.loading { padding: 48px; text-align: center; color: var(--text-muted); font-size: 13px; }
.spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid var(--line); border-top-color: var(--primary);
    margin: 0 auto 12px; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.inline-note {
    font-size: 12.5px; color: var(--text-muted);
    background: var(--bg-subtle); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 16px;
}

/* =========================================================================
   Toasts
   ========================================================================= */
.toast-host {
    position: fixed; right: 20px; bottom: 20px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 80;
}
.toast {
    background: #16222B;
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    max-width: 360px;
    border-left: 3px solid var(--primary);
    animation: slidein 0.16s ease-out;
}
.toast.err { border-left-color: #F87171; }
.toast.ok { border-left-color: #4ADE80; }
/* Centred confirmation shown briefly when a document is submitted for approval. */
.center-confirm {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 4000;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.center-confirm.show { opacity: 1; }
.center-confirm-box {
    background: rgba(22, 34, 43, 0.94);
    color: #fff;
    padding: 18px 30px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    max-width: 460px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
    border-top: 3px solid #4ADE80;
    transform: scale(0.96);
    transition: transform 0.2s ease;
}
.center-confirm.show .center-confirm-box { transform: scale(1); }
@keyframes slidein { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* =========================================================================
   Section spacing
   ========================================================================= */
.stack { display: flex; flex-direction: column; gap: 22px; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 920px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: relative; height: auto; flex-direction: row;
        align-items: center; flex-wrap: wrap; gap: 8px;
        padding: 12px 16px;
    }
    .brand { border: 0; margin: 0; padding: 0 12px 0 0; }
    .brand-logo { max-width: 150px; }
    .nav { flex-direction: row; flex-wrap: wrap; flex: 1; gap: 4px; overflow: visible; }
    .nav-group { display: none; }
    .nav-badge { margin-left: 4px; }
    .account { border: 0; margin: 0; padding: 0; }
    .account-info { display: none; }
    .sidebar-foot { display: none; }
    .two-col { grid-template-columns: 1fr; }
    .view, .topbar { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 680px) {
    .form-grid, .detail-grid, .detail-grid.col-3 { grid-template-columns: 1fr; }
    .flow-step-edit { grid-template-columns: 22px 1fr 1fr 32px; }
    .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Accessibility */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================================
   Drill-through links, commodity selectors, multi-flow & condition editor
   ========================================================================= */
.doclink { color: var(--primary); text-decoration: none; font-weight: 500; cursor: pointer; }
.doclink:hover { text-decoration: underline; }
/* First-column code/name in Setup & dimension lists opens that row's editor (parity with doc links) */
.setup-panel table.grid tbody tr td:first-child .docno,
.setup-panel table.grid tbody tr td:first-child .cell-strong { cursor: pointer; }
.setup-panel table.grid tbody tr td:first-child .docno { color: var(--primary); }
.setup-panel table.grid tbody tr td:first-child .docno:hover,
.setup-panel table.grid tbody tr td:first-child .cell-strong:hover { text-decoration: underline; }

.commodity-cell { min-width: 0; }
.commodity-mount { display: flex; flex-direction: column; gap: 4px; }
.commodity-sel {
    font-family: var(--font-ui); font-size: 12.5px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 6px 8px; width: 100%;
}

.flow-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-card); padding: 14px; margin-bottom: 12px;
}
.flow-card-name {
    flex: 1; min-width: 160px;
    font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 8px 10px;
}
.flow-card-head .prio { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.flow-card-prio {
    width: 64px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 6px 8px;
}

.cond-group { border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); padding: 8px; margin-bottom: 8px; background: rgba(0,0,0,.012); }
.cond-group-root { border-style: solid; }
.cond-group .cond-group { background: rgba(255,139,31,.05); border-color: rgba(255,139,31,.35); }
.cond-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cond-group-match { font-size: 12px; color: var(--text-muted); }
.cond-group-match select { font-size: 12px; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-ui); background: var(--bg-card); color: var(--text); margin: 0 4px; }
.cond-group-body { display: flex; flex-direction: column; gap: 8px; }
.cond-group-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cond-group-del { width: 26px; height: 26px; }
.cond-empty { font-size: 12px; padding: 2px 0; }
.cond-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
    padding: 8px; background: var(--bg-subtle);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.cond-cell { min-width: 0; }
.cnd-field { flex: 0 0 calc(25% - 8px); }
.cnd-op    { flex: 0 0 calc(12.5% - 8px); }
.cnd-src   { flex: 0 0 calc(25% - 8px); }
.cnd-val   { flex: 1 1 calc(25% - 8px); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.cnd-field > .combo, .cnd-field > select, .cnd-op > .combo, .cnd-op > select, .cnd-src > .combo, .cnd-src > select { width: 100%; }
.cnd-val > .cnd-mode-inline { flex: 0 0 132px; min-width: 0; }
.cnd-val > .cnd-mode-inline > .combo, .cnd-val > .cnd-mode-inline > select { width: 100%; }
.cnd-val > .cond-val, .cnd-val > .combo, .cnd-val > input.cond-val, .cnd-val > select.cond-val,
.cnd-val > .cond-dyn-date-wrap, .cnd-val > .cond-novalue { flex: 1 1 60px; min-width: 0; }
.cond-row > .line-del { flex: 0 0 auto; margin-left: auto; }
.cond-field, .cond-op, .cond-val {
    font-family: var(--font-ui); font-size: 12.5px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 7px 8px; width: 100%;
}
.cond-dyn-date-wrap { display: flex; gap: 6px; align-items: center; min-width: 0; padding: 0; border: 0; background: none; }
.cond-dyn-date-wrap > * { min-width: 0; }
.cond-dyn-base, .cond-dyn-date, .cond-dyn-offset {
    font-family: var(--font-ui); font-size: 12.5px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 7px 8px;
}
.cond-dyn-base { flex: 1 1 auto; }
.cond-dyn-date { flex: 1 1 auto; }
.cond-dyn-offset { flex: 0 0 auto; width: 88px; text-align: right; font-variant-numeric: tabular-nums; }

.step-list { display: flex; flex-direction: column; gap: 8px; }
.step-row {
    display: grid; grid-template-columns: 24px minmax(110px,1fr) 88px minmax(120px,1.1fr) 82px 74px 32px; gap: 8px; align-items: center;
    padding: 8px; background: var(--bg-subtle);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.step-name, .step-appr, .step-atype, .step-grp, .step-role, .step-dyn, .step-maxamt, .step-maxcur {
    font-family: var(--font-ui); font-size: 13px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 8px 10px; width: 100%;
}
.step-maxamt { text-align: right; font-variant-numeric: tabular-nums; }
.step-picker { min-width: 0; }
.step-picker select { width: 100%; }
.hier-step {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; align-items: center;
    padding: 8px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.cond-row .line-del, .step-row .line-del {
    border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--bad);
    border-radius: var(--radius-sm); height: 34px; cursor: pointer; font-size: 16px;
}
.cond-row .line-del:hover, .step-row .line-del:hover { background: var(--bad-bg); border-color: var(--bad); }

@media (max-width: 680px) {
    .cnd-field, .cnd-op, .cnd-src { flex: 1 1 100%; }
    .cnd-val { flex: 1 1 100%; }
    .cond-row > .line-del { flex: 0 0 auto; margin-left: auto; width: 36px; }
    .step-row { grid-template-columns: 22px 1fr 32px; }
    .step-row .step-appr, .step-row .step-atype, .step-row .step-picker, .step-row .step-maxamt, .step-row .step-maxcur { grid-column: 2 / 3; }
    .hier-step { grid-template-columns: 1fr; }
}
.next-appr { display: inline-flex; flex-direction: column; line-height: 1.3; }
.next-appr-step { font-weight: 600; color: var(--text); }
.next-appr-who { font-size: 12px; color: var(--text-muted); }

/* =========================================================================
   Searchable combobox (DDLB)
   ========================================================================= */
.combo { position: relative; }
.combo-control {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 0 8px;
}
.combo-control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.combo-control.is-disabled { background: var(--bg-subtle); opacity: 0.7; }
.combo-input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-family: var(--font-ui); font-size: 13.5px; color: var(--text); padding: 9px 0;
}
.combo-input:disabled { cursor: not-allowed; }
.combo-clear {
    border: 0; background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
}
.combo-clear:hover { color: var(--bad); }
.combo-caret { color: var(--text-muted); font-size: 11px; pointer-events: none; }
.combo-panel {
    position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px);
    max-height: 264px; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 4px;
}
.combo-panel.up { top: auto; bottom: calc(100% + 4px); }
/* When a searchable dropdown is open, lift its container into a high stacking context so the
   options panel paints above sibling fields/sections instead of being covered by them. */
.combo:has(> .combo-panel:not([hidden])),
.mcombo:has(> .combo-panel:not([hidden])),
.opick-add:has(> .combo-panel:not([hidden])) { z-index: 90; }

/* Integration actions table: External action + Path are plain inputs outside a .field,
   so they fell back to browser-default height/font — match the standard field input. */
.intg-act-table input[type="text"] {
    font-family: var(--font-ui); font-size: 13px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: 9px 11px; width: 100%; box-sizing: border-box;
}
.intg-act-table input[type="text"]:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.combo-opt {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer;
}
.combo-opt:hover { background: var(--primary-soft); }
.combo-opt-active { background: var(--primary-soft); }
.combo-opt-disabled { opacity: .45; cursor: not-allowed; }
.combo-opt-disabled:hover { background: transparent; }
.combo-opt-label { font-size: 13px; color: var(--text); }
.combo-opt-sub { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }
.combo-more {
    width: 100%; text-align: center; border: 0; background: transparent;
    color: var(--primary); cursor: pointer; padding: 8px; font-size: 12.5px; font-weight: 600;
}
.combo-more:hover { background: var(--primary-soft); border-radius: var(--radius-sm); }
.combo-empty { padding: 10px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* Searchable multi-select combobox (chips + dropdown) */
.mcombo { position: relative; }
.mcombo-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 5px 8px; cursor: text; }
.mcombo-control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mcombo-chips { display: contents; }
.mcombo-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--primary-soft); color: var(--primary-ink); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 12.5px; font-weight: 600; }
.mcombo-chip-x { border: 0; background: transparent; color: var(--primary-ink); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 1px; opacity: 0.65; }
.mcombo-chip-x:hover { opacity: 1; }
.mcombo-input { flex: 1; min-width: 90px; border: 0; background: transparent; outline: none; font-family: var(--font-ui); font-size: 13.5px; color: var(--text); padding: 4px 0; }

/* Custom Fields — compact 32px size (Width in row) selector */
.cf-size-ddlb .combo-control { min-height: 32px; padding: 0 8px; }
.cf-size-ddlb .combo-input { padding: 0; height: 30px; line-height: 30px; }

/* ============================================================
   Round 6 — wide modals, expandable rows, Setup tabs
   ============================================================ */

/* Wide modal (PO / delivery note / invoice) — offset past the sidebar so
   the left menu stays fully visible, and widen to ~90% of the main area. */
.modal-overlay.is-wide { left: 248px; padding: 40px 24px; }
.modal.is-wide { max-width: 1400px; width: 90%; }
.modal.is-wide .modal-body { max-height: 78vh; }
@media (max-width: 920px) { .modal-overlay.is-wide { left: 0; } }
/* Document create/edit/view forms are capped at 75% of the content width. The Process Designer
   and the Custom-Field Designer (an on-page Setup panel) render their own canvases and are exempt. */
.modal.is-wide.is-docform { width: 75%; max-width: none; }
@media (max-width: 1100px) { .modal.is-wide.is-docform { width: 92%; } }

/* Expandable record rows */
.expand-col { width: 34px; }
.expand-cell { width: 34px; text-align: center; padding-right: 0; }
.row-expand {
    border: 0; background: transparent; cursor: pointer;
    color: var(--text-muted); font-size: 12px; line-height: 1;
    padding: 4px 6px; border-radius: var(--radius-sm);
    transition: color 0.12s, background 0.12s;
}
.row-expand:hover { color: var(--primary); background: var(--primary-soft); }
.row-expand.is-open { color: var(--primary); }
.detail-row > td { background: var(--bg-subtle); padding: 0; }
.detail-panel { padding: 16px 20px 20px; }
.detail-section { margin-top: 16px; }
.detail-sub {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600; margin-bottom: 8px;
}
.detail-text { font-size: 13px; color: var(--text); white-space: pre-wrap; line-height: 1.5; }
.tkt-comment { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.tkt-comment.is-internal { background: var(--warn-bg); border-color: var(--warn); }
.tkt-comment-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.tkt-comment-body { font-size: 13.5px; line-height: 1.5; }
.trail-comment { margin-left: 8px; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); font-style: italic; }
/* Per-document history log (When · What · Who) */
.hist-head { display: grid; grid-template-columns: 132px 1fr 130px; gap: 12px; padding: 0 2px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.hist-log { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.hist-row { display: grid; grid-template-columns: 132px 1fr 130px; gap: 12px; align-items: baseline; padding: 7px 10px; border-top: 1px solid var(--line); background: var(--bg-card); font-size: 12.5px; }
.hist-row:first-child { border-top: 0; }
.hist-row:nth-child(even) { background: var(--bg-subtle); }
.hist-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.hist-action { font-weight: 600; color: var(--text); }
.hist-detail { color: var(--text-muted); }
.hist-who { color: var(--text-muted); text-align: right; }
@media (max-width: 640px) {
    .hist-head { display: none; }
    .hist-row { grid-template-columns: 1fr; gap: 2px; }
    .hist-who { text-align: left; }
}
/* Role permissions grid */
.perm-section { margin-top: 6px; }
.perm-full { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-subtle); margin-bottom: 12px; cursor: pointer; }
.perm-full input { width: 16px; height: 16px; }
.perm-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 2px 6px; }
@media (max-width: 640px) {
    .perm-row { grid-template-columns: 1fr; gap: 4px; }
}
table.grid.mini { width: 100%; background: var(--bg-card); border-radius: var(--radius-sm); overflow: hidden; }
table.grid.mini th, table.grid.mini td { font-size: 12px; padding: 6px 10px; }

/* Setup tabs */
.setup-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.setup-tab {
    border: 0; background: transparent; cursor: pointer;
    padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-family: var(--font-ui); transition: color 0.12s, border-color 0.12s;
}
.setup-tab:hover { color: var(--text); }
.setup-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.setup-panel[hidden] { display: none; }

/* Round 7 — keep record-detail fields equal width regardless of content */
.detail-item { min-width: 0; }
.detail-item .v { overflow-wrap: anywhere; word-break: break-word; }
/* A read-only text value that exceeds the field width is truncated with an ellipsis; the full text is
   available via the title tooltip on hover. Links/HTML values are not truncated (no v-truncate class). */
.detail-item .v.v-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; word-break: normal; overflow-wrap: normal; }
.detail-item .v a.doclink { overflow-wrap: anywhere; }

/* ============================================================
   Round 8 — icon actions, sortable/filterable lists, flows list
   ============================================================ */

/* Icon-only action buttons */
.btn-icon { padding: 6px; width: 30px; height: 30px; display: inline-grid; place-items: center; line-height: 0; }
.btn-icon svg { width: 16px; height: 16px; display: block; }

/* Equal-width line-item columns in record-detail panels */
table.grid.mini { table-layout: fixed; }
table.grid.mini th, table.grid.mini td { overflow-wrap: anywhere; word-break: break-word; }

/* Sortable headers + per-column filter row (list views) */
table.grid thead th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 20px; }
table.grid thead th.sortable:hover { color: var(--primary); }
table.grid thead th.sortable::after { content: "\2195"; position: absolute; right: 6px; opacity: 0.35; font-size: 11px; }
table.grid thead th.sort-asc::after { content: "\2191"; opacity: 1; color: var(--primary); }
table.grid thead th.sort-desc::after { content: "\2193"; opacity: 1; color: var(--primary); }
table.grid thead tr.filter-row th { padding: 4px 8px 8px; background: var(--bg-card); font-weight: 400; }
.col-filter {
    width: 100%; box-sizing: border-box; font-size: 12px; padding: 4px 6px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-ui); color: var(--text); background: var(--bg-card); font-weight: 400;
}
.col-filter:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }

/* Approval-flows list toolbar */
.flows-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.flows-toolbar .help { flex: 1; }

/* ============================================================
   Round 9 — legal entities, allocation switch, nested line detail
   ============================================================ */

/* Allocation toggle switch (PO form) */
.alloc-switch { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 16px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; background: var(--line-strong); border-radius: 999px; transition: background 0.15s; }
.switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.switch-text strong { display: block; font-size: 13px; }

/* Delivery-address rows in the legal-entity modal */
.addr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.addr-row { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 0.7fr 1fr 32px; gap: 8px; align-items: center; }
.round-row { display: grid; grid-template-columns: 1.1fr 1.6fr 1fr 0.9fr 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.round-row .input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-family: var(--font-ui); }
.round-row .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.addr-row input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-family: var(--font-ui); }
.addr-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Nested line-item detail (inside a record detail panel) */
.line-expand { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: var(--radius-sm); transition: color 0.12s, background 0.12s; }
.line-expand:hover { color: var(--primary); background: var(--primary-soft); }
.line-expand.is-open { color: var(--primary); }
.line-detail-row > td { background: var(--bg-card); padding: 0; box-shadow: inset 2px 0 0 var(--primary); }
.line-detail-row .detail-panel { padding: 12px 16px; }

/* Per-line select inputs in the line editor */
.line-row select[data-sel-kind] { width: 100%; box-sizing: border-box; font-size: 12.5px; padding: 6px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-ui); background: var(--bg-card); color: var(--text); }
.line-row select[data-sel-kind]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }

/* ============================================================
   Round 11 — list paging
   ============================================================ */
.pager-cell { background: var(--bg-card); border-top: 1px solid var(--line); padding: 8px 12px; }
.pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.pager-size { display: inline-flex; align-items: center; gap: 6px; }
.pager-size-sel { font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-ui); color: var(--text); background: var(--bg-card); }
.pager-info { flex: 1; }
.pager-nav { display: inline-flex; align-items: center; gap: 4px; }
.pager-page { min-width: 92px; text-align: center; }
.pager-btn { border: 1px solid var(--line); background: var(--bg-card); color: var(--text); border-radius: var(--radius-sm); width: 28px; height: 26px; cursor: pointer; font-size: 14px; line-height: 1; }
.pager-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Round 11 — line action buttons (copy + delete) */
.line-acts { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.line-copy { border: 1px solid var(--line); background: var(--bg-card); color: var(--text-muted); border-radius: var(--radius-sm); width: 26px; height: 30px; cursor: pointer; font-size: 13px; line-height: 1; }
.line-copy:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* Round 11 — approval AND/OR selector in the flow editor */

/* Round 11 — approval-flow AND/OR selector */

/* ===================================================== COLOUR SCHEMES (per-user preference) */
:root[data-theme="dark"] {
    --bg-app: #0F141A; --bg-card: #1A2027; --bg-subtle: #151B22;
    --text: #E6EAF0; --text-muted: #9AA6B3;
    --line: #2A323D; --line-strong: #3A4450;
    --ok-bg: #13361F; --warn-bg: #3A2B0B; --bad-bg: #3A1717; --neutral-bg: #252D38; --info-bg: #16243F;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
}
:root[data-theme="slate"] {
    --bg-app: #E3E8EE; --bg-card: #FBFCFE; --bg-subtle: #EBEFF4;
    --text: #1B2430; --text-muted: #586475; --line: #CDD6E0; --line-strong: #B6C2D0;
}
:root[data-theme="sand"] {
    --bg-app: #F2EDE4; --bg-card: #FFFDF8; --bg-subtle: #F7F2E9;
    --text: #2B2519; --text-muted: #7A6F58; --line: #E6DDCB; --line-strong: #D6C9AE;
}
:root[data-theme="ocean"] {
    --bg-app: #EAF1F7; --bg-card: #FFFFFF; --bg-subtle: #F1F6FB;
    --text: #0E2233; --text-muted: #5A7185; --line: #D4E2EE; --line-strong: #BBD0E0;
    --primary: #0E7FB8; --primary-hover: #0A6C9E; --primary-soft: #D6ECF8; --primary-ink: #0A3954; --brand-orange: #0E7FB8;
    --btn-bg: #0E7FB8; --btn-bg-hover: #0A6C9E; --btn-text: #FFFFFF;
    --info: #0E7FB8; --info-bg: #D6ECF8;
}
:root[data-theme="forest"] {
    --bg-app: #ECF2EC; --bg-card: #FFFFFF; --bg-subtle: #F2F7F2;
    --text: #14271A; --text-muted: #5C7060; --line: #D6E4D8; --line-strong: #BCD0BF;
    --primary: #2E7D4F; --primary-hover: #266B43; --primary-soft: #D8EFE0; --primary-ink: #173E27; --brand-orange: #2E7D4F;
    --btn-bg: #2E7D4F; --btn-bg-hover: #266B43; --btn-text: #FFFFFF;
}
:root[data-theme="rose"] {
    --bg-app: #F7EEF1; --bg-card: #FFFFFF; --bg-subtle: #FBF2F5;
    --text: #2B1620; --text-muted: #7A5A65; --line: #EBD7DE; --line-strong: #DCC0CA;
    --primary: #C23B6B; --primary-hover: #A82F5B; --primary-soft: #F8DCE7; --primary-ink: #611E36; --brand-orange: #C23B6B;
    --btn-bg: #C23B6B; --btn-bg-hover: #A82F5B; --btn-text: #FFFFFF;
}
:root[data-theme="graphite"] {
    --bg-app: #1C1C1E; --bg-card: #2A2A2D; --bg-subtle: #232325;
    --text: #ECECEE; --text-muted: #A0A0A6; --line: #3A3A3E; --line-strong: #4A4A4F;
    --primary: #E8853A; --primary-hover: #D6742A; --primary-soft: #4A3422; --primary-ink: #FFD9B5; --brand-orange: #E8853A;
    --btn-bg: #E8853A; --btn-bg-hover: #D6742A; --btn-text: #FFFFFF;
    --ok-bg: #1E3A26; --warn-bg: #3A2E12; --bad-bg: #3A1E1E; --neutral-bg: #303034; --info-bg: #1E2E40;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
}
:root[data-theme="grape"] {
    --bg-app: #EFEAF6; --bg-card: #FFFFFF; --bg-subtle: #F4F0FA;
    --text: #211633; --text-muted: #685a7d; --line: #E0D6EF; --line-strong: #CBBCE2;
    --primary: #7C3AED; --primary-hover: #6D29DE; --primary-soft: #E9DDFB; --primary-ink: #3C1D72; --brand-orange: #7C3AED;
    --btn-bg: #7C3AED; --btn-bg-hover: #6D29DE; --btn-text: #FFFFFF;
}

/* Preferences — colour scheme picker */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.theme-card {
    display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
    padding: 14px; cursor: pointer; text-align: left;
    background: var(--bg-card); border: 1.5px solid var(--line); border-radius: var(--radius);
    transition: border-color .12s, box-shadow .12s;
}
.theme-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.theme-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.theme-swatch { display: flex; width: 100%; height: 44px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.theme-swatch span { flex: 1; }
.theme-name { font-weight: 600; font-size: 13px; color: var(--text); }
.theme-check { font-size: 11px; font-weight: 600; color: var(--primary-ink); background: var(--primary-soft); padding: 2px 8px; border-radius: 999px; }

/* Lookup value editor rows */
.lk-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.lk-row input { flex: 1; }
#lk-values { margin-bottom: 10px; }

/* Custom-field grid (width-based layout) */
.cf-grid { display: flex; flex-wrap: wrap; gap: 18px 12px; align-items: flex-start; }
/* System-field tiles (.field) and custom-field tiles (.cf-field) share a zone; match their flex
   behaviour so built-in and custom fields size identically when laid out together. */
.cf-grid > .field { flex-grow: 0; flex-shrink: 1; min-width: 120px; }
/* In the flex cf-grid, a full-width field (col-span) needs a flex-basis, not grid-column; give the raw
   fld-1-1 / fld-1-2 chip wrappers matching widths so status/notes tiles align to the same column grid. */
.cf-grid > .field.col-span { flex-basis: 100%; }
.cf-grid > .fld-1-1 { flex-basis: 100%; min-width: 120px; box-sizing: border-box; }
.cf-grid > .fld-1-2 { flex-basis: calc(50% - 12px); min-width: 120px; box-sizing: border-box; }
.cf-field { display: flex; flex-direction: column; gap: 6px; flex-grow: 0; flex-shrink: 1; min-width: 120px; }
.cf-field > label { font-size: 12px; color: var(--text); font-weight: 600; }
.cf-field > label .req { color: var(--bad); margin-left: 2px; }
.cf-field .rt-wrap, .cf-field .cf-choice { width: 100%; box-sizing: border-box; }
.cf-field > input, .cf-field > select, .cf-field > textarea {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cf-field > input.mono, .cf-field > input[inputmode="decimal"] { font-family: var(--font-mono); }
.cf-field > textarea { resize: vertical; min-height: 70px; }
.cf-field > input:focus, .cf-field > select:focus, .cf-field > textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Converted-PO chip row on requisition detail */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Supplier onboarding + questionnaire (detail panel) */
.qa-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.qa-row:last-child { border-bottom: none; }
.qa-q { font-weight: 600; font-size: 13px; }
.qa-a { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.link-row { margin-top: 6px; }
.onb-link { display: inline-block; word-break: break-all; background: rgba(0,0,0,.05); padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.pill.info { background: rgba(43,120,228,.14); color: #1f5fb0; }

/* Line-item leading expander cell */
.line-exp-cell { display: flex; align-items: center; justify-content: center; }

/* Row-actions overflow → 3-dots (kebab) menu */
.kebab-menu { position: fixed; z-index: 200; display: none; flex-direction: row; align-items: center; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 5px; min-width: 0; width: max-content; max-width: calc(100vw - 16px); flex-wrap: nowrap; }
.row-actions.kebab-open .kebab-menu { display: flex; }
.kebab-menu .btn { width: 32px; height: 32px; min-width: 32px; padding: 0; justify-content: center; align-items: center; gap: 0; border-radius: 8px; flex: 0 0 auto; }
.kebab-menu .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Custom-field radio / checkbox groups */
.cf-choice { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0; }
.cf-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; }
.cf-opt input { width: auto; }

/* Rich-text custom field */
.rt-wrap { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.rt-toolbar { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.03); }
.rt-btn { border: 1px solid transparent; background: transparent; border-radius: 6px; min-width: 28px; height: 26px; cursor: pointer; color: var(--text); }
.rt-btn:hover { background: rgba(0,0,0,.06); }
.rt-edit { min-height: 120px; padding: 9px 11px; outline: none; font-size: 14px; line-height: 1.5; height: auto; overflow-wrap: anywhere; }
.rt-edit:focus { box-shadow: inset 0 0 0 2px rgba(255,139,31,.35); }
.rt-view { font-size: 14px; }
.rt-view ul { margin: 4px 0; padding-left: 20px; }

/* Rich-text custom field inside a line-item detail spans the full width */
.line-detail .field.cf-rich { flex-basis: 100%; }
.line-detail .rt-edit { min-height: 96px; }

/* "Clear selection" action row inside a searchable dropdown panel */
.combo-clear-opt { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--bad); cursor: pointer; border-bottom: 1px solid var(--border); }
.combo-clear-opt:hover { background: rgba(0,0,0,.04); }

/* System (built-in) fields shown weak/locked in the custom-field manager */

/* ---- Form builder (Setup → Custom fields) ---- */
.fb-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.fb-doc-picker { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.fb-doc-picker-label { font-weight: 600; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.fb-doc-picker-combo { flex: 1; max-width: 360px; }
.fb-tab { border: none; background: transparent; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.fb-tab:hover { color: var(--text); }
.fb-tab.active { color: var(--text); border-bottom-color: var(--orange, #FF8B1F); }
.fb-section { margin-top: 16px; }
.fb-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }
.fb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 6px; }
.fb-zone-label { font-size: 12px; color: var(--text-muted); }
.fb-sys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.fb-tile-sys { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; opacity: .55; background: var(--bg-card); }
.fb-tile-sys .fb-lock { font-size: 10px; }
.fb-canvas { display: flex; flex-wrap: wrap; gap: 10px; min-height: 56px; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; background: rgba(0,0,0,.015); }
.fb-empty { color: var(--text-muted); font-size: 13px; padding: 8px; }
.fb-tile { box-sizing: border-box; min-width: 150px; flex-grow: 0; background: var(--bg-card); border: 1px solid var(--line-strong, var(--border)); border-radius: 10px; padding: 8px 10px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.fb-tile:active { cursor: grabbing; }
.fb-tile.fb-dragging { opacity: .4; outline: 2px dashed var(--orange, #FF8B1F); }
.fb-drop-ph { box-sizing: border-box; min-width: 150px; min-height: 48px; flex-grow: 0; border: 2px dashed var(--orange, #FF8B1F); border-radius: 10px; background: rgba(255,139,31,.10); }
.fb-tile-blank { border-style: dashed; background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,.03) 6px, rgba(0,0,0,.03) 12px); }
.fb-tile-top { display: flex; align-items: center; gap: 6px; }
.fb-grip { color: var(--text-muted); cursor: grab; font-size: 13px; }
.fb-tile-label { font-weight: 600; font-size: 13px; cursor: pointer; }
.fb-tile-label:hover { text-decoration: underline; }
.fb-tile-meta { font-size: 11px; color: var(--text-muted); margin: 2px 0 6px; }
.fb-tile-acts { display: flex; align-items: center; gap: 4px; }
.fb-width { font-size: 12px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); }

/* Blank custom-field spacer in a rendered form */
.cf-blank .cf-spacer { height: 1px; }
.cf-blank-line .cf-spacer { height: 1px; }

/* Form builder — header layout mode (system fields reorderable) */
.fb-tile-locked { background: var(--bg-card); border-style: solid; }
.fb-tile-locked .fb-tile-label { cursor: default; }
.fb-tile-locked .fb-tile-label:hover { text-decoration: none; }
.fb-tile .fb-lock { font-size: 11px; opacity: .6; margin-left: auto; }
.fb-live { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--orange, #FF8B1F); vertical-align: middle; }

/* Column filter dropdown (limited-value columns) */
.col-filter-sel { cursor: pointer; appearance: auto; -webkit-appearance: auto; padding-right: 4px; }

/* Grand-total row in read-only line tables */
.grid.mini tfoot .lines-total td { border-top: 2px solid var(--line-strong); font-weight: 600; padding-top: 8px; }
.grid.mini tfoot .lines-total td.num { color: var(--text); }

/* Workflows: document sub-tabs + System panel */
.flow-doc-tabs { margin-bottom: 0; }
.fb-tab-count { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; font-size: 11px; line-height: 16px;
    text-align: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.flow-doc-panel { padding-left: 0; padding-right: 0; }
.sys-wf-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.sys-wf-row .help { margin-top: 3px; }

/* Custom colour editor */
.theme-card-custom .theme-name { font-style: italic; }
.custom-colors { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cc-field { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; }
.cc-input { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px;
    background: none; cursor: pointer; flex: 0 0 auto; }
.cc-input::-webkit-color-swatch-wrapper { padding: 2px; }
.cc-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.cc-label { flex: 1 1 auto; font-size: 13px; color: var(--text); font-weight: 500; }
.cc-hex { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }
.cc-actions { margin-top: 12px; }

/* Per-document List View column picker */
.col-picker-btn { margin-left: auto; }
.card-head .col-picker-btn { align-self: center; }
.col-picker-pop {
    position: fixed; z-index: 1200; min-width: 190px; max-height: 60vh; overflow: auto;
    background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 8px;
}
.col-picker-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); padding: 2px 6px 6px; }
.col-picker-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text); cursor: pointer; }
.col-picker-row:hover { background: var(--bg-subtle); }
.col-picker-row input { cursor: pointer; }

/* Dimensions sub-tabs + Payment terms editor */
.dim-tabs { margin-bottom: 14px; }
.dim-panel { margin-top: 4px; }

/* Status filter tabs above document lists */
.status-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 14px; }
.status-tab { border: 1px solid var(--line); background: var(--bg-card); color: var(--text-muted);
    font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.status-tab:hover { border-color: var(--line-strong); color: var(--text); }
.status-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Bank account rows (vendor + legal entity forms) */
.bank-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.bank-row { display: grid; grid-template-columns: 1fr 1.3fr 1.6fr 1.2fr 1fr 0.8fr 32px; gap: 8px; align-items: center; }
.bank-row input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-family: var(--font-ui); }
.bank-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Configuration templates (Setup → Configuration → Templates) */
.tpl-sections { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.tpl-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.tpl-import { margin: 10px 0; }
.tpl-json { width: 100%; box-sizing: border-box; min-height: 160px; font-family: var(--font-mono, monospace); font-size: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text); resize: vertical; }
.tpl-json:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }

/* Inline (full-page) new-document form when the pop-up preference is off */
.inline-form { max-width: 960px; margin-left: auto; margin-right: auto; }
.inline-form.is-wide { max-width: 100%; }
/* On-page (in-the-view) document forms: at most 75% of the content width on wide screens
   (viewport >= 1366px), and up to full width below 1366px where 75% would be too cramped. */
@media (min-width: 1366px) { .inline-form.is-wide { max-width: 75%; } }
.inline-form .modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

.combo-disabled, .lines-disabled { opacity: .55; pointer-events: none; }

/* Live approval-flow preview at the bottom of forms */
.flow-preview { margin-top: 18px; }
.flow-preview .flow-badge { font-size: 11px; font-weight: 600; color: var(--primary-ink); background: var(--primary-soft); border-radius: 999px; padding: 2px 9px; margin-left: 8px; }
.flow-preview .flow-cond { font-size: 12px; margin: 2px 0 12px; }
.flow-preview .flow-cond em { font-style: normal; color: var(--text-muted); font-weight: 600; }

/* Horizontal "business" approval flow — wraps to new lines, connected across wraps */
.wf-flow { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 8px; }
.wf-seg { display: flex; align-items: center; min-width: 0; }
.wf-node { display: flex; align-items: center; gap: 9px; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 7px 11px; min-width: 0; }
.wf-node-num { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-size: 12px; font-weight: 700; }
.wf-node-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wf-node-name { font-size: 12.5px; font-weight: 650; color: var(--text); white-space: nowrap; }
.wf-node-who { display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.wf-who-ic { display: inline-flex; align-items: center; color: var(--text-muted); }
.wf-who-ic svg { width: 13px; height: 13px; }
.wf-who-name { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.wf-node-type { font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.wf-node-cap { display: inline-block; align-self: flex-start; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--primary-ink); background: var(--primary-soft); border-radius: 5px; padding: 1px 6px; }
/* connector between steps */
.wf-conn { flex: 0 0 auto; align-self: center; width: 20px; height: 2px; margin: 0 4px; background: var(--line-strong); position: relative; }
.wf-conn::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-left: 5px solid var(--line-strong); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
/* status colours on the node marker (runtime trail) */
.wf-node.is-approved .wf-node-num { background: var(--good-bg, #e7f6ec); color: var(--good, #1a7f37); }
.wf-node.is-rejected .wf-node-num { background: var(--bad-bg, #fdeaea); color: var(--bad, #c2362f); }
.wf-node.is-current { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.wf-node.is-current .wf-node-num { background: var(--primary); color: #fff; }
.wf-node.is-waiting .wf-node-num { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--line-strong); }
/* round "+" add-an-approver affordance */
.wf-add { flex: 0 0 auto; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: var(--bg-card); color: var(--primary-ink); border: 1px dashed var(--primary); padding: 0; transition: background 0.12s, color 0.12s; }
.wf-add:hover { background: var(--primary); color: #fff; border-style: solid; }
.wf-add svg { width: 15px; height: 15px; }
.trail-comment-who { font-weight: 600; color: var(--text); }

/* Multiple-flow preview groups + system tag */
.flow-meta { font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-left: 8px; }
.flow-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.flow-group { margin: 0; flex: 1 1 250px; min-width: 230px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--bg-card); box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.04)); }
.flow-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.flow-group-head .flow-badge { margin-left: 0; }
.flow-group-head .flow-cond { width: 100%; font-size: 11.5px; margin: 2px 0 0; color: var(--text-muted); }
.flow-sys-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }

/* Custom field: Attachment control + Line break separator */
.cf-att { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-att-btn { cursor: pointer; margin: 0; }
.cf-att-current { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.cf-att-empty { color: var(--text-muted); }
.cf-att-link { color: var(--brand); text-decoration: none; word-break: break-all; }
.cf-att-link:hover { text-decoration: underline; }
.cf-att-size { color: var(--text-muted); font-size: 11.5px; }
.cf-att-clear { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.cf-att-clear:hover { color: var(--danger, #c0392b); }
.cf-linebreak { display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.cf-break-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.cf-rule { width: 100%; border: none; border-top: 1px solid var(--line); margin: 0; }

/* System workflow setting toggle + de-duplicated step note */
.sys-setting-card { margin-bottom: 14px; }
.sys-setting-row { display: flex; align-items: flex-start; gap: 18px; justify-content: space-between; }
.sys-setting-text { min-width: 0; }
.flow-dupe-note { margin: 0; }

/* Security: user group/role checkbox pickers in the user form */

/* Workflow list: type badge + expandable detail */
.wf-type-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
    background: var(--accent-soft, var(--bg-subtle)); color: var(--accent, var(--text)); border: 1px solid var(--line-strong); }
.wf-type-tag.hier { background: var(--warn-bg, var(--bg-subtle)); color: var(--warn, var(--text)); }
.appr-type-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 6px;
    background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--line); }
.flow-detail-cond { font-size: 13px; color: var(--text); margin: 2px 0 6px; }
.flow-detail-cond em { color: var(--text-muted); font-style: normal; font-weight: 600; padding: 0 3px; }

/* Contract recognition + AI config note variants */
.inline-note.warn { border-color: var(--warn, #b78103); background: var(--warn-bg, rgba(183,129,3,.08)); color: var(--text); }
.inline-note.err { border-color: var(--bad, #c0392b); background: var(--bad-bg, rgba(192,57,43,.08)); color: var(--text); }

/* ===================== PO Monitor ===================== */
.metric.accent-teal::before { background: #14b8a6; }
.metric.accent-rose::before { background: #f43f5e; }

.two-col.mon-charts { grid-template-columns: 1fr 1fr; margin-bottom: 22px; }

/* status donut */
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; }
.donut-num { font-family: var(--font-mono); font-size: 30px; font-weight: 700; fill: var(--text); }
.donut-cap { font-size: 11px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 190px; }
.lg-row { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 4px 6px; border-radius: 7px; cursor: pointer; font: inherit; color: var(--text); text-align: left; width: 100%; }
.lg-row:hover { background: var(--bg-subtle); }
.lg-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.lg-name { flex: 1; font-size: 13px; }
.lg-val { font-family: var(--font-mono); font-weight: 600; font-size: 13px; }

/* spend pipeline */
.pipe { display: flex; flex-direction: column; gap: 13px; }
.pipe-row { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 12px; }
.pipe-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.pipe-track { height: 22px; background: var(--bg-subtle); border-radius: 6px; overflow: hidden; }
.pipe-fill { height: 100%; border-radius: 6px; min-width: 2px; transition: width 0.3s ease; }
.pipe-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pipe-pct { color: var(--text-muted); font-weight: 500; font-size: 11.5px; margin-left: 3px; }
.pipe-foot { color: var(--text-muted); font-size: 11.5px; margin-top: 4px; }

/* stage tag */
.stag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* filter chips */
.mon-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 6px; }
.mon-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); background: var(--bg-card); border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text); }
.mon-chip:hover { background: var(--bg-subtle); }
.mon-chip.is-active { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary); font-weight: 600; }
.mon-chip .chip-n { font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; opacity: 0.85; }
.mon-chip .lg-dot { width: 9px; height: 9px; }

/* PO table with expandable item detail */
.mon-table th.exp-c, .mon-table td.exp-c { width: 34px; text-align: center; padding-left: 10px; padding-right: 0; }
.mon-caret { display: inline-block; color: var(--text-muted); font-size: 11px; }
.mon-po-row { cursor: pointer; }
.mon-po-row:hover, .mon-po-row.is-open { background: var(--bg-subtle); }
.mon-po-row.is-open .mon-caret { color: var(--text); }
.mon-table tbody.mon-po { border-bottom: 1px solid var(--line); }
.mon-table tbody.mon-po:last-child { border-bottom: 0; }
.mon-lines > td { padding: 0; background: var(--bg-subtle); border-bottom: 1px solid var(--line); }
.mon-line-wrap { padding: 8px 16px 16px 44px; }
.mon-line-tbl { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mon-line-tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg-subtle); white-space: nowrap; }
.mon-line-tbl th.num, .mon-line-tbl td.num { text-align: right; }
.mon-line-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.mon-line-tbl tbody tr:last-child td { border-bottom: 0; }

/* item progress mini-bar (received vs invoiced over ordered) */
.mbar-cell { min-width: 96px; }
.mbar { position: relative; height: 16px; background: var(--bg-subtle); border-radius: 4px; overflow: hidden; min-width: 84px; }
.mbar-recv { position: absolute; left: 0; top: 0; height: 100%; background: #5eead4; border-radius: 4px; }
.mbar-inv { position: absolute; left: 0; top: 0; height: 100%; background: #14b8a6; border-radius: 4px; }

@media (max-width: 900px) { .two-col.mon-charts { grid-template-columns: 1fr; } }

/* config import mode selector */

/* ===================== Field-mapping builder (list + tile editor) ===================== */
.map-list-row { cursor: pointer; }
.map-edit-title { flex: 1; text-align: center; }

/* Mapping name centred on the page */
.map-active { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }

.map-flow-hint { font-size: 12px; padding: 8px 11px; border-radius: var(--radius-sm); line-height: 1.45; border: 1px solid var(--line); margin-bottom: 12px; }
.map-flow-hint.ok { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--text); }
.map-flow-hint.warn { background: var(--warn-bg); border-color: var(--warn-bg); color: var(--text); }

.map-help { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.map-help strong { color: var(--text); }

/* Two columns of fields (source | flip | target); the document selector sits on top of each list. */
.map-col-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); text-align: center; }

.map-row { display: grid; grid-template-columns: minmax(170px, 1fr) 120px minmax(170px, 1fr) 38px; align-items: center; column-gap: 12px; row-gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.map-row.has-tf { border-color: var(--primary); }
.map-lvl { font-size: 11px; height: 28px; padding: 0 6px; color: var(--text-muted); }
.map-src-end .map-lvl, .map-tgt-end .map-lvl { align-self: flex-start; width: auto; min-width: 84px; }

/* connecting line with the 3-dot transformation control in the centre */
.map-row.has-tf .map-link::before { background: var(--primary); }
.map-dots { position: relative; z-index: 1; min-width: 40px; height: 24px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; letter-spacing: 2px; display: inline-flex; align-items: center; justify-content: center; }
.map-dots:hover { border-color: var(--primary); color: var(--primary); }
.map-dots.is-set { background: var(--primary); color: #fff; border-color: var(--primary); }
.map-dots.is-open { box-shadow: 0 0 0 3px var(--primary-soft); }

/* expandable transformation panel for a mapping line */
.map-tf-panel { grid-column: 1 / -1; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-subtle); }
.map-tf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.map-tf-grid .field { gap: 5px; }
.map-tf-hint { margin-top: 9px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.map-tf-hint code { background: var(--bg-card); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 11.5px; }

.map-empty { padding: 18px 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5; background: var(--bg-card); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.map-row-warn { grid-column: 1 / -1; font-size: 11.5px; color: var(--warn); background: var(--warn-bg); border-radius: var(--radius-sm); padding: 6px 9px; }

@media (max-width: 720px) {
    .map-cols-head, .map-row { grid-template-columns: 1fr 46px 1fr 26px; column-gap: 6px; }
    .map-rows-head { display: none; }
}

@media (max-width: 720px) {
    .map-tile { flex-basis: calc(50% - 10px) !important; }
    .map-rows-head { display: none; }
    .map-row { grid-template-columns: 1fr; row-gap: 7px; }
    .map-row-arrow { display: none; }
    .map-row-del { justify-self: start; }
    .map-row-a1, .map-row-a2 { width: 100%; }
}

/* ============================================================
   Round 72 — visual field-mapping editor (drag & drop rectangles)
   ============================================================ */
.map-doc-row { display: flex; gap: 16px; margin: 4px 0 12px; flex-wrap: wrap; }
.map-doc-pick { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; }
.map-doc-pick .map-col-cap { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.map-canvas { display: flex; align-items: stretch; gap: 12px; margin: 8px 0 4px; }
.map-canvas-mid { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--primary); flex: 0 0 28px; }
.map-panel { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-subtle); padding: 10px; }
.map-panel-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.map-group-cap { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 4px; }
.map-tilewrap { display: flex; flex-direction: column; gap: 6px; min-height: 34px; align-content: flex-start; padding: 2px; border-radius: var(--radius-sm); }
.map-tile.fb-tile { flex: 0 0 auto; width: 100%; max-width: 100%; margin: 0; cursor: grab; }
.map-tile.fb-tile:hover { border-color: var(--primary); }
.map-tile .fb-tile-top { gap: 6px; }
.map-tile .fb-tile-label { font-size: 12px; }
.map-tile-meta { display: flex; align-items: center; gap: 6px; }
.map-tile-size { font-size: 10px; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 999px; padding: 1px 8px; letter-spacing: .02em; }
.map-head-form { margin: 4px 0 10px; }
.map-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; align-self: center; }
.map-cf-head { font-weight: 700; font-size: 13px; margin: 10px 0 6px; }
.map-tile-key { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.map-tile-cf { color: var(--primary-ink); font-weight: 700; font-style: italic; }
.map-tile-custom.fb-tile { background: var(--primary-soft); border-color: var(--primary); }
.map-tile.is-linked.fb-tile { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.map-tile.is-armed.fb-tile { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); background: var(--primary-soft); }
.map-conn-head { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 6px; font-weight: 700; font-size: 14px; }
.map-conns { display: flex; flex-direction: column; gap: 6px; }
.map-conn { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); padding: 7px 10px; }
.map-conn.has-tf { border-color: var(--primary); }
.map-conn-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-conn-src, .map-conn-tgt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; flex: 0 1 auto; }
.map-conn-tgt { font-weight: 600; }
.map-conn-mid { display: inline-flex; align-items: center; gap: 0; flex: 1 1 60px; min-width: 60px; background: none; border: none; padding: 0; cursor: pointer; }
.map-conn-line { flex: 1 1 auto; height: 2px; background: var(--line-strong); min-width: 10px; }
.map-dots-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--text-muted); font-size: 16px; line-height: 1; flex: 0 0 auto; }
.map-conn-mid.is-set .map-dots-ico { border-color: var(--primary); background: var(--primary); color: #fff; }
.map-conn-mid.is-open .map-dots-ico { border-color: var(--primary); color: var(--primary); }
.map-conn-mid.is-set .map-conn-line, .map-conn-mid.is-open .map-conn-line { background: var(--primary); }
.map-conn-del { flex: 0 0 auto; }
.map-lvl-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }

/* ---- List-view multi-select + bulk-action toolbar (R81) ---- */
.grid th.sel-col, .grid td.sel-cell { width: 34px; text-align: center; padding-left: 8px; padding-right: 4px; }
.grid td.sel-cell input[type="checkbox"], .grid th.sel-col input[type="checkbox"] { cursor: pointer; width: 15px; height: 15px; accent-color: var(--primary); }
.bulk-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin: 0 0 10px; background: var(--primary-soft); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.bulk-bar .bulk-count { font-weight: 600; color: var(--primary-ink); }
.bulk-bar .bulk-actions { display: flex; gap: 8px; margin-left: auto; }

/* Per-user document access grid (Users ▸ Groups & Roles & Documents) */
.doc-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 6px; }
.doc-access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; margin: 0; cursor: default; }
.doc-access-row > span:first-child { font-size: 13px; color: var(--text); }
@media (max-width: 640px) { .doc-access-grid { grid-template-columns: 1fr; } }

/* Database connections (Setup ▸ Configuration ▸ Database) — the list uses the standard table.grid */
.card-head .head-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 640px) { .card-head { flex-wrap: wrap; gap: 8px; } .card-head .head-actions { width: 100%; } }

/* ===================== Layout toggle (Classic / Shop) under the logo ===================== */
.view-toggle { display: flex; gap: 4px; margin: 0 16px 14px; padding: 3px; background: var(--bg-sidebar-hover); border-radius: 999px; }
.vt-btn { flex: 1; border: 0; background: transparent; color: var(--text-on-dark); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.vt-btn:hover { color: var(--text-on-dark-strong); }
.vt-btn.is-active { background: var(--primary); color: #fff; }

/* ===================== Catalog picker overlay ===================== */
.cat-pick-ov { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cat-pick { width: min(680px, 96vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.cat-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.cat-pick-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.cat-pick-tools { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.cat-pick-list { overflow: auto; padding: 6px 10px; flex: 1; }
.cat-row { display: grid; grid-template-columns: 30px 1fr 76px; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); }
.cat-row:hover { background: var(--bg-subtle); }
.cat-row.on { background: var(--primary-soft); }
.cat-row-name { font-weight: 600; font-size: 13.5px; }
.cat-row-sub { color: var(--text-muted); font-size: 12px; margin-top: 1px; }
.cat-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.cat-pick-foot-btns { display: flex; gap: 8px; }
.shop-qty, .cat-row-qty { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; background: var(--bg-card); color: var(--text); }

/* ===================== E-shop ===================== */
.shop { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.shop-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.shop-toolbar #shop-q { flex: 1; }
.shop-cat-sel { width: 230px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.shop-card { display: flex; flex-direction: column; gap: 4px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm); }
.shop-card-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); font-weight: 700; }
.shop-card-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.shop-card-code { font-size: 12px; color: var(--text-muted); }
.shop-card-price { font-size: 15px; font-weight: 700; margin-top: 4px; }
.shop-unit { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.shop-quote { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.shop-card-sup { font-size: 12px; color: var(--text-muted); min-height: 16px; }
.shop-card-foot { display: flex; gap: 8px; margin-top: 10px; }
.shop-card-foot .shop-qty { width: 64px; }
.shop-add { flex: 1; }
.shop-cart { position: sticky; top: 16px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.shop-cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }
.shop-cart-empty { color: var(--text-muted); font-size: 13px; }
.shop-cart-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; }
.shop-cart-row { display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.scr-name { font-weight: 600; font-size: 13px; }
.scr-sub { font-size: 11.5px; color: var(--text-muted); }
.scr-qty { display: flex; align-items: center; gap: 6px; }
.scr-step { width: 22px; height: 22px; border: 1px solid var(--line-strong); background: var(--bg-subtle); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; line-height: 1; }
.scr-rm { border: 0; background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer; }
.shop-cart-total { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px; font-size: 14px; }
.shop-cart-note { font-size: 11.5px; margin-bottom: 10px; }
.shop-checkout { width: 100%; }
.shop-clear { width: 100%; margin-top: 6px; }
.line-tools { margin-top: 8px; }
.pr-pc-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); user-select: none; vertical-align: middle; }
.foot-add { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-proposal { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pc-exp-cell { width: 28px; text-align: center; padding-left: 4px; padding-right: 4px; }
.pc-exp { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 12px; line-height: 1; padding: 4px; border-radius: 4px; transition: transform 0.15s ease; }
.pc-exp:hover { background: var(--bg-subtle); }
.pc-exp.open { transform: rotate(180deg); }
.pc-detail-row > td { background: var(--bg-subtle); }
.pc-sup { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 2px; }
.pc-sup + .pc-sup { border-top: 1px solid var(--line); }
.pc-exist { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.addr-country-host { min-width: 0; }
/* Process designer (node-graph canvas) */
.pd-wrap { display: flex; flex-direction: column; }
.pd-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--bg-card); flex-wrap: wrap; }
.pd-bar-name { font-size: 15px; }
.pd-hint { font-size: 12px; color: var(--text-muted); }
.pd-bar-spacer { flex: 1; }
.pd-dirty { font-size: 12px; color: var(--primary); font-weight: 600; }
.pd-body { display: grid; grid-template-columns: 178px 1fr; border: 1px solid var(--line); border-top: none; overflow: hidden; }
.pd-palette { padding: 12px; border-right: 1px solid var(--line); background: var(--bg-subtle); display: flex; flex-direction: column; gap: 6px; }
.pd-pal-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-ui); }
.pd-pal-btn:hover { border-color: var(--primary); }
.pd-pal-ico { width: 18px; text-align: center; color: var(--text-muted); }
.pd-pal-note { margin-top: 10px; font-size: 11px; color: var(--text-muted); line-height: 1.45; }
.pd-canvas { position: relative; height: 46vh; min-height: 300px; overflow: auto; background: var(--bg-app); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 22px 22px; }
.pd-edges { position: absolute; top: 0; left: 0; }
.pd-edge { pointer-events: stroke; }
.pd-node { position: absolute; background: var(--bg-card); border: 1px solid var(--line-strong); border-left-width: 4px; border-radius: var(--radius-sm); box-shadow: 0 1px 4px rgba(15,23,42,.12); user-select: none; }
.pd-node.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pd-node.connecting { outline: 2px dashed var(--primary); outline-offset: 2px; }
.pd-node-ico { color: var(--text-muted); font-size: 12px; }
.pd-node-del { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.pd-node-del:hover { color: #c0392b; }
.pd-port { position: absolute; top: 18px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-muted); line-height: 1; }
.pd-port-in { left: -7px; }
.pd-port-out { right: -7px; cursor: crosshair; }
.pd-port-out:hover { border-color: var(--primary); color: var(--primary); }
.pd-def-kind.pd-node-START { color: #2e9e5b; } .pd-def-kind.pd-node-DOCUMENT { color: var(--primary); }
.pd-def-kind.pd-node-ACTION { color: #2d7ff9; } .pd-def-kind.pd-node-CONTROL { color: #8e44ad; }
.pd-def-kind.pd-node-DECISION { color: #b9890a; } .pd-def-kind.pd-node-END { color: #c0392b; }
/* popup (pop-out) host */
.pd-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 22px; }
.pd-popup { width: min(1180px, 96vw); max-height: 94vh; overflow: auto; background: var(--bg-card); border-radius: var(--radius); box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.pd-popup .pd-bar { border-radius: var(--radius) var(--radius) 0 0; position: sticky; top: 0; z-index: 5; }
/* definition panel below the canvas */
.pd-def-kind { font-size: 13px; font-weight: 700; white-space: nowrap; }
.pd-def-name { flex: 0 0 auto; width: 100%; box-sizing: border-box; font-size: 13px; font-weight: 600; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-family: var(--font-ui); }
.pd-def-label { font-size: 12px; font-weight: 700; color: var(--text); }
.pd-def-hint { font-weight: 400; color: var(--text-muted); margin-left: 6px; font-size: 11px; }
.pd-def-col select, .pd-c-op { width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-family: var(--font-ui); }
.pd-stack { display: flex; flex-direction: column; gap: 28px; }
.pd-none { font-size: 12px; }
.pd-cond { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.pd-param input, .pd-cond input { width: 100%; box-sizing: border-box; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-family: var(--font-ui); }
.pd-param .pd-c-op, .pd-cond .pd-c-op { padding: 6px 8px; font-size: 12px; }
.pd-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; }
.pd-x:hover { color: #c0392b; }
.pd-assign { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.pd-assign-n { color: var(--text-muted); font-weight: 700; }
.pd-assign-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-mini { border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-size: 11px; line-height: 1; border-radius: 4px; padding: 2px 5px; }
.pd-mini:disabled { opacity: .4; cursor: default; }
.pd-add-row { margin-top: 2px; }
/* designer v3: editable process metadata strip + derived I/O field rows */
.pd-meta { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-top: none; background: var(--bg-card); }
.pd-meta-name { flex: 0 1 300px; font-size: 14px; font-weight: 600; }
.pd-meta-desc { flex: 1 1 auto; font-size: 13px; }
.pd-meta input, .pd-meta select { box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-family: var(--font-ui); }
.pd-meta-status { flex: 0 0 130px; }
.pd-io-row { gap: 7px; }
.pd-io-src { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 1px 5px; }
.pd-io-custom { background: rgba(245,130,31,.16); color: var(--primary); }
.pd-io-req { color: #c0392b; font-weight: 700; }
.pd-io-lock { color: var(--line-strong); font-size: 11px; padding: 0 4px; }
.pd-cf-add { display: flex; gap: 6px; align-items: center; }
.pd-cf-add .pd-cf-label { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-family: var(--font-ui); }
.pd-cf-add .pd-cf-type { flex: 0 0 auto; font-size: 12px; padding: 6px 8px; }
/* designer refinements (r157): resizable splitter + standard field formatting */
.pd-edge-temp { pointer-events: none; }
/* align designer inputs/selects with the standard field box (matches .field input) */
.pd-meta input, .pd-meta select,
.pd-define input:not([type="checkbox"]), .pd-define select, .pd-define textarea {
    font-family: var(--font-ui); font-size: 13px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pd-meta input, .pd-meta select, .pd-def-name, .pd-cf-add .pd-cf-label,
.pd-def-col select, .pd-c-op, .pd-c-field, .pd-c-val,
.pd-io-add .pd-iof-label { padding: 9px 11px; }
.pd-meta input:focus, .pd-meta select:focus,
.pd-define input:focus, .pd-define select:focus, .pd-define textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
/* the searchable combo that replaces each designer <select> already uses the standard box;
   keep it flush to the field width */
.pd-meta .combo, .pd-define .combo { width: 100%; min-width: 0; }
.pd-cf-add .pd-cf-type { flex: 0 0 150px; }
/* Per-node input/output field editor (add a field, upload an example JSON) */
.pd-io-add { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.pd-io-add .pd-iof-label { flex: 1 1 120px; min-width: 0; }
.pd-io-add select { flex: 0 0 132px; }
.pd-io-defined { margin-top: 6px; }
.pd-io-json-btn { margin-top: 4px; }
.pd-io-hint { margin-top: 4px; }
/* JSON shown when testing an email (received message transformed into an object) */
.pd-json { margin-top: 6px; max-height: 240px; overflow: auto; background: var(--bg-app); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text); white-space: pre; }
.pd-em-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pd-cond { grid-template-columns: 1fr 1fr 1fr auto; }
@media (max-width: 760px) { .pd-define-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .pd-body { grid-template-columns: 1fr; } .pd-palette, .pd-inspector { border: none; border-top: 1px solid var(--line); } }

@media (max-width: 900px) {
  .shop { grid-template-columns: 1fr; }
  .shop-cart { position: static; }
}

/* ===================== Open PR/PO monitor ===================== */
.appr-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.appr-ok { background: #DCFCE7; color: #166534; }
.om-bar-row { display: grid; grid-template-columns: 160px 1fr 34px; align-items: center; gap: 10px; margin: 7px 0; }
.om-bar-label { font-size: 12.5px; color: var(--text); }
.om-bar-track { height: 8px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; }
.om-bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.om-bar-n { text-align: right; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.om-table td { vertical-align: middle; }
.om-row.is-aging { background: rgba(244, 63, 94, 0.05); }
.om-row.is-pending td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

/* Shop cart: transport selector */
.shop-transport-label { display: block; font-size: 12px; color: var(--text-muted); margin: 10px 0 8px; }
.shop-transport-label select { display: block; width: 100%; margin-top: 4px; }

/* ===================== Sourcing & Questionnaires (R161) ===================== */
.muted-sm { color: var(--text-muted); font-size: 12px; }
.tagchip { display: inline-block; padding: 1px 8px; margin: 1px 2px; border-radius: 999px; background: var(--bg-subtle); border: 1px solid var(--line); font-size: 11px; color: var(--text-muted); }
.resp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }

/* questionnaire fill / preview */
.q-fill { display: flex; flex-direction: column; gap: 4px; }
.q-sec { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0; background: var(--bg-card); }
.q-sec-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--text); }
.q-field { margin: 10px 0; }
.q-field > .q-prompt { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text); }
.q-help { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.q-choice { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.q-choice.wrap { gap: 6px 14px; }
.q-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.q-rating { display: inline-flex; align-items: center; gap: 4px; }
.q-star { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--line-strong); padding: 0 1px; }
.q-star.on { color: var(--brand-orange, #E8833A); }
.q-star:disabled { cursor: default; }
.q-rating-val { font-size: 12px; color: var(--text-muted); margin-left: 8px; }

/* questionnaire builder */
.q-build-sec { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; background: var(--bg-subtle); }
.q-build-sechead { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.q-sec-input { flex: 1; font-weight: 600; }
.q-build-qs { display: flex; flex-direction: column; gap: 8px; }
.q-build-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--bg-card); }
.q-build-main { display: flex; flex-direction: column; gap: 6px; }
.q-build-prompt { width: 100%; }
.q-build-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.q-build-meta select { max-width: 180px; }
.q-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.q-w { max-width: 84px; }
.q-build-opts { width: 100%; font-size: 12px; }
/* system console */
.sc-tools { display: flex; align-items: center; gap: 12px; }
.sc-tools label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.sc-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-pill.ok { background: rgba(34, 139, 84, 0.12); color: #1d7a4c; }
.sc-pill.err { background: rgba(192, 57, 43, 0.12); color: var(--danger, #c0392b); }
.sc-row-err td { background: rgba(192, 57, 43, 0.06); }
.sc-msg { color: var(--danger, #c0392b); }
.sc-tabs { display: inline-flex; gap: 4px; }
.sc-tab { border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--text-muted); border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sc-tab:hover { color: var(--text); }
.sc-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.sc-subtools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px 8px; }
.sc-subtools-r { display: inline-flex; align-items: center; gap: 12px; }
.sc-subtools-r label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
/* role permissions — master access switch + expandable per-document actions */
.perm2-list { display: flex; flex-direction: column; gap: 5px; }
.perm2-mod { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.perm2-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.perm2-exp { background: none; border: 0; cursor: pointer; color: var(--text-muted); font-size: 13px; line-height: 1; padding: 2px 4px; }
.perm2-exp:disabled { opacity: 0.3; cursor: default; }
.perm2-name { font-weight: 500; flex: 0 0 190px; }
.perm2-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.perm2-access { flex: 0 0 auto; }
.perm2-detail { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding: 4px 12px 10px 30px; border-top: 1px solid var(--line); }
.perm2-act-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.perm2-access.perm2-partial input:checked + .switch-track { background: color-mix(in srgb, var(--primary) 50%, transparent); }
.perm2-act-body { flex: 1 1 auto; min-width: 0; }
.perm2-act-label { font-weight: 500; font-size: 13px; }
.perm2-act-desc { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.iban-check.ok { color: var(--success, #1b7f3b); }
.iban-check.warn { color: var(--danger, #c0392b); }
.iban-flag { font-size: 11px; font-weight: 700; margin-left: 4px; }
.iban-flag.ok { color: var(--success, #1b7f3b); }
.iban-flag.bad { color: var(--danger, #c0392b); }
.field-flag { font-size: 11px; font-weight: 700; margin-left: 6px; }
.field-flag.ok { color: var(--success, #1b7f3b); }
.field-flag.bad { color: var(--danger, #c0392b); }
.sv-q-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.sv-q-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.sv-q-item .sv-q-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* auction console */
.auc-board { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 12px; }
.auc-metric { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-subtle); min-width: 180px; }
.auc-metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.auc-metric-val { font-size: 26px; font-weight: 800; font-family: var(--font-mono); color: var(--text); }
.auc-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.auc-controls select, .auc-controls input { max-width: 220px; }
.auc-stay-grid { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: var(--bg-card); }
.auc-stay-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.auc-stay-row + .auc-stay-row { border-top: 1px solid var(--line); padding-top: 6px; }

/* survey results aggregation */
.agg-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.agg-label { flex: 0 0 120px; font-size: 12px; color: var(--text); text-align: right; }
.agg-bar { flex: 1; height: 14px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; }
.agg-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.agg-n { flex: 0 0 32px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.agg-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 2px; }

/* R162 — sourcing event read-only detail rows (reuse .detail-grid container) + chip remove */
.src-drow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.src-drow.full { grid-column: 1 / -1; }
.src-dk { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.src-dv { font-size: 14px; color: var(--text); word-break: break-word; }
.chip-x { cursor: pointer; color: var(--text-muted); margin-left: 2px; font-weight: 700; text-decoration: none; }
.chip-x:hover { color: var(--danger, #c0392b); }

/* R163 — drag & drop reordering (sections, questions, line items, criteria, ordered questionnaire picker) */
.drag-handle { flex: 0 0 auto; cursor: grab; color: var(--text-muted); user-select: none; padding: 2px 3px; font-size: 13px; line-height: 1.4; border-radius: var(--radius-sm); }
.drag-handle:hover { background: var(--bg-subtle); color: var(--text); }
.drag-handle:active { cursor: grabbing; }
.q-build-row { display: flex; gap: 8px; align-items: flex-start; }
.q-build-row > .q-build-main { flex: 1; min-width: 0; }
.q-build-row > .q-build-prompt { flex: 1; min-width: 0; }
.q-build-sechead > .q-sec-input { flex: 1; min-width: 0; }
.q-build-row.dragging, .q-build-sec.dragging, .opick-item.dragging { opacity: .45; }
.q-build-row.drag-over, .q-build-sec.drag-over, .opick-item.drag-over { outline: 2px dashed var(--brand-orange); outline-offset: -1px; }
/* Ordered multi-select picker (questionnaires on an event) */
.opick { display: block; }
.opick-add { position: relative; }
.opick-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.opick-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.opick-num { flex: 0 0 auto; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-subtle); border-radius: 999px; }
.opick-label { flex: 1; min-width: 0; word-break: break-word; font-size: 13px; }
.opick-x { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 16px; line-height: 1; padding: 0 4px; }
.opick-x:hover { color: var(--bad); }

/* GRC/warehouse fix (r137) — storage-location table inputs (.tinp) and Lookup value inputs
   (.lk-row input) follow the standard field box (border, padding, height) instead of raw browser inputs. */
.tinp, .lk-row input {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.tinp:focus, .lk-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* r138 — Field-settings sub-tabs (Field / Security) */
.fb-subtabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.fb-subtab { background: none; border: none; padding: 8px 14px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fb-subtab.active { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }

/* r270 — Visibility tab split into two labelled sections with a divider line between them */
.cf-vis-sec { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 2px; }
.cf-vis-sec + .field, .cf-vis-sec + * { margin-top: 0; }
.cf-vis-divider { height: 0; border-top: 1px solid var(--line); margin: 10px 0 4px; }

/* r139 — bank-account Currency rendered as a searchable combo: fit the grid cell */
.bank-row .combo { width: 100%; min-width: 0; }

/* PR catalog-locked line fields (#6): fields fixed by the catalog item render read-only with a lock */
.pr-locked-cell { display: flex; align-items: center; gap: 4px; color: var(--text); background: var(--bg-subtle); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; }
.pr-locked-cell .pr-lock { font-size: 11px; opacity: .6; margin-left: auto; }

/* ===== Process designer: action palette + node icons; Actions catalog (r211) ===== */
/* The step library shares the canvas row; cap it at the canvas height (.pd-canvas-full) so the
   grid stretches it to the same bottom edge as the canvas (scrolls internally if its content is
   taller). Previously capped at 46vh while the canvas is 64vh, so the library stopped short. */
.pd-palette { overflow-y: auto; min-height: 0; max-height: max(64vh, 360px); }
.pd-pal-group { margin-bottom: 2px; }
.pd-pal-grouphead { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; margin: 8px 2px 4px; }
.pd-pal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pd-pal-btn { flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 9px 6px; width: auto; font-size: 11px; line-height: 1.15; }
.pd-pal-ico { width: auto; display: inline-flex; }
.pd-pal-ico svg { width: 18px; height: 18px; }
.pd-pal-lbl { display: block; }
.pd-node-ico { display: inline-flex; vertical-align: middle; }
.pd-node-ico svg { width: 15px; height: 15px; }
.pd-def-kind svg { width: 15px; height: 15px; vertical-align: middle; margin-right: 3px; }
.pd-action-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; }
.pd-split-field { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font-ui); margin-top: 4px; }

/* ===== Process designer: 4-column inspector + zoned field structure (r212) ===== */
.pd-zone { margin-bottom: 8px; }
.pd-zone-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text); margin: 2px 0 5px; }
.pd-zone-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 10px; }
.pd-zone-sub { margin: 6px 0 0 8px; padding-left: 8px; border-left: 2px solid var(--line); }
.pd-zone-subhead { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 2px 0 4px; }
@media (max-width: 1180px) { .pd-grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .pd-col-node { border-right: none; padding-right: 0; } }
@media (max-width: 680px) { .pd-grid4 { grid-template-columns: 1fr; } }

/* ===== Process designer: drag-and-drop field mapping (r213) ===== */
.pd-io-row { display: flex; align-items: center; gap: 6px; }
.pd-io-draggable { cursor: grab; }
.pd-io-draggable:active { cursor: grabbing; }
.pd-io-over { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--bg-subtle); }
.pd-io-map { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; font-size: 10px; color: var(--primary); background: var(--bg-subtle); border: 1px solid var(--line); border-radius: 999px; padding: 1px 3px 1px 7px; white-space: nowrap; max-width: 62%; overflow: hidden; }
.pd-map-x { font-size: 12px; line-height: 1; padding: 0 1px; color: var(--text-muted); }

/* Field-level security (CF designer "Security" tab): a field the signed-in user is not permitted to
   edit is shown but locked. The `inert` attribute disables interaction/focus in modern browsers;
   these rules provide the visual treatment and a pointer-events fallback for older engines. */
.cf-field.cf-locked { opacity: .72; }
.cf-field.cf-locked > input, .cf-field.cf-locked > select, .cf-field.cf-locked > textarea,
.cf-field.cf-locked .combo-control, .cf-field.cf-locked .mcombo-control, .cf-field.cf-locked .cf-choice,
.cf-field.cf-locked .rt-wrap, .cf-field.cf-locked .cf-att { pointer-events: none; background: var(--bg-subtle); cursor: not-allowed; }
.cf-lock-badge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }

/* Multi-condition "Visible if" editor (CF designer ▸ Visibility tab) */
.vis-cond { display: flex; flex-direction: column; gap: 8px; }
.vis-cond-match { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vis-cond-match select { width: auto; }
.vis-cond-rows { display: flex; flex-direction: column; gap: 8px; }
.vis-cond-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vis-cond-row .vc-field { flex: 1 1 170px; min-width: 150px; }
.vis-cond-row .vc-op { flex: 0 0 auto; width: auto; }
.vis-cond-row .vc-src { flex: 0 0 auto; width: auto; }
.vis-cond-row .vc-val { flex: 1 1 160px; min-width: 140px; }
.vis-cond-row .vc-del { flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg-subtle); border-radius: 6px; cursor: pointer; color: var(--text-muted); width: 30px; height: 30px; line-height: 1; font-size: 16px; }
.vis-cond-row .vc-del:hover { color: var(--bad); border-color: var(--bad); }
.vis-cond-add { align-self: flex-start; }

/* ============================================================
   Process Designer — DataStage-inspired look & feel (r243)
   Neutral graph-paper canvas, icon-headed "stage" boxes, steel-
   blue directional links, and a categorised stage palette.
   Scoped to .pd-wrap (covers docked + pop-out) so the rest of
   the app keeps the NuWayMind brand.
   ============================================================ */
.pd-wrap {
    --ds-blue: #336699;
    --ds-blue-dark: #244a6b;
    --ds-canvas: #eef1f5;
    --ds-canvas-edge: #c4cdd8;
    --ds-grid: #d7dde6;
    --ds-stage-bg: #fbfcfd;
    --ds-stage-border: #9aa9bb;
    --ds-stage-bevel: #ffffff;
    --ds-chrome-top: #f3f5f8;
    --ds-chrome-bot: #e2e7ee;
    --ds-chrome-border: #b9c2cf;
}

/* Toolbar + metadata strip: a flat, light "application" chrome */
.pd-wrap .pd-bar {
    background: linear-gradient(180deg, var(--ds-chrome-top), var(--ds-chrome-bot));
    border-color: var(--ds-chrome-border);
    border-radius: 4px 4px 0 0;
}
.pd-wrap .pd-bar-name { color: var(--ds-blue-dark); letter-spacing: .01em; }
.pd-wrap .pd-meta { background: var(--ds-chrome-top); border-color: var(--ds-chrome-border); }

/* Palette: a "stage repository" tool panel */
.pd-wrap .pd-body { border-color: var(--ds-chrome-border); }
.pd-wrap .pd-palette {
    background: linear-gradient(180deg, #eef1f5, #e6eaf0);
    border-right-color: var(--ds-chrome-border);
}
.pd-wrap .pd-pal-grouphead {
    color: var(--ds-blue-dark);
    border-bottom: 1px solid var(--ds-grid);
    padding-bottom: 3px;
}
.pd-wrap .pd-pal-btn {
    border-color: var(--ds-stage-border);
    border-radius: 3px;
    background: var(--ds-stage-bg);
    box-shadow: inset 0 1px 0 var(--ds-stage-bevel);
}
.pd-wrap .pd-pal-btn:hover { border-color: var(--ds-blue); background: #fff; }
.pd-wrap .pd-pal-ico { color: var(--ds-blue); }

/* Canvas: light grey graph-paper inside an inset frame */
.pd-wrap .pd-canvas {
    background-color: var(--ds-canvas);
    background-image:
        linear-gradient(var(--ds-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ds-grid) 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow: inset 0 0 0 1px var(--ds-canvas-edge), inset 2px 2px 6px rgba(36,74,107,.06);
}

/* Stages: icon-headed boxes with a subtle raised bevel */
.pd-wrap .pd-node {
    --ds-accent: var(--ds-blue);
    background: var(--ds-stage-bg);
    border: 1px solid var(--ds-stage-border);
    border-left-width: 1px;
    border-top: 2px solid var(--ds-accent);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 var(--ds-stage-bevel), 0 2px 5px rgba(36,74,107,.16);
}
.pd-wrap .pd-node.selected {
    border-color: var(--ds-blue);
    box-shadow: 0 0 0 2px rgba(51,102,153,.35), 0 2px 6px rgba(36,74,107,.22);
}
.pd-wrap .pd-node.connecting { outline-color: var(--ds-blue); }
.pd-wrap .pd-node-head { padding: 7px 8px 5px; gap: 7px; }
.pd-wrap .pd-node-ico {
    flex: 0 0 auto; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-accent); color: #fff; border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.pd-wrap .pd-node-ico svg { width: 14px; height: 14px; }
.pd-wrap .pd-node-title { color: #20303f; font-weight: 700; }
.pd-wrap .pd-node-sub { color: #5d6b7a; }

/* per-stage accent colours (icon badge + top bar) */
.pd-wrap .pd-node-START { --ds-accent: #2e9e5b; }
.pd-wrap .pd-node-END { --ds-accent: #c0392b; }
.pd-wrap .pd-node-DECISION { --ds-accent: #c0891b; }
.pd-wrap .pd-node-DOCUMENT,
.pd-wrap .pd-node-CREATE_DOC,
.pd-wrap .pd-node-UPDATE_DOC,
.pd-wrap .pd-node-SUBMIT_DOC,
.pd-wrap .pd-node-DOC_SUBMISSION { --ds-accent: #2f6db5; }
.pd-wrap .pd-node-ACTION,
.pd-wrap .pd-node-APPROVE_DOC,
.pd-wrap .pd-node-REJECT_DOC { --ds-accent: #3a7d3a; }
.pd-wrap .pd-node-CONTROL { --ds-accent: #7c4fae; }
.pd-wrap .pd-node-TRANSFORM,
.pd-wrap .pd-node-SPLITTER,
.pd-wrap .pd-node-GROUPPER { --ds-accent: #178a8a; }
.pd-wrap .pd-node-ESOURCING_CREATE,
.pd-wrap .pd-node-ESOURCING_PUBLISH,
.pd-wrap .pd-node-ESOURCING_ASSESS,
.pd-wrap .pd-node-ASSESS_QUESTIONNAIRE { --ds-accent: #8a5cc0; }
.pd-wrap .pd-node-SEND_EMAIL,
.pd-wrap .pd-node-RECEIVE_EMAIL,
.pd-wrap .pd-node-DO_REST,
.pd-wrap .pd-node-RECEIVE_REST,
.pd-wrap .pd-node-INTEGRATION,
.pd-wrap .pd-node-AI_AGENT { --ds-accent: #336699; }

/* Ports + links: connectors and steel-blue directional flow */
.pd-wrap .pd-port { border-color: var(--ds-stage-border); background: #fff; }
.pd-wrap .pd-port-out { color: var(--ds-blue); }
.pd-wrap .pd-port-in:hover,
.pd-wrap .pd-port-out:hover { border-color: var(--ds-blue); color: var(--ds-blue); }
.pd-wrap .pd-edge { stroke: var(--ds-blue); stroke-width: 2; }
.pd-wrap .pd-edge-temp { stroke: var(--ds-blue); }
.pd-wrap .pd-edges marker path { fill: var(--ds-blue); }

/* Inspector splitter grip picks up the steel-blue on hover */
.pd-wrap .pd-splitter:hover .pd-splitter-grip { background: var(--ds-blue); }

/* ============================================================
   Process Designer r2 — icon-with-name-below "stage" nodes,
   per-type output-only entry nodes, and deletable links.
   Builds on the DataStage-inspired theme above; scoped to .pd-wrap.
   ============================================================ */
.pd-wrap .pd-node {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 9px 8px; min-height: 64px; text-align: center; cursor: move;
}
.pd-wrap .pd-node-ico { width: 28px; height: 28px; border-radius: 6px; }
.pd-wrap .pd-node-ico svg { width: 17px; height: 17px; }
.pd-wrap .pd-node-name {
    font-size: 12px; font-weight: 700; color: #20303f; line-height: 1.2; max-width: 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.pd-wrap .pd-node-del {
    position: absolute; top: 2px; right: 3px; border: none; background: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity .12s ease;
}
.pd-wrap .pd-node:hover .pd-node-del { opacity: 1; }
.pd-wrap .pd-node-del:hover { color: #c0392b; }
/* connector dots sit on the node's vertical middle (PORT_Y = 32, dot = 13px) */
.pd-wrap .pd-port { top: 25px; }
/* small delete button at each link's midpoint */
.pd-wrap .pd-edge-del {
    position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--ds-stage-border); background: #fff; color: #7c8aa0; font-size: 13px; line-height: 1;
    cursor: pointer; padding: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
    opacity: .5; transition: opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.pd-wrap .pd-edge-del:hover { opacity: 1; color: #fff; background: var(--ds-blue); border-color: var(--ds-blue); }
/* keep every designer field on the standard field size (13px), including the new email-connection inputs */
.pd-wrap .pd-define input:not([type="checkbox"]), .pd-wrap .pd-define select, .pd-wrap .pd-define textarea,
.pd-wrap .pd-define .combo-control, .pd-wrap .pd-define .mcombo-control { font-size: 13px; }
.pd-wrap .pd-json { font-family: var(--font-mono); font-size: 11.5px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 6px; max-height: 220px; overflow: auto; white-space: pre-wrap; }

/* ============================================================
   Process Designer r3 — icon in a borderless white 64px square
   (name below), standard-sized inspector fields, single-line name.
   Scoped to .pd-wrap; overrides the box styling above.
   ============================================================ */
.pd-wrap .pd-node {
    background: transparent; border: none; box-shadow: none; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    overflow: visible; cursor: move;
}
.pd-wrap .pd-node.selected { box-shadow: none; }
.pd-wrap .pd-node.selected .pd-node-box { box-shadow: 0 0 0 2px var(--ds-blue), 0 2px 7px rgba(36,74,107,.20); }
.pd-wrap .pd-node.connecting .pd-node-box { box-shadow: 0 0 0 2px var(--ds-blue); }
.pd-wrap .pd-node-box {
    width: 64px; height: 64px; flex: 0 0 auto; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: none; border-radius: 12px;
    box-shadow: 0 1px 4px rgba(36,74,107,.20);
}
.pd-wrap .pd-node-ico {
    width: auto; height: auto; background: transparent; border-radius: 0;
    color: var(--ds-accent, var(--ds-blue));
    display: flex; align-items: center; justify-content: center;
}
.pd-wrap .pd-node-ico svg { width: 34px; height: 34px; }
.pd-wrap .pd-node-name {
    font-size: 12px; font-weight: 600; color: #20303f; line-height: 1.2; text-align: center;
    max-width: 130px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.pd-wrap .pd-node-del {
    top: -7px; right: -7px; background: #fff; color: var(--text-muted); border-radius: 50%;
    width: 18px; height: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.22);
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.pd-wrap .pd-node:hover .pd-node-del { opacity: 1; }
.pd-wrap .pd-node-del:hover { color: #c0392b; }
/* connector dots centred on the square's vertical middle (PORT_Y = 32) */
.pd-wrap .pd-port { top: 25px; }
/* standard field box + size for the inspector's column-level fields
   (name, description, correlation key / SLA, and the email-connection inputs) */
.pd-wrap .pd-def-col > input:not([type="checkbox"]),
.pd-wrap .pd-def-col > textarea,
.pd-wrap .pd-def-col > select { box-sizing: border-box; width: 100%; padding: 9px 11px; font-size: 13px; }
.pd-wrap .pd-def-desc { resize: vertical; min-height: 38px; line-height: 1.35; font-family: var(--font-ui); }

/* ===== R247 (§106) ===== */
/* 6px lead before each field line in all document forms (box-sizing keeps cf-field calc widths valid) */
.field, .cf-field { box-sizing: border-box; padding-left: 6px; }

/* Purchase Requisition: Simple -> Expert switch moved into the button footer, at half width */
.modal-foot.foot-with-switch { align-items: center; flex-wrap: wrap; }
.modal-foot.foot-with-switch .alloc-switch { flex: 1 1 50%; max-width: 50%; margin: 0 auto 0 0; }

/* Transform node: 2-column output mapping (connect-from-input | output name) */
.pd-tf-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted, #6b7280); }
.pd-tf-h1 { flex: 1 1 50%; min-width: 0; }
.pd-tf-h2 { flex: 1 1 50%; min-width: 0; }
.pd-tf-list { display: flex; flex-direction: column; gap: 6px; }
.pd-tf-row { display: flex; align-items: center; gap: 8px; }
.pd-tf-from { flex: 1 1 50%; min-width: 0; }
.pd-tf-from > * { width: 100%; }
.pd-tf-arrow { flex: 0 0 auto; color: var(--ds-blue, #2563eb); font-weight: 700; }
.pd-tf-to { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; gap: 6px; }
.pd-tf-to .pd-assign-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* mail Test Connection result (Receive Email + Send Email) */
.pd-mt { margin-top: 6px; font-size: 12px; font-weight: 600; }
.pd-mt-ok { color: #1d7a4d; }
.pd-mt-err { color: #c0392b; }
.pd-mt-steps { margin: 6px 0 0; padding-left: 16px; font-size: 12px; font-weight: 400; list-style: disc; }
.pd-mt-steps li { margin: 2px 0; }

/* ---- Action templates (Setup ▸ Workflows ▸ Action templates list + designer Step library) ---- */
.act-tpl-base { display: inline-flex; align-items: center; gap: 8px; }
.act-tpl-base svg { width: 16px; height: 16px; color: var(--primary); flex: 0 0 auto; }

/* Template buttons in the Step library — a subtle accent so they read as ready-made building blocks */
.pd-pal-tpl { border-style: dashed; }
.pd-wrap .pd-pal-tpl { border-left: 3px solid var(--ds-blue, var(--primary)); }

/* Problems panel — an always-visible validation summary under the meta bar (dev-environment surface) */
.pd-problems { border: 1px solid var(--line); border-top: 0; background: var(--bg-card); }
.pd-problems.has { background: var(--bad-bg); border-color: var(--bad); }
.pd-problems-toggle { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 14px; background: transparent; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text); }
.pd-problems.clean .pd-problems-toggle { cursor: default; color: var(--ok); }
.pd-prob-badge { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 11px; font-weight: 700; background: var(--bad); color: #fff; }
.pd-problems.clean .pd-prob-badge { background: var(--ok); }
.pd-prob-title { flex: 1 1 auto; }
.pd-prob-caret { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; }
.pd-prob-list { margin: 0; padding: 0 14px 10px 38px; list-style: disc; }
.pd-prob-item { margin: 3px 0; font-size: 12px; color: var(--bad); }

/* Must-acknowledge error dialog (validation on activate, import, save failures) */
.pd-ack { display: flex; gap: 12px; align-items: flex-start; }
.pd-ack-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--bad); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.pd-ack-body { flex: 1 1 auto; min-width: 0; }
.pd-ack-body > p { margin: 0 0 8px; }
.pd-ack-list { margin: 0; padding-left: 18px; list-style: disc; }
.pd-ack-list li { margin: 4px 0; }
.pd-ack-hint { margin-top: 10px !important; color: var(--text-muted); font-size: 13px; }

/* A modal opened over the pop-out designer must clear the pop-out overlay (z-index 1000). Scoped via
   :has() so the normal stacking (modal at z-index 50) is unchanged when the designer is docked in page. */
body:has(.pd-overlay) .modal-overlay { z-index: 1100; }

/* Transform output source: a kind selector (input / constant / formula) stacked above its value control */
.pd-tf-srcwrap { display: flex; flex-direction: column; gap: 4px; }
.pd-tf-srcwrap > * { width: 100%; }
.pd-tf-inp { font-family: var(--font-ui); }

/* Inline help "?" with a hover/focus tooltip — used on the Simple → Expert view switch (PR & PO) */
.help-tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--line-strong, #c9ced6); background: var(--bg-subtle, #f3f4f6); color: var(--text-muted, #6b7280); font-size: 10px; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; position: relative; user-select: none; }
.help-tip:hover, .help-tip:focus { background: var(--primary, #2f6f4e); border-color: var(--primary, #2f6f4e); color: #fff; outline: none; }
.help-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 260px; max-width: 70vw; white-space: normal; background: #1f2430; color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.4; text-align: left; padding: 8px 10px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 1200; pointer-events: none; }
.help-tip::before { content: ""; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #1f2430; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 1200; }
.help-tip:hover::after, .help-tip:focus::after, .help-tip:hover::before, .help-tip:focus::before { opacity: 1; visibility: visible; }

/* Inline rename input on a canvas node (double-click the node name) */
.pd-wrap .pd-node-rename {
    font-size: 12px; font-weight: 600; color: #20303f; line-height: 1.2; text-align: center;
    width: 130px; max-width: 130px; border: 1px solid var(--primary); border-radius: 4px;
    background: #fff; padding: 2px 4px; outline: none; box-shadow: 0 0 0 2px var(--primary-soft);
}
.pd-wrap .pd-node-name { cursor: text; }

/* §114 Process Designer — design-time data tester */
.pd-tester { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.pd-tester-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pd-tester-head .pd-tester-h { font-weight: 600; font-size: 13px; }
.pd-tester-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 720px) { .pd-tester-grid { grid-template-columns: 1fr; } }
.pd-tester-col textarea { resize: vertical; }
.pd-tester-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pd-test-out { min-height: 120px; margin-top: 4px; }

/* §116 Process Designer — golden-rule structure push buttons */
.pd-push-row { margin: 2px 0 8px; }
.pd-push-row .btn { width: 100%; justify-content: center; font-size: 11.5px; }

/* §117 AI agent test result panel */
.ag-test-result { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.ag-test-head { font-weight: 600; font-size: 13px; }
.ag-test-head.ok { color: var(--ok, #1a7f37); }
.ag-test-head.err { color: var(--danger, #b42318); }
.ag-test-json { font-family: var(--font-mono); font-size: 12px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 6px; max-height: 320px; overflow: auto; white-space: pre-wrap; }

/* §120 Purchase Requisition — line-type indicator + open-line-item modal */
.line-row .line-type-ico { display: flex; align-items: center; justify-content: center; color: var(--text-muted); align-self: end; height: 36px; }
.line-row .line-type-ico svg { width: 17px; height: 17px; }
.line-row .line-open {
    border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--text-muted);
    border-radius: var(--radius-sm); height: 36px; min-width: 30px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.line-row .line-open svg { width: 16px; height: 16px; }
.line-row .line-open:hover { background: var(--bg-subtle); color: var(--text); border-color: var(--brand); }

.li-modal-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; }
.li-modal-overlay.li-modal-center { align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); padding: 24px; }
.li-modal-overlay.li-modal-dock { justify-content: flex-end; background: transparent; pointer-events: none; }
.li-modal-overlay.li-modal-dock .li-modal-panel { pointer-events: auto; height: 100vh; max-height: 100vh; border-radius: 0; width: min(540px, 94vw); box-shadow: -14px 0 40px rgba(15, 23, 42, 0.18); }
.li-modal-panel { background: var(--bg-card); border-radius: var(--radius); box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32); width: min(760px, 94vw); max-height: 92vh; display: flex; flex-direction: column; }
.li-modal-head { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.li-modal-head h3 { margin: 0; font-size: 15px; }
.li-modal-nav { background: none; border: 1px solid var(--line); cursor: pointer; color: var(--text-muted); padding: 3px; border-radius: var(--radius-sm); display: inline-flex; }
.li-modal-nav:hover { background: var(--bg-subtle); color: var(--text); }
.li-modal-nav[hidden] { display: none; }
.li-modal-nav svg { width: 16px; height: 16px; }
.li-modal-x { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: var(--radius-sm); display: inline-flex; margin-left: auto; }
.li-modal-x:hover { background: var(--bg-subtle); color: var(--text); }
.li-modal-x svg { width: 18px; height: 18px; }
.li-modal-body { padding: 16px 18px; overflow: auto; }
.li-modal-grid { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; }
.li-mf { flex: 0 1 100%; }
.li-mf.narrow { flex: 0 1 calc(50% - 7px); }
.li-modal-grid .li-mf .field { width: 100%; flex: 1 1 auto; }
.li-modal-total { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); text-align: right; font-size: 13px; color: var(--text-muted); }
.li-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }

/* §123 Process Designer — Transform lookup (dotted side-channel) */
.pd-wrap .pd-edge-lookup { stroke: #7c5cff; stroke-dasharray: 5 4; }
.pd-wrap .pd-edges #pd-arrow-lk circle { fill: #7c5cff; }
.pd-lk-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.pd-lk-node { flex: 0 0 auto; font-weight: 600; font-size: 12px; color: #6b4eff; white-space: nowrap; max-width: 38%; overflow: hidden; text-overflow: ellipsis; }
.pd-lk-cfg { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pd-lk-cfg select, .pd-lk-cfg input { flex: 1 1 0; min-width: 0; }

/* §124 Process Designer — node editor (double-click) with General/Configuration/Input/Output tabs */
.pd-canvas-full { height: 64vh; min-height: 360px; }
.pd-editor-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1090; }
.pd-editor { background: var(--bg-card); display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.pd-editor-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(920px, 94vw); height: 70vh; border-radius: var(--radius, 12px); z-index: 1100; overflow: hidden; }
/* Transform node: double-width, centred pop-up to fit the three-column Transform tab */
.pd-editor-popup.pd-editor-wide { width: min(1320px, 96vw); }
/* Transform tab: Input + Lookup on the left, a vertical divider, Output on the right */
.pd-tf-cols { display: flex; align-items: stretch; gap: 0; }
.pd-tf-cols .pd-tf-side { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pd-tf-cols .pd-tf-side-left { padding-right: 22px; border-right: 2px solid var(--line); }
.pd-tf-cols .pd-tf-side-right { padding-left: 22px; }
.pd-tf-zone-title { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.pd-tf-zone-title .pd-def-hint { margin-left: auto; }
.pd-tf-fields { display: flex; flex-direction: column; gap: 8px; }
.pd-tf-field { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.pd-tf-fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-tf-badge { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 1px 6px; background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--line); }
.pd-tf-badge.pd-tf-badge-lk { background: rgba(107,78,255,.12); color: #6b4eff; border-color: rgba(107,78,255,.3); }
/* Stage 2 — lookup connection ports: top + bottom, brand-coloured, on a Transform and lookup-capable steps */
.pd-port-lk { border-color: var(--brand); color: var(--brand); cursor: crosshair; }
.pd-port-lk:hover { background: var(--brand); border-color: var(--brand); }
.pd-wrap .pd-port-lk { border-color: var(--brand); background: #fff; }
.pd-wrap .pd-port-lk:hover { background: var(--brand); }
.pd-wrap .pd-port-lk-top, .pd-port-lk-top { top: -7px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.pd-wrap .pd-port-lk-bottom, .pd-port-lk-bottom { top: auto; bottom: -7px; left: 50%; right: auto; transform: translateX(-50%); }
.pd-node.lk-connecting .pd-node-box { box-shadow: 0 0 0 2px var(--brand); }
.pd-edge-del-lk { border-color: var(--brand); color: var(--brand); }
/* Transform tab: two columns (LEFT = input on top, lookups below; RIGHT = output) joined by connector lines */
.pd-tf-wire { position: relative; height: 56vh; min-height: 260px; }
.pd-tf-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: hidden; }
.pd-tf-line { stroke: var(--primary); stroke-width: 2; opacity: .9; }
.pd-tf-line-key { stroke: #6b4eff; stroke-dasharray: 4 4; stroke-width: 1.6; opacity: .8; }
.pd-tf-2col { display: flex; gap: 38px; height: 100%; }
.pd-tf-lcol, .pd-tf-rcol { flex: 1 1 0; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 2px 4px 8px; }
.pd-tf-lcol { padding-left: 48px; padding-right: 48px; }   /* 48px breathing room on both sides */
.pd-tf-rcol { padding-left: 48px; padding-right: 48px; }   /* 48px breathing room on both sides */
.pd-tf-sec-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 4px 0; position: sticky; top: 0; background: var(--bg-card); z-index: 2; }
.pd-tf-sec-div { margin-top: 14px; border-top: 1px solid var(--line); }
.pd-tf-chips, .pd-tf-lkgs, .pd-tf-out-rows { display: flex; flex-direction: column; }
.pd-tf-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); cursor: grab; margin-bottom: 10px; }
.pd-tf-chip:hover { border-color: var(--line-strong); }
.pd-tf-chip:active { cursor: grabbing; }
.pd-tf-chip.pd-tf-dragging { opacity: .45; }
.pd-tf-chip .pd-tf-fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-tf-chip-lk { border-color: rgba(107,78,255,.3); }
.pd-tf-chip-key { cursor: default; background: var(--bg-subtle); margin-bottom: 0; width: 100%; }
.pd-tf-chip-key:active { cursor: default; }
.pd-tf-lkg { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; margin-bottom: 10px; background: var(--bg-subtle); }
.pd-tf-lkg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.pd-tf-lkg-name { font-weight: 600; font-size: 12px; color: #6b4eff; white-space: nowrap; }
.pd-tf-lkg-key { flex: 1 1 auto; min-width: 0; }
.pd-tf-lkg-head .pd-x { flex: 0 0 auto; }
.pd-tf-lkg-rets { display: flex; flex-direction: column; gap: 6px; }
.pd-tf-lkg-rets .pd-tf-chip { margin-bottom: 0; padding: 6px 8px; }
.pd-tf-drop { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; min-height: 32px; display: flex; align-items: center; }
.pd-tf-drop-hint { font-size: 10.5px; color: var(--text-muted); font-style: italic; }
.pd-tf-out-row { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--bg-card); overflow: hidden; }
.pd-tf-out-row.is-mapped { border-color: var(--primary); }
.pd-tf-out-conn { flex: 1 1 50%; min-width: 0; border-right: 1px solid var(--line); border-radius: 0; min-height: 40px; }
.pd-tf-out-conn.pd-tf-drop { border-top: 0; border-bottom: 0; border-left: 0; }
.pd-tf-out-conn .pd-tf-inp, .pd-tf-out-conn .combo, .pd-tf-out-conn select { width: 100%; }
.pd-tf-out-field { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 9px; background: var(--bg-subtle); }
.pd-tf-out-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-tf-out-rm { flex: 0 0 auto; }
.pd-tf-mapped { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12px; background: rgba(245,130,31,.10); border-radius: var(--radius-sm); padding: 5px 8px; }
.pd-tf-mapped .pd-tf-fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-tf-mapped .pd-x { flex: 0 0 auto; }
.pd-tf-dragover { outline: 2px dashed var(--brand); outline-offset: -2px; background: rgba(107,78,255,.07); }
.pd-tf-drop.pd-tf-dragover { border-color: var(--brand); }
/* Data-lookup node: data-source field preview (Configuration) + read-only Output list */
.pd-ds-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pd-ds-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-subtle); }
.pd-ds-cn { font-weight: 600; }
.pd-ds-ck { font-size: 10.5px; color: var(--text-muted); font-family: var(--mono, ui-monospace, monospace); }
.pd-ds-outlist { display: flex; flex-direction: column; gap: 8px; }
.pd-ds-outrow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.pd-ds-on { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ds-ok { font-size: 11px; color: var(--text-muted); font-family: var(--mono, ui-monospace, monospace); }
.pd-ds-ot { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
/* Transform: lookup group split (Key | Returns), propagate-to-output buttons, and the New-field drop zone */
.pd-tf-sec-title { display: flex; align-items: center; }
.pd-tf-sec-title .pd-tf-prop { margin-left: auto; }
.pd-tf-prop { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-card); color: var(--primary); cursor: pointer; }
.pd-tf-prop:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pd-tf-prop svg { width: 13px; height: 13px; }

/* Compact icon toolbar (propagate + field-structure library) on Input/Output editors and Transform columns */
.pd-field-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pd-field-tools .btn { width: auto; flex: 0 0 auto; padding: 4px 7px; min-width: 0; }
.pd-field-tools .pd-prop-btn svg { width: 14px; height: 14px; display: block; }
.pd-tf-sec-title .pd-field-tools { margin: 0; }
.pd-tf-sec-title .pd-field-tools .btn { padding: 3px 5px; }
/* Field-structure library picker (load-from-library modal) */
.pd-lib-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.pd-lib-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; background: var(--bg-card); }
.pd-lib-row:hover { border-color: var(--primary); background: var(--bg-soft, #f6f8fa); }
.pd-lib-name { font-weight: 600; flex: 1 1 auto; }
.pd-lib-cnt { color: var(--muted, #6b7280); font-size: 12px; flex: 0 0 auto; }
.pd-lib-row .pd-x { flex: 0 0 auto; }
.pd-tf-lkg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-tf-lkg-head .pd-x { margin-left: 4px; }
.pd-tf-lkg-body { display: flex; gap: 8px; align-items: flex-start; }
.pd-tf-lkg-part { flex: 1 1 0; min-width: 0; }
.pd-tf-lkg-plabel { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
/* Transform: lookup returned fields rendered as split rows (like output fields); key on its own row */
.pd-tf-lkg-keyrow { margin-bottom: 8px; }
.pd-tf-lkg-key { width: 100%; }
.pd-tf-lkret { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--bg-card); overflow: hidden; }
.pd-tf-lkret:last-child { margin-bottom: 0; }
.pd-tf-lkret.is-key { border-color: #6b4eff; }
.pd-tf-lkret-out { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 9px; cursor: grab; }
.pd-tf-lkret-key { flex: 0 0 124px; min-width: 0; border-right: 1px solid var(--line); display: flex; align-items: center; padding: 4px 6px; }
.pd-tf-lkret-key.is-nonkey { justify-content: center; color: var(--text-muted); background: var(--bg-subtle); font-size: 12px; }
.pd-tf-lkret-key.pd-tf-drop { border-top: 0; border-bottom: 0; border-left: 0; border-radius: 0; background: var(--bg-subtle); min-height: 0; }
.pd-tf-lkret-key .pd-tf-chip { margin: 0; max-width: 100%; }
.pd-tf-keytag { flex: 0 0 auto; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b4eff; border: 1px solid rgba(107,78,255,.4); border-radius: 3px; padding: 0 4px; }
.pd-tf-lkret-head { display: flex; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 5px; }
.pd-tf-lkret-head-out { flex: 1 1 auto; padding-left: 9px; }
.pd-tf-lkret-head-key { flex: 0 0 124px; padding-left: 6px; }
.pd-tf-newfield { flex-direction: column; align-items: stretch; gap: 8px; border-style: dashed; padding: 10px; margin-top: 4px; }
.pd-tf-newfield-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.pd-tf-newfield .pd-io-add { margin: 0; }
.pd-tf-newfield.pd-tf-dragover { border-color: var(--brand); background: rgba(107,78,255,.08); }

.pd-editor-dock { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 96vw); border-left: 1px solid var(--line); z-index: 940; }
.pd-ed-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-subtle); }
.pd-ed-head .pd-def-kind { display: inline-flex; align-items: center; gap: 6px; }
.pd-ed-title { font-weight: 700; color: var(--text); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ed-close { font-size: 20px; line-height: 1; padding: 0 4px; }
.pd-tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); background: var(--bg-subtle); }
.pd-tab { border: 1px solid transparent; border-bottom: none; background: none; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer; border-radius: 8px 8px 0 0; }
.pd-tab:hover { color: var(--text); }
.pd-tab.active { background: var(--bg-card); color: var(--text); border-color: var(--line); position: relative; top: 1px; box-shadow: inset 0 2px 0 var(--brand-orange); }
.pd-ed-body { padding: 14px 16px; overflow: auto; flex: 1 1 auto; }
.pd-ed-type { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-subtle); }
.pd-ed-type svg { width: 18px; height: 18px; }
.pd-ed-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.pd-io-typechip { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--text-muted); background: rgba(0,0,0,.05); border-radius: 5px; padding: 1px 6px; margin: 0 6px; }
.pd-io-opt { font-size: 10.5px; color: var(--text-muted); opacity: .65; }
.pd-io-req { font-size: 10.5px; font-weight: 700; color: var(--brand-orange); }

/* §125 Node editor — standard-sized fields (match the rest of the app) and full-width searchable
   combos. Mirrors the inspector-field styling that was previously scoped to .pd-define / .pd-def-col,
   which no longer matched the rebuilt editor's .pd-editor / .pd-tabpanel containers. */
.pd-editor input:not([type="checkbox"]), .pd-editor select, .pd-editor textarea {
    font-family: var(--font-ui); font-size: 13px; color: var(--text);
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pd-editor input:focus, .pd-editor select:focus, .pd-editor textarea:focus,
.pd-editor .combo-control:focus-within {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
/* searchable dropdown combos take the full field width inside the editor */
.pd-editor .combo { width: 100%; min-width: 0; box-sizing: border-box; }
.pd-editor .combo-input { font-size: 13px; }
/* column-level fields (Name, Description, Configuration inputs, the doc/agent dropdowns) get the
   standard full width + height; fields inside flex rows (mapping / lookup) keep their own layout */
.pd-editor .pd-tabpanel > input:not([type="checkbox"]),
.pd-editor .pd-tabpanel > textarea,
.pd-editor .pd-tabpanel > select { box-sizing: border-box; width: 100%; padding: 9px 11px; font-size: 13px; }
.pd-editor .pd-tabpanel > .combo { width: 100%; }
.pd-editor .pd-def-name { padding: 9px 11px; }
.pd-editor textarea, .pd-editor .pd-def-desc { resize: vertical; min-height: 64px; line-height: 1.35; padding: 9px 11px; }

/* §126 Node editor — Input/Output field-structure editor (name · data type · required) and
   a consistent 12px vertical gap between field rows in the pop-up. */
.pd-editor .pd-def-label { margin-top: 30px !important; }
.pd-editor .pd-ed-body .pd-tabpanel > .pd-def-label:first-child { margin-top: 0 !important; }

.pd-struct { display: flex; flex-direction: column; gap: 12px; }
.pd-struct-head { display: flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; text-transform: uppercase; }
.pd-struct-list { display: flex; flex-direction: column; gap: 26px; }
.pd-struct-row, .pd-struct-addrow { display: flex; gap: 8px; align-items: center; }
.pd-struct-h-name, .pd-struct-name { flex: 1 1 auto; min-width: 0; }
.pd-struct-name { padding: 8px 10px; }
.pd-struct-h-type { flex: 0 0 140px; }
.pd-struct-row > .combo, .pd-struct-addrow > .combo { flex: 0 0 140px; min-width: 0; }
.pd-struct-h-req, .pd-struct-req { flex: 0 0 74px; }
.pd-struct-req { display: flex; align-items: center; }
.pd-struct-req .switch { flex: 0 0 auto; }
.pd-struct-h-x, .pd-struct-x { flex: 0 0 24px; text-align: center; }
.pd-struct-add { flex: 0 0 auto; }
.pd-struct-addrow { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 12px; }
/* Start node "starting fields" editor: name | type | constant value | remove */
.pd-sf .pd-struct-name, .pd-sf .pd-struct-h-name { flex: 1 1 0; }
.pd-sf-val { flex: 1 1 0; min-width: 0; padding: 8px 10px; }
.pd-sf-h-val { flex: 1 1 0; min-width: 0; }
/* §128 Output-tab action buttons (Push to post-processor / Show record structure) */
.pd-out-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ===================== r271 — customizable KPI dashboard (card library) ===================== */
.dh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.dh-head h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--text);}
.dh-head .dh-sub{color:var(--text-muted);font-size:13px;margin-top:4px;}
.dh-customize{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:13px;color:var(--text);background:var(--bg-card);border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer;}
.dh-customize:hover{background:var(--bg-subtle);}
.dh-customize svg{width:15px;height:15px;color:var(--text-muted);}
.dh-customize .dh-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--text);color:#fff;font-size:11px;font-weight:700;line-height:1;}

.dh-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:22px;}
.dh-stat{position:relative;background:#E9EEF5;border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;}
.dh-stat-label{color:var(--text-muted);font-size:14px;font-weight:500;}
.dh-stat-val{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:8px 0 6px;color:var(--text);font-variant-numeric:tabular-nums;}
.dh-stat-hint{font-size:14px;font-weight:600;}
.dh-stat-hint.pos{color:#15803D;} .dh-stat-hint.neg{color:#DC2626;} .dh-stat-hint.muted{color:#8A93A6;}

.dh-panel{background:var(--bg-card);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:22px;}
.dh-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.dh-panel-head h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--text);}
.dh-panel-head .dh-hint{color:#8A93A6;font-size:12px;}
.dh-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.dh-kpi{position:relative;background:#EEF2F7;border-radius:14px;padding:20px;display:flex;flex-direction:column;min-height:226px;}
.dh-kpi.crit{background:#FDEEE9;border:1px solid #F4D8CD;}
.dh-kpi-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.dh-dot{width:10px;height:10px;border-radius:50%;flex:none;}
.dh-cat{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--text);}
.dh-figure{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.dh-val{font-size:33px;font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--text);font-variant-numeric:tabular-nums;}
.dh-val .dh-unit{font-size:.58em;font-weight:800;}
.dh-trend{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:15px;padding-top:5px;white-space:nowrap;}
.dh-trend.pos{color:#15803D;} .dh-trend.neg{color:#DC2626;}
.dh-desc{color:var(--text-muted);font-size:15px;line-height:1.34;margin:12px 0 0;}
.dh-rule{height:1px;background:var(--line);margin:16px 0 0;}
.dh-kpi.crit .dh-rule{background:#F1D2C6;}
.dh-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;}
.dh-foot-text{color:var(--text-muted);font-size:13.5px;line-height:1.3;}
.dh-foot-status{font-weight:700;font-size:13.5px;text-align:right;white-space:nowrap;color:var(--text);}
.dh-foot-status.crit{color:#DC2626;}

.dh-rm{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:7px;border:none;background:rgba(15,23,42,.05);color:#8A93A6;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .12s,background .12s,color .12s;}
.dh-stat:hover .dh-rm,.dh-kpi:hover .dh-rm,.dh-stat:focus-within .dh-rm,.dh-kpi:focus-within .dh-rm{opacity:1;}
.dh-rm:hover{background:rgba(220,38,38,.12);color:#DC2626;}
.dh-rm svg{width:12px;height:12px;}
.dh-empty{grid-column:1/-1;border:1.5px dashed var(--line);border-radius:14px;padding:30px;text-align:center;color:var(--text-muted);font-size:14px;}
.dh-empty button{margin-top:12px;}

.dh-lib-search{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;margin-bottom:6px;background:var(--bg-subtle);color:var(--text);}
.dh-lib-group{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A93A6;padding:14px 4px 6px;}
.dh-lib-row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:9px;}
.dh-lib-row:hover{background:var(--bg-subtle);}
.dh-lib-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.dh-lib-meta{flex:1;min-width:0;}
.dh-lib-name{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dh-lib-sub{font-size:12px;color:#8A93A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dh-lib-toggle{flex:none;font:inherit;font-weight:600;font-size:12.5px;border-radius:8px;padding:6px 12px;cursor:pointer;border:1px solid var(--line);background:var(--bg-card);color:var(--text);min-width:60px;}
.dh-lib-toggle:hover{background:var(--bg-subtle);}
.dh-lib-toggle.on{background:var(--text);border-color:var(--text);color:#fff;}
.dh-lib-toggle.on:hover{background:#DC2626;border-color:#DC2626;}
.dh-lib-none{color:var(--text-muted);font-size:14px;padding:20px 6px;}

/* Process designer — Test run (dry-run data-flow) panel + canvas status dots */
.pd-run-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1090; }
.pd-run { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(880px, 94vw); height: 76vh; background: var(--bg-card); border-radius: var(--radius, 12px); z-index: 1100; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.pd-run-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pd-run-title { font-size: 14px; color: var(--text); }
.pd-run-sub { font-size: 11.5px; color: var(--text-muted); }
.pd-run-body { padding: 14px 16px; overflow: auto; flex: 1 1 auto; }
.pd-run-summary { margin-bottom: 12px; }
.pd-run-sum { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--line); }
.pd-run-sum.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); }
.pd-run-sum.warn { color: var(--brand-orange); background: var(--bad-bg); border-color: var(--brand-orange); }
.pd-run-static { margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--bad); background: var(--bad-bg); border-radius: var(--radius-sm, 8px); }
.pd-run-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.pd-run-steps { display: flex; flex-direction: column; gap: 10px; }
.pd-run-step { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius-sm, 8px); padding: 10px 12px; cursor: pointer; background: var(--bg-card); }
.pd-run-step:hover { border-color: var(--brand); }
.pd-run-step.ok { border-left-color: var(--ok); }
.pd-run-step.warn { border-left-color: var(--brand-orange); }
.pd-run-step.skip { border-left-color: var(--text-muted); opacity: .85; }
.pd-run-head { display: flex; align-items: center; gap: 8px; }
.pd-run-ico { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.pd-run-ico svg { width: 15px; height: 15px; }
.pd-run-name { font-size: 13px; font-weight: 600; color: var(--text); }
.pd-run-kind { font-size: 11px; color: var(--text-muted); }
.pd-run-stat { margin-left: auto; font-size: 13px; font-weight: 700; }
.pd-run-stat.ok { color: var(--ok); }
.pd-run-stat.warn { color: var(--brand-orange); }
.pd-run-stat.skip { color: var(--text-muted); }
.pd-run-io { display: flex; align-items: stretch; gap: 10px; margin-top: 9px; }
.pd-run-col { flex: 1 1 0; min-width: 0; }
.pd-run-arrow { align-self: center; color: var(--text-muted); font-size: 15px; }
.pd-run-chip { display: inline-flex; align-items: center; gap: 5px; margin: 0 5px 5px 0; padding: 3px 7px; font-size: 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-subtle, var(--bg-card)); max-width: 100%; }
.pd-run-k { font-family: var(--font-mono); color: var(--brand); white-space: nowrap; }
.pd-run-v { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-run-empty { font-size: 11px; color: var(--text-muted); font-style: italic; }
.pd-run-more { font-size: 10.5px; color: var(--text-muted); }
.pd-run-probs { margin: 9px 0 0; padding-left: 20px; list-style: disc; font-size: 11.5px; color: var(--brand-orange); }
.pd-run-static .pd-run-probs { color: var(--bad); margin-top: 0; }
.pd-run-probs li { margin: 2px 0; }
.pd-run-none { font-size: 12.5px; color: var(--text-muted); padding: 18px 4px; }
.pd-node-status { position: absolute; top: -5px; left: -5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,.25); z-index: 3; }
.pd-node-status.ok { background: var(--ok); }
.pd-node-status.warn { background: var(--brand-orange); }
.pd-node-status.skip { background: var(--text-muted); }


/* Processes list: clickable process name + On/Off activation switch (added with the process On/Off + Transform tab fixes) */
.pd-name-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; text-align: left; }
.pd-name-link:hover { text-decoration: underline; }
.pd-switch { position: relative; width: 40px; height: 22px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-subtle); cursor: pointer; padding: 0; flex: 0 0 auto; transition: background .15s ease, border-color .15s ease; }
.pd-switch .pd-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: left .15s ease, background .15s ease; }
.pd-switch.on { background: rgba(22,163,74,.18); border-color: #16a34a; }
.pd-switch.on .pd-switch-knob { left: 20px; background: #16a34a; }
.pd-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Transform lookup: dedicated key-input row (shown when the provider declares no key field) */
.pd-tf-lkg-keyrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pd-tf-lkg-keylab { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.pd-tf-lkg-keyslot { flex: 1 1 auto; min-width: 0; }

/* Test-run: which branch a Decision takes, evaluated from the run's sample values */
.pd-dec { margin: 9px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); background: var(--bg-subtle); }
.pd-dec-head { font-size: 12px; font-weight: 600; color: var(--text); }
.pd-dec-note { font-weight: 400; color: var(--text-muted); font-size: 11px; }
.pd-dec-list { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-dec-branch { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.pd-dec-branch.is-chosen { font-weight: 600; }
.pd-dec-cond { font-family: var(--mono, ui-monospace, monospace); color: var(--text-muted); }
.pd-dec-branch.is-chosen .pd-dec-cond { color: var(--text); }
.pd-dec-arrow { color: var(--text-muted); }
.pd-dec-branch.is-chosen .pd-dec-arrow { color: var(--brand); }
.pd-dec-y, .pd-dec-n, .pd-dec-q { width: 14px; text-align: center; flex: 0 0 auto; }
.pd-dec-y { color: #16a34a; font-weight: 700; }
.pd-dec-n { color: var(--text-muted); }
.pd-dec-q { color: var(--brand-orange); font-weight: 700; }
.pd-dec-def { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; flex: 0 0 auto; }

/* §162 — onboarding questionnaire cards (supplier request form) */
.qn-card { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: var(--surface-2, #fafafa); }
.qn-card-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.qn-card-head .qn-name { flex: 1 1 auto; }
.qn-card-head .qn-reviewer { flex: 0 0 auto; max-width: 220px; }
.qn-card .qn-questions { width: 100%; resize: vertical; }

/* §163 — grouped questionnaires on the supplier-facing onboarding form */
.onb-qn-title { font-weight: 600; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border, #e5e7eb); }
.onb-qn-block { display: flex; flex-direction: column; gap: 10px; }

/* §164 — questionnaire review line in the supplier-request detail */
.qn-review-line { margin: 4px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qn-review-line .cell-sub { margin: 0; }

/* §165 — NDA presentation on the onboarding form + intake toggle */
.nda-box { max-height: 160px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface-2, #f9fafb); font-size: 13px; line-height: 1.5; color: var(--text-muted, #4b5563); margin-bottom: 10px; }
.nda-agree { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; font-size: 14px; cursor: pointer; }
.nda-agree input { margin-top: 3px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }

/* ---- Live process debugger (step-by-step run trace) ---- */
.pdbg-live { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#16a34a; }
.pdbg-live .dot { width:8px; height:8px; border-radius:50%; background:currentColor; animation:pdbgpulse 1.2s ease-in-out infinite; }
@keyframes pdbgpulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.25; transform:scale(.7);} }
.pdbg-wait-banner { background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.55); border-radius:8px; padding:9px 11px; margin-bottom:10px; font-size:13px; line-height:1.45; }
.pdbg-steps { position:relative; }
.pdbg-step { border:1px solid var(--border,#e5e7eb); border-radius:9px; padding:8px 10px; margin-bottom:8px; background:var(--surface,#fff); transition:border-color .2s, box-shadow .2s; }
.pdbg-step.is-current { border-color:rgba(245,158,11,.7); box-shadow:0 0 0 3px rgba(245,158,11,.14); }
.pdbg-step.is-failed { border-color:rgba(220,38,38,.6); box-shadow:0 0 0 3px rgba(220,38,38,.10); }
.pdbg-step-head { display:flex; align-items:center; gap:8px; cursor:pointer; }
.pdbg-step-num { width:22px; height:22px; border-radius:50%; background:var(--surface-2,#f1f3f5); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 auto; }
.pdbg-step.is-current .pdbg-step-num { background:#f59e0b; color:#fff; }
.pdbg-step.is-failed .pdbg-step-num { background:#dc2626; color:#fff; }
.pdbg-caret { margin-left:auto; color:var(--muted,#9ca3af); font-size:11px; transition:transform .15s; }
.pdbg-kv { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; background:var(--surface-2,#f7f7f8); border:1px solid var(--border,#eceef0); border-radius:6px; padding:6px 8px; }
.pdbg-kv .k { color:var(--muted,#6b7280); }
.pdbg-kv .add { color:#15803d; font-weight:600; }
.pdbg-kv .add .k { color:#15803d; }

/* ---- Engine activity log console ---- */
.alog-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.alog-ctl { font-size:12px; color:var(--muted,#6b7280); display:inline-flex; align-items:center; gap:5px; }
.alog-note { font-size:12px; line-height:1.45; margin-bottom:8px; }
.alog-host { height:52vh; min-height:280px; overflow:auto; background:#0b1020; border:1px solid #1f2937; border-radius:8px; padding:6px 8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.55; }
.alog-row { display:flex; gap:8px; align-items:baseline; padding:1px 2px; border-bottom:1px solid rgba(255,255,255,.04); white-space:pre-wrap; word-break:break-word; }
.alog-t { color:#7c8aa5; flex:0 0 auto; }
.alog-lvl { flex:0 0 46px; font-weight:700; font-size:10.5px; letter-spacing:.04em; }
.alog-cat { flex:0 0 64px; color:#8b9bb4; }
.alog-msg { color:#cdd6e6; flex:1 1 auto; }
.alog-ref { color:#7c8aa5; }
.alog-info .alog-lvl { color:#5fb0ef; }
.alog-warn .alog-lvl { color:#f0b429; }
.alog-warn .alog-msg { color:#f3d28b; }
.alog-error .alog-lvl { color:#ef5f6b; }
.alog-error .alog-msg { color:#f6a6ad; }
.alog-debug { opacity:.62; }
.alog-debug .alog-lvl { color:#8b9bb4; }

/* AI spend & credit (item 12) */
.ai-spend-usage { margin: 8px 0; }
.ais-usage-line { font-size: 14px; }
.ais-bar { height: 8px; border-radius: 4px; background: var(--surface-2, #e9eef5); overflow: hidden; margin: 6px 0; max-width: 420px; }
.ais-bar-fill { height: 100%; background: linear-gradient(90deg, #2e9e6b, #e0a52e); }
.line-tm { font-weight: 600; color: var(--text-muted, #6b7280); letter-spacing: 0.02em; }

/* System Console — record detail (item 3) */
.rec-open-cell { width: 34px; text-align: center; }
.rec-open { background: none; border: 1px solid var(--line); cursor: pointer; color: var(--text-muted); padding: 2px 4px; border-radius: var(--radius-sm); display: inline-flex; }
.rec-open:hover { background: var(--bg-subtle); color: var(--text); }
.rec-open svg { width: 14px; height: 14px; }
.rec-detail { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.rec-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start; }
.rec-key { font-weight: 600; font-size: 13px; color: var(--text-muted); word-break: break-word; padding-top: 2px; }
.rec-val { font-size: 13px; }
.rec-val pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--bg-subtle, #f6f7f9); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; max-height: 320px; overflow: auto; }
.rec-val.rec-null { color: #999; font-style: italic; }

.totals-note { font-size: 11px; color: var(--muted, #6b7280); font-weight: 400; }

/* ===== Command centre: top application bar + palette (r343) ===== */
.appbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 32px;
    min-height: 64px;
    box-sizing: border-box;
    background: var(--bg-card);
    border-bottom: 1px solid var(--line);
}
.appbar-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 520px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: text;
    font: inherit;
    font-size: 13px;
    text-align: left;
}
.appbar-search:hover { border-color: var(--primary); }
.appbar-search svg { color: var(--text-muted); flex: none; }
.appbar-search-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.appbar-kbd { display: inline-flex; gap: 3px; flex: none; }
.appbar-kbd kbd, .palette-kbd kbd {
    font-family: var(--font-mono); font-size: 11px; line-height: 1;
    padding: 3px 5px; border: 1px solid var(--line-strong);
    border-bottom-width: 2px; border-radius: 4px;
    background: var(--bg-card); color: var(--text-muted);
}
.appbar-spacer { flex: 1 1 auto; }
.appbar-create { height: 38px; white-space: nowrap; }
.appbar-mywork {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 12px;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text);
    cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
}
.appbar-mywork:hover { border-color: var(--primary); background: var(--bg-subtle); }
.appbar-mywork svg { color: var(--text-muted); flex: none; }
.appbar-mywork-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
}
.appbar-mywork-count[hidden] { display: none; }
.cc-menu {
    position: absolute; top: 58px; right: 32px; z-index: 60;
    width: 280px; max-height: 60vh; overflow: auto;
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px;
}
.cc-menu-search {
    width: 100%; box-sizing: border-box; height: 34px; margin-bottom: 6px;
    padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--bg-subtle); color: var(--text); font: inherit; font-size: 13px;
}
.cc-menu-list { display: flex; flex-direction: column; }
.cc-menu-item {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 13px;
}
.cc-menu-item:hover { background: var(--primary-soft); color: var(--primary-ink); }
.cc-menu-empty { padding: 10px; color: var(--text-muted); font-size: 13px; }
.palette-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 96px 16px 16px; z-index: 70; overflow-y: auto;
}
.palette-overlay[hidden] { display: none; }
.palette {
    width: 100%; max-width: 600px; max-height: 70vh;
    background: var(--bg-card); border: 1px solid var(--line-strong);
    border-radius: 10px; box-shadow: var(--shadow-lg);
    overflow: hidden; display: flex; flex-direction: column;
}
.palette-search {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.palette-search svg { color: var(--text-muted); flex: none; }
.palette-search input {
    flex: 1; border: 0; outline: none; background: transparent;
    color: var(--text); font: inherit; font-size: 16px;
}
.palette-list { overflow-y: auto; padding: 6px; }
.palette-group {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); padding: 10px 10px 4px;
}
.palette-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.palette-item.is-active { background: var(--primary-soft); }
.palette-item-ic {
    flex: none; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px; background: var(--bg-subtle); color: var(--text-muted);
    font-weight: 700; font-size: 14px;
}
.palette-item.is-active .palette-item-ic { background: var(--primary); color: #fff; }
.palette-item-label { flex: 1; color: var(--text); font-size: 14px; }
.palette-item-sub { color: var(--text-muted); font-size: 12px; }
.palette-empty { padding: 24px 16px; color: var(--text-muted); font-size: 14px; text-align: center; }
@media (max-width: 720px) {
    .appbar { padding: 10px 16px; gap: 8px; }
    .appbar-search-text, .appbar-kbd, .appbar-mywork-label { display: none; }
    .appbar-search { flex: 0 0 auto; width: 38px; padding: 0; justify-content: center; }
    .cc-menu { right: 16px; left: 16px; width: auto; }
}

/* ===== Role-based Home: greeting (context header) + quick actions (r344) ===== */
.home-greeting { font-size: 22px; margin: 0; }
.home-quick { margin: 0 0 22px; }
.home-quick-head {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); margin: 0 0 10px;
}
.home-quick-row { display: flex; flex-wrap: wrap; gap: 10px; }
.qa-btn {
    display: inline-flex; align-items: flex-start; gap: 10px; text-align: left;
    flex: 1 1 240px; max-width: 360px;
    padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text); cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 500;
}
.qa-btn:hover { border-color: var(--primary); background: var(--bg-subtle); }
.qa-ic {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 5px; margin-top: 1px;
    background: var(--primary-soft); color: var(--primary-ink);
    font-weight: 700; font-size: 15px; line-height: 1;
}
.qa-btn:hover .qa-ic { background: var(--primary); color: #fff; }
.qa-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qa-label { font-weight: 600; }
.qa-sub { font-size: 11.5px; font-weight: 400; color: var(--text-muted); line-height: 1.35; }
.qa-flow, .area-tile-flow {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 2px 7px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-ink);
    font-size: 10.5px; font-weight: 600;
}
.qa-flow { flex: 0 0 auto; align-self: flex-start; margin-top: 1px; }
.area-tile-flow { margin-top: 8px; }
@media (max-width: 720px) {
    .home-quick-row .qa-btn { flex: 1 1 calc(50% - 5px); justify-content: flex-start; }
}

/* ===== Role-based Home: recent documents (r345) ===== */
.home-recent { margin: 0 0 22px; }
.home-recent-head {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); margin: 0 0 10px;
}
.home-recent-row { display: flex; flex-wrap: wrap; gap: 8px; }
.recent-chip {
    display: inline-flex; align-items: center; gap: 7px;
    max-width: 260px; padding: 7px 11px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg-subtle); color: var(--text); text-decoration: none;
    font-size: 12.5px;
}
.recent-chip:hover { border-color: var(--primary); background: var(--bg-card); }
.recent-chip-ic { color: var(--text-muted); flex: none; display: inline-flex; }
.recent-chip-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ===== Role-based Home: favourites + star toggle (r346) ===== */
.fav-toggle.is-fav { color: var(--primary); }
.fav-chip .recent-chip-ic { color: var(--primary); }

/* ===== Role-based Home: attention strip ===== */
.home-attn { margin: 0 0 22px; }
.home-attn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.attn-card {
    display: inline-flex; align-items: flex-start; gap: 10px;
    max-width: 360px; min-width: 220px; padding: 12px 14px;
    border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px;
    background: var(--bg-card); color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.attn-card:hover { border-color: var(--primary); }
.attn-warn { border-left-color: var(--warn, #d97706); }
.attn-info { border-left-color: var(--primary); }
.attn-warn .attn-ic { color: var(--warn, #d97706); }
.attn-info .attn-ic { color: var(--primary); }
.attn-ic { flex: none; display: inline-flex; margin-top: 1px; }
.attn-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attn-title { font-weight: 600; font-size: 13px; }
.attn-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }

/* ===== Role-based Home: my priority work (server-ranked) ===== */
.home-priority { margin: 0 0 22px; }
.home-priority-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pw-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-card); color: var(--text); text-decoration: none; }
.pw-row:last-child { border-bottom: 0; }
.pw-row:hover { background: var(--bg-subtle); }
.pw-type { flex: none; }
.pw-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pw-num { font-weight: 600; font-size: 13px; }
.pw-owner { font-size: 11.5px; color: var(--text-muted); }
.pw-reason { flex: none; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-subtle); color: var(--text-muted); }
.pw-reason.pw-wait { color: var(--warn, #d97706); background: color-mix(in srgb, var(--warn, #d97706) 12%, transparent); }
.pw-reason.pw-val { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* ===== Unified Work / Notifications panel (app-bar dropdown) ===== */
.work-panel { min-width: 320px; max-width: 380px; max-height: 70vh; overflow-y: auto; padding: 6px 0; }
.work-loading { padding: 16px; }
.work-sec { padding: 4px 0 6px; }
.work-sec + .work-sec { border-top: 1px solid var(--line); }
.work-sec-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 8px 14px 4px; }
.work-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; text-decoration: none; color: var(--text); }
.work-item:hover { background: var(--bg-subtle); }
.work-item-main { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.work-item-sub { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-empty { padding: 8px 14px 10px; font-size: 12.5px; color: var(--text-muted); }
.work-foot { width: 100%; text-align: center; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--primary); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.work-foot:hover { background: var(--bg-subtle); }

/* ===== Phase 1: area landing pages ===== */
.nav-area-link { cursor: pointer; border-radius: 6px; }
.nav-area-link:hover { color: var(--text); background: var(--bg-subtle); }
.nav-area-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.area-land-head { margin: 0 0 18px; }
.area-land-head h2 { margin: 0 0 4px; font-size: 22px; }
.area-land-desc { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.area-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.area-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
.area-tile-open { display: block; padding: 14px 16px; text-decoration: none; color: var(--text); flex: 1; }
.area-tile-open:hover { background: var(--bg-subtle); }
.area-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.area-tile-name { font-weight: 600; font-size: 14.5px; }
.area-tile-count { font-weight: 700; font-size: 15px; color: var(--primary); }
.area-tile-sub { margin-top: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.area-tile-new { border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--primary); font-weight: 600; font-size: 12px; padding: 8px 16px; text-align: left; cursor: pointer; }
.area-tile-new:hover { background: var(--bg-subtle); }

/* ===== WCAG 2.2 AA: skip link + global focus-visible ===== */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; padding: 10px 16px; background: var(--primary, #2563eb); color: #fff; border-radius: 0 0 8px 8px; font-weight: 600; text-decoration: none; transition: top .12s ease; }
.skip-link:focus { top: 0; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.nav-item:focus-visible, .nav-area-link:focus-visible, .setup-tab:focus-visible,
[data-config-tab]:focus-visible, [data-tab]:focus-visible, .palette-item:focus-visible,
.area-tile-open:focus-visible, .work-item:focus-visible, .pw-row:focus-visible {
    outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; border-radius: 4px;
}
#main-content:focus { outline: none; }

/* ===== Customers (Order-to-Cash): contact editor ===== */
.cust-contact-row { display: grid; grid-template-columns: 1.4fr 1.6fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
@media (max-width: 640px) { .cust-contact-row { grid-template-columns: 1fr 1fr; } }

/* ===== Sales orders (Order-to-Cash): line editor ===== */
.so-line-row { display: grid; grid-template-columns: 2.4fr 0.9fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.so-line-total { text-align: right; font-variant-numeric: tabular-nums; padding-right: 4px; }
.so-total-row { margin-top: 10px; text-align: right; font-size: 14px; }
.so-total-row strong { font-variant-numeric: tabular-nums; }
.so-status-chip { margin-bottom: 6px; font-size: 13px; color: var(--muted, #64748b); }
@media (max-width: 640px) { .so-line-row { grid-template-columns: 1fr 1fr; } }

/* ===== Customer invoices (AR): line editor with tax + totals ===== */
.ci-line-row { display: grid; grid-template-columns: 2.2fr 0.8fr 1fr 0.8fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.ci-line-total { text-align: right; font-variant-numeric: tabular-nums; padding-right: 4px; }
.ci-lines-tools { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ci-totals { margin-top: 12px; display: flex; gap: 24px; justify-content: flex-end; font-size: 13.5px; }
.ci-totals strong { font-variant-numeric: tabular-nums; }
.ci-total-gross strong { font-size: 15px; }
.ci-status-chip { margin-bottom: 6px; font-size: 13px; color: var(--muted, #64748b); }
@media (max-width: 640px) { .ci-line-row { grid-template-columns: 1fr 1fr; } .ci-totals { flex-direction: column; gap: 4px; align-items: flex-end; } }

/* ===== Shipments (O2C fulfilment): fulfilment plan table ===== */
.sh-plan { width: 100%; }
.sh-plan th, .sh-plan td { padding: 6px 8px; }
.sh-plan .num { text-align: right; font-variant-numeric: tabular-nums; }
.sh-status-chip { margin-bottom: 6px; font-size: 13px; color: var(--muted, #64748b); }

/* ===== Credit notes (AR): status chip (line editor + totals reuse .ci-line-row / .ci-totals) ===== */
.cn-status-chip { margin-bottom: 6px; font-size: 13px; color: var(--muted, #64748b); }

/* ===== Customer payments (AR cash application) ===== */
.cpay-status-chip { margin-bottom: 6px; font-size: 13px; color: var(--muted, #64748b); }
.cpay-unapplied { font-size: 12.5px; color: var(--muted, #64748b); margin-left: 10px; }
.cpay-unapplied-chip { display: inline-block; padding: 1px 7px; border-radius: 10px; background: var(--warn-bg, #fef3c7); color: var(--warn-fg, #92400e); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ===== Quotations (pre-sales): status chip (line editor + totals reuse .ci-line-row / .ci-totals) ===== */
.quo-status-chip { margin-bottom: 6px; font-size: 13px; color: var(--muted, #64748b); }

/* ===== Opportunities (pre-sales / CRM) ===== */
.opp-status-chip { margin-bottom: 6px; font-size: 13px; color: var(--muted, #64748b); }
.opp-weighted { font-size: 15px; font-weight: 600; color: var(--text, #0f172a); font-variant-numeric: tabular-nums; }
.opp-stage-inline { font-size: 12.5px; padding: 3px 6px; }

/* ===== Leads (top of the pre-sales funnel) ===== */
.lead-status-inline { font-size: 12.5px; padding: 3px 6px; }

/* ===== Journal entries (general ledger) ===== */
.je-line-head, .je-line-row { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 36px; gap: 8px; align-items: center; }
.je-line-head { font-size: 12px; color: var(--muted, #64748b); padding: 2px 0; }
.je-line-row { margin-bottom: 6px; }
.je-balance { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.je-tot { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }

/* ===== Trial balance ===== */
.tb-total td { border-top: 2px solid var(--border, #e2e8f0); padding-top: 8px; }

/* ===== Financial statements ===== */
.fs-table .fs-group td { padding-top: 12px; color: var(--text, #0f172a); border-bottom: 1px solid var(--border, #e2e8f0); }
.fs-table .fs-subtotal td { border-top: 1px solid var(--border, #e2e8f0); }

/* ============================================================ printable documents (Save as PDF) */
#print-root { display: none; }
.pdoc-sheet { color: #1c232b; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.5; }
.pdoc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.pdoc-issuer-name { font-size: 20px; font-weight: 700; color: #4F5963; letter-spacing: -0.01em; }
.pdoc-addr { margin-top: 6px; color: #5b6672; font-size: 11px; line-height: 1.6; }
.pdoc-title-box { text-align: right; min-width: 200px; }
.pdoc-doctitle { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #FF8B1F; }
.pdoc-docno { font-size: 18px; font-weight: 700; color: #1c232b; margin-top: 2px; }
.pdoc-status { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #4F5963; border: 1px solid #cbd5e1; border-radius: 999px; padding: 2px 10px; }
.pdoc-accent { height: 3px; background: #FF8B1F; margin: 14px 0 18px; border-radius: 2px; }
.pdoc-parties { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 20px; }
.pdoc-party-label, .pdoc-party-name { }
.pdoc-party-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #8a94a0; margin-bottom: 3px; }
.pdoc-party-name { font-size: 14px; font-weight: 700; color: #1c232b; }
.pdoc-meta { min-width: 220px; }
.pdoc-meta-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px solid #eef2f6; font-size: 11px; }
.pdoc-meta-row span { color: #8a94a0; }
.pdoc-meta-row strong { color: #1c232b; font-weight: 600; }
.pdoc-lines { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.pdoc-lines th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #4F5963; border-bottom: 2px solid #4F5963; padding: 7px 8px; }
.pdoc-lines td { padding: 7px 8px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
.pdoc-lines th.num, .pdoc-lines td.num { text-align: right; white-space: nowrap; }
.pdoc-lines th.pdoc-wide, .pdoc-lines td.pdoc-wide { width: 42%; }
.pdoc-empty { color: #8a94a0; text-align: center; padding: 16px 8px; }
.pdoc-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.pdoc-notes { flex: 1; }
.pdoc-note { margin-bottom: 10px; max-width: 340px; }
.pdoc-note-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #8a94a0; margin-bottom: 2px; }
.pdoc-totals { border-collapse: collapse; min-width: 240px; }
.pdoc-totals td { padding: 5px 8px; font-size: 12px; }
.pdoc-totals td.num { text-align: right; white-space: nowrap; }
.pdoc-totals tr.pdoc-grand td { border-top: 2px solid #4F5963; font-weight: 700; font-size: 14px; padding-top: 8px; }
.pdoc-generated { margin-top: 28px; padding-top: 10px; border-top: 1px solid #eef2f6; font-size: 9.5px; color: #a4adb8; text-align: center; letter-spacing: 0.02em; }
@media print {
    body.printing > *:not(#print-root) { display: none !important; }
    body.printing #print-root { display: block !important; }
    @page { size: A4; margin: 15mm; }
    html, body { background: #fff !important; }
}

/* ---- Recruiting workspace (hiring pipeline) ---- */
.rc-section { margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--line); }
.rc-section:first-of-type { border-top: none; margin-top: 8px; }
.rc-panel { background: var(--bg-app); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin: 4px 0 8px; }
.rc-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .rc-panel-grid { grid-template-columns: 1fr; } }
.rc-panel-row > td { background: transparent; padding: 0 8px 8px; }
.rc-input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: inherit; font-size: 13px; }
.rc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.rc-addrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.rc-addrow .rc-input { width: auto; flex: 1 1 150px; min-width: 120px; }
.rc-addrow .btn { flex: 0 0 auto; }
.rc-doc { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 6px 0; font-size: 13px; white-space: nowrap; }
.rc-docs { display: flex; flex-wrap: wrap; }
.rc-btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 12px; }
.ok-text { color: var(--ok); font-weight: 600; }
.bad-text { color: var(--bad); font-weight: 600; }

/* ---- Legal-entity letterhead logo ---- */
.le-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 6px; }
.le-logo-preview { height: 46px; max-width: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 8px; background: #fff; }
.le-logo-empty { color: var(--text-muted); font-size: 13px; }
.le-logo-actions { display: inline-flex; gap: 8px; align-items: center; }
.le-logo-row .hint { flex-basis: 100%; }