:root {
    color-scheme: light;
    --primary: #556ee6;
    --primary-dark: #4458b8;
    --ink: #343a40;
    --muted: #74788d;
    --line: #e9e9ef;
    --surface: #ffffff;
    --canvas: #f5f6f8;
    --sidebar: #fbfcff;
    --success: #34c38f;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Workflow setup uses the same Skote palette and native Bootstrap forms. */
.workflow-builder { display: grid; grid-template-columns: 190px minmax(240px, 1fr) minmax(300px, .95fr); align-items: start; gap: 22px; }
.workflow-builder > * { min-width: 0; }
.workflow-palette .card-body { padding: 16px 12px; }
.workflow-palette-item { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 9px; border: 1px solid var(--step-border); background: var(--step-bg); color: #30384d; border-radius: 7px; text-decoration: none; font-size: 13px; }
.workflow-palette-item span { color: var(--step-color); font-size: 20px; font-weight: 700; }
.workflow-palette-text { min-width: 0; font-weight: 600; }
.workflow-palette-text small { display: block; margin-top: 2px; color: #5b6275; font-size: 11px; font-weight: 400; line-height: 1.3; }
.step-trigger, .step-approval { --step-bg: #edf5ff; --step-border: #bdd5ee; --step-color: #2577b8; }
.step-document { --step-bg: #f5effc; --step-border: #d9c3eb; --step-color: #8554ba; }
.step-automation { --step-bg: #edf9f1; --step-border: #b7dfc4; --step-color: #188149; }
.step-condition { --step-bg: #fff6ed; --step-border: #edd4b9; --step-color: #b26819; }
.step-client_request { --step-bg: #fff0f5; --step-border: #ecc4d4; --step-color: #b0466e; }
.step-output { --step-bg: #f0f3f8; --step-border: #d1d8e3; --step-color: #526884; }
.workflow-block { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--step-border); background: var(--step-bg); border-radius: 9px; text-decoration: none; color: #263248; }
article.workflow-block { display: block; padding-bottom: 6px; }
.workflow-block-link { display: flex; align-items: flex-start; gap: 12px; color: inherit; text-decoration: none; }
.workflow-block.is-selected { outline: 2px solid var(--primary); outline-offset: 2px; }
.workflow-block strong { font-size: 14px; }
.workflow-block small, .workflow-branches small { display: block; margin-top: 5px; font-size: 12px; color: #51586b; overflow-wrap: anywhere; }
.workflow-step-number { display: grid; flex: 0 0 36px; height: 36px; place-items: center; background: var(--step-color); border-radius: 8px; color: white; font-weight: 700; }
.workflow-step-controls { display: flex; gap: 6px; margin-top: 8px; }
.workflow-step-controls .btn { color: #51586b; font-size: 12px; padding: 2px 9px; }
/* Reorder buttons big enough to hit (demo review #143); chips show due, assignee and subtasks at a glance (#144). */
.workflow-step-controls .workflow-move { min-width: 34px; min-height: 30px; font-size: 16px; line-height: 1; background: #fff; }
.workflow-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.workflow-chip { padding: 1px 8px; border: 1px solid var(--step-border); border-radius: 999px; background: #fff; color: #3d4557; font-size: 11px; font-weight: 500; }
.workflow-connector { height: 34px; display: grid; place-items: center; color: #738fb4; font-weight: 700; position: relative; }
.workflow-connector::before { content: ""; position: absolute; inset: 0 auto; border-left: 1px solid #c7d5e5; z-index: -1; }
.workflow-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 8px 0; }
.workflow-branches > div { border: 1px solid var(--line); border-radius: 7px; padding: 10px; background: white; }
.workflow-editor { scroll-margin-top: 90px; }
.workflow-editor .form-label { font-size: 13px; }
.workflow-editor .form-control, .workflow-editor .form-select { font-size: 13px; }
.workflow-editor .card-header, .workflow-editor .card-footer { padding: 18px; }
.workflow-editor .card-footer { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid var(--line); box-shadow: 0 -6px 14px rgba(15, 23, 42, .06); }
.section-number { display: inline-grid; width: 30px; height: 30px; margin-right: 8px; place-items: center; border-radius: 50%; background: var(--primary); color: white; font-size: 15px; }
.assignment-choice { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; height: 100%; cursor: pointer; }
.assignment-choice span { grid-column: 2; }
.assignment-choice:has(input:checked) { background: #f2f3ff; border-color: var(--primary); }
.assignment-summary { position: sticky; top: 90px; }
@media (max-width: 1199.98px) {
    .workflow-builder { grid-template-columns: 160px minmax(0, 1fr); gap: 16px; }
    .workflow-editor { grid-column: 2; }
}
@media (max-width: 575.98px) {
    .workflow-builder { grid-template-columns: minmax(0, 1fr); }
    .workflow-editor { grid-column: 1; }
    #workflow-palette-items.show { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .workflow-palette h2, .workflow-palette p { grid-column: 1 / -1; margin: 0; }
    .workflow-palette-item { margin: 0; }
    .assignment-summary { position: static; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-size: 15px;
    line-height: 1.5;
}

a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; }

@media (max-width: 575.98px) {
    .posting-allocation-table thead { display: none; }
    .posting-allocation-table tbody tr { display: block; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
    .posting-allocation-table tbody td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; border: 0; overflow-wrap: anywhere; }
    .posting-allocation-table tbody td::before { content: attr(data-label); text-align: left; font-weight: 600; }
    .posting-allocation-table tfoot tr { display: flex; justify-content: space-between; gap: 8px; }
    .posting-allocation-table tfoot th { border: 0; }
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: 210px;
    color: #51566c;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    transition: transform 180ms ease;
}

.app-brand,
.auth-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.app-brand {
    height: 70px;
    padding: 0 24px;
    color: var(--ink);
}

.app-brand-mark {
    display: block;
    flex: none;
    width: 34px;
    height: auto;
}

.sidebar-nav { padding: 18px 12px; }

.nav-heading {
    display: block;
    padding: 0 13px 9px;
    color: #6a7187;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 6px;
    text-decoration: none;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active { color: var(--primary-dark); background: #edf0ff; }

.nav-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.main-column { min-height: 100vh; margin-left: 210px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 28px;
    background: var(--surface);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05);
}

.topbar-spacer { flex: 1; }
.sidebar-toggle { display: none; }

.icon-button,
.user-menu-button {
    border: 0;
    background: transparent;
    color: var(--muted);
}

.icon-button { padding: 10px; font-size: 21px; }

.user-menu { position: relative; }

.user-menu-button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border-radius: 7px;
}

.user-menu-button:hover,
.user-menu-button:focus-visible { background: var(--canvas); }

.avatar {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: var(--primary-dark);
    background: #eef0fc;
    font-weight: 700;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    padding: 7px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
}

.user-menu-panel a,
.user-menu-panel button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 5px;
    color: var(--ink);
    background: transparent;
    text-align: left;
    text-decoration: none;
}

.user-menu-panel a:hover,
.user-menu-panel button:hover { background: var(--canvas); }

.page-content { margin: 0 auto; padding: 26px; }

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 24px;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.page-heading h1,
.welcome-card h2,
.panel h2,
.summary-card h2 { margin: 0; }
.page-heading h1 { font-size: 24px; }

.welcome-card,
.panel,
.summary-card {
    background: var(--surface);
    border: 1px solid rgba(233, 233, 239, .8);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .035);
}

.welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 170px;
    padding: 30px;
    border-top: 3px solid var(--primary);
}

.welcome-card h2 { font-size: 26px; }
.welcome-card p:last-child { margin: 8px 0 0; color: var(--muted); }

.role-badge {
    padding: 6px 10px;
    color: #187657;
    background: #daf4ea;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.summary-grid,
.settings-grid {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

.summary-card { display: flex; gap: 18px; padding: 24px; }
.summary-card h2 { font-size: 16px; }
.summary-card p { margin: 6px 0 0; color: var(--muted); }

.summary-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #187657;
    background: #daf4ea;
    border-radius: 50%;
    font-weight: 800;
}

.summary-icon.muted { color: var(--primary-dark); background: #eef0fc; }

.panel { padding: 26px; }
.panel-heading { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { font-size: 18px; }
.panel-heading p { margin: 5px 0 0; color: var(--muted); }

.stack-form { display: grid; gap: 18px; margin-top: 22px; }
/* align-content: start keeps a control its own height when a neighboring field in the same row is taller (help text). */
.field { display: grid; align-content: start; gap: 7px; }
.field label { font-weight: 600; }

.field input,
.field select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    color: var(--ink);
    background: #fff;
}

.field input:focus,
.field select:focus {
    border-color: #aab7f3;
    outline: 3px solid rgba(85, 110, 230, .13);
}

.field-error { margin: 0; color: #d84242; font-size: 13px; }
.check-row { display: flex; align-items: center; gap: 8px; }

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    padding: 10px 17px;
    border: 1px solid var(--primary);
    border-radius: 5px;
    color: #fff;
    background: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.primary-button:hover,
.primary-button:focus-visible { background: var(--primary-dark); border-color: var(--primary-dark); }
.full-width { width: 100%; justify-self: stretch; }

.status-message {
    margin-top: 20px;
    padding: 11px 13px;
    color: #187657;
    background: #e4f7f0;
    border-radius: 5px;
}

.status-message.error { color: #a12a2a; background: #fdeaea; }

.integration-panel { grid-column: 1 / -1; }

.connection-heading,
.connection-title,
.connection-actions {
    display: flex;
    align-items: center;
}

.connection-heading { justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.connection-title { gap: 14px; }
.connection-title h2 { font-size: 18px; }
.connection-title p { margin: 4px 0 0; color: var(--muted); }

.integration-mark {
    display: inline-grid;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #2ca01c;
    font-weight: 800;
    text-transform: uppercase;
}

.connection-badge { padding: 5px 9px; border-radius: 999px; color: var(--muted); background: var(--canvas); font-size: 12px; font-weight: 700; white-space: nowrap; }
.connection-badge.ready { color: var(--primary-dark); background: #eef0fc; }
.connection-badge.connected { color: #187657; background: #daf4ea; }
.connection-copy { margin: 20px 0; color: var(--muted); }
.connection-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.connection-details div { padding: 14px; border: 1px solid var(--line); border-radius: 6px; }
.connection-details dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.connection-details dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.connection-actions { gap: 10px; }
.connection-actions form { margin: 0; }

.secondary-button,
.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border-radius: 5px;
    background: #fff;
    font-weight: 600;
    text-decoration: none;
}

.secondary-button { border: 1px solid #ced4da; color: var(--ink); }
.danger-button { border: 1px solid #efb1b1; color: #b42f2f; }
.secondary-button:hover,
.secondary-button:focus-visible { background: var(--canvas); }
.danger-button:hover,
.danger-button:focus-visible { background: #fdeaea; }

.config-list { margin: 0 0 18px; padding-left: 22px; }
.callback-label { margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.callback-uri { display: block; padding: 11px 13px; border-radius: 5px; background: var(--canvas); overflow-wrap: anywhere; }

.transaction-status-message { margin: 0 0 18px; }
.heading-action-group { display: flex; align-items: center; gap: 10px; }
.heading-action-group form { margin: 0; }
.quickbooks-refresh-button { display: inline-flex; width: 38px; height: 38px; padding: 0; align-items: center; justify-content: center; }
.quickbooks-refresh-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.transaction-import-modal-body { display: grid; gap: 18px; }
.transaction-import-copy p { margin: 0 0 3px; color: var(--muted); }
.transaction-import-copy small { color: var(--muted); }
.transaction-import-error { margin: 0; }
.transaction-drop-zone {
    display: grid;
    justify-items: center;
    min-height: 220px;
    padding: 25px;
    border: 2px dashed #c3cbe4;
    border-radius: 9px;
    color: var(--muted);
    background: #f8f9fb;
    text-align: center;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.transaction-drop-zone:hover,
.transaction-drop-zone:focus-visible { border-color: var(--primary); outline: 0; background: rgba(85, 110, 230, .06); }
.transaction-drop-zone.drag-over { border-color: var(--primary); background: rgba(85, 110, 230, .1); box-shadow: 0 0 0 3px rgba(85, 110, 230, .16); }
.transaction-drop-zone.has-file { border-style: solid; border-color: #8bd7bc; background: #f4fcf9; }
.transaction-drop-icon { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--primary); background: rgba(85, 110, 230, .12); }
.transaction-drop-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.transaction-drop-zone p { display: grid; gap: 2px; margin: 10px 0 12px; }
.transaction-drop-zone p strong { color: var(--ink); font-size: 15px; }
.transaction-drop-zone p span { font-size: 12px; }
.transaction-file-button { padding: 7px 13px; color: var(--primary-dark); border-color: #9eacf1; cursor: pointer; }
.transaction-file-name { min-height: 18px; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.transaction-drop-zone.has-file .transaction-file-name { color: #187657; }
.transaction-example-link { margin-top: 8px; color: var(--primary-dark); font-size: 12px; font-weight: 600; text-decoration: none; }
.transaction-example-link:hover,
.transaction-example-link:focus-visible { text-decoration: underline; }
.import-history-wrap { padding-top: 2px; }
.import-history-wrap h3 { margin: 0 0 9px; font-size: 14px; }
.import-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.import-history li { display: grid; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.import-history strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.import-history span { color: var(--muted); font-size: 11px; }

.transaction-connection-callout {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.transaction-connection-callout h2 { margin: 0; font-size: 18px; }
.transaction-connection-callout p { margin: 4px 0 0; color: var(--muted); }
.transaction-connection-callout .primary-button { margin-left: auto; white-space: nowrap; }

.transaction-sync-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid #dfe3f7;
    border-radius: 8px;
    background: #f8f9ff;
    color: var(--muted);
    font-size: 13px;
}

.transaction-sync-strip div { display: flex; align-items: center; gap: 10px; }
.transaction-sync-strip strong { color: var(--ink); }
/* clip, not hidden: a hidden-overflow ancestor would stop the toolbar below from sticking. */
.transaction-list-panel { padding: 0; overflow: clip; }

.transaction-toolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
}

/* Pinned under the sticky topbar while the list scrolls, like 3P Mercury's Lead Vault and Restock toolbars
   (owner request 2026-09-29). The review tiles scroll away; phones keep the static toolbar. */
@media (min-width: 992px) {
    .transaction-toolbar { position: sticky; top: 70px; z-index: 9; background: var(--surface); box-shadow: 0 6px 10px -8px rgba(15, 23, 42, .25); }
}

.transaction-search {
    display: flex;
    width: min(620px, 100%);
    margin-left: auto;
}

.transaction-search input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid #ced4da;
    border-right: 0;
    border-radius: 6px 0 0 6px;
}

.transaction-search input:focus { z-index: 1; border-color: #aab7f3; outline: 3px solid rgba(85, 110, 230, .13); }
.transaction-search .primary-button { flex: 0 0 auto; border-radius: 0 6px 6px 0; }
.transaction-toolbar-actions { display: flex; align-items: center; gap: 9px; }
.filter-button { gap: 8px; }

.transaction-bulk-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: 100%; }
.transaction-bulk-controls form { margin: 0; }
.transaction-job-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.transaction-job-status [data-review-progress]::before { content: "\00b7"; margin-right: 6px; }
.transaction-job-status [data-analysis-progress][hidden] + [data-review-progress]::before { content: none; }
.transaction-job-status [data-posting-progress]::before { content: "b7"; margin-right: 6px; }
.transaction-job-status [data-analysis-progress][hidden] + [data-posting-progress]::before,
.transaction-job-status [data-analysis-progress][hidden] + [data-posting-progress][hidden] + [data-review-progress]::before { content: none; }
.quickbooks-post-status { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.quickbooks-post-table .quickbooks-post-select { width: 32px; }
.quickbooks-post-table tr.is-blocked td { color: var(--muted); }
.quickbooks-post-client th { background: #f8f8fb; font-size: 12px; }
.quickbooks-post-skipped { margin-top: 16px; }
.quickbooks-post-skipped summary { cursor: pointer; font-weight: 600; }
.quickbooks-post-changes { list-style: none; margin: 0; padding: 0; }
.quickbooks-outbox { display: flex; align-items: center; margin-right: 8px; }
.quickbooks-outbox-button { white-space: nowrap; }
/* The button lays out as flex, which drops the space before the count. */
.quickbooks-outbox-count { margin-left: .3em; }
.quickbooks-post-changes li + li { margin-top: 2px; }
/* A notification toast opens the records it is about. */
.toast-link { cursor: pointer; }
.transaction-select-visible { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--muted); font-size: 11px; white-space: nowrap; }
.transaction-select-visible input,
.transaction-row-select { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.transaction-row-select:disabled { cursor: not-allowed; opacity: .35; }
.transaction-action-menu-button { width: 42px; height: 42px; padding: 0; font-size: 24px; line-height: 1; }
.transaction-action-menu-button::after { display: none; }
.transaction-import-button { min-height: 42px; gap: 7px; padding: 9px 13px; }
.transaction-import-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.transaction-toolbar-actions .dropdown-menu { min-width: 220px; }

.filter-count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
    font-size: 11px;
}

.transaction-table-wrap { overflow-x: auto; }
.transaction-table { width: 100%; min-width: 1170px; border-collapse: collapse; }
.transaction-review-table { min-width: 1040px; }
.transaction-review-table th,
.transaction-review-table td { padding-right: 12px; padding-left: 12px; }
.transaction-table th,
.transaction-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.transaction-table th { color: var(--muted); background: #fafafd; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.transaction-table tbody tr:hover { background: #fafbff; }
.transaction-table tbody tr.is-selected { background: #f1f3ff; }
.transaction-table tbody tr:last-child td { border-bottom: 0; }
.transaction-table td { font-size: 14px; }
.transaction-table .transaction-selection-column { width: 52px; padding-right: 5px; text-align: center; }
.transaction-table .money-column { text-align: right; white-space: nowrap; }
.transaction-table .money-column small { margin-left: 3px; color: var(--muted); font-size: 10px; }

.transaction-type-badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: #eef0fc;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.transaction-source { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.transaction-name-cell { display: block; min-width: 0; }
.transaction-memo { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.transaction-review { width: 300px; min-width: 260px; }
.transaction-review-table .transaction-review { width: 260px; min-width: 235px; }
.transaction-review > strong,
.transaction-review > small { display: block; }
.transaction-review > small,
.analysis-state { color: var(--muted); font-size: 11px; }
.analysis-state.failed { color: #b42f2f; }
.ai-suggestion { padding: 10px; border: 1px solid #dfe3f7; border-left: 3px solid var(--primary); border-radius: 6px; background: #fafbff; }
.transaction-review .ai-suggestion + .ai-suggestion { margin-top: 8px; }
.ai-suggestion.anomaly-review { border-left-color: #d99a25; background: #fffaf0; }
.ai-suggestion.anomaly-high { border-left-color: #d84242; background: #fff5f5; }
.ai-suggestion > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ai-suggestion > div:first-child span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.ai-suggestion p { margin: 6px 0 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.ai-rule-candidate { margin: 8px 0; padding: 7px 8px; border-left: 2px solid var(--primary); background: #f2f4ff; font-size: 11px; }
.ai-rule-candidate strong,
.ai-rule-candidate span { display: block; }
.ai-rule-candidate span { margin-top: 2px; color: var(--muted); }
.repeatable-opportunity { display: grid; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid #b8dfd0; border-radius: 8px; background: #f1fbf7; font-size: 11px; }
.repeatable-opportunity > span { color: var(--muted); }
.repeatable-opportunity .small-review-button { justify-self: start; }
.anomaly-badge { display: inline-flex; margin-top: 6px; padding: 3px 6px; border-radius: 999px; color: #955f09; background: #fbe9bd; font-size: 10px; font-weight: 700; }
.anomaly-high .anomaly-badge { color: #a12a2a; background: #fbd6d6; }
.suggestion-actions { display: flex; gap: 6px; }
.suggestion-actions form { margin: 0; }
.small-review-button { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; background: #fff; font-size: 11px; font-weight: 700; text-decoration: none; }
.small-review-button.approve { border: 1px solid #8bd7bc; color: #187657; }
.small-review-button.reject { border: 1px solid #efb1b1; color: #b42f2f; }
.small-review-button.rule,
.small-review-button.change { border: 1px solid #c8cff4; color: var(--primary); }
.small-review-button.analyze { border: 1px solid #9daaf4; color: var(--primary); }
.small-review-button.analyze:disabled { cursor: wait; opacity: .7; }
.small-review-button.approve:hover,
.small-review-button.approve:focus-visible { background: #e4f7f0; }
.small-review-button.reject:hover,
.small-review-button.reject:focus-visible { background: #fdeaea; }
.small-review-button.rule:hover,
.small-review-button.rule:focus-visible,
.small-review-button.change:hover,
.small-review-button.change:focus-visible { background: #eef0ff; }
.small-review-button.analyze:hover,
.small-review-button.analyze:focus-visible { background: #eef0ff; }
.transaction-row-analysis-form { margin-top: 7px; }
.transaction-empty { padding: 58px 24px !important; color: var(--muted); text-align: center !important; }

@media (min-width: 1200px) {
    .transaction-review-table { min-width: 0; table-layout: fixed; }
    /* Named columns, so hiding Client (one client) or Number (none on the page) keeps the proportions. */
    .transaction-review-table th.transaction-selection-column { width: 4%; }
    .transaction-review-table th.col-client { width: 12%; }
    .transaction-review-table th.col-date { width: 8%; }
    .transaction-review-table th.col-type { width: 8%; }
    .transaction-review-table th.col-number { width: 7%; }
    .transaction-review-table th.col-name { width: 21%; }
    .transaction-review-table th.col-review { width: 31%; }
    .transaction-review-table th.col-amount { width: 9%; }
    .transaction-review-table .transaction-review { width: auto; min-width: 0; }
}

.transaction-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 24px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

.transaction-pagination > div { display: flex; gap: 5px; }
.pagination-link { display: inline-grid; min-width: 34px; min-height: 34px; place-items: center; padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); text-decoration: none; }
.pagination-link:hover,
.pagination-link:focus-visible,
.pagination-link.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.pagination-link.disabled { color: #adb2bd; background: var(--canvas); }

.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    transition: opacity 180ms ease;
}

.filter-offcanvas {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 50;
    width: min(470px, 100vw);
    background: var(--surface);
    box-shadow: -18px 0 50px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform 180ms ease;
}

.offcanvas-backdrop.open { opacity: 1; }
.filter-offcanvas.open { transform: translateX(0); }
.offcanvas-open { overflow: hidden; }
.filter-form { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }

.filter-header,
.filter-footer { display: flex; align-items: center; gap: 12px; padding: 20px 24px; }
.filter-header { justify-content: space-between; border-bottom: 1px solid var(--line); }
.filter-header h2 { margin: 0; font-size: 20px; }
.filter-header .eyebrow { margin-bottom: 2px; }
.offcanvas-close { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--muted); background: var(--canvas); font-size: 25px; line-height: 1; }
.offcanvas-close:hover,
.offcanvas-close:focus-visible { color: var(--ink); background: #e8eaf0; }
.filter-body { padding: 24px; overflow-y: auto; }
.filter-body > * + * { margin-top: 22px; }
.filter-group { margin-inline: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.filter-group legend { padding: 0 6px; font-weight: 700; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.filter-footer { border-top: 1px solid var(--line); background: #fafafd; }

.auth-body {
    min-height: 100vh;
    background: #f8f7fb;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(480px, .92fr);
    min-height: 100vh;
}

.auth-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 52px clamp(42px, 7vw, 110px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 78% 22%, rgba(66, 211, 167, .28), transparent 30%),
        radial-gradient(circle at 12% 82%, rgba(129, 145, 255, .25), transparent 34%),
        linear-gradient(145deg, #252b42 0%, #303957 56%, #253e48 100%);
}

.auth-promo::after {
    position: absolute;
    right: -110px;
    bottom: -150px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .02);
    content: "";
}

.auth-promo .auth-brand { color: #fff; }

.auth-promo-copy {
    position: relative;
    z-index: 1;
    max-width: 690px;
    margin: auto 0;
    padding: 70px 0;
}

.auth-kicker,
.auth-card-kicker {
    margin: 0 0 13px;
    color: #54d6aa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auth-promo-copy .auth-promo-title {
    max-width: 650px;
    margin: 0;
    color: var(--bs-heading-color, inherit);
    font-weight: 500;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.06;
    letter-spacing: -.045em;
}

.auth-promo-copy > p:not(.auth-kicker):not(.auth-promo-title) {
    max-width: 610px;
    margin: 25px 0 0;
    color: #dce1ef;
    font-size: 19px;
}

.auth-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.auth-benefits li {
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    font-size: 13px;
    font-weight: 600;
}

.auth-product-note {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #aeb7ce;
    font-size: 12px;
}

.auth-form-panel {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 100vh;
    padding: 44px;
    background:
        radial-gradient(circle at 90% 8%, rgba(85, 110, 230, .12), transparent 27%),
        linear-gradient(145deg, #fbfaff 0%, #f4f5fa 100%);
}

.auth-card {
    width: min(520px, 100%);
    padding: 40px;
    background: var(--surface);
    border: 1px solid rgba(85, 110, 230, .15);
    border-top: 4px solid var(--primary);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(42, 48, 66, .12);
}

.auth-brand-mobile { display: none; color: var(--ink); }
.auth-intro { text-align: left; }
.auth-intro h1 { margin: 0; font-size: 29px; line-height: 1.2; letter-spacing: -.025em; }
.auth-intro p { margin: 7px 0 0; color: var(--muted); }
.auth-intro .auth-card-kicker { margin-bottom: 9px; color: var(--primary); }
.auth-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-privacy-note { margin: 15px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-switch { margin: 22px 0 0; padding-top: 19px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; }
.auth-switch a,
.auth-privacy-note a { color: var(--primary-dark); font-weight: 700; }
.auth-footer { margin: 20px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 1040px) {
    .auth-shell { grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); }
    .auth-promo { padding: 42px; }
    .auth-promo-copy .auth-promo-title { font-size: 48px; }
    .auth-promo-copy > p:not(.auth-kicker):not(.auth-promo-title) { font-size: 17px; }
    .auth-form-panel { padding: 34px; }
}

@media (max-width: 820px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar-open .sidebar { transform: translateX(0); box-shadow: 12px 0 30px rgba(15, 23, 42, .2); }
    .sidebar-open .main-column::before { position: fixed; z-index: 19; inset: 0; background: rgba(15, 23, 42, .35); content: ""; }
    .main-column { margin-left: 0; }
    .sidebar-toggle { display: block; }
    .page-content { padding: 22px 18px; }
    .summary-grid,
    .settings-grid { grid-template-columns: 1fr; }
    .connection-heading { align-items: flex-start; }
    .connection-details { grid-template-columns: 1fr; }
    .transaction-toolbar { grid-template-columns: 1fr; }
    .import-history { grid-template-columns: 1fr; }
    .transaction-search { width: 100%; }
    .auth-shell { display: block; }
    .auth-promo { display: none; }
    .auth-form-panel { min-height: 100vh; padding: 28px; }
    .auth-brand-mobile { display: flex; margin-bottom: 30px; }
}

@media (max-width: 520px) {
    .topbar { padding: 0 14px; }
    .user-menu-name { display: none; }
    .welcome-card { align-items: flex-start; gap: 20px; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
    .heading-action-group { flex-wrap: wrap; }
    .auth-form-panel { padding: 18px; }
    .auth-card { padding: 28px 22px; border-radius: 13px; }
    .auth-field-grid { grid-template-columns: 1fr; }
    .transaction-connection-callout { align-items: flex-start; flex-wrap: wrap; }
    .transaction-drop-zone { min-height: 200px; padding: 22px 16px; }
    .transaction-connection-callout .primary-button { width: 100%; margin-left: 0; }
    .transaction-sync-strip { align-items: flex-start; flex-direction: column; }
    .transaction-toolbar { display: flex; align-items: stretch; flex-direction: column; gap: 15px; padding: 18px; }
    .transaction-toolbar-actions { justify-content: flex-end; }
    .transaction-bulk-controls { margin-right: auto; }
    .transaction-table-wrap { overflow: visible; }
    .transaction-table thead { display: none; }
    .transaction-table,
    .transaction-table tbody,
    .transaction-table tr,
    .transaction-table td { display: block; width: 100%; }
    .transaction-table { min-width: 0; }
    .transaction-table tbody { padding: 10px 14px; }
    .transaction-table tr { margin: 10px 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 7px rgba(15, 23, 42, .035); }
    .transaction-table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); text-align: right; }
    .transaction-table td::before { color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
    .transaction-table td:last-child { border-bottom: 0; }
    .transaction-table .money-column { text-align: right; }
    .transaction-memo { max-width: none; white-space: normal; }
    .transaction-review { min-width: 0; text-align: left !important; }
    .transaction-review .ai-suggestion { grid-column: 1 / -1; }
    .transaction-empty { display: block !important; }
    .transaction-empty::before { content: none !important; }
    .transaction-pagination { align-items: stretch; flex-direction: column; padding: 18px; }
    .transaction-pagination > div { overflow-x: auto; }
    .filter-grid { grid-template-columns: 1fr; }
    .filter-header,
    .filter-body,
    .filter-footer { padding-inline: 18px; }
}

.notification-button {
    position: relative;
    display: inline-grid;
    width: 42px;
    height: 42px;
    margin-right: 8px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
}

.notification-button:hover,
.notification-button:focus-visible {
    border-color: var(--primary);
    background: #f8f9ff;
}

.notification-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.notification-button.has-unread { border-color: var(--primary); }
.notification-button.has-unread svg { color: #d99a25; }

.notification-button.has-unread::after {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: #d99a25;
    content: "";
}

.app-notifications-modal-dialog { max-width: min(720px, calc(100vw - 24px)); }
.notification-modal-body { max-height: min(64vh, 580px); overflow-y: auto; }
.notification-modal-footer #app-notifications-dismiss-all { margin-right: auto; }

.notification-empty {
    margin: 0;
    padding: 28px 20px;
    color: var(--muted);
    text-align: center;
}

.notification-empty.error { color: #b42f2f; }

.notification-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: #f8f9ff; }

.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.notification-item.is-unread .notification-dot { background: #d99a25; }

.notification-content { display: grid; min-width: 0; gap: 3px; }
.notification-content strong { line-height: 1.3; }
.notification-content span,
.notification-content small { color: var(--muted); }
.notification-content small { margin-top: 2px; font-size: 12px; }

.notification-actions { display: inline-flex; align-items: center; gap: 7px; }
.notification-actions .primary-button,
.notification-actions .danger-button { padding: 7px 11px; font-size: 13px; }

.button-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin 700ms linear infinite;
}

.button-status-icon {
    display: inline-grid;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
}

.primary-button.async-action-complete { border-color: #187657; background: #187657; }
.primary-button.async-action-failed { border-color: #b42f2f; background: #b42f2f; }

@keyframes button-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    .user-menu-name { display: none; }

    .notification-item { grid-template-columns: 10px minmax(0, 1fr); }
    .notification-actions { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    .button-spinner { animation-duration: 1.4s; }
}

/* Client command center and review rules */
.client-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.summary-card {
    display: grid;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 3px 12px rgb(37 47 74 / 5%);
}

.summary-card span,
.summary-card small { color: var(--muted); }
.summary-card strong { font-size: 28px; line-height: 1.1; }
.summary-card a { color: var(--accent); font-weight: 700; text-decoration: none; }
.client-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.safe-mode-note {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid #b9ded0;
    border-radius: 999px;
    color: #28745d;
    background: #eefaf5;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.client-command-list,
.rule-list { border-top: 1px solid var(--line); }

.client-command-row,
.rule-list-row {
    display: grid;
    grid-template-columns: auto minmax(190px, 1.5fr) repeat(4, minmax(95px, .75fr)) auto auto;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
    transition: background-color 140ms ease;
}

.client-command-row:hover,
.client-command-row:focus-visible,
.rule-list-row:hover,
.rule-list-row:focus-visible { color: var(--text); background: #f8f9ff; }
.client-command-row.is-archived { opacity: .65; }
.client-command-row > span:not(.client-avatar),
.rule-list-row > span { display: grid; gap: 2px; min-width: 0; }
.client-command-row small,
.rule-list-row small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.client-avatar {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--accent), #7a6ce7);
    font-weight: 800;
}

.client-avatar.large { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; }
.client-command-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-text { color: #966c1e; }
.connection-text.connected { color: #28745d; }

.workflow-pill {
    display: inline-flex !important;
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: #5f6680;
    background: #eef0f7;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-in_progress,
.status-active,
.status-pending { color: #3558a5; background: #edf2ff; }
.status-waiting,
.status-conflict,
.status-overridden { color: #9a5d1b; background: #fff2df; }
.status-review,
.status-preview { color: #6746a7; background: #f1eaff; }
.status-complete,
.status-approved { color: #28745d; background: #eaf8f2; }
.status-paused,
.status-rejected,
.status-stale { color: #8b4b4b; background: #faeded; }

.client-empty-state { display: grid; justify-items: center; gap: 10px; padding: 54px 24px; text-align: center; }
.client-empty-state h2,
.client-empty-state p { margin: 0; }
.client-empty-state p { max-width: 560px; color: var(--muted); }
.focused-form-panel,
.rule-form-panel { max-width: 960px; margin: 0 auto; }
.rule-sentence-builder { display: grid; gap: 12px; padding: 18px; border: 1px solid #cad3ff; border-radius: 12px; background: #f8f9ff; }
.rule-sentence-builder h3 { margin: 0; font-size: 18px; }
.rule-sentence { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rule-sentence > strong { color: var(--muted); font-size: 13px; }
.rule-sentence > input,
.rule-sentence > select { min-height: 42px; flex: 1 1 190px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 9px 11px; }
.rule-primary-condition { flex: 4 1 500px; }
.rule-advanced-options { border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.rule-advanced-options > summary { cursor: pointer; padding: 15px 18px; font-weight: 800; }
.rule-advanced-options[open] > summary { border-bottom: 1px solid var(--line); }
.rule-advanced-body { display: grid; gap: 18px; padding: 18px; }
.client-form-grid,
.rule-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.client-form-wide,
.rule-form-wide { grid-column: 1 / -1; }
.client-active-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; }
.client-active-toggle span { display: grid; gap: 3px; }
.client-active-toggle small { color: var(--muted); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }

.page-parent-link { color: var(--primary); text-decoration: none; }
.page-parent-link:hover,
.page-parent-link:focus-visible { color: var(--primary); text-decoration: underline; }

.client-workspace-nav {
    display: flex;
    gap: 28px;
    margin: -8px 0 20px;
    padding: 0 20px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.client-workspace-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 1px 11px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.client-workspace-nav a:hover,
.client-workspace-nav a:focus-visible,
.client-workspace-nav a.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
.client-workspace-nav a span { padding: 1px 6px; border-radius: 999px; background: #eef0f7; font-size: 11px; }

.client-workspace-summary { margin-bottom: 16px; padding: 22px; }
.client-workspace-identity { display: flex; align-items: center; gap: 14px; }
.client-workspace-identity p { margin: 3px 0 0; color: var(--muted); }
.client-workspace-title-line { display: flex; align-items: center; gap: 10px; }
.client-workspace-title-line h2 { font-size: 20px; }
.client-workspace-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 20px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.client-workspace-metrics div { min-width: 0; padding: 12px 14px; background: var(--surface); }
.client-workspace-metrics dt { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.client-workspace-metrics dd { margin: 3px 0 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.client-attention-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid #f0d5ad;
    border-radius: 8px;
    color: #7d5019;
    background: #fff8ed;
}

.client-attention-strip.is-clear { border-color: #c9e5db; color: #28745d; background: #f1faf6; }
.client-attention-strip > div { display: flex; align-items: center; gap: 11px; }
.client-attention-strip svg { flex: 0 0 auto; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.client-attention-strip > div > span { display: grid; }
.client-attention-strip small { color: var(--muted); }
.client-attention-strip > a { flex: 0 0 auto; color: inherit; font-weight: 800; text-decoration: none; }
.client-attention-strip > a:hover,
.client-attention-strip > a:focus-visible { text-decoration: underline; }

.client-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); gap: 20px; align-items: start; }
.rule-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.rule-impact-panel { margin-bottom: 20px; }
.rule-impact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 20px 20px; }
.rule-impact-grid > div { display: grid; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfe; }
.rule-impact-grid strong { font-size: 24px; }
.rule-impact-grid span,
.rule-impact-note { color: var(--muted); font-size: 12px; }
.rule-impact-grid .has-warning { border-color: #e9c273; background: #fff9ed; }
.rule-impact-note { margin: -8px 20px 18px; }
.client-workspace-aside { display: grid; gap: 20px; }
.client-detail-card .panel-heading { padding-bottom: 16px; }
.client-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--line); }
.client-facts div { display: grid; gap: 4px; padding: 13px; background: var(--surface); }
.client-facts dt { color: var(--muted); font-size: 12px; }
.client-facts dd { margin: 0; font-weight: 700; }
.client-recent-panel { min-width: 0; }
.qbo-client-card { scroll-margin-top: 90px; }
.qbo-client-card .connection-heading { align-items: flex-start; }
.qbo-client-card .connection-title { align-items: flex-start; }
.qbo-client-card .connection-details { grid-template-columns: 1fr; }
.qbo-client-card .connection-actions { align-items: stretch; flex-wrap: wrap; }

.rules-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 24px;
    border: 1px solid #dfe2f1;
    border-radius: 13px;
    background: linear-gradient(135deg, #fbfbff, #f3f6ff);
}

.rules-intro h2,
.rules-intro p { margin-bottom: 4px; }
.rules-intro p { color: var(--muted); }
.rule-list-row { grid-template-columns: auto minmax(220px, 1.5fr) minmax(150px, 1fr) 100px auto auto; }
.rule-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ba1b5; }
.rule-status-dot.status-active { background: #39a77f; }
.rule-status-dot.status-draft { background: #7d72df; }
.rule-status-dot.status-paused { background: #d49346; }

.rule-builder,
.rule-scope { display: grid; gap: 14px; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 11px; }
.rule-builder-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rule-builder-heading legend,
.rule-scope > legend { float: none; width: auto; margin: 0; font-size: 17px; font-weight: 800; }
.rule-builder-heading p,
.scope-targets p { margin: 3px 0 0; color: var(--muted); }
.rule-condition-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 38px; gap: 8px; margin-top: 9px; }
.rule-condition-row input, .rule-condition-row select { min-width: 0; width: 100%; padding: 8px; border: 1px solid #ced4da; border-radius: 5px; background: white; }
.rule-condition-row .rule-remove-condition { grid-column: -2 / -1; }
.rule-form-panel { max-width: none; }
.field textarea { width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 6px; }
.rule-remove-condition { width: 38px; border: 1px solid #efd0d0; border-radius: 7px; color: #a63d3d; background: #fff7f7; font-size: 21px; }
.rule-condition-validation { grid-column: 1 / -1; margin: 0; }
.scope-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scope-choice { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.scope-choice:has(input:checked) { border-color: #8b84dc; background: #f6f5ff; }
.scope-choice span { display: grid; gap: 4px; }
.scope-choice small { color: var(--muted); }
.scope-targets { padding-top: 8px; }
.scope-targets h3 { margin: 0 0 7px; font-size: 14px; }
.scope-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-checkboxes label { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfe; }
.rule-detail-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--muted); }
.rule-condition-summary { display: grid; gap: 10px; margin: 0; padding-left: 23px; }
.rule-results-panel { margin-top: 20px; }
.rule-results-panel .transaction-table td > strong,
.rule-results-panel .transaction-table td > small { display: block; }
.rule-results-panel .transaction-table td > strong { overflow-wrap: anywhere; }
.rule-results-panel .transaction-table .workflow-pill + strong { margin-top: 5px; }

@media (min-width: 768px) {
    .rule-results-panel .transaction-table { min-width: 900px; }
}

@media (max-width: 1100px) {
    .client-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-workspace-grid { grid-template-columns: 1fr; }
    .client-workspace-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-command-row { grid-template-columns: auto minmax(180px, 1fr) repeat(2, minmax(95px, .7fr)) auto auto; }
    .client-command-row > span:nth-child(4),
    .client-command-row > span:nth-child(5) { display: none; }
    .rule-list-row { grid-template-columns: auto minmax(200px, 1fr) 130px auto auto; }
    .rule-list-row > span:nth-child(3) { display: none; }
}

@media (max-width: 767.98px) {
    .client-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .client-summary-grid .summary-card { padding: 16px; }
    .client-command-name strong { white-space: normal; }
    .rule-detail-grid,
    .rule-impact-grid,
    .client-form-grid,
    .rule-form-grid,
    .scope-choice-grid { grid-template-columns: 1fr; }
    .client-command-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .client-command-row > span:not(.client-avatar):not(.client-command-name):not(.workflow-pill),
    .client-command-row > span:last-child { display: none; }
    .rule-list-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .rule-list-row > span:nth-child(4),
    .rule-list-row > span:last-child { display: none; }
    /* Field and operator on the first line; value (and upper value) with the remove button on the second. */
    .rule-condition-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 38px; }
    .rule-condition-row > [data-rule-condition-operator] { grid-column: span 2; }
    .rule-remove-condition { grid-column: 2; justify-self: end; }
    .client-list-heading,
    .rules-intro,
    .rule-builder-heading { align-items: flex-start; flex-direction: column; }
    .rule-sentence { align-items: stretch; flex-direction: column; }
    .rule-sentence > input,
    .rule-sentence > select,
    .rule-primary-condition { width: 100%; flex-basis: auto; }
    .client-workspace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-workspace-aside { grid-template-columns: 1fr; }
    .client-attention-strip { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
    .client-workspace-nav { gap: 22px; margin-right: -18px; margin-left: -18px; padding: 0 18px; }
    .client-workspace-summary { padding: 18px; }
    .client-workspace-title-line { align-items: flex-start; flex-direction: column; gap: 6px; }
    .client-workspace-metrics { grid-template-columns: 1fr; }
}

.transaction-detail-button { padding: 0; border: 0; background: none; color: var(--primary-dark); text-align: left; font-weight: 600; overflow-wrap: break-word; }
.transaction-detail-button:hover, .transaction-detail-button:focus-visible { text-decoration: underline; }
.transaction-review-layout > * { min-width: 0; }
.transaction-detail-panel { margin: 12px; align-self: start; scroll-margin-top: 90px; }
.transaction-detail-panel .card-header { padding: 18px; }
.transaction-detail-panel .nav-link { padding: 8px 12px; }
@media (min-width: 1200px) {
    .transaction-review-layout.has-detail { display: grid; grid-template-columns: minmax(0, 1fr) 370px; }
    /* Column classes, not positions: the Number column is optional (Codex review R1). */
    .has-detail .transaction-review-table .col-client,
    .has-detail .transaction-review-table .col-type,
    .has-detail .transaction-review-table .col-number { display: none; }
    .has-detail .transaction-review-table th.transaction-selection-column { width: 7%; }
    .has-detail .transaction-review-table th.col-date { width: 16%; }
    .has-detail .transaction-review-table th.col-name { width: 22%; }
    .has-detail .transaction-review-table th.col-review { width: 35%; }
    .has-detail .transaction-review-table th.col-amount { width: 20%; }
    .has-detail .transaction-review-table .ai-suggestion p,
    .has-detail .transaction-review-table .ai-rule-candidate { display: none; }
    .has-detail .transaction-review-table th, .has-detail .transaction-review-table td { padding: 12px 8px; }
}

/* Books report package (screen and print). */
.report-table td, .report-table th { white-space: nowrap; }
.report-table td:first-child { white-space: normal; }
.report-table .report-section th { background: #f3f5f8; font-weight: 600; }
/* Footer spacer rows are only shown when printing (reports/print). */
.report-print-spacer { display: none; }
.report-table .report-end td { border: 0; padding: 0; height: 0; line-height: 0; }
.report-table .report-header td { font-weight: 600; }
.report-table .report-total td { font-weight: 600; border-top: 1px solid #adb5bd; }
.report-table .report-computed td { font-weight: 600; background: #fafbfc; }
.report-table .report-net td { font-weight: 700; border-top: 1px solid #212529; border-bottom: 3px double #212529; }
.report-notes { padding-left: 1.5rem; }

/* Bootstrap components use the Decyml brand color, matching the app's own buttons. */
:root { --bs-primary: #556ee6; --bs-primary-rgb: 85, 110, 230; --bs-link-color: #556ee6; --bs-link-color-rgb: 85, 110, 230; --bs-link-hover-color: #4458b8; --bs-link-hover-color-rgb: 68, 88, 184; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); }
.btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark); --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--primary); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* The client overview's recent-activity table has five columns and fits its card. */
.client-recent-panel .transaction-table { min-width: 0; }

/* One client selected: its name is in the page header, so the Client column is hidden. */
.transaction-review-table.single-client .col-client { display: none; }
/* AI explanations show two lines in the list; the detail panel has the full text. */
.transaction-review-table .ai-suggestion p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 520px) {
    /* Phone cards keep date, name, account and amount; type and number are in the detail panel. */
    .transaction-review-table td.col-type,
    .transaction-review-table td.col-number { display: none; }
}

/* Statement review: rows beside the original PDF on wide screens, and a sticky confirm bar with the live balance check. */
.statement-pdf-pane { display: none; }
@media (min-width: 1200px) {
    .statement-review-layout.with-pdf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
    .statement-review-layout.with-pdf .statement-pdf-pane { display: block; position: sticky; top: 84px; height: calc(100vh - 100px); }
}
.statement-pdf-pane iframe { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.statement-rows-table { min-width: 560px; }
.statement-rows-table .col-date { width: 142px; }
.statement-rows-table .col-check { width: 90px; }
.statement-rows-table th { white-space: nowrap; }
.statement-rows-table .form-control { padding-right: 8px; padding-left: 8px; }
/* Placeholders label the fields on phones, where the header row is hidden; on wider screens the headers do. */
@media (min-width: 576px) {
    .statement-rows-table .form-control::placeholder { color: transparent; }
}
.statement-rows-table .col-amount { width: 112px; }
.statement-rows-table .col-remove { width: 34px; }
/* Phones: each statement row is a small card (date and amount, then description, then check number). */
@media (max-width: 575.98px) {
    .statement-rows-table { display: block; min-width: 0; }
    .statement-rows-table thead,
    .statement-rows-table colgroup { display: none; }
    .statement-rows-table tbody { display: block; width: 100%; }
    .statement-rows-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; grid-template-areas: "date amount remove" "desc desc desc" "check check check"; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .statement-rows-table td { display: block; padding: 0; border: 0; }
    .statement-rows-table td:nth-child(1) { grid-area: date; }
    .statement-rows-table td:nth-child(2) { grid-area: desc; }
    .statement-rows-table td:nth-child(3) { grid-area: check; }
    .statement-rows-table td:nth-child(4) { grid-area: amount; }
    .statement-rows-table td:nth-child(5) { grid-area: remove; align-self: center; }
}
.statement-rows-table td { padding: 4px 4px; vertical-align: middle; }
.statement-row-remove { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 20px; line-height: 1; }
.statement-row-remove:hover, .statement-row-remove:focus-visible { color: #b42318; background: #fdecea; }
.statement-confirm-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 -4px 14px rgba(15, 23, 42, .07); }
.statement-balance-status { flex-basis: 100%; font-size: 13px; font-weight: 600; }
.statement-balance-status[data-state="balanced"] { color: #0f7b4b; }
.statement-balance-status[data-state="off"] { color: #b42318; }
.statement-balance-status[data-state="unknown"] { color: var(--muted); }
.statement-confirm-bar .form-check { flex: 1 1 320px; }
.check-pdf-frame { display: block; width: 100%; height: min(70vh, 720px); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.statement-danger-zone { margin-top: 32px; padding: 16px; border: 1px solid #f1c9c5; border-radius: 8px; background: #fffafa; }

/* Client workspace tabs on small screens: tighter, with a fade that shows more tabs scroll into view. */
.client-workspace-nav { scrollbar-width: thin; }
@media (max-width: 767.98px) {
    .client-workspace-nav { gap: 18px; padding: 0 14px; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
    .client-recent-panel .recent-type { display: none !important; }
}

/* The avatar gradient used an undefined --accent, which dropped the whole background and hid the white initial. */
.client-avatar { background: linear-gradient(145deg, var(--primary), #7a6ce7); }
/* Clients whose books are in Decyml have no QuickBooks card, so recent activity uses the full width. */
.client-workspace-grid.single { grid-template-columns: minmax(0, 1fr); }

/* Phone transaction cards: name and amount on the first line, date and category below, checkbox at the side. */
@media (max-width: 520px) {
    .transaction-review-table tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "select name amount" "select date date" "select client client" "select review review"; column-gap: 10px; row-gap: 4px; padding: 12px 14px; }
    .transaction-review-table td { display: block; padding: 0; border: 0; text-align: left; }
    .transaction-review-table td::before { content: none; }
    .transaction-review-table td.transaction-selection-column { grid-area: select; padding-top: 2px; }
    .transaction-review-table td.col-date { grid-area: date; color: var(--muted); font-size: 12px; }
    .transaction-review-table td.col-client { grid-area: client; color: var(--muted); font-size: 12px; }
    .transaction-review-table td.col-name { grid-area: name; font-weight: 600; min-width: 0; }
    .transaction-review-table td.col-review { grid-area: review; }
    .transaction-review-table td.col-amount { grid-area: amount; text-align: right; white-space: nowrap; }
    .transaction-review-table td.transaction-empty { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    /* Review counts as a compact three-across grid so the list starts sooner on phones. */
    .transaction-review-counts { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
    .transaction-review-counts > div { flex: 0 0 33.333%; max-width: 33.333%; }
    .transaction-review-counts .card-body { padding: 10px; }
    .transaction-review-counts .h3 { margin-bottom: 2px; font-size: 1.25rem; }
    .transaction-review-counts .small { display: block; font-size: 11px; line-height: 1.25; }
    [data-transaction-analyze-action] { white-space: nowrap; }
}
.client-attention-strip > a { padding: 4px 0; white-space: nowrap; }
@media (max-width: 520px) {
    /* Right-aligned actions overflowed off the left edge when wider than the phone; wrap them from the left instead. */
    .transaction-toolbar-actions { flex-wrap: wrap; justify-content: flex-start; }
}

/* A scrolling table wrapper must contain its absolutely positioned children (visually hidden header labels);
   otherwise they escape the scroll area and widen the whole page on phones. */
.table-responsive { position: relative; }

/* Phones: simple tables stack each row, with the column name above each value (data-label). */
@media (max-width: 575.98px) {
    .stack-table thead { display: none; }
    .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
    .stack-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .stack-table td { padding: 3px 0; border: 0; }
    .stack-table td[data-label]::before { display: block; color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .stack-table td.stack-table-empty { display: none; }
    .stack-table td.text-end { text-align: left !important; }
}

/* Small standalone links: at least a 24px tall tap target. */
.tap-link { display: inline-block; padding: 4px 0; }

/* Rule builder: "Add condition" keeps its own width, and the value takes the upper value's column unless "between" shows it. */
.rule-builder > [data-add-rule-condition] { justify-self: start; }
.rule-condition-row:has(> [data-rule-condition-value-to][hidden]) > input[name$="[value]"] { grid-column: span 2; }
.field label .field-hint { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }

/* Client overview on phones: recent activity as two-line rows (name and amount, then date and category). */
@media (max-width: 520px) {
    .client-recent-panel .transaction-table tbody { padding: 0; }
    .client-recent-panel .transaction-table tr { display: grid; grid-template-areas: "name amount" "date review"; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
    .client-recent-panel .transaction-table td { display: block; padding: 0; border: 0; text-align: left; }
    .client-recent-panel .transaction-table td::before { content: none; }
    .client-recent-panel .transaction-table td:nth-child(1) { grid-area: date; color: var(--muted); font-size: 12px; }
    .client-recent-panel .transaction-table td:nth-child(3) { grid-area: name; font-weight: 600; overflow-wrap: break-word; }
    .client-recent-panel .transaction-table td:nth-child(4) { grid-area: review; font-size: 12px; text-align: right; }
    .client-recent-panel .transaction-table td:nth-child(5) { grid-area: amount; text-align: right; }
    .client-recent-panel .transaction-table td.transaction-empty { grid-column: 1 / -1; }
}

/* Dense review rows (demo review #82): one line per proposal with its source, category, a short reason, and actions. */
.transaction-review-table td { padding-top: 8px; padding-bottom: 8px; }
.transaction-review-table .col-client { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 28px; }
.review-line + .review-line { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); }
.review-line:not(:has(.review-tag)) { grid-template-columns: minmax(0, 1fr) auto; }
.review-text { min-width: 0; line-height: 1.25; }
.review-text strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.review-text small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.review-flag-text { color: #955f09; font-weight: 600; }
.review-actions { display: inline-flex; gap: 4px; white-space: nowrap; }
.review-actions form { margin: 0; }
.review-tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: #3949a3; background: #e8ebfc; }
.review-tag.rule { color: #3949a3; background: #e8ebfc; }
.review-tag.ai { color: #0f6a52; background: #dff5ec; }
.review-tag.ai.confidence-medium { color: #7a5a06; background: #fcefc7; }
.review-tag.ai.confidence-low { color: #a12a2a; background: #fbd6d6; }
.review-tag.flag { color: #955f09; background: #fbe9bd; }
.review-tag.warn { color: #8a4b00; background: #ffe2c2; }
.review-tag.transfer { color: #0b6282; background: #d7f0f9; }
.review-tag.muted { color: #555b6e; background: #eceef3; }
.small-review-button.neutral { border: 1px solid #d3d7e2; color: #4c5264; }
.small-review-button.neutral:hover,
.small-review-button.neutral:focus-visible { background: #f1f2f6; }
.small-review-button:disabled { cursor: wait; opacity: .75; }
.transaction-detail-panel .review-text strong,
.transaction-detail-panel .review-text small { white-space: normal; }
.transaction-detail-panel .review-line { grid-template-columns: auto minmax(0, 1fr); }
.transaction-detail-panel .review-actions { grid-column: 1 / -1; }
.detail-review-lines:empty { display: none; }
.detail-review-lines { margin-bottom: 12px; }
.review-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.review-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid #cfd5f3; border-radius: 999px; color: var(--primary); background: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
.review-chip span { padding: 0 6px; border-radius: 999px; background: #eef0ff; font-size: 11px; }
.review-chip:hover,
.review-chip:focus-visible { background: #f3f5ff; }
.review-chip.active { border-color: var(--primary); color: #fff; background: var(--primary); }
.review-chip.active span { color: var(--primary); background: #fff; }

/* In-place updates (demo review #60): the changed row flashes, a new item is highlighted, a finished one fades out. */
@keyframes inplace-flash { from { background-color: #fff7d6; } to { background-color: transparent; } }
.inplace-changed,
.inplace-changed > td { animation: inplace-flash 1.8s ease-out; }
.inplace-new,
.inplace-new > td { animation: inplace-flash 2.2s ease-out; box-shadow: inset 3px 0 0 var(--primary); }
.inplace-leaving { opacity: 0; transition: opacity .3s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .inplace-changed, .inplace-changed > td, .inplace-new, .inplace-new > td { animation: none; }
    .inplace-leaving { transition: none; }
}

/* Rule library grouped by what the rule does, with a publish checkbox on previewed drafts (demo review #35, #44). */
.rule-group-heading { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rule-group-heading span { padding: 0 7px; border-radius: 999px; background: #eef0f6; font-size: 11px; letter-spacing: 0; }
.rules-list-panel .rule-list-row { grid-template-columns: 22px minmax(220px, 1.6fr) minmax(150px, 1fr) 130px auto; }
.rules-list-panel .rule-list-row > .rule-select { display: flex; align-items: center; }
.rule-list-main { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.rule-list-main > span:last-child { display: grid; gap: 2px; min-width: 0; }
.rule-list-main:hover strong,
.rule-list-main:focus-visible strong { color: var(--primary); text-decoration: underline; }
.workflow-pill.status-draft { white-space: nowrap; }
.starter-group { margin: 0 0 14px; padding: 0; border: 0; }
.starter-group legend { margin-bottom: 6px; }
.starter-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.starter-rule + .starter-rule { margin-top: 6px; }
.starter-rule:hover { background: #f8f9ff; }
.starter-rule input { margin-top: 4px; }
.starter-rule strong,
.starter-rule small { display: block; }
.starter-rule small { color: var(--muted); font-size: 12px; }
.starter-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.starter-count.has-matches { color: var(--primary); font-weight: 700; }
.starter-threshold input { max-width: 180px; }
@media (max-width: 1100px) {
    .rules-list-panel .rule-list-row { grid-template-columns: 22px minmax(200px, 1fr) 130px auto; }
    .rules-list-panel .rule-list-row > span:nth-child(3) { display: none; }
}
@media (max-width: 767.98px) {
    .rules-list-panel .rule-list-row { grid-template-columns: 22px minmax(0, 1fr) auto; }
    .rules-list-panel .rule-list-row > span:nth-child(4) { display: none; }
    .rules-list-panel .rule-list-row > span:last-child { display: inline-flex; }
}

/* Chart of accounts: template cards (demo review #58) and an Edit button instead of a bare disclosure link. */
.chart-template-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; }
.account-edit > summary { list-style: none; }
.account-edit > summary::-webkit-details-marker { display: none; }
.account-edit[open] > summary { background: #eef0f6; }

/* Sticky action bar for long forms (owner preference, demo review #48): the save action stays in view. */
.form-action-bar { position: sticky; top: 76px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 6px 16px rgba(15, 23, 42, .07); }
.form-action-bar .statement-balance-status { flex-basis: auto; }
@media (max-width: 767.98px) { .form-action-bar { top: 72px; } }

/* Before you deliver: one callout per open item, each with the button that fixes it (demo review #109). */
.deliver-items { display: grid; gap: 8px; margin-bottom: 16px; }
.deliver-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border: 1px solid #f3d9a4; border-left: 3px solid #d99a25; border-radius: 8px; background: #fffaf0; font-size: 14px; }
.deliver-item > span { flex: 1 1 320px; }
.deliver-item .btn { white-space: nowrap; }

/* Rule page (demo review #36, #49): one plain sentence first, then the facts in a compact row. */
.rule-sentence { font-size: 17px; font-weight: 600; color: var(--ink); }
.rule-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.rule-facts > div { min-width: 160px; }
.rule-facts dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rule-facts dd { margin: 0; }
.rule-matches-table td { vertical-align: top; }
[data-rule-edit-fields]:disabled { opacity: .85; }

/* Searchable account pickers (select2, demo review #102) sized and colored like Bootstrap's form-select. */
.select2-container--default .select2-selection--single { height: calc(1.5em + .75rem + 2px); border: 1px solid var(--bs-border-color, #ced4da); border-radius: var(--bs-border-radius, .375rem); background: var(--surface); }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: .375rem 2.25rem .375rem .75rem; line-height: 1.5; color: var(--ink); }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: .5rem; }
.select2-container.select2-sm .select2-selection--single { height: calc(1.5em + .5rem + 2px); border-radius: var(--bs-border-radius-sm, .25rem); font-size: .875rem; }
.select2-container.select2-sm .select2-selection--single .select2-selection__rendered { padding: .25rem 2rem .25rem .5rem; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: #aab7f3; box-shadow: 0 0 0 .25rem rgba(85, 110, 230, .25); outline: 0; }
.select2-container--default.select2-container--disabled .select2-selection--single { background: var(--bs-secondary-bg, #e9ecef); }
select.is-invalid + .select2-container .select2-selection--single { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.select2-dropdown { border-color: var(--bs-border-color, #ced4da); font-size: .875rem; z-index: 1060; }
.select2-container--default .select2-results__group { color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--primary); }
.select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--bs-border-color, #ced4da); border-radius: var(--bs-border-radius-sm, .25rem); padding: .25rem .5rem; }

/* Workflows list: a dashed "New workflow" placeholder after the last template (demo review #148). */
.workflow-new-card { display: flex; width: 100%; height: 100%; min-height: 150px; align-items: center; justify-content: center; gap: 8px; border: 2px dashed #c3cadb; border-radius: 8px; background: transparent; color: var(--primary); font-weight: 600; }
.workflow-new-card span { font-size: 22px; line-height: 1; }
.workflow-new-card:hover, .workflow-new-card:focus-visible { border-color: var(--primary); background: #f5f6ff; }

/* Monthly run page (demo review #149-#151): brand color for the current step, who and when per step, locked steps
   that say what they wait on, and the step review kept in view at the foot of the current step. */
.run-step-nav { --bs-list-group-active-bg: var(--primary); --bs-list-group-active-border-color: var(--primary); }
.run-step-marker { display: inline-grid; flex: 0 0 22px; height: 22px; place-items: center; border-radius: 50%; background: #eef0f6; color: var(--ink); font-size: 12px; font-weight: 700; }
.run-step-nav .active .run-step-marker { background: rgba(255, 255, 255, .25); color: #fff; }
.run-step-nav .is-locked { color: var(--muted); }
.run-step-nav small { margin-top: 3px; padding-left: 30px; }
.run-overdue { color: #c23b3b; font-weight: 600; }
.run-step-nav .active .run-overdue { color: #ffe0e0; }
.run-step-locked { padding: 8px 12px; border-left: 3px solid #b9c1d3; border-radius: 4px; background: #f6f7fa; color: #4a5163; font-size: 14px; }
.run-evidence { padding: 8px 12px; border-radius: 6px; background: #f3f6fb; }
.run-review-bar { position: sticky; bottom: 0; z-index: 4; margin: 16px -16px -16px; padding: 14px 16px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; background: #fff; box-shadow: 0 -6px 14px rgba(15, 23, 42, .08); }
.transaction-drop-zone.is-too-large { border-style: solid; border-color: #e3a3a3; background: #fff6f6; }
.transaction-drop-zone.is-too-large .transaction-file-name { color: #b42318; }

/* Long settings forms keep Save in view (owner preference, demo review #48); short forms are unaffected. */
.focused-form-panel .form-actions { position: sticky; bottom: 0; z-index: 3; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line); background: var(--surface); }

/* P&L comparison tiles (demo review #142): current figure, change and a simple current-versus-prior bar. */
.kpi-tile .kpi-delta { display: inline-block; font-size: 13px; font-weight: 600; color: var(--muted); }
.kpi-tile .kpi-delta.is-better { color: #1f8a5b; }
.kpi-tile .kpi-delta.is-worse { color: #c23b3b; }
.kpi-bars { display: grid; gap: 4px; margin-top: 10px; }
.kpi-bar { display: block; height: 6px; min-width: 2px; border-radius: 3px; background: #d5dae6; }
.kpi-bar.is-current { background: var(--primary); }
.kpi-bar.is-negative { background: #e08a8a; }

/* Header: the firm and role under the user's name (demo review #9). */
.user-menu-name { display: grid; text-align: left; line-height: 1.2; }
.user-menu-firm { color: var(--muted); font-size: 11px; font-weight: 400; }

/* New-firm setup checklist on My Work (demo review #7). */
.setup-mark { display: inline-grid; flex: 0 0 24px; height: 24px; place-items: center; border-radius: 50%; background: #eef0f6; color: var(--ink); font-size: 12px; font-weight: 700; }
.setup-mark.is-done { background: #dff4ea; color: #1f8a5b; }

/* Client setup (demo review #14, #17, #19, #20): next steps after creating a client, tags as chips beside the
   cadence, a neutral CSV import state, and the Clients breadcrumb that looks like the link it is. */
.next-steps-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-left: 3px solid var(--primary); }
.client-tag-chip { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; background: #f6f7fb; color: var(--ink); font-size: 11px; font-weight: 500; }
.connection-text.neutral { color: var(--muted); }
.statement-waiting-pdf { display: block; width: 100%; height: 70vh; min-height: 420px; border: 0; }

/* My Work on phones: each task is a card with its client, due date and action in view (Codex review R7). */
@media (max-width: 575.98px) {
    .work-table td.work-actions { text-align: left !important; padding-top: 8px; }
}
@media (max-width: 520px) {
    /* A single client's list hides the client line, so its card has no empty row. */
    .transaction-review-table.single-client tr { grid-template-areas: "select name amount" "select date date" "select review review"; }
}

/* Close state under the client name (Codex review R3): the run's next step and owner, or a hand-set status labelled as such. */
.client-close-detail { color: var(--ink) !important; }
.client-close-detail.is-manual { color: var(--muted) !important; font-style: italic; }

/* My Work (daily-work plan): approvals and the owner's unassigned list sit above ready work; assigning stays on the page. */
.work-assign .form-select { min-width: 170px; }
.work-waiting summary { cursor: pointer; }
@media (max-width: 575.98px) { .work-assign { justify-content: flex-start !important; } }

/* UX rehearsal 2026-09-25. The shared confirm dialog sits above any open modal. */
.app-confirm-modal { z-index: 1065; }
.modal-backdrop ~ .modal-backdrop { z-index: 1060; }
/* The workflow return bar stays one line; the link truncates instead of wrapping on phones. */
.workflow-return > a { min-width: 0; }
@media (max-width: 575.98px) { .workflow-return { padding: 8px 12px; font-size: 14px; } }
/* Transactions toolbar: search and actions share one line at laptop widths. */
@media (min-width: 821px) {
    .transaction-toolbar { grid-template-columns: minmax(280px, 1fr) auto; row-gap: 14px; }
    .transaction-toolbar .transaction-search { margin-left: 0; }
    .transaction-toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
}
.transaction-toolbar-actions .primary-button,
.transaction-toolbar-actions .secondary-button { white-space: nowrap; }
/* Searchable selects use Bootstrap's form-select chevron. */
.select2-container--default .select2-selection--single .select2-selection__arrow { width: 16px; right: .75rem; background: var(--bs-form-select-bg-img) no-repeat center / 16px 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container.select2-sm .select2-selection--single .select2-selection__arrow { right: .5rem; }
/* The client QuickBooks card sits in a narrow column: its status badge wraps under the title instead of squeezing it. */
.qbo-client-card .connection-heading { flex-wrap: wrap; row-gap: 10px; }
.qbo-client-card .connection-title { flex: 1 1 220px; }
.transaction-connection-callout .secondary-button { white-space: nowrap; }
@media (max-width: 520px) { .transaction-connection-callout .secondary-button { width: 100%; margin-left: 0 !important; } }
/* Statement rows name their account under the type: give the Type column room for it on one line. */
@media (min-width: 1200px) {
    .transaction-review-table th.col-type { width: 10%; }
    .transaction-review-table th.col-review { width: 29%; }
}
.transaction-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The status badge always sits under the QuickBooks title; beside it, the title text was squeezed into a narrow column. */
.qbo-client-card .connection-title { flex-basis: 100%; }
/* Two-factor settings inside the app: the same narrow form as sign-in, in a panel. */
.two-factor-panel { max-width: 36rem; }
.recovery-code-option { margin: 4px 0 8px; }
.recovery-code-option > summary { margin-bottom: 8px; color: var(--primary); cursor: pointer; }
/* QuickBooks attachments (2026-10-05): receipts on a transaction's Source tab, and a posted check's image status. The
   shared drop zone is compact inside the narrow detail panel. */
.quickbooks-attachment-list { margin: 0 0 10px; }
.quickbooks-attachment { padding: 8px 0; border-top: 1px solid #eceef3; }
.quickbooks-attachment:last-child { border-bottom: 1px solid #eceef3; }
.quickbooks-attachment-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.quickbooks-attachment-file > a { min-width: 0; overflow-wrap: anywhere; }
.quickbooks-attachment-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.quickbooks-attachments .transaction-drop-zone { min-height: 0; padding: 14px; }
.quickbooks-attachments .transaction-drop-icon { width: 32px; height: 32px; }
.quickbooks-attachments .transaction-drop-icon svg { width: 18px; height: 18px; }
.quickbooks-attachments .transaction-drop-zone p { margin: 6px 0 8px; }
.quickbooks-check-image { margin: 0 0 12px; }
/* QuickBooks transaction edits (2026-10-05): the detail panel's Edit for QuickBooks section, with what QuickBooks shows
   now as a two-column list, a sticky Save bar sized for the narrow panel, and compact split lines. */
.qb-edits-now { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin-bottom: 10px; }
.qb-edits-now dt { color: var(--muted); font-weight: 500; }
.qb-edits-now dd { margin: 0; min-width: 0; }
.qb-edits-pending .review-line { min-width: 0; }
.qb-edit-bar { top: 72px; margin-bottom: 10px; padding: 8px 10px; }
.qb-edit-split fieldset { margin-top: 6px; }
.qb-edit-line { margin-bottom: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.qb-edit-line .form-check { min-height: 0; }
/* QuickBooks vendors (2026-10-05): the dense vendor list with its filters and search, duplicate groups, and the merge
   dialog. */
.vendor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.vendor-toolbar .vendor-search { flex: 0 1 240px; margin-left: auto; }
.vendor-table { font-size: 13px; }
.vendor-table th, .vendor-table td { padding-top: 6px; padding-bottom: 6px; }
.vendor-table .vendor-select { width: 28px; }
.vendor-table .vendor-email { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendor-table .vendor-address { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendor-table .vendor-change { min-width: 120px; }
.vendor-table .vendor-actions { text-align: right; white-space: nowrap; }
.vendor-table .vendor-menu-button::after { display: none; }
.vendor-table tr.is-inactive td { color: var(--muted); }
.vendor-table .vendor-group-row th { padding-top: 10px; background: var(--canvas); font-weight: 600; }
.vendor-merge-table td { vertical-align: middle; }
@media (max-width: 575.98px) { .vendor-toolbar .vendor-search { flex-basis: 100%; margin-left: 0; } }

/* Client contacts (2026-10-06): form section legends, the client search box, and link-style buttons on sign-in pages. */
.client-form-legend { margin-bottom: 6px; color: var(--ink); font-size: 15px; font-weight: 600; }
.client-search-input { width: 240px; }
.auth-switch .auth-link-button { padding: 0; border: 0; background: none; color: var(--primary-dark); font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 575.98px) { .client-search-input { width: 100%; } }
/* Client overview (2026-10-06): the primary contact sits at the right of the client identity, below it on small screens. */
.client-workspace-identity { flex-wrap: wrap; }
.client-workspace-contact { margin-left: auto; min-width: 0; font-size: 13px; text-align: right; }
.client-workspace-contact-label { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.client-workspace-contact-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; }
.client-workspace-contact-links a { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .client-workspace-contact { flex-basis: 100%; margin-left: 0; text-align: left; }
    .client-workspace-contact-links { justify-content: flex-start; }
}