/* =========================================================
   AQ WINDOW STANDARD
   One layout for docked windows (AqDock iframe, html.aq-docked)
   and confirmation modals (.new-aq-modal).
   Builds on aquilastrap.css tokens + .new-aq-modal + .aq-btn.
   Opt-in: add .aq-win to the .new-aq-modal root (or the docked
   page's root wrapper). Legacy modals without .aq-win are untouched.
   Load after aquilastrap.css.
   Text sizes track --aq-font-size (14px, 13px on narrow screens -
   same approach as aq-panel-header.css) rather than rem, since the
   app's root font size is 14px, not 16px.
   Status chips in these windows are aquilastrap's .aq-badge.
   ========================================================= */

.aq-win {
    --aq-win-pad-x: 1.75rem;
    --aq-win-rule: 1px solid var(--aq-surface-border);
    --aq-win-row-rule: 1px solid var(--aq-white-2);
    --aq-win-ink: var(--aq-secondary-colour-dark-50);
    --aq-win-body: var(--aq-grey-03);
    --aq-win-muted: var(--aq-secondary-colour-light-25);
    --aq-win-icon-bg: #efe8ff;
    --aq-win-icon-fg: #6a55e8;
    --aq-win-debit: var(--aq-error-colour-dark-25);
    color: var(--aq-win-ink);
}

/* ---------- Shell ---------- */
.aq-win.new-aq-modal { border: 1px solid var(--aq-surface-border); }

/* Docked: the AqDock title bar owns chrome + close, so the shell goes flat
   and full-height, and the in-header close button is hidden.
   :not(.modal-content) - a confirmation modal opened from a docked page keeps
   its own chrome and close button. */
html.aq-docked .aq-win:not(.modal-content) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}
html.aq-docked .aq-win:not(.modal-content) .new-aq-modal-close-btn { display: none; }
html.aq-docked .aq-win:not(.modal-content) .new-aq-modal-content { max-height: none; }

/* Docked, the window runs edge to edge: drop the _Layout shell's own gutter
   (#MainBodyDiv ps-3/pe-3, #renderMainBody pt-3/pb-3) so the header, band and
   footer meet the dock panel's sides, as they meet a modal's. Same :has()
   approach as .home-hero-panel in aquilastrap.css; Bootstrap's spacing
   utilities are !important, so this has to be too. */
html.aq-docked #MainBodyDiv:has(.aq-win:not(.modal-content)) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
html.aq-docked #MainBodyDiv:has(.aq-win:not(.modal-content)) > #renderMainBody {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* The window is height: 100%, so a page wrapper around it has to be too. */
html.aq-docked #renderMainBody > :has(> .aq-win:not(.modal-content)) {
    height: 100%;
}

/* Docked, the body is a flex column so one section can take whatever height
   is left. Put .aq-win-section--fill on that section: it grows with the dock,
   and its last child (a table wrap, a grid) fills it and scrolls inside
   itself, so its header stays pinned. Below the min-height the body scrolls
   instead, so the table never collapses to nothing. Same principle as the
   raw message viewer and the .mm-* page shell. */
html.aq-docked .aq-win:not(.modal-content) .aq-win-body {
    display: flex;
    flex-direction: column;
}
html.aq-docked .aq-win:not(.modal-content) .aq-win-section--fill {
    flex: 1 1 0;
    min-height: 16rem;
    display: flex;
    flex-direction: column;
}
html.aq-docked .aq-win:not(.modal-content) .aq-win-section--fill > :last-child {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

/* Docked, a window with no table to fill (field rows only, e.g. Summary) can
   spread those rows over the dock's height instead: put .aq-win-body--stretch
   on the body. Columns and sections stretch, and each field row grows evenly
   from its normal height up to a cap, so the content reaches down towards the
   pinned footer rather than leaving a white gap under it. Below the normal
   height nothing shrinks - the body scrolls as usual. For single-column field
   lists (.aq-win-fields without --2/--3). */
html.aq-docked .aq-win:not(.modal-content) .aq-win-body--stretch > .aq-win-cols,
html.aq-docked .aq-win:not(.modal-content) .aq-win-body--stretch > .aq-win-section {
    flex: 1 1 auto;
}
html.aq-docked .aq-win:not(.modal-content) .aq-win-body--stretch .aq-win-cols > *,
html.aq-docked .aq-win:not(.modal-content) .aq-win-body--stretch .aq-win-section {
    display: flex;
    flex-direction: column;
}
html.aq-docked .aq-win:not(.modal-content) .aq-win-body--stretch .aq-win-section {
    flex: 1 1 auto;
}
html.aq-docked .aq-win:not(.modal-content) .aq-win-body--stretch .aq-win-fields {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
html.aq-docked .aq-win:not(.modal-content) .aq-win-body--stretch .aq-win-field {
    flex: 1 1 auto;
    max-height: 3.5rem;
}

/* Floating Vantage launcher is rendered inside every docked iframe by
   _Layout. Hide it there; it stays on the top-level page. */
html.aq-docked .vantage-assistant { display: none !important; }

/* ---------- Header ---------- */
.aq-win .new-aq-modal-header {
    gap: 1rem;
    padding: 1.25rem 1rem 1.25rem var(--aq-win-pad-x);
    background: var(--aq-white);
    border-bottom: 0;
}
.aq-win .new-aq-modal-header-content { min-width: 0; flex: 1; gap: 0.875rem; }
.aq-win .new-aq-modal-icon-container {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 0.5rem;
    background: var(--aq-win-icon-bg);
    box-shadow: none;
}
.aq-win .new-aq-modal-icon { font-size: calc(var(--aq-font-size) + 4px); color: var(--aq-win-icon-fg) !important; }
.aq-win .new-aq-modal-title { font-size: calc(var(--aq-font-size) + 6px); font-weight: 700; line-height: 1.2; color: var(--aq-win-ink); }
.aq-win .new-aq-modal-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.1875rem;
    font-size: calc(var(--aq-font-size) - 1px);
    color: var(--aq-win-muted);
}
/* Meta items: <span class="aq-win-meta">…</span> — dots are added automatically */
.aq-win-meta + .aq-win-meta::before { content: "•"; margin-right: 0.5rem; }

/* Right-hand cluster, in this order: currency chip, status chip, secondary buttons, close */
.aq-win-header-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* ---------- Chips ---------- */
.aq-win-chip,
.aq-win-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.5rem;
    padding: 0 0.625rem;
    border-radius: 999px;
    border: 1px solid var(--aq-grey-01);
    font-size: calc(var(--aq-font-size) - 3px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--aq-win-ink);
}
.aq-win-status::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.aq-win-status--ok      { background: var(--aq-main-colour-light-75);      border-color: var(--aq-main-colour);              color: var(--aq-main-colour-dark-50); }
.aq-win-status--warning { background: var(--aq-attention-colour-light-90); border-color: var(--aq-attention-colour-light-50); color: var(--aq-attention-colour-dark-50); }
.aq-win-status--error   { background: var(--aq-error-colour-light-90);     border-color: var(--aq-error-colour-light-50);     color: var(--aq-error-colour-dark-25); }
.aq-win-status--neutral { background: var(--aq-surface-page); }
.aq-win-status--sm { height: 1.375rem; padding: 0 0.5rem; font-size: calc(var(--aq-font-size) - 4px); }

/* ---------- Status band (only when there is a headline figure) ---------- */
.aq-win-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 1.5rem var(--aq-win-pad-x);
    background: var(--aq-surface-page);
    --aq-win-band-label: var(--aq-win-muted);
}
.aq-win-band--ok      { background: var(--aq-main-colour-light-75);      --aq-win-band-label: var(--aq-main-colour-dark-50); }
.aq-win-band--warning { background: var(--aq-attention-colour-light-90); --aq-win-band-label: var(--aq-attention-colour-dark-50); }
.aq-win-band--error   { background: var(--aq-error-colour-light-90);     --aq-win-band-label: var(--aq-error-colour-dark-25); }

.aq-win-band-main { display: flex; flex-direction: column; gap: 0.25rem; }
.aq-win-band-label { font-size: calc(var(--aq-font-size) - 2px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aq-win-band-label); }
.aq-win-band-value { font-size: calc(var(--aq-font-size) + 16px); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--aq-win-ink); }
.aq-win-band-metrics { display: flex; gap: 2rem; flex-wrap: wrap; }
.aq-win-band-actions { display: flex; gap: 0.5rem; }
.aq-win-metric { display: flex; flex-direction: column; gap: 0.125rem; }
/* Same size as a field row's label and value - band metrics are as important as the fields below. */
.aq-win-metric-label { font-size: var(--aq-font-size); color: var(--aq-win-body); }
.aq-win-metric-value { font-size: var(--aq-font-size); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--aq-win-ink); }
/* Small muted line under a band value or metric (e.g. a balance's date) */
.aq-win-note { font-size: calc(var(--aq-font-size) - 2px); color: var(--aq-win-muted); }
.aq-win-note:empty { display: none; }
/* White inset inside a band (e.g. From → To accounts) - same proportions as the old Transfer
   Summary .ts-flow: bordered card, small uppercase labels, bold values, brand-colour arrow. */
.aq-win-band-inset {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 0.875rem 1.375rem;
    border: 1px solid var(--aq-surface-border);
    border-radius: 0.875rem;
    background: var(--aq-white);
}
.aq-win-band-inset .aq-win-metric { gap: 0.1875rem; }
.aq-win-band-inset .aq-win-metric-label { font-size: calc(var(--aq-font-size) - 3px); letter-spacing: 0.05em; text-transform: uppercase; }
.aq-win-band-inset .aq-win-metric-value { font-size: var(--aq-font-size); font-weight: 600; }
.aq-win-band-inset > i { font-size: calc(var(--aq-font-size) + 4px); color: var(--aq-main-colour); }

/* ---------- Body + sections ---------- */
.aq-win-body { padding: 0.375rem var(--aq-win-pad-x) 1.5rem; }
.aq-win-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }

.aq-win-section { margin-top: 1.375rem; }
.aq-win-section-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; }
.aq-win-section-head::after { content: ""; flex: 1; height: 1px; background: var(--aq-surface-border); order: 10; }
.aq-win-section-title { margin: 0; font-size: calc(var(--aq-font-size) - 2px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aq-win-ink); }
.aq-win-section-meta { font-size: calc(var(--aq-font-size) - 1px); color: var(--aq-win-muted); }
.aq-win-section-aside { order: 11; font-size: calc(var(--aq-font-size) - 1px); color: var(--aq-win-muted); } /* sits right of the rule */
.aq-win-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 999px;
    background: var(--aq-white-2); font-size: calc(var(--aq-font-size) - 3px); font-weight: 700;
}

/* ---------- Field rows (works with <dl>/<dt>/<dd> or divs) ---------- */
.aq-win-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem 2.5rem; margin: 0; }
.aq-win-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aq-win-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aq-win-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.625rem;
    padding: 0.5rem 0;
    border-bottom: var(--aq-win-row-rule);
    font-size: var(--aq-font-size);
}
.aq-win-field > dt, .aq-win-field-label { margin: 0; font-weight: 400; color: var(--aq-win-body); }
.aq-win-field > dd, .aq-win-field-value {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--aq-win-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aq-win-field--total { padding: 0 0.625rem; background: var(--aq-surface-page); }
.aq-win-field--total > dt, .aq-win-field--total .aq-win-field-label { font-weight: 700; }

/* ---------- Amounts ---------- */
.aq-amt { font-variant-numeric: tabular-nums; }
.aq-amt--debit { color: var(--aq-win-debit); }
.aq-ccy { margin-left: 0.25em; font-size: 0.85em; font-weight: 600; color: var(--aq-win-muted); } /* never coloured */
.aq-win-hl { padding: 0.125rem 0.25rem; border-radius: 0.1875rem; background: var(--aq-cream, #fffbee); box-shadow: inset 0 -2px 0 var(--aq-main-colour); }

/* ---------- Footer ---------- */
.aq-win .new-aq-modal-footer {
    gap: 1rem;
    padding: 1rem var(--aq-win-pad-x);
    background: var(--aq-surface-page);
    border-top: var(--aq-win-rule);
}
.aq-win .new-aq-modal-footer-status { font-size: calc(var(--aq-font-size) - 1px); color: var(--aq-win-muted); }
.aq-win-totals { display: flex; gap: 1.75rem; }
.aq-win-totals .aq-win-metric-label { font-size: calc(var(--aq-font-size) - 2px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* Footer totals are the figures you check before saving - larger and bolder than a field value. */
.aq-win-totals .aq-win-metric-value { font-size: calc(var(--aq-font-size) + 2px); font-weight: 700; }
html.aq-docked .aq-win:not(.modal-content) .new-aq-modal-footer { margin-top: auto; }

/* ---------- Dark mode ---------- */
[data-theme="dark"] .aq-win {
    --aq-win-ink: var(--aq-white);
    --aq-win-body: var(--aq-surface-dark-muted);
    --aq-win-muted: var(--aq-surface-dark-muted);
    --aq-win-rule: 1px solid var(--aq-surface-dark-border);
    --aq-win-row-rule: 1px solid var(--aq-surface-dark-hover);
    --aq-win-icon-bg: color-mix(in srgb, #8c7af9 22%, transparent);
    --aq-win-icon-fg: #b8adff;
    --aq-win-debit: var(--aq-error-colour-light-50);
}
[data-theme="dark"] .aq-win .new-aq-modal-header { background: var(--aq-surface-dark-card); }
[data-theme="dark"] .aq-win .new-aq-modal-footer,
[data-theme="dark"] .aq-win-band,
[data-theme="dark"] .aq-win-field--total { background: var(--aq-surface-dark-inset); }
[data-theme="dark"] .aq-win-band--ok      { background: color-mix(in srgb, var(--aq-main-colour) 18%, var(--aq-surface-dark-card));      --aq-win-band-label: var(--aq-main-colour-light-25); }
[data-theme="dark"] .aq-win-band--warning { background: color-mix(in srgb, var(--aq-attention-colour) 18%, var(--aq-surface-dark-card)); --aq-win-band-label: var(--aq-attention-colour-light-50); }
[data-theme="dark"] .aq-win-band--error   { background: color-mix(in srgb, var(--aq-error-colour) 18%, var(--aq-surface-dark-card));     --aq-win-band-label: var(--aq-error-colour-light-50); }
[data-theme="dark"] .aq-win-band-inset { background: var(--aq-surface-dark-card); border-color: var(--aq-surface-dark-border); }
[data-theme="dark"] .aq-win-chip,
[data-theme="dark"] .aq-win-status--neutral { border-color: var(--aq-surface-dark-border-2); background: transparent; }

@media (max-width: 50rem) {
    .aq-win-cols, .aq-win-fields--2, .aq-win-fields--3 { grid-template-columns: minmax(0, 1fr); }
}