/* ==========================================================================
   SYMMETRA pages — layout for each workspace page (companies & groups,
   general ledger, chart of accounts, additional journals, cash-flow settings,
   budget, settings, overview). Components come from symmetra-components.css;
   this file only arranges them and handles page-specific pieces.
   ========================================================================== */

@layer pages {

  /* --------------------------------------------------- shared page bits */
  .toolbar, .compact-toolbar, .gl-toolbar, .budget-filter-bar, .cashflow-filter-row, .global-coa-headbar,
  .currency-control-grid, .integration-inline-actions {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2-5);
    margin-bottom: var(--space-3);
  }
  .toolbar > label, .gl-toolbar > label, .workspace-filter, .budget-filter-field, .gl-company-field {
    display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
    font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--muted);
    letter-spacing: var(--tracking-caps); text-transform: uppercase;
  }
  .toolbar > label > span, .workspace-filter > span, .budget-filter-field > span, .gl-company-field > span,
  .toolbar > label > .muted { font-size: inherit; color: inherit; font-weight: inherit; letter-spacing: inherit; }
  .toolbar > label select, .toolbar > label input, .workspace-filter select, .workspace-filter input,
  .budget-filter-field select, .budget-filter-field input { text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); min-width: 180px; }
  .workflow-guidance, .preview-guidance, .budget-guidance, .cashflow-guidance {
    font-size: var(--text-xs); color: var(--muted);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
  }
  .preview-heading, .section-kicker, .integration-kicker {
    font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--muted);
    letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: var(--space-4) 0 var(--space-2);
  }
  .two-col, .integration-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .two-col > .panel + .panel, .companies-grid > .panel + .panel { margin-top: 0; }
  @media (max-width: 1100px) { .two-col, .integration-two-col { grid-template-columns: 1fr; } }
  .aje-options { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; padding: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
  .aje-options label { display: block; width: 200px; }
  .aje-options .muted { flex: 1 1 260px; font-size: var(--text-xs); }
  .integration-memory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-2); }
  .integration-memory-grid > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2); }
  .integration-memory-grid span { font-size: var(--text-xs); color: var(--muted); }
  .integration-memory-grid strong { font-size: var(--text-md, 15px); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text); }
  .workspace-action-divider, .budget-act-divider { width: 1px; height: 20px; background: var(--border); margin: 0 var(--space-1); }
  .help-btn { --btn-fg: var(--muted); }

  /* long tables scroll inside their panel instead of stretching the page */
  .ledger-table, .coa-global-table-scroll, .cashflow-workbench-scroll, .currency-table, .budget-table-wrap,
  .mapping-table-scroll, .integration-mail-table {
    max-height: min(68vh, 760px);
  }
  .budget-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }

  /* ----------------------------------------------- companies & groups */
  .companies-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .company-directory-table td { height: 48px; }
  .co-name-cell { display: flex; align-items: center; gap: var(--space-2-5); }
  .co-name-text strong { font-weight: var(--fw-semibold); }
  .group-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--space-3); }
  .directory-group-card {
    padding: var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
    display: flex; flex-direction: column; gap: var(--space-2-5);
  }
  .directory-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
  .directory-group-head h3 { font-size: var(--text-md); margin: 0 0 2px; }
  .directory-group-head .muted { font-size: var(--text-xs); }
  .directory-group-actions { display: flex; gap: var(--space-1); }
  .directory-group-card p { color: var(--text-2); font-size: var(--text-sm); }
  .directory-group-members { display: flex; flex-wrap: wrap; gap: var(--space-1-5); padding-top: var(--space-2-5); border-top: 1px solid var(--border-subtle); }

  /* company overview popup */
  .company-overview, .co-overview { display: flex; flex-direction: column; gap: var(--space-4); }
  .co-overview-head, .company-overview-head { display: flex; align-items: center; gap: var(--space-3); }

  /* ------------------------------------------------------ general ledger */
  .gl-page-stack, .gl-workflow-stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .gl-page-stack > .panel + .panel { margin-top: 0; }
  .gl-minimal-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
  .gl-minimal-bar__identity { display: flex; align-items: flex-end; gap: var(--space-3); min-width: 0; flex-wrap: wrap; }
  .gl-minimal-bar__identity select { min-width: 240px; }
  .gl-minimal-bar__file {
    display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--control-md);
    color: var(--muted); font-size: var(--text-xs); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gl-minimal-bar__file::before {
    content: ""; width: 14px; height: 14px; flex: none; opacity: .7;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M14 3.5H7.5A2 2 0 0 0 5.5 5.5v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M14 3.5H7.5A2 2 0 0 0 5.5 5.5v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .gl-minimal-bar__actions { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
  .preview-summary {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr)); gap: 0;
    border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
    background: var(--surface);
    margin-bottom: var(--space-3);
  }
  .preview-summary > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface); min-width: 0; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
  .preview-summary strong {
    font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .preview-summary span { font-size: var(--text-xs); color: var(--muted); }
  .gl-layout-block { margin-top: var(--space-2); }
  .gl-format-grid, .gl-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--space-2); }
  .gl-field-tile {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2-5);
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-xs);
  }
  .gl-field-tile__grip { color: var(--subtle); cursor: grab; }
  .gl-column-structure { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
  .gl-stepline { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); }
  .gl-date-order-note, .gl-layout-note { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-2); }
  th.draggable-col { cursor: grab; }
  th.draggable-col:hover { color: var(--text); }
  .gl-preview-pane { display: flex; flex-direction: column; gap: var(--space-3); }
  .ledger-table td .muted { font-size: var(--text-xs); line-height: 16px; }
  .ledger-table td strong { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

  /* --------------------------------------------------- chart of accounts */
  .coa-experience-panel { padding: var(--space-3) var(--space-4) var(--space-4); }
  /* the Chart of Accounts is a full-height workspace: the grid fills the rest of the viewport */
  @media (min-width: 901px) {
    main.main:has(.coa-global-grid) { display: flex; flex-direction: column; height: 100vh; padding-bottom: var(--space-3); }
    main.main:has(.coa-global-grid) > .page-head { width: 100%; }   /* a flex-column child with auto margins shrinks and centres */
    main.main:has(.coa-global-grid) > .coa-experience-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
    main.main:has(.coa-global-grid) .coa-global-table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
  }
  .global-coa-headbar { align-items: flex-end; }
  .global-coa-headbar > input { width: 280px; }
  .coa-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
  .coa-filter-meta { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .header-cell-inline { display: inline-flex; align-items: center; gap: var(--space-1-5); }
  .sort-link {
    color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .sort-link:hover { color: var(--text); }
  .header-cell-inline .btn { height: 22px; width: 22px; padding: 0; font-size: 14px; }
  table.coa-global-grid td { height: 38px; padding-top: 3px; padding-bottom: 3px; }
  .coa-item-cell { min-width: 220px; }
  .coa-name-input {
    width: 100%; height: 30px;
    border-color: transparent; background: transparent; box-shadow: none;
    font-weight: var(--fw-medium); color: var(--text);
    padding-left: var(--space-2);
  }
  .coa-name-input:hover { background: var(--surface-2); }
  .coa-name-input:focus { border-color: var(--focus-border); background: var(--surface); box-shadow: var(--focus-ring); }
  select.coa-select {
    height: 28px; min-width: 0; max-width: 100%;
    border-color: transparent; background-color: transparent;
    font-size: var(--text-sm); color: var(--text-2);
    padding-left: var(--space-2);
    background-position: right 6px center;
  }
  select.coa-select:hover { border-color: var(--border-control); background-color: var(--surface); }
  select.coa-statement-pill { width: 72px; font-weight: var(--fw-medium); color: var(--text); }
  select.coa-category-pill { width: 190px; }
  select.coa-fsli-pill { width: 250px; }
  .coa-account-count {
    min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill);
    background: var(--surface-3); color: var(--muted);
    font-size: var(--text-2xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
  }
  .coa-account-count:not(:disabled):hover { background: var(--accent-soft); color: var(--accent-fg); }
  .coa-row-actions { display: flex; align-items: center; gap: var(--space-1); }
  .coa-row-actions .status-badge { border: 0; background: none; padding: 0; height: auto; color: var(--subtle); font-weight: var(--fw-regular); font-size: var(--text-xs); }
  .coa-row-actions .status-badge::before { display: none; }
  .coa-row-actions .status-badge.locked { color: var(--muted); }
  tr.coa-fsli-row td { background: var(--surface-2); font-weight: var(--fw-semibold); }
  .coa-item-row-meta { font-size: var(--text-xs); color: var(--muted); line-height: 16px; }

  /* mapping status (CoA head and elsewhere) */
  .workspace-status-bar { display: flex; align-items: center; gap: var(--space-2); }
  .mapping-status { position: relative; display: inline-flex; }
  .mapping-status-button { cursor: pointer; }
  .mapping-status.is-complete .mapping-status-button { border-color: var(--success-line); background: var(--success-soft); color: var(--success-fg); }
  .mapping-status.is-pending .mapping-status-button, .mapping-status.has-unmapped .mapping-status-button { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-fg); }
  .mapping-status-dot { display: inline-block; }
  .mapping-status-count { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
  .mapping-status-details {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown);
    min-width: 220px; padding: var(--space-2) var(--space-3);
    background: var(--surface-overlay); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--elev-2); font-size: var(--text-xs); color: var(--text-2);
    opacity: 0; visibility: hidden; transform: translateY(-2px);
    transition: opacity var(--dur-2), transform var(--dur-2), visibility var(--dur-2);
  }
  .mapping-status:hover .mapping-status-details, .mapping-status:focus-within .mapping-status-details { opacity: 1; visibility: visible; transform: none; }
  .mapping-row td, .mapping-coach-row td { vertical-align: middle; }
  .unmapped-accounts-modal .modal-body { padding: 0; }
  .unmapped-accounts-modal table { border-radius: 0; }

  /* ---------------------------------------- journals & cash-flow settings */
  .cashflow-settings-stack { display: flex; flex-direction: column; gap: var(--space-3); }
  .cashflow-settings-stack > .panel + .panel { margin-top: 0; }
  .cashflow-control-strip, .cashflow-workbench-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
    margin-bottom: var(--space-3);
  }
  .cashflow-stats-pill {
    height: auto; padding: 0; border: 0; background: none;
    color: var(--muted); font-size: var(--text-xs); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
    letter-spacing: 0; text-transform: none;
    white-space: normal; overflow: visible; min-width: 0;
  }
  .cashflow-stats-pill::before { content: none; }
  .cashflow-control-strip > *, .cashflow-workbench-head > * { min-width: 0; max-width: 100%; }
  .cashflow-action-row, .cashflow-action-group { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
  .cashflow-action-btn { height: var(--control-sm); font-size: var(--text-xs); }
  .cashflow-action-btn.is-active-mapped, .cashflow-action-btn.is-active-unmapped, .cashflow-action-btn.is-active, .cashflow-action-btn.active {
    --btn-bg: var(--accent-soft); --btn-fg: var(--accent-fg); --btn-border: var(--accent-soft-2);
  }
  .cashflow-action-add { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-border: var(--accent); --btn-bg-hover: var(--accent-hover); height: var(--control-sm); font-size: var(--text-xs); }
  .cashflow-filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); align-items: end; gap: var(--space-2); }
  .cf-cell-contra { max-width: 240px; }
  .cf-cell-contra .muted, .cf-cell-contra:not(:has(strong)) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cashflow-filter-row .workspace-filter input, .cashflow-filter-row .workspace-filter select { width: 100%; min-width: 0; }
  .cashflow-company-select { min-width: 240px; }
  .cashflow-workbench-table td { font-size: var(--text-xs); }
  .cashflow-workbench-table td.right { font-size: var(--text-sm); }
  select.cashflow-category-pill, .cashflow-item-input, .cashflow-note-input { height: 28px; font-size: var(--text-xs); min-width: 150px; }
  select.cashflow-category-pill { border-radius: var(--radius-sm); padding: 0 24px 0 8px; display: inline-block; background-position: right 7px center; }
  .cf-cell-contra { min-width: 200px; max-width: 280px; color: var(--text-2); line-height: 16px; }
  .cashflow-workbench-table td:nth-child(2), .cashflow-workbench-table td:nth-child(3) { white-space: nowrap; }
  .cashflow-workbench-table td .muted, .cashflow-workbench-table td small { display: block; font-size: var(--text-2xs); line-height: 14px; }
  .cf-cell-approve { width: 1%; text-align: right; }
  .cashflow-approve-btn { width: 28px; height: 28px; }
  .cf-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }

  /* --------------------------------------------------------------- budget */
  .budget-filter-panel .budget-filter-bar { margin-bottom: 0; }
  .budget-control-row, .budget-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
  .budget-title-block { display: flex; flex-direction: column; gap: 2px; }
  .budget-meta { font-size: var(--text-xs); }
  .budget-actions, .budget-edit-tools, .budget-view-tools { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
  .budget-head-action { height: var(--control-md); }
  label.budget-upload { cursor: pointer; }
  .budget-act-danger { --btn-fg: var(--danger-fg); --btn-border: var(--danger-line); --btn-bg-hover: var(--danger-soft); }
  table.budget-grid { font-size: var(--text-xs); }
  table.budget-grid th, table.budget-grid td { white-space: nowrap; }
  table.budget-grid thead th { vertical-align: bottom; height: 44px; padding-bottom: 6px; }
  .bud-month-key { display: block; margin-top: 2px; font-size: 10px; font-weight: var(--fw-medium); color: var(--subtle); letter-spacing: 0; text-transform: none; }
  table.budget-grid td.bud-cell { height: 30px; padding: 2px var(--space-2); font-variant-numeric: tabular-nums; }
  table.budget-grid td:first-child, table.budget-grid th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 240px; }
  table.budget-grid thead th:first-child { z-index: 3; background: var(--surface-2); text-align: left; }
  table.budget-grid tr[data-row-account] td { color: var(--text-2); }
  table.budget-grid tr[data-row-account] td.bud-acct { padding-left: 34px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
  .bud-input { width: 84px; height: 26px; padding: 0 6px; text-align: right; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
  .bud-acct { min-width: 220px; }
  tr.bud-section-head { cursor: pointer; user-select: none; }
  tr.bud-section-head td {
    height: 34px; background: var(--surface-2); color: var(--text);
    font-size: var(--text-sm); font-weight: var(--fw-semibold);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
  tr.bud-section-head:hover td { background: var(--surface-3); }
  table.budget-grid tr.bud-section-head td:first-child { background: var(--surface-2); }
  table.budget-grid tr.bud-subtotal td:first-child { background: var(--row-total); }
  table.budget-grid tr.bud-section-total td:first-child { background: var(--surface); }
  /* one quiet accent per P&L section: a 3px bar on the left of the heading */
  tr.bud-section-head td:first-child { box-shadow: inset 3px 0 0 var(--tone, var(--accent)); }
  tr[data-tone="revenue"] { --tone: var(--chart-2); }
  tr[data-tone="cogs"] { --tone: var(--chart-3); }
  tr[data-tone="opex"] { --tone: var(--chart-1); }
  tr[data-tone="other_income"], tr[data-tone="other_expense"] { --tone: var(--chart-4); }
  tr[data-tone="tax"] { --tone: var(--chart-5); }
  .bud-section-title { font-weight: var(--fw-semibold); }
  .bud-chevron { display: inline-block; font-size: 0; color: transparent; overflow: hidden; width: 6px; height: 6px; margin: 0 10px 2px 2px; border-right: 1.5px solid var(--subtle); border-bottom: 1.5px solid var(--subtle); transform: rotate(45deg); vertical-align: middle; transition: transform var(--dur-2); }
  tr.bud-section-head.is-collapsed .bud-chevron, tr.bud-section-head[aria-expanded="false"] .bud-chevron { transform: rotate(-45deg); }
  tr.bud-section-total td { font-weight: var(--fw-semibold); color: var(--text); background: var(--surface); border-top: 1px solid var(--border-strong); }
  tr.bud-subtotal td { font-weight: var(--fw-semibold); color: var(--text); background: var(--row-total); border-top: 1px solid var(--rule-total); border-bottom: 1px solid var(--border-strong); }
  tr.bud-subtotal:last-child td { border-bottom: 3px double var(--rule-total); }
  label.budget-upload { position: relative; overflow: hidden; }
  label.budget-upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .workflow-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: var(--fw-medium); background: var(--neutral-soft); color: var(--neutral-fg); border: 1px solid var(--neutral-line); }
  .workflow-pill.ready, .workflow-pill.approved { background: var(--success-soft); color: var(--success-fg); border-color: var(--success-line); }
  .workflow-pill.draft, .workflow-pill.pending { background: var(--warning-soft); color: var(--warning-fg); border-color: var(--warning-line); }

  /* ------------------------------------------------------------- settings */
  .settings-tabs-shell { display: flex; flex-direction: column; }
  .settings-tabpanel > * + * { margin-top: var(--space-4); }
  .currency-page-stack, .integration-settings-stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .currency-page-stack > .panel + .panel, .integration-settings-stack > .panel + .panel { margin-top: 0; }
  .currency-control-panel { display: flex; flex-direction: column; gap: var(--space-3); }
  .currency-control-grid { margin: 0; justify-content: space-between; }
  .currency-primary-actions { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
  .currency-meta-strip { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
  .currency-meta-strip > * {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
    border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-2);
    font-size: var(--text-2xs); font-weight: var(--fw-medium);
  }
  .date-filter, .currency-range-controls { display: inline-flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
  .currency-refresh-note { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--info-line); background: var(--info-soft); color: var(--info-fg); }
  .currency-refresh-note.warning { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-fg); }
  .currency-refresh-note.error { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-fg); }
  .currency-toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-1-5); max-height: 320px; overflow: auto; padding: 2px; }
  .currency-toggle {
    display: flex; align-items: center; gap: var(--space-1-5);
    height: 30px; padding: 0 var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
    font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-2); cursor: pointer;
    transition: border-color var(--dur-2), background-color var(--dur-2);
  }
  .currency-toggle:hover { border-color: var(--border-control-hover); }
  .currency-toggle:has(input:checked) { border-color: var(--accent-soft-2); background: var(--accent-soft); color: var(--accent-fg); }
  .currency-toggle input { width: 14px; height: 14px; }
  .small-gap { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

  /* integration settings */
  .integration-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
  .integration-hero-actions, .integration-actions { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
  .integration-provider-grid, .integration-memory-grid, .ai-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }
  .integration-mini-card { padding: var(--space-3) var(--space-4); }
  .ai-provider-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-2); font-size: var(--text-2xs); font-weight: var(--fw-medium); }
  .ai-provider-pill.is-active, .ai-provider-pill.active { background: var(--accent-soft); color: var(--accent-fg); }
  .integration-row-actions { white-space: nowrap; text-align: right; }
  .ai-status-card { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }

  /* owner panels (workspaces, API keys, Zoho, mail) filled by symmetra-auth.js */
  .settings-inline-panel { display: flex; flex-direction: column; gap: var(--space-4); }
  .sym-wm-row, .sym-zs-detail-row, .sym-ak-newkey-row, .sym-readonly-row, .sym-photo-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-2-5) 0; border-bottom: 1px solid var(--border-subtle);
  }
  .sym-readonly-row__label { color: var(--muted); font-size: var(--text-xs); }
  .sym-readonly-row__value { color: var(--text); font-weight: var(--fw-medium); }
  .sym-wm-tierrow { display: flex; gap: var(--space-2); align-items: center; }

  /* ----------------------------------------------------- overview page */
  .overview-stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .overview-stack > .panel + .panel, .overview-stack > * + * { margin-top: 0; }
  .page-head-controls { display: flex; align-items: center; gap: var(--space-2); }
  .kpi-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); }
  .kpi-icon {
    width: 38px; height: 38px; flex: none; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4c5cff, #6f7dff); color: #fff;
    box-shadow: 0 6px 14px -6px rgba(76, 92, 255, .6);
  }
  .kpi-icon svg { width: 18px; height: 18px; }
  .kpi-card--green .kpi-icon { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 6px 14px -6px rgba(16, 185, 129, .55); }
  .kpi-card--amber .kpi-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 6px 14px -6px rgba(245, 158, 11, .55); }
  .kpi-card--purple .kpi-icon { background: linear-gradient(135deg, #8b5cf6, #a78bfa); box-shadow: 0 6px 14px -6px rgba(139, 92, 246, .55); }
  .kpi-card { overflow: hidden; }
  .kpi-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--brand-grad); opacity: .0; transition: opacity var(--dur-3); }
  .kpi-card:hover::after { opacity: .9; }
  .kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .overview-chart { display: flex; flex-direction: column; gap: var(--space-2); }
  .overview-chart__plot { position: relative; margin-left: 36px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .overview-chart__plot svg { width: 100%; height: 100%; overflow: visible; }
  .overview-chart__y-labels, .overview-chart__x-labels { position: absolute; inset: 0; pointer-events: none; }
  .overview-chart__y-label { position: absolute; left: -40px; width: 34px; text-align: right; transform: translateY(-50%); font-size: var(--text-2xs); color: var(--subtle); font-variant-numeric: tabular-nums; }
  .overview-chart__x-label { position: absolute; bottom: -20px; transform: translateX(-50%); font-size: var(--text-2xs); color: var(--subtle); }
  .overview-chart__legend, .chart-legend { display: flex; gap: var(--space-4); margin-top: var(--space-6); font-size: var(--text-xs); color: var(--muted); }
  .overview-chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-1-5); }
  .overview-chart__swatch, .legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; }
  .legend-dot--blue { background: var(--chart-1); }
  .legend-dot--purple { background: var(--chart-5); }
  .scope-summary { list-style: none; display: flex; flex-direction: column; }
  .scope-summary__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) 0; border-bottom: 1px solid var(--border-subtle); }
  .scope-summary__row:last-child { border-bottom: 0; }
  .scope-summary__icon { color: var(--subtle); display: inline-flex; }
  .scope-summary__label { flex: 1; color: var(--text-2); }
  .scope-summary__value { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
  .scope-summary__chev { color: var(--subtle); }
  .select-pill { display: inline-flex; }

  /* ------------------------------------------------- AI menu / smart summary */
  .ai-menu-modal .modal-body, .smart-summary-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-2); }
  .ai-menu-option, .smart-ai-option {
    display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; text-align: left;
    padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
    transition: border-color var(--dur-2), background-color var(--dur-2);
  }
  .ai-menu-option:hover, .smart-ai-option:hover { border-color: var(--accent-soft-2); background: var(--accent-soft); }
  .email-report-form { display: grid; gap: var(--space-3); }

  /* --------------------------------------------------------- responsive */
  @media (max-width: 900px) {
    .gl-minimal-bar__identity select, .cashflow-company-select { min-width: 0; width: 100%; }
    .global-coa-headbar > input { width: 100%; }
    .coa-toolbar-actions { margin-left: 0; }
    .toolbar > label select, .toolbar > label input, .workspace-filter select, .workspace-filter input,
    .budget-filter-field select, .budget-filter-field input { min-width: 0; width: 100%; }
    .toolbar > label, .workspace-filter, .budget-filter-field { flex: 1 1 160px; }
  }
}

/* ---------------------------------------------------- dialogs (page owned) */
@layer pages {
  /* any label inside a form grid stacks its text over its control */
  .form-grid label, .form-grid .span-2 > label { display: flex; flex-direction: column; gap: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-2); }
  .form-grid .span-2 > label > input, .form-grid .span-2 > label > textarea, .form-grid .span-2 > label > select { width: 100%; }

  /* file inputs: a real button instead of the browser default */
  input[type="file"]::file-selector-button {
    height: 28px; margin-right: var(--space-2-5); padding: 0 var(--space-3);
    border: 1px solid var(--border-control); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-xs); font-weight: var(--fw-medium);
    cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
  }
  input[type="file"]::file-selector-button:hover { background: var(--surface-2); border-color: var(--border-control-hover); }

  /* auth dialog head: avatar · name/email · role · close */
  .sym-modal__head { display: flex; align-items: center; gap: var(--space-3); }
  .sym-modal__head .sym-modal__head-copy { flex: 1; }
  .sym-modal__head .sym-avatar { width: 36px; height: 36px; font-size: var(--text-xs); }
  .sym-field--full { grid-column: 1 / -1; }

  /* company overview */
  .company-overview-modal { width: min(980px, 100%); }
  .company-overview-bar { align-items: center; padding-left: var(--space-4); }
  .company-overview-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .company-logo-mark {
    width: 32px; height: 32px; border-radius: var(--radius-md); flex: none; object-fit: contain;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-fg); font-weight: var(--fw-semibold); font-size: var(--text-sm);
  }
  .company-logo-mark-large { width: 44px; height: 44px; font-size: var(--text-lg); }
  img.company-logo-mark { background: var(--surface-2); border: 1px solid var(--border); }
  .company-overview-copy { display: flex; flex-direction: column; min-width: 0; }
  .company-overview-name { font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--text); }
  .company-overview-submeta { font-size: var(--text-xs); color: var(--muted); }
  .company-overview-actions { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }
  .company-logo-action { position: relative; overflow: hidden; cursor: pointer; }
  .company-logo-action input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .company-overview-delete { --btn-fg: var(--danger-fg); --btn-bg-hover: var(--danger-soft); }
  .company-overview-body { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-2); }
  .company-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); }
  .company-overview-grid-lower { grid-template-columns: minmax(0, 1fr); }
  .company-overview-grid > .panel + .panel { margin-top: 0; }
  .company-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
  .company-detail-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .company-detail-grid span { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
  .company-detail-grid strong { font-weight: var(--fw-medium); color: var(--text); overflow-wrap: anywhere; }
  .company-notes-box { font-size: var(--text-xs); color: var(--muted); padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .company-summary-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
  .compact-company-files { max-height: 260px; }
  @media (max-width: 900px) { .company-overview-grid { grid-template-columns: 1fr; } .company-detail-grid { grid-template-columns: 1fr; } }

  /* GL summary values may run to two lines (date ranges) instead of being cut */
  .preview-summary strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@layer pages {
  /* a checkbox / radio and its text sit on one row, wherever the label lives */
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]),
  .form-grid label:has(> input[type="checkbox"]), .form-grid label:has(> input[type="radio"]) {
    flex-direction: row; align-items: center; gap: var(--space-2); font-weight: var(--fw-regular); color: var(--text);
  }
  .checkbox-list, .group-company-list { display: flex; flex-direction: column; gap: var(--space-2); }
}

/* ---- Connections (2026-10 peak plan C) ---------------------------------------------------------------- */
@layer pages {
  .conn-table td { vertical-align: top; }
  .conn-table .action-cell { white-space: nowrap; }
  .conn-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: var(--fw-semibold); border: 1px solid transparent; }
  .conn-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .conn-pill--ok { color: var(--success-fg); background: var(--success-soft); border-color: var(--success-line); }
  .conn-pill--info { color: var(--info-fg); background: var(--info-soft); border-color: var(--info-line); }
  .conn-pill--warning { color: var(--warning-fg); background: var(--warning-soft); border-color: var(--warning-line); }
  .conn-pill--error { color: var(--danger-fg); background: var(--danger-soft); border-color: var(--danger-line); }
  .conn-msg, .conn-checks { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted); max-width: 42ch; }
  .conn-checks { color: var(--warning-fg); }
  .conn-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
  .conn-chip { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent);
    font-size: var(--text-sm); font-weight: var(--fw-medium); }
  .conn-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: min(520px, 90vw); }
  .conn-modal .field small { display: block; margin-top: var(--space-1); }
  .conn-modal .modal-foot { display: flex; gap: var(--space-2); align-items: center; }
  .conn-modal .modal-foot .spacer { flex: 1; }
  .conn-advanced summary { cursor: pointer; color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-2); }
}

/* ---- AI agents (2026-10 peak plan A1) ------------------------------------------------------------------ */
@layer pages {
  .agents-panel { display: flex; flex-direction: column; gap: var(--space-4); }
  .agent-hero { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; padding: var(--space-5);
    border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border: 1px solid var(--border-subtle); }
  .agent-hero h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
  .agent-hero p { margin: 0; max-width: 60ch; }
  .agent-url { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .agent-url code, .agent-key code { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--surface); padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
  .agent-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 640px; }
  .agent-presets { display: grid; gap: var(--space-2); }
  .agent-preset { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
  .agent-preset:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .agent-preset span { display: flex; flex-direction: column; gap: 2px; }
  .agent-extra { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); margin-top: var(--space-1); }
  .agent-connect { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
  .agent-snippet { position: relative; }
  .agent-snippet pre { margin: 0; padding: var(--space-3); padding-right: 72px; background: var(--surface-inverse); color: var(--text-inverse);
    border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
  .agent-snippet .btn { position: absolute; top: var(--space-2); right: var(--space-2); }
  .agent-key { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; }
  .agent-consent .modal-body { display: flex; flex-direction: column; gap: var(--space-2); max-width: 520px; }
  .segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--surface-2); }
  .segmented__btn { border: 0; background: transparent; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font: inherit;
    font-size: var(--text-sm); color: var(--text-2); cursor: pointer; }
  .segmented__btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--elev-1); font-weight: var(--fw-semibold); }
}

/* ---- Planning and insights (2026-10 peak plan F/G) ---------------------------------------------------- */
@layer pages {
  .plan-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-3); max-width: 560px; }
  .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .plan-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  @media (max-width: 640px) { .plan-grid, .plan-methods { grid-template-columns: 1fr; } }
  .insights-panel { border-left: 3px solid var(--accent); }
  .insight-list { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--text); }
  .insight-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-2); }
  @media (max-width: 900px) { .insight-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .insight-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .insight-tile span { font-size: var(--text-xs); }
  .insight-tile strong { font-size: var(--text-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
  .insight-flag { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); margin-top: var(--space-1); }
  .insight-flag--high { background: var(--danger-soft); color: var(--danger-fg); }
  .insight-flag--medium { background: var(--warning-soft); color: var(--warning-fg); }
  .insight-flag--low { background: var(--info-soft); color: var(--info-fg); }
}

/* ---- AI agents: the guided connector (pick your AI -> connect -> choose approval) ---- */
@layer pages {
  .agent-num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: var(--space-2); border-radius: 50%; background: var(--accent); color: var(--accent-contrast, #fff); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
  .agent-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
  .agent-pick__btn { appearance: none; text-align: left; display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
  .agent-pick__btn small { color: var(--muted); font-size: var(--text-xs); }
  .agent-pick__btn:hover { border-color: var(--border-strong); }
  .agent-pick__btn.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .agent-steps { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-3); line-height: 1.5; }
  .agent-url-row { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); flex-wrap: wrap; }
  .agent-url-row code { padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-md); word-break: break-all; }
  .agent-status { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
  .agent-status.is-ok { color: var(--success-fg); font-weight: var(--fw-medium); }
  .agent-status.is-bad { color: var(--danger-fg); }
  .agent-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--warning-fg, #b45309); animation: agent-pulse 1.2s ease-in-out infinite; }
  @keyframes agent-pulse { 50% { opacity: .25; } }
  @media (prefers-reduced-motion: reduce) { .agent-dot { animation: none; } }
  .agent-policy { max-width: 100%; }
}