/* V2 visual foundation. Existing domain components retain their behaviour. */
:root {
    --accent-blue: #8ba0f4;
    --accent-blue-hover: #aebefa;
    --accent-blue-ink: #202b49;
    --accent-blue-soft: #eef2ff;
    --color-primary: #5067a5;
    --color-primary-dark: #3f548a;
    --color-primary-light: #edf1fd;
    --color-secondary: #fff;
    --color-text: #202a3a;
    --color-text-light: #657084;
    --color-border: #e3e7ef;
    --color-success: #087b63;
    --color-error: #bb3d45;
    --color-danger: #bb3d45;
    --color-warning: #a76816;
    --color-info: #5067a5;
    --color-bg: #f5f6fa;
    --color-bg-secondary: #f7f8fb;
    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 14px;
    --shadow-sm: 0 2px 3px #16213b03;
    --shadow-md: 0 5px 20px #16213b0b;
    --shadow-lg: 0 16px 48px #16213b1a;
    --sidebar-width: 224px;
    --ease-out: cubic-bezier(.2,.7,.2,1);
}
html { color-scheme: light; scroll-padding-top: 86px; }
body { background: var(--color-bg); font-size: 14px; letter-spacing: -.012em; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: #5067a522; }
button { touch-action: manipulation; }
a { color: var(--color-primary-dark); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #8ba0f4; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
svg { flex-shrink: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10000; background: #fff; padding: 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.workspace-brand, .nav-caption, .nav-secondary, .nav-footer { display: none; }
.nav-bottom { border-color: var(--color-border); box-shadow: 0 -4px 24px #16213b05; padding-bottom: env(safe-area-inset-bottom); height: calc(70px + env(safe-area-inset-bottom)); }
.nav-item { color: #657084; gap: 5px; transition: color 160ms, background 160ms; border-radius: 8px; }
.nav-item.active { color: var(--color-primary-dark); font-weight: 600; }
.nav-item.active svg { transform: none; }
.nav-item svg { stroke-width: 1.7; }
.header { background: #ffffffed; border-bottom: 1px solid var(--color-border); backdrop-filter: blur(12px); box-shadow: none; position: sticky; top: 0; z-index: 100; }
.header-content { max-width: none; min-height: 68px; height: auto; padding: 12px 20px; gap: 12px; }
.header-title { font-size: 16px; font-weight: 600; letter-spacing: -.025em; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.header-actions { gap: 12px; flex-shrink: 0; }
.workspace-breadcrumb { display: none; color: var(--color-text-light); font-size: 13px; white-space: nowrap; }
.workspace-breadcrumb span { margin-left: 14px; color: #a6adba; }
.user-btn { padding: 0; border: 1px solid #dce2ef; border-radius: 50%; transition: box-shadow 160ms, border-color 160ms; }
.user-btn:hover { box-shadow: 0 0 0 4px #5067a50c; }
.user-btn[aria-expanded="true"] { border-color: #c5cee3; box-shadow: 0 0 0 4px #5067a514; }
.user-avatar { width: 34px; height: 34px; background: #e9edfa; color: #354571; font-size: 12px; font-weight: 650; }
.user-dropdown { border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); width: min(268px, calc(100vw - 32px)); padding: 8px; border-radius: 14px; }
.user-info { padding: 6px 8px 12px; margin: 0 0 6px; border-bottom: 1px solid var(--color-border); background: transparent; }
.user-info .user-avatar { width: 32px; height: 32px; font-size: 11px; }
.user-name { font-size: 13px; letter-spacing: -.02em; line-height: 1.3; }
.user-email { overflow-wrap: anywhere; font-size: 12px; margin-top: 1px; }
.user-menu-list { gap: 1px; }
.user-menu-item { border-radius: 8px; padding: 8px 10px; font-size: 13px; gap: 10px; }
.user-menu-item:hover { background: #f2f4fa; }
.user-menu-item.is-current { background: #f4f6fb; color: var(--color-primary-dark); font-weight: 600; }
.user-menu-item.is-current svg { color: var(--color-primary-dark); }
.user-menu-item--logout { margin-top: 6px; color: var(--color-error); }
.user-menu-item--logout:hover { background: #f8eaea; }
.user-menu-mobile { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); }
.user-menu-mobile:not(:has(a)) { display: none; }
@media (min-width: 768px) {
    .user-menu-mobile { display: none; }
}
.main-content { width: auto; max-width: none; padding: 24px 16px; }
.main-content.with-nav { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.main-content > * { min-width: 0; }
.flash-container {
    position: fixed;
    top: auto;
    left: auto;
    right: 16px;
    bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom, 0px));
    z-index: 2000;
    width: min(360px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.flash {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 12px 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text);
    animation: flash-in 200ms var(--ease-out) both;
    transition: opacity 160ms, transform 160ms;
}
.flash-symbol {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent-blue-soft);
    color: var(--color-primary);
    flex-shrink: 0;
}
.flash-success .flash-symbol { background: #e5f4ee; color: var(--color-success); }
.flash-error .flash-symbol { background: #fbecef; color: var(--color-error); }
.flash-warning .flash-symbol { background: #fcf2df; color: var(--color-warning); }
.flash-text { flex: 1; min-width: 0; }
.flash-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-text-light);
}
.flash-close:hover { background: #f2f4fa; color: var(--color-text); }
.flash.is-leaving { opacity: 0; transform: translateY(8px); }
@keyframes flash-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .flash { animation: none; }
    .flash.is-leaving { transform: none; }
}
.card, .panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-header { padding: 18px 22px; background: transparent; border-bottom: 1px solid #edf0f5; }
.card-title { font-size: 15px; font-weight: 650; }
.card-body { padding: 22px; }
.card-footer { padding: 16px 22px; background: #fafbfe; border-color: #edf0f5; }
.btn { border-radius: 8px; min-height: 40px; white-space: normal; text-align: center; line-height: 1.35; padding: 10px 16px; font-size: 13px; font-weight: 600; transition: background 160ms, border-color 160ms, box-shadow 160ms, transform 160ms var(--ease-out); }
.btn-primary { background: var(--accent-blue); color: var(--accent-blue-ink); border: 1px solid var(--accent-blue); box-shadow: 0 2px 3px #202b490a; }
.btn-primary:hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); box-shadow: 0 4px 12px #202b4912; transform: translateY(-1px); }
.btn-secondary:hover { background: #f4f6fc; border-color: #cbd4e6; }
.btn-success { background: #087b63; }
.btn-danger { background: #bb3d45; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-sm { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.btn-lg { min-height: 48px; font-size: 14px; }
.btn-ghost { font-weight: 500; }
.btn-icon { min-width: 40px; }
.fab { background: var(--accent-blue); color: var(--accent-blue-ink); width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 5px 18px #3f548a28; bottom: calc(88px + env(safe-area-inset-bottom)); }
body[data-page="clients.index"] .fab, body[data-page="invoices.index"] .fab { display: none; }
.form-label { font-size: 12px; font-weight: 600; margin-bottom: 7px; color: #465166; }
.form-input { border-radius: 8px; border-color: #dce2eb; padding: 11px 12px; font-size: 14px; color: var(--color-text); background-color: #fff; min-width: 0; transition: border-color 160ms, box-shadow 160ms, background-color 160ms; }
.form-input:hover { border-color: #b4bfd2; }
.form-input:focus { border-color: #8ba0f4; box-shadow: 0 0 0 3px #5067a512; }
.form-input::placeholder { color: #737f91; font-weight: 400; }
textarea.form-input { min-height: 100px; }
.form-group { min-width: 0; }
.form-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-actions { flex-wrap: wrap; align-items: center; }
.form-actions > * { min-width: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); }
.search-box input { border: 1px solid #dce2eb; border-radius: 9px; box-shadow: var(--shadow-sm); font-size: 14px; padding: 12px 14px 12px 42px; transition: border-color 160ms, box-shadow 160ms; background: #fff; }
.search-box input:focus { outline: none; border-color: #8ba0f4; box-shadow: 0 0 0 3px #5067a512; }
.tabs { background: transparent; padding: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; gap: 4px; overflow-x: auto; scrollbar-width: thin; margin-bottom: 20px; }
.tab { border-radius: 0; border: none; border-bottom: 2px solid transparent; padding: 12px 15px; color: #657084; font-size: 13px; min-height: 44px; transition: color 160ms, border-color 160ms, background 160ms; }
.tab.active { background: transparent; color: #3f548a; border-bottom-color: #5067a5; box-shadow: none; font-weight: 600; }
.tab:hover { background: #eef1f8; color: #3f548a; }
.list-item { padding: 17px 22px; gap: 14px; border-bottom-color: #edf0f5; transition: background 150ms; }
.list-item:hover { background: #f7f9fe; }
.list-item-title { font-size: 14px; font-weight: 550; color: #253149; }
.list-item-subtitle, .list-item-meta { font-size: 12px; color: #657084; }
.list-item-amount { font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }

.section-title { font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.section-link, .text-link { font-size: 12px; font-weight: 600; color: #5067a5; text-decoration: none; }
.text-link:hover, .section-link:hover { color: #1f3690; text-decoration: underline; text-underline-offset: 4px; }
.detail-header { margin-bottom: 24px; gap: 16px; }
.detail-icon { background: #edf1fd; color: #5067a5; border-radius: 12px; }
.detail-icon svg { stroke: currentColor; }
.detail-title { font-size: 26px; letter-spacing: -.04em; }
.detail-subtitle a { color: #5067a5; }
.detail-row { border-color: #edf0f5; padding: 14px 0; }
.detail-label { color: #657084; font-size: 13px; }
.detail-value { font-variant-numeric: tabular-nums; }
.table th { font-size: 11px; letter-spacing: .04em; color: #657084; padding: 12px 18px; background: #fafbfe; }
.table td { border-color: #edf0f5; padding: 15px 18px; font-size: 13px; }
.table tr:hover { background: #f7f9fe; }
.empty-state { padding: 64px 20px; }
.empty-state svg { color: #9aabc6; margin-bottom: 18px; }
.empty-state-title { font-size: 20px; letter-spacing: -.03em; }
.empty-state-text { font-size: 14px; max-width: 380px; margin: 8px auto 24px; }
.modal-overlay { background: #121b2c77; backdrop-filter: blur(4px); }
.modal { border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg); border: 1px solid #ffffff88; transition: transform 200ms var(--ease-out); }
.modal-close { min-width: 36px; min-height: 36px; border-radius: 7px; }
.modal-header, .modal-footer { border-color: #edf0f5; }
.note-card { border-radius: 10px; box-shadow: none; }
.note-card-actions .note-action-btn { opacity: .8; }
.note-quick-add { background: #fff; border: 1px solid #dce2eb; border-radius: 12px; }
.note-color-swatch { transition-duration: 130ms; }
/* The dashboard uses actual amounts; no illustrative or synthetic curves. */
.overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 2px 0 27px; }
.eyebrow { font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .12em; color: #758098; margin-bottom: 8px; }
.overview-heading h2 { font-size: 29px; line-height: 1.25; font-weight: 600; letter-spacing: -.045em; }
.overview-subtitle { font-size: 13px; color: #657084; margin-top: 8px; }
.overview-heading-actions { display: flex; align-items: center; gap: 18px; }
.overview-date { color: #657084; font-size: 12px; font-variant-numeric: tabular-nums; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.metric { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 20px; color: var(--color-text); text-decoration: none; transition: border-color 180ms, box-shadow 180ms, transform 180ms; }
.metric:hover { border-color: #b7c4e8; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.metric-featured { background: #17243c; color: #fff; border-color: #17243c; }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #59667d; font-size: 12px; }
.metric-arrow { color: #98a3b5; font-size: 15px; transition: transform 160ms; }
.metric:hover .metric-arrow { transform: translate(2px,-2px); }
.metric-number { display: block; font-size: 29px; letter-spacing: -.055em; font-weight: 600; line-height: 1.2; margin: 14px 0 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-footnote { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #657084; }
.metric-featured .metric-label, .metric-featured .metric-footnote { color: #becae1; }
.metric-featured .status-dot { background: #58c3a0; }
.metric-alert .metric-number { color: #b6404c; }
.metric-alert .status-dot { background: #c9515d; }
.status-dot { width: 6px; height: 6px; display: inline-block; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.overview-charts { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 22px; margin-bottom: 27px; }
.overview-charts-single { grid-template-columns: 1fr; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 22px 16px; }
.panel-heading h2 { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.panel-heading p { font-size: 11px; color: #657084; margin-top: 5px; }
.panel-heading .text-link { white-space: nowrap; }
.period-switch { display: flex; padding: 3px; gap: 2px; border-radius: 7px; background: #f0f2f7; flex-shrink: 0; }
.period-switch button { border: none; background: transparent; padding: 6px 10px; min-height: 30px; font-size: 11px; color: #657084; border-radius: 5px; cursor: pointer; transition: color 140ms, box-shadow 140ms, background 140ms; }
.period-switch button.active { background: white; color: #273b69; box-shadow: 0 1px 3px #16213b0b; }
.chart-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; padding: 0 22px; }
.chart-summary strong { font-size: 25px; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.chart-summary span { font-size: 10px; color: #657084; }
.revenue-chart { display: flex; gap: 12px; height: 206px; margin: 25px 22px 12px; }
.chart-axis { width: 44px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 26px; color: #7c8798; font-size: 9px; text-align: right; font-variant-numeric: tabular-nums; }
.chart-field { flex: 1; min-width: 0; position: relative; }
.chart-field::before { content: ''; position: absolute; inset: 0 0 28px; background: repeating-linear-gradient(to top, #e9edf4 0, #e9edf4 1px, transparent 1px, transparent calc(100% / 3)); border-top: 1px solid #e9edf4; pointer-events: none; }
.revenue-columns { display: flex; gap: 12px; height: 100%; }
.revenue-column { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.revenue-bar-space { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.revenue-bar { background: #9eafe8; width: 100%; max-width: 32px; min-height: 2px; border: none; border-radius: 5px 5px 0 0; cursor: pointer; position: relative; transition: height 400ms var(--ease-out), background 160ms; }
.revenue-column:last-child .revenue-bar { background: #5067a5; }
.revenue-bar:hover, .revenue-bar:focus { background: #5067a5; }
.revenue-month { height: 28px; padding-top: 9px; font-size: 9px; color: #758098; }
.bar-tooltip { position: absolute; left: 50%; transform: translate(-50%,4px); bottom: calc(100% + 9px); min-width: 110px; z-index: 5; pointer-events: none; border-radius: 7px; background: #17243c; color: #d0daed; font-size: 10px; padding: 9px 11px; text-align: left; visibility: hidden; opacity: 0; transition: opacity 120ms, transform 120ms; box-shadow: var(--shadow-md); }
.bar-tooltip strong { display: block; font-size: 12px; color: #fff; margin-top: 4px; white-space: nowrap; }
.revenue-column:first-child .bar-tooltip { left: 0; transform: translateY(4px); }
.revenue-column:last-child .bar-tooltip { left: auto; right: 0; transform: translateY(4px); }
.revenue-bar:hover .bar-tooltip, .revenue-bar:focus .bar-tooltip { visibility: visible; opacity: 1; transform: translate(-50%,0); }
.revenue-column:first-child .revenue-bar:hover .bar-tooltip, .revenue-column:first-child .revenue-bar:focus .bar-tooltip, .revenue-column:last-child .revenue-bar:hover .bar-tooltip, .revenue-column:last-child .revenue-bar:focus .bar-tooltip { transform: translateY(0); }
.chart-reference { position: absolute; left: 0; right: 0; border-top: 1px dashed #97a2b8; z-index: 1; pointer-events: none; }
.chart-reference span { position: absolute; right: 0; bottom: 3px; font-size: 9px; color: #6b778b; background: #ffffffda; padding: 1px 3px; }
.chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; color: #657084; font-size: 10px; padding: 4px 20px 14px; }
.chart-legend > span { display: flex; gap: 6px; align-items: center; }
.legend-dot { width: 7px; height: 7px; background: #5067a5; border-radius: 2px; }
.legend-line { width: 15px; border-top: 1px dashed #97a2b8; }
.chart-data { border-top: 1px solid #edf0f5; }
.chart-data summary { color: #657084; padding: 10px 22px; font-size: 10px; cursor: pointer; }
.chart-data-grid { padding: 0 22px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.chart-data-grid > div { display: flex; justify-content: space-between; font-size: 11px; }
.distribution-panel { display: flex; flex-direction: column; }
.distribution-content { padding: 4px 22px 22px; display: flex; flex-direction: column; align-items: center; gap: 15px; flex: 1; }
.status-ring { width: 135px; height: 135px; flex-shrink: 0; position: relative; }
.status-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track, .ring-segment { fill: none; stroke-width: 10px; }
.ring-track { stroke: #eef1f7; }
.ring-segment { stroke: currentColor; }
.ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.ring-center strong { font-size: 31px; font-weight: 600; letter-spacing: -.055em; line-height: 1; }
.ring-center span { font-size: 10px; color: #657084; margin-top: 7px; }
.status-draft, .status-cancelled { color: #a1abba; }
.status-validated { color: #c29751; }
.status-sent { color: #466bdd; }
.status-paid { color: #19886d; }
.status-partially_paid { color: #7b72b8; }
.status-overdue { color: #c45161; }
.status-legend { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 9px; width: 100%; }
.status-legend a { display: flex; align-items: center; gap: 6px; color: #5e6a7e; text-decoration: none; font-size: 10px; border-radius: 3px; }
.status-legend a:hover { color: #263b72; }
.status-legend a > span:nth-child(2) { flex: 1; }
.status-legend strong { color: #29364e; font-size: 11px; font-variant-numeric: tabular-nums; }
.forecast-strip { background: #f6f8fc; padding: 16px 22px; border-top: 1px solid #edf0f5; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.forecast-strip span { font-size: 10px; color: #657084; }
.forecast-strip > span { text-align: right; line-height: 1.7; }
.forecast-strip strong { display: block; font-size: 23px; letter-spacing: -.045em; font-weight: 600; margin-top: 3px; }
.overview-section-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.overview-section-heading h2 { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.overview-section-heading > span { font-size: 11px; color: #657084; }
.overview-operations { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 22px; margin-bottom: 22px; align-items: start; }
.count-label { display: inline-flex; background: #f9e9ec; color: #a72e3e; font-size: 10px; padding: 3px 7px; border-radius: 5px; margin-left: 4px; vertical-align: middle; }
.work-row { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid #edf0f5; }
.work-client { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; text-decoration: none; color: #253149; }
.work-client > span:last-child { min-width: 0; }
.work-client strong, .upcoming-client strong, .payment-client strong { display: block; font-size: 12px; font-weight: 550; }
.work-client small, .upcoming-client small, .payment-client small { display: block; font-size: 10px; color: #718096; margin-top: 4px; }
.entity-avatar { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #677c9b; background: #f0f3f9; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.work-amount { font-size: 12px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-row .btn-sm { font-size: 10px; min-height: 30px; padding: 6px 9px; }
.work-client:hover strong { color: #5067a5; }
.upcoming-row, .payment-row { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid #edf0f5; color: #253149; text-decoration: none; transition: background 160ms; }
.upcoming-row:hover, .payment-row:hover { background: #f7f9fe; }
.calendar-stamp { width: 40px; min-height: 42px; flex-shrink: 0; text-align: center; background: #f2f4fa; border-radius: 7px; padding: 3px; }
.calendar-stamp strong { display: block; font-size: 17px; letter-spacing: -.04em; font-weight: 600; }
.calendar-stamp small { display: block; color: #657084; font-size: 8px; }
.upcoming-client, .payment-client { flex: 1; min-width: 0; }
.upcoming-row > strong, .payment-row > strong { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.upcoming-row > strong small { display: block; text-align: right; font-size: 9px; color: #657084; font-weight: 400; }
.payment-check { width: 30px; height: 30px; background: #e6f3ed; color: #087b63; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
.client-rank { width: 24px; color: #8a96a9; font-size: 11px; font-variant-numeric: tabular-nums; }
.quiet-empty { padding: 34px 22px; text-align: center; color: #657084; }
.quiet-empty h3 { color: #35435a; font-size: 14px; font-weight: 550; margin-bottom: 6px; }
.quiet-empty p { font-size: 12px; }
.empty-check { display: inline-grid; place-items: center; width: 35px; height: 35px; background: #e6f3ed; color: #087b63; border-radius: 50%; margin-bottom: 14px; }
/* Lists remain links: full-row hit areas on both pointer and touch devices. */
.collection-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.collection-intro h2 { font-size: 25px; letter-spacing: -.04em; font-weight: 600; }
.collection-intro p { color: #657084; font-size: 13px; margin-top: 6px; }
.collection-count { color: #657084; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.collection-table-head { display: none; }
.invoice-record-number { font-size: 11px; color: #657084; margin-top: 5px; }
.invoice-record-date, .invoice-record-due { display: none; }
.invoice-record-money { text-align: right; }
.invoice-record-status { text-align: right; margin-top: 6px; }
.collection-empty { padding: 40px 20px; text-align: center; }
.collection-empty h3 { font-size: 17px; margin-bottom: 7px; }
.collection-empty p { color: #657084; font-size: 13px; margin-bottom: 18px; }
.collection-footer { padding: 12px 20px; background: #fafbfe; border-top: 1px solid #edf0f5; font-size: 11px; color: #657084; }
/* Log-in shares the same restrained identity. */
.public-page .main-content { margin: 0; padding: 0; }
.auth-container { min-height: 100svh; background: #f4f6fa; padding: 32px 20px; position: relative; }
.auth-card { max-width: 420px; padding: 36px; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 20px 70px #16213b0c; }
.auth-logo { text-align: left; margin-bottom: 30px; }
.auth-logo h1 { font-size: 24px; letter-spacing: -.04em; font-weight: 600; }
.auth-logo p { font-size: 13px; color: #657084; }
.auth-card .logo-icon { background: #fff; margin: 0 0 28px; width: 136px; height: 106px; display: grid; place-items: center; }
.auth-card .logo-icon img { display: block; width: 120px; height: auto; }
.auth-card .btn { margin-top: 10px; }
.auth-footer { margin-top: 22px; font-size: 11px; color: #657084; letter-spacing: .02em; }
/* Discrete motion: entry, selection, focus, press, tooltips and chart updates. */
@keyframes enter-surface { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
    .main-content > .overview-heading, .main-content > .collection-intro, .auth-card { animation: enter-surface 320ms var(--ease-out) both; }
    .metric { animation: enter-surface 350ms var(--ease-out) both; }
    .metric:nth-child(2) { animation-delay: 35ms; }
    .metric:nth-child(3) { animation-delay: 70ms; }
    .metric:nth-child(4) { animation-delay: 105ms; }
    .overview-charts, .overview-operations, .main-content > .card { animation: enter-surface 380ms var(--ease-out) both; }
    .overview-charts { animation-delay: 80ms; }
    .overview-operations { animation-delay: 120ms; }
    ::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
}
@media (min-width: 768px) {
    .nav-bottom { width: var(--sidebar-width); height: 100dvh; overflow-y: auto; background: #151c2c; border: none; padding: 0 14px 16px; box-shadow: none; gap: 4px; }
    .workspace-brand { display: flex; justify-content: flex-start; align-items: center; flex-shrink: 0; align-self: stretch; height: auto; margin: 0 -14px 8px; padding: 12px 28px; color: #fff; text-decoration: none; border-bottom: 0; box-shadow: inset 0 -1px #ffffff0c; }
    .workspace-brand:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; }
    .nav-caption { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 600; color: #919bb1; padding: 0 14px; margin: 0 0 11px; }
    .nav-item { color: #aab4c8; padding: 12px 14px; gap: 12px; font-size: 12px; min-height: 43px; flex-shrink: 0; }
    .nav-item:hover { color: #f2f5ff; background: #ffffff08; }
    .nav-item.active { color: #fff; background: #ffffff0c; position: relative; }
    .nav-item.active::before { content: ''; position: absolute; width: 3px; height: 17px; left: 0; top: calc(50% - 8px); background: var(--accent-blue); border-radius: 0 2px 2px 0; }
    .nav-item.active svg { stroke: var(--accent-blue-hover); }
    .nav-item svg { width: 18px; height: 18px; }
    .nav-secondary { display: block; margin-top: 28px; }
    .nav-symbol { display: inline-grid; place-items: center; width: 18px; font-size: 20px; }
    .nav-count { margin-left: auto; background: #5067a5; color: white; border-radius: 4px; padding: 1px 5px; font-size: 9px; }
    .nav-footer { display: block; margin-top: auto; padding-top: 32px; }
    .header { margin-left: var(--sidebar-width); height: 68px; }
    .header-content { padding: 0 30px; height: 68px; }
    .workspace-breadcrumb { display: inline; }
    .main-content { margin-left: var(--sidebar-width); padding: 28px 30px 48px; }
    .main-content.with-nav { padding-bottom: 48px; }
    .flash-container { right: 24px; bottom: 24px; width: min(360px, calc(100vw - 48px)); }
    .modal { border-radius: 14px; }
    .fab { bottom: 28px; }
    .public-page .flash-container { right: 24px; bottom: 24px; width: min(360px, calc(100vw - 48px)); }
}
@media (min-width: 1200px) {
    .collection-table-head, .invoice-record { display: grid; grid-template-columns: minmax(160px,2fr) minmax(80px,1fr) minmax(100px,1fr) minmax(90px,1fr) minmax(115px,1fr); gap: 16px; align-items: center; }
    .collection-table-head { padding: 13px 22px; background: #fafbfe; border-bottom: 1px solid var(--color-border); color: #657084; font-size: 10px; text-transform: uppercase; letter-spacing: .055em; }
    .collection-table-head > span:nth-last-child(-n+2) { text-align: right; }
    .invoice-record-date, .invoice-record-due { display: block; color: #657084; font-size: 12px; font-variant-numeric: tabular-nums; }
    .invoice-record-status { margin: 0; }
    .invoice-record .invoice-record-main { min-width: 0; }
    .invoice-record .list-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1500px) {
    .main-content { padding-left: 44px; padding-right: 44px; }
    .header-content { padding-left: 44px; padding-right: 44px; }
    .metric-number { font-size: 33px; }
    .distribution-content { flex-direction: row; }
    .status-legend { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    :root { --sidebar-width: 200px; }
    .header-content { padding: 0 22px; }
    .main-content { padding: 24px 22px 48px; }
    .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .overview-heading-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
    .overview-charts, .overview-operations { grid-template-columns: 1fr; }
    .distribution-content { flex-direction: row; justify-content: center; gap: 32px; }
    .status-legend { max-width: 360px; }
    .overview-date { display: none; }
    .collection-table-head { display: none; }
}
@media (max-width: 767px) {
    body { font-size: 14px; }
    .header-content { padding: 10px 16px; min-height: 62px; }
    .header-title { font-size: 15px; }
    .header-actions { gap: 8px; }
    .header-actions .btn { font-size: 11px; min-height: 36px; padding: 8px 10px; }
    .nav-bottom {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom));
        height: 70px;
        padding: 6px;
        gap: 3px;
        border: 1px solid #ffffffc9;
        border-radius: 24px;
        background: #f5f7fc;
        box-shadow: 0 8px 32px #202b4924, 0 2px 8px #202b490a, inset 0 1px 0 #fff;
        isolation: isolate;
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .nav-bottom {
            background: linear-gradient(135deg, #ffffffc9, #edf1fbb3);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            backdrop-filter: blur(24px) saturate(160%);
        }
    }
    .nav-bottom > .nav-item {
        position: relative;
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        min-height: 56px;
        padding: 6px 2px;
        gap: 4px;
        border-radius: 18px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.3;
        color: #566279;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-bottom > .nav-item::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border: 1px solid transparent;
        border-radius: inherit;
    }
    .nav-bottom > .nav-item.active { color: #344b88; }
    .nav-bottom > .nav-item.active::before,
    .mobile-nav-blob {
        background: linear-gradient(145deg, #e0e8ffeb, #ccd9f6b8);
        border: 1px solid #ffffffb3;
        box-shadow: 0 2px 6px #5067a514, inset 0 1px 0 #ffffff99;
    }
    .mobile-nav-blob { position: absolute; z-index: -1; border-radius: 18px; pointer-events: none; }
    .nav-bottom.is-sliding > .nav-item.active::before { visibility: hidden; }
    .nav-bottom > .nav-item svg { width: 21px; height: 21px; }
    .nav-bottom > .nav-item.active svg { transform: translateY(-1px); stroke-width: 2; }
    .nav-bottom > .nav-item:active { transform: scale(.94); }
    .nav-bottom > .nav-item:focus-visible { outline: 2px solid #5067a5; outline-offset: 1px; }
    .main-content.with-nav { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
    .overview-heading { display: block; margin-bottom: 20px; }
    .overview-heading h2 { font-size: 25px; }
    .overview-subtitle { font-size: 12px; }
    .overview-heading-actions { justify-content: space-between; margin-top: 18px; gap: 10px; }
    .overview-heading-actions .btn { min-height: 40px; }
    .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
    .metric { padding: 15px 13px; border-radius: 10px; }
    .metric-label { font-size: 10px; align-items: flex-start; line-height: 1.45; }
    .metric-number { font-size: 21px; margin: 13px 0 10px; letter-spacing: -.05em; }
    .metric-footnote { font-size: 9px; line-height: 1.6; align-items: baseline; flex-wrap: wrap; }
    .metric-arrow { display: none; }
    .overview-charts, .overview-operations { grid-template-columns: minmax(0,1fr); gap: 18px; margin-bottom: 22px; }
    .panel-heading { padding: 18px 16px 14px; }
    .panel-heading h2 { font-size: 14px; }
    .panel-heading p { font-size: 10px; }
    .period-switch button { font-size: 10px; padding: 5px 7px; }
    .chart-summary { padding: 0 16px; }
    .chart-summary strong { font-size: 24px; }
    .chart-summary span { font-size: 9px; }
    .revenue-chart { margin: 22px 16px 10px 10px; height: 190px; gap: 8px; }
    .chart-axis { width: 32px; font-size: 8px; }
    .revenue-columns { gap: 7px; }
    .revenue-bar { border-radius: 3px 3px 0 0; }
    .revenue-month { font-size: 8px; }
    .chart-reference span { font-size: 8px; }
    .chart-data-grid { grid-template-columns: 1fr; }
    .distribution-content { flex-direction: row; padding: 4px 16px 20px; gap: 18px; }
    .status-ring { width: 122px; height: 122px; }
    .status-legend { grid-template-columns: 1fr; row-gap: 8px; }
    .status-legend a { font-size: 9px; }
    .forecast-strip { padding: 14px 16px; }
    .forecast-strip strong { font-size: 22px; }
    .overview-section-heading h2 { font-size: 18px; }
    .overview-section-heading > span { font-size: 10px; }
    .work-row { padding: 14px 16px; gap: 9px; flex-wrap: wrap; }
    .work-client { flex-basis: calc(100% - 120px); gap: 9px; }
    .work-client strong { font-size: 11px; }
    .work-client small { font-size: 9px; }
    .work-row form { margin-left: auto; }
    .work-row .btn-sm { min-height: 34px; }
    .entity-avatar { width: 29px; height: 29px; font-size: 9px; border-radius: 7px; }
    .work-amount { font-size: 11px; }
    .upcoming-row, .payment-row { padding: 14px 16px; gap: 10px; }
    .upcoming-row > strong, .payment-row > strong { font-size: 11px; }
    .upcoming-client strong, .payment-client strong { font-size: 11px; }
    .card-header, .card-footer { padding: 16px; }
    .card-body { padding: 16px; }
    .form-input, .search-box input { font-size: 16px; }
    .form-actions > .btn-primary { flex: 0 1 auto; }
    .list-item { padding: 16px; }
    .collection-intro { display: block; }
    .collection-intro h2 { font-size: 24px; }
    .collection-count { display: block; margin-top: 12px; }
    .tab { flex: 0 0 auto; padding: 12px 14px; font-size: 12px; }
    .detail-title { font-size: 23px; }
    .invoice-record { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; }
    .invoice-record-main { grid-column: 1; grid-row: 1 / 3; min-width: 0; }
    .invoice-record-money, .invoice-record-status { grid-column: 2; margin: 0; }
    .invoice-record .list-item-title { font-size: 13px; }
    .invoice-record-number { font-size: 10px; }
    .collection-footer { padding: 12px 16px; }
}
@media (max-width: 359px) {
    .metric-grid { grid-template-columns: minmax(0,1fr); }
    .metric-number { font-size: 28px; }
    .form-row { grid-template-columns: minmax(0,1fr); }
    .distribution-content { flex-direction: column; }
    .status-legend { grid-template-columns: 1fr 1fr; }
    .header-content { gap: 6px; }
    .header-actions .btn svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
    .nav-bottom, .header, .skip-link, .fab { display: none !important; }
    .main-content { margin: 0; padding: 0; }
    .metric { break-inside: avoid; }
    .public-page .main-content { margin: 0; }
}
.demo-label { font-size: 10px; color: #657084; background: #f2f4f8; border: 1px solid #e3e7ef; padding: 4px 7px; border-radius: 5px; }
.invoice-compose { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 24px; align-items: start; }
.invoice-compose-fields { min-width: 0; }
.invoice-summary { position: sticky; top: 90px; }
.invoice-summary-body { padding: 0 22px 12px; }
.summary-total { margin: 4px 0 24px; }
.summary-total > span { font-size: 11px; color: #657084; }
.summary-total output { display: block; font-size: 35px; letter-spacing: -.06em; font-weight: 600; color: #263a6e; margin-top: 6px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.summary-breakdown > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #edf0f5; font-size: 12px; }
.summary-breakdown dt { color: #657084; }
.summary-breakdown dd { font-weight: 550; font-variant-numeric: tabular-nums; }
.summary-help { font-size: 11px; line-height: 1.7; color: #657084; margin: 16px 0 10px; }
.invoice-summary .form-actions { margin: 0; border-top: 1px solid var(--color-border); padding: 16px 22px; flex-direction: column-reverse; gap: 8px; }
.invoice-summary .form-actions > * { width: fit-content; max-width: 100%; align-self: flex-start; }
.invoice-compose .invoice-item { background: #f8f9fc; border-color: #e3e7ef; border-radius: 9px; }
.invoice-compose .invoice-item-badge { background: transparent; color: #718096; font-size: 10px; letter-spacing: .07em; }
.invoice-compose .invoice-price-toggle { background: #f0f2f7; border: none; border-radius: 7px; }
.invoice-compose .invoice-price-toggle-btn { border-radius: 5px; }
.invoice-compose .invoice-price-toggle-btn.active { background: #fff; color: #3f548a; box-shadow: 0 1px 3px #16213b0b; }
.invoice-compose textarea.form-input { min-height: 70px; }
.invoice-compose .invoice-price-summary { font-size: 11px; }
body[data-page="invoices.detail"] .main-content > .card[style*="background:"] .text-muted { color: #b8c7df; }
@media (max-width: 1199px) {
    .invoice-compose { grid-template-columns: minmax(0,1fr); }
    .invoice-summary { position: static; }
    .invoice-summary .form-actions { flex-direction: row; }
    .invoice-summary .form-actions > * { width: auto; flex: 0 1 auto; }
}
@media (max-width: 767px) {
    .demo-label { display: none; }
    .invoice-compose { gap: 0; }
    .invoice-summary .form-actions > .btn-primary { flex-basis: auto; }
}
.settings-layout { display: grid; grid-template-columns: 165px minmax(0,1fr); gap: 30px; align-items: start; }
.settings-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; }
.settings-nav .eyebrow { padding: 4px 12px; }
.settings-nav a { color: #657084; text-decoration: none; font-size: 12px; padding: 10px 12px; border-radius: 7px; transition: background 150ms, color 150ms; }
.settings-nav a:hover, .settings-nav a:focus-visible { background: #e9edfa; color: #3f548a; }
.settings-sections { min-width: 0; }
.settings-sections .section-header { scroll-margin-top: 88px; }
.settings-service-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.settings-service-links .card-body { height: 100%; gap: 12px; padding: 18px; }
.settings-service-links h3 { font-size: 13px; }
.settings-service-links p { font-size: 11px !important; }
.settings-sections .section-title { font-size: 16px; }
.settings-sections .card { margin-bottom: 28px; }
@media (prefers-reduced-motion: no-preference) { html:has(.settings-layout) { scroll-behavior: smooth; } }
@media (min-width: 1200px) { .invoice-record { padding-top: 12px; padding-bottom: 12px; } }
@media (max-width: 1100px) {
    .settings-layout { display: block; }
    .settings-nav { flex-direction: row; flex-wrap: wrap; position: static; margin-bottom: 24px; gap: 4px; }
    .settings-nav .eyebrow { display: none; }
    .settings-nav a { background: #edf0f7; padding: 9px 12px; }
}
@media (max-width: 600px) { .settings-service-links { grid-template-columns: minmax(0,1fr); gap: 0; } }
/* Shared metrics used by messaging also shrink within narrow viewports. */
.dash-metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dash-metric-card { min-width: 0; border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.dash-metric-label { white-space: normal; overflow: visible; }
@media (max-width: 359px) {
    .dash-metric-card { padding: 12px; gap: 8px; }
    .dash-metric-icon { width: 28px; height: 28px; }
    .dash-metric-label { font-size: 9px; }
}
.mailing-tabs { max-width: 100%; overflow-x: auto; }
.mailing-tab { min-width: 0; white-space: normal; }

.notice-symbol { width: 27px; height: 27px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #3559a4; background: #edf1fa; font-size: 13px; font-weight: 600; }
.setup-notice { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; }
.notice-copy { flex: 1; min-width: 0; }
.notice-copy h2 { font-size: 13px; font-weight: 600; margin: 0 0 5px; }
.notice-copy p { font-size: 12px; line-height: 1.6; color: var(--color-text-light); margin: 0; }
/* Use the vector silhouette in the navigation's text color. */
.brand-logo { display: block; width: 78px; aspect-ratio: 680 / 552; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--brand-logo) center / contain no-repeat; mask: var(--brand-logo) center / contain no-repeat; }
.public-page .flash-container { top: auto; left: auto; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); }
.service-favicon { position: relative; width: 36px; height: 36px; border-radius: 9px; background: #edf1fd; color: #5067a5; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; font-size: 13px; font-weight: 650; }
.service-favicon img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; background: #fff; border-radius: 5px; }
@media (max-width: 767px) {
    .setup-notice { flex-wrap: wrap; align-items: flex-start; padding: 16px; gap: 12px; }
    .setup-notice .notice-copy { flex-basis: calc(100% - 40px); }
    .setup-notice > .btn { margin-left: 39px; }
}
@media (min-width: 768px) {
    .nav-secondary, .nav-footer { width: 100%; align-self: stretch; }
}

/* Compact actions and a single banking filter toolbar. */
.btn { max-width: 100%; }
.bank-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 24px 0 16px; }
.bank-account-filter { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bank-account-filter label { font-size: 12px; color: var(--color-text-light); }
.bank-account-filter select { width: auto; max-width: 270px; font-size: 12px; min-height: 40px; }
.bank-status-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.bank-status { padding: 9px 12px; border-radius: 6px; font-size: 12px; color: var(--color-text-light); text-decoration: none; transition: background 150ms, color 150ms; }
.bank-status:hover { background: #e9edf5; color: var(--color-text); }
.bank-status.active { background: #e5eafb; color: #304fbd; font-weight: 600; }
.bank-filterbar > .btn { margin-left: auto; }
@media (max-width: 767px) {
    .bank-filterbar { gap: 12px; }
    .bank-account-filter { max-width: 100%; }
    .bank-account-filter select { min-width: 0; max-width: 240px; }
    .bank-status-filter { order: 3; flex-basis: 100%; }
    .bank-filterbar > .btn { margin-left: 0; }
}

.client-billing-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 24px; align-items: start; }
.client-billing-layout > * { min-width: 0; }
@media (max-width: 1000px) { .client-billing-layout { grid-template-columns: minmax(0,1fr); gap: 0; } }

.record-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; align-items:start; }
.record-summary { min-width:0; background:white; border:1px solid var(--color-border); border-radius:12px; overflow:hidden; }
.record-total { padding:22px 20px 16px; }
.record-total span { display:block; font-size:12px; color:var(--color-text-light); margin-bottom:6px; }
.record-total strong { font-size:30px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.record-summary > .card { margin:0 !important; border:0; border-radius:0; box-shadow:none; }
.record-summary .card-body { padding:12px 20px 20px; }
.record-summary .detail-row { padding:10px 0; gap:12px; }
.record-summary .detail-value { font-size:12px; text-align:right; }
.record-body { min-width:0; }
.record-actions { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid var(--color-border); }
.record-actions > .flex { display:contents; }
.record-actions .btn { flex:0 1 auto; }
.record-body .section-header { margin:14px 0 10px; }
.record-body .card-body, .record-body .list-item { padding:14px 18px; }
body:is([data-page="invoices.detail"],[data-page="clients.detail"]) .detail-header { margin-bottom:20px; gap:12px; }
body:is([data-page="invoices.detail"],[data-page="clients.detail"]) .detail-icon { width:42px; height:42px; border-radius:10px; }
body:is([data-page="invoices.detail"],[data-page="clients.detail"]) .detail-title { font-size:23px; }
body[data-page="clients.detail"] .detail-row { padding:10px 0; }
body[data-page="clients.detail"] .card-body { padding:16px 20px; }
@media(max-width:900px) { .record-layout { grid-template-columns:minmax(0,1fr); gap:18px; } .record-summary .card-body { padding:12px 18px; } .record-total { padding:16px 18px 4px; } }

/* Shared detail-page finish: quiet surfaces and clearer hierarchy. */
body:is([data-page="invoices.detail"], [data-page="clients.detail"], [data-page="banking.transaction_detail"]) .main-content { padding-top: 26px; }
.record-summary { border-color: #dfe5ef; box-shadow: 0 3px 12px #182b4b04; }
.record-total { background: #f0f4fb; border-bottom: 1px solid #e3e9f2; padding: 22px 20px; }
.record-total span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: #64748b; }
.record-total strong { display: block; color: #223c61; font-size: 32px; margin-top: 8px; }
.record-summary .detail-label { font-size: 11px; }
.record-summary .detail-value { font-variant-numeric: tabular-nums; font-weight: 500; }
.record-summary .detail-row:last-child { border-bottom: 0; }
.record-actions { border: 0; padding-bottom: 8px; margin-bottom: 10px; gap: 8px; }
.record-actions .btn-secondary { background: #fff; border-color: #dfe5ef; box-shadow: 0 1px 2px #182b4b04; }
.record-actions .btn-secondary:hover { background: #eef3fb; border-color: #c8d4e8; }
.record-body .section-title { font-size: 13px; font-weight: 600; color: #465570; }
.invoice-lines-heading { display:flex; justify-content:space-between; gap:16px; padding:11px 18px; background:#f8fafc; border-bottom:1px solid #edf0f5; color:#788397; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.invoice-lines .list-item { min-height:76px; }
.record-body .card { border-color:#e1e7f0; box-shadow:0 2px 8px #182b4b03; }
.record-body .card-header { padding:15px 18px; background:#fafbfd; }
.record-body .list-item-amount { font-weight:600; }
body[data-page="clients.detail"] .tabs { justify-content:flex-start; gap:4px; border:0; margin-bottom:20px; padding:4px; background:#e9edf4; border-radius:9px; width:fit-content; max-width:100%; }
body[data-page="clients.detail"] .tab { flex:0 0 auto; border:0; padding:9px 15px; border-radius:6px; font-size:12px; }
body[data-page="clients.detail"] .tab.active { background:#fff; color:#294c86; box-shadow:0 1px 4px #14213a0c; }
.client-billing-layout .card-header { padding:15px 18px; background:#fafbfd; }
.client-billing-layout .card-title { font-size:13px; }
.client-billing-layout .card { border-color:#e1e7f0; }
.client-billing-layout > div > .card:last-child .card-body { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.client-billing-layout > div > .card:last-child .btn { margin:0; }
@media (min-width:901px) { .record-summary { position:sticky; top:88px; } }
@media (prefers-reduced-motion:no-preference) {
    .record-summary, .record-body, .client-billing-layout { animation:detail-reveal 200ms ease-out both; }
    @keyframes detail-reveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
}

/* Cabinet cockpit: numbers first, decisions alongside the trend. */
.cockpit { --pilot-ink:#222d4b; }
.cockpit .overview-heading h2 { font-size:30px; letter-spacing:-.045em; }
.pilot-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #dfe6ef; background:white; border-radius:12px; overflow:hidden; margin-bottom:24px; }
.pilot-metric { padding:22px; color:var(--pilot-ink); border-right:1px solid #e6ebf1; text-decoration:none; transition:background 160ms; min-width:0; }
.pilot-metric:last-child { border:0; }
.pilot-metric:hover { background:#f2f6fb; }
.pilot-metric > span { display:flex; justify-content:space-between; gap:8px; color:#65758a; font-size:12px; }
.pilot-metric b { font-weight:400; }
.pilot-metric > strong { display:block; font-size:clamp(23px,2.2vw,34px); letter-spacing:-.05em; font-variant-numeric:tabular-nums; margin:14px 0 8px; }
.pilot-metric small { font-size:11px; color:#6d7b8c; line-height:1.6; display:block; }
.pilot-metric em { font-style:normal; font-size:13px; letter-spacing:0; font-weight:400; }
.pilot-income { background:#202b49; color:#fff; }
.pilot-income:hover { background:#2d3a60; }
.pilot-income > span,.pilot-income small { color:#c1d2e0; }
.pilot-late > strong { color:#ad6630; }
.pilot-main { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr); gap:24px; align-items:stretch; }
.cockpit .panel { border-color:#e0e7f0; box-shadow:0 2px 7px #132a4503; }
.cockpit .panel-heading h2 { font-size:15px; letter-spacing:-.02em; }
.cockpit .panel-heading p { font-size:11px; }
.cockpit .chart-summary strong { font-size:28px; color:var(--pilot-ink); }
.cockpit .revenue-bar { max-width:28px; border-radius:5px 5px 0 0; background:#465a83; }
.cockpit .revenue-column:last-child .revenue-bar { background:var(--accent-blue); }
.cockpit .revenue-bar:hover,.cockpit .revenue-bar:focus-visible { background:var(--accent-blue-hover); }
.cockpit .chart-reference { display:none; }
.priority-row { display:flex; gap:12px; align-items:center; padding:16px 20px; color:#26384f; text-decoration:none; border-top:1px solid #eef1f6; transition:background 160ms; }
.priority-row:hover { background:#f7f9fc; }
.priority-row > span:nth-child(2) { flex:1; min-width:0; }
.priority-row strong { display:block; font-size:12px; font-weight:550; }
.priority-row small { display:block; font-size:10px; color:#7a8698; margin-top:4px; }
.priority-row > b { font-size:16px; font-variant-numeric:tabular-nums; }
.priority-row > span:last-child { color:#7b8c9f; }
.priority-symbol { width:30px; height:30px; display:grid; place-items:center; background:var(--accent-blue-soft); color:#5067a5; border-radius:8px; flex-shrink:0; }
.priority-warning { background:#fcf1e5; color:#ad6630; }
.pilot-recurring { margin:12px 20px 20px; padding:16px; background:#f1f4fc; border-radius:8px; }
.pilot-recurring > span { font-size:11px; color:#66788b; }
.pilot-recurring > strong { display:block; font-size:22px; letter-spacing:-.03em; margin:7px 0; color:#202d46; }
.pilot-recurring small { font-size:11px; font-weight:400; }
.pilot-recurring p { font-size:10px; margin:0; color:#728193; }
.pilot-aging { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:24px; align-items:center; margin:24px 0; padding:24px 0; border-top:1px solid #dfe6ee; border-bottom:1px solid #dfe6ee; }
.pilot-aging h2 { font-size:15px; margin:6px 0; }
.pilot-aging p:not(.eyebrow) { font-size:11px; color:#7a8797; margin:0; }
.aging-bucket > span { color:#728093; font-size:11px; }
.aging-bucket strong { display:block; font-size:20px; margin:9px 0; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.aging-track { height:4px; background:#e0e6ee; border-radius:4px; overflow:hidden; }
.aging-track i { display:block; height:100%; background:#6f86ca; }
.aging-bucket:nth-last-child(-n+2) .aging-track i { background:#b8804d; }
.pilot-work { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
.pilot-invoice-row { display:flex; gap:12px; align-items:center; padding:15px 20px; border-top:1px solid #eef1f6; text-decoration:none; color:#26374b; transition:background 150ms; }
.pilot-invoice-row:hover { background:#f5f8fc; }
.pilot-invoice-row > span:nth-child(2) { flex:1; min-width:0; }
.pilot-invoice-row strong { display:block; font-size:12px; }
.pilot-invoice-row small { display:block; font-size:10px; color:#748194; margin-top:5px; }
.pilot-invoice-row b { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pilot-receipts { margin-top:24px; }
.pilot-definition { border-top:1px solid #edf0f5; padding:16px 20px; color:#64768b; font-size:11px; line-height:1.7; }
.pilot-definition summary { cursor:pointer; }
.cockpit [id] { scroll-margin-top:90px; }
#lateInvoices { max-height:480px; overflow:auto; }
@media(max-width:1199px) { .pilot-metric { padding:18px 14px; } .pilot-main { grid-template-columns:minmax(0,1fr); } .pilot-aging { gap:16px; grid-template-columns:repeat(4,1fr); } .pilot-aging > div:first-child { grid-column:1/-1; } }
@media(max-width:767px) { .cockpit .overview-heading h2 { font-size:26px; } .pilot-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .pilot-metric:nth-child(-n+2) { border-bottom:1px solid #e6ebf1; } .pilot-metric:nth-child(2) { border-right:0; } .pilot-metric > strong { font-size:24px; } .pilot-work { grid-template-columns:minmax(0,1fr); } .pilot-aging { grid-template-columns:repeat(2,1fr); } .pilot-invoice-row { padding:14px; gap:8px; } .pilot-invoice-row .entity-avatar { display:none; } .cockpit .panel-heading { flex-wrap:wrap; gap:12px; } }

.pilot-main-team { grid-template-columns:minmax(0,1fr); }
.pilot-metrics-team { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cockpit .legend-dot { background:#465a83; }
@media(max-width:767px) { .pilot-metrics-team { grid-template-columns:minmax(0,1fr); } }

.cockpit .revenue-panel { display:flex; flex-direction:column; }
.cockpit .revenue-chart { flex:1; min-height:240px; }
@media(prefers-reduced-motion:no-preference) {
    .pilot-metrics, .pilot-main, .pilot-aging, .pilot-work { animation:detail-reveal 240ms ease-out both; }
    .pilot-main { animation-delay:40ms; }
    .pilot-aging { animation-delay:70ms; }
    .pilot-metric:hover b, .priority-row:hover > span:last-child { transform:translate(2px,-2px); }
    .pilot-metric b, .priority-row > span:last-child { transition:transform 150ms; }
}

/* Encours: one total, four exclusive due-date groups. */
.pilot-aging { display:block; padding:22px; background:#fff; border:1px solid #e0e7f0; border-radius:12px; }
.aging-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:22px; }
.pilot-aging .aging-heading h2 { font-size:22px; color:#202d46; letter-spacing:-.03em; }
.aging-breakdown { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.aging-bucket { min-width:0; }
.aging-bucket > span { font-size:12px; color:#52617a; }
.aging-bucket small { display:block; font-size:11px; color:#728093; margin-bottom:12px; }
.aging-bucket:first-child .aging-track i { background:var(--accent-blue); }
.pilot-aging p.aging-explanation { margin:18px 0 0; font-size:11px; line-height:1.6; color:#728093; }
.cockpit .payment-check { background:var(--accent-blue-soft); color:#5067a5; }
@media(max-width:767px) { .pilot-aging { padding:18px; } .aging-heading { align-items:flex-start; flex-direction:column; } .aging-breakdown { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; } .aging-bucket > span { font-size:11px; } .aging-bucket strong { font-size:19px; } }

/* Shared status chips: semantic color, quiet surface, readable text. */
/* Status labels: soft rectangular chips, no notification dot or raised border. */
body .badge { --badge-ink:#47566f; --badge-bg:#e1e6ef; display:inline-flex; align-items:center; justify-content:center; gap:0; width:fit-content; max-width:100%; padding:4px 8px; border:0; border-radius:6px; background:var(--badge-bg); color:var(--badge-ink); font-size:11px; font-weight:600; line-height:1.45; letter-spacing:.005em; vertical-align:middle; white-space:normal; box-shadow:none; }
body .badge::before { content:none; }
body .badge-blue, body .badge-info, body .badge-purple { --badge-ink:#354e88; --badge-bg:#dce4fc; }
body .badge-green, body .badge-success { --badge-ink:#24634f; --badge-bg:#d5eade; }
body .badge-yellow, body .badge-warning { --badge-ink:#805719; --badge-bg:#f2e4c6; }
body .badge-red, body .badge-danger { --badge-ink:#963c50; --badge-bg:#f1dce2; }
body .badge-gray { --badge-ink:#47566f; --badge-bg:#e1e6ef; }


/* Banking workspace: compact controls above a readable operation ledger. */
.bank-heading h2 { font-size:28px; letter-spacing:-.04em; }
.bank-demo { font-size:11px; color:#697991; margin:0 0 18px; }
.bank-demo summary { cursor:pointer; }
.bank-demo p { margin:8px 0; max-width:750px; line-height:1.7; }
.bank-automation { border-bottom:1px solid #e0e6ef; padding:0 0 16px; margin-bottom:20px; }
.bank-automation summary { cursor:pointer; font-size:12px; color:#4c5d79; }
.bank-automation summary > span { margin-left:10px; font-weight:600; }
.bank-automation summary small { margin-left:20px; color:#7b8798; font-size:11px; }
.bank-automation-body { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:16px; }
.bank-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:24px; }
.bank-kpi { padding:18px 20px; background:white; border:1px solid #e1e7f0; border-radius:10px; color:#253653; text-decoration:none; transition:background 150ms; }
.bank-kpi:hover { background:#f0f4fd; }
.bank-kpi > span { display:flex; justify-content:space-between; font-size:12px; }
.bank-kpi i { font-style:normal; color:#8b9ab4; }
.bank-kpi strong { display:block; font-size:28px; letter-spacing:-.04em; margin:8px 0 5px; }
.bank-kpi small { font-size:10px; color:#77859a; }
.bank-kpi:first-child { background:#202b49; color:#fff; border-color:#202b49; }
.bank-kpi:first-child small { color:#b9c6e1; }
.bank-ledger { background:white; border:1px solid #e0e6ef; border-radius:12px; overflow:hidden; }
.bank-ledger-heading { padding:20px 22px 0; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.bank-ledger-heading h2 { font-size:15px; margin:0; }
.bank-ledger-heading > span { font-size:10px; color:#7b8798; }
.bank-ledger .bank-filterbar { padding:0 22px; margin:18px 0 12px; gap:10px; }
.bank-ledger .search-box { margin:0 22px 8px; max-width:440px; }
.bank-ledger .search-box input { background:#f8fafc; font-size:12px; }
.bank-search-count { margin:10px 22px 16px; font-size:11px; color:#7b8798; }
.bank-column-labels { display:flex; justify-content:space-between; padding:10px 22px; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#7b8798; border-top:1px solid #edf0f5; border-bottom:1px solid #edf0f5; background:#fafbfd; }
.bank-date { width:42px; flex-shrink:0; text-align:center; color:#566786; }
.bank-date strong { font-size:16px; display:block; }
.bank-date small { font-size:9px; display:block; margin-top:3px; }
.bank-ledger .txn-item { padding:15px 22px; gap:16px; }
.bank-ledger .list-item-title { font-size:12px; }
.bank-ledger .list-item-subtitle { margin-top:5px; font-size:10px; }
.bank-ledger .list-item-amount { margin-bottom:5px; font-size:13px; }
@media(max-width:767px) { .bank-heading { display:block; } .bank-heading .btn { margin-top:14px; } .bank-overview { gap:8px; } .bank-kpi { padding:14px 10px; } .bank-kpi strong { font-size:24px; } .bank-kpi > span { font-size:11px; } .bank-kpi small { line-height:1.5; display:block; } .bank-ledger-heading { align-items:flex-start; flex-direction:column; padding:16px 14px 0; } .bank-ledger .bank-filterbar { padding:0 14px; } .bank-ledger .search-box { margin-left:14px; margin-right:14px; } .bank-ledger .txn-item { padding:14px; gap:10px; } .bank-date { display:none; } .bank-automation summary small { display:block; margin:8px 0 0; } }
.bank-review-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,1fr); gap:20px; align-items:start; }
.bank-review-layout .bank-filterbar { flex-wrap:wrap; }
.bank-review-layout .bank-ledger-heading { flex-wrap:wrap; }
.bank-review-layout .bank-date { display:none; }
.review-panel { position:sticky; top:84px; background:#fff; border:1px solid #e0e6ef; border-radius:12px; max-height:calc(100dvh - 105px); overflow:auto; padding:18px; }
.review-panel-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.review-panel h2 { font-size:14px; }
.review-panel h3 { font-size:12px; margin:20px 0 12px; }
.review-summary { padding:16px; background:#f1f4fc; border-radius:9px; margin:16px 0 6px; }
.review-summary strong { display:block; font-size:25px; margin:8px 0; color:#202b49; }
.review-summary p,.review-panel p { font-size:12px; line-height:1.6; }
.review-panel small { display:block; font-size:10px; color:#6d7c92; margin-top:4px; }
.review-choice,.review-allocation { border-bottom:1px solid #edf0f5; padding:12px 0; }
.review-choice label { display:flex; gap:10px; align-items:center; cursor:pointer; font-size:12px; }
.review-choice .form-input { margin-top:8px; }
.review-reasons { color:#5067a5; font-size:10px !important; }
.review-choices { max-height:340px; overflow:auto; margin-top:10px; }
.review-totals { background:#f7f9fc; border-radius:8px; padding:14px; margin:18px 0 12px; font-size:12px; }
.review-actions { display:flex; gap:8px; flex-wrap:wrap; }
.review-feedback { font-size:12px; line-height:1.6; color:#435b8a; margin-top:10px; }
.review-feedback.error { color:#a34253; }
.bank-ledger .review-selected { background:#edf2ff; box-shadow:inset 3px 0 #8ba0f4; }
@media(max-width:1100px) { .bank-review-layout { grid-template-columns:minmax(0,1fr); } .review-panel { display:none; } .review-panel.is-open { display:block; position:fixed; inset:68px 12px 85px; z-index:120; max-height:none; box-shadow:0 12px 60px #202b4940; } }

.review-panel-top { position:sticky; top:-18px; padding:8px 0; background:white; z-index:2; }
.review-choices { max-height:250px; }
.review-actions { position:sticky; bottom:-18px; background:white; padding:12px 0; border-top:1px solid #edf0f5; }
.review-ignore { font-size:11px; margin:10px 0; color:#68788f; }
.review-ignore summary { cursor:pointer; }
.review-ignore .btn { margin:8px 6px 0 0; }
.review-hint { color:#6d7c92; font-size:11px; line-height:1.6; }
@media(max-width:1100px) { .review-panel.is-open { inset:68px 12px 85px; } }

/* Invoice selection: the whole summary is an accessible toggle button. */
.review-choices { max-height:380px; padding:3px; }
.review-choice { border:1px solid #e1e7f0; border-radius:10px; padding:0; margin-bottom:10px; overflow:hidden; background:#fff; transition:border-color 150ms,background 150ms; }
.review-choice.is-selected { border-color:#8ba0f4; background:#f7f9ff; box-shadow:0 0 0 1px #8ba0f426; }
.invoice-pick { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; border:0; width:100%; padding:14px; background:transparent; color:#263653; cursor:pointer; text-align:left; }
.invoice-pick:hover { background:#eef2ff80; }
.invoice-pick:focus-visible { outline-offset:-3px; border-radius:9px; }
.invoice-pick-mark { display:grid; place-items:center; width:21px; height:21px; border:1px solid #d8e0ee; border-radius:7px; color:#7a89a2; font-size:15px; background:white; }
.is-selected .invoice-pick-mark { background:#8ba0f4; border-color:#8ba0f4; color:#202b49; }
.invoice-pick-name strong { font-size:12px; display:block; }
.invoice-pick-due { text-align:right; }
.invoice-pick-due strong { font-size:13px; font-variant-numeric:tabular-nums; }
.invoice-pick small { font-size:10px; margin-top:5px; }
.invoice-evidence { grid-column:2/-1; display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:2px; }
.invoice-evidence span { font-size:10px; line-height:1.5; color:#64769b; }
.invoice-evidence span::before { content:'·'; margin-right:5px; color:#8ba0f4; font-weight:700; }
.invoice-allocation-edit { display:flex; align-items:center; gap:12px; padding:0 14px 12px 46px; }
.invoice-allocation-edit label { font-size:10px; color:#65758c; flex:1; }
.allocation-money-field { position:relative; width:150px; max-width:60%; }
.review-choice .allocation-money-field .form-input { margin:0; min-height:36px; padding:8px 40px 8px 10px; font-size:13px; font-variant-numeric:tabular-nums; }
.allocation-money-field > span { position:absolute; right:10px; top:11px; font-size:10px; color:#8794a8; pointer-events:none; }
.invoice-dismiss { margin:0 0 7px 38px; font-size:10px; min-height:28px; padding:5px 8px; color:#76849a; }
.review-totals { background:#f7f9fc; border:1px solid #e3e8f1; padding:15px; }
.allocation-recap-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.allocation-recap-heading > strong { font-size:12px; }
.allocation-recap-heading > span { color:#7a879a; font-size:10px; }
.allocation-recap-row { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid #e8edf4; }
.allocation-recap-row strong { font-size:11px; display:block; }
.allocation-recap-row > span:last-child { text-align:right; }
.allocation-recap-total { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:15px 0 12px; }
.allocation-recap-total span { display:block; font-size:10px; color:#718099; }
.allocation-recap-total strong { display:block; font-size:21px; letter-spacing:-.035em; margin-top:5px; color:#263653; font-variant-numeric:tabular-nums; }
.allocation-recap-total > div:last-child { text-align:right; }
.allocation-progress { height:4px; background:#e1e7f2; border-radius:4px; overflow:hidden; }
.allocation-progress i { display:block; height:100%; background:#8ba0f4; transition:width 160ms; }
.review-panel .allocation-note,.review-panel .allocation-empty { color:#718099; font-size:10px; }
.allocation-error { color:#a34253; font-size:11px; }
@media(max-width:500px) { .invoice-pick { padding:12px; gap:8px; } .invoice-pick-due strong { font-size:12px; } .invoice-allocation-edit { padding-left:12px; } .invoice-dismiss { margin-left:34px; } }
@media(prefers-reduced-motion:reduce) { .allocation-progress i { transition:none; } }

/* Secondary commands remain visibly actionable, even at rest. */
body .btn-ghost { background:#fff; border:1px solid #dce3ee; box-shadow:0 1px 2px #202b4906; }
body .btn-ghost:hover { background:#f2f5fc; border-color:#bac8e3; }
.review-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.review-ignore { margin:14px 0 18px; }
.review-ignore summary { display:list-item; width:fit-content; padding:8px 10px; border:1px solid #dce3ee; border-radius:7px; background:#f9fafc; list-style-position:inside; }
.review-ignored-state { margin:18px 0; padding:16px; border:1px solid #e1e7f0; border-radius:10px; background:#fafbfd; }
.review-ignored-state > strong { font-size:13px; }
.review-ignored-state p { margin:8px 0 16px; color:#68788f; }
.invoice-pick-mark { position:relative; box-sizing:border-box; flex-shrink:0; line-height:1; }
body .invoice-dismiss { margin:0 14px 12px 46px; color:#65758c; }
@media(max-width:500px) { body .invoice-dismiss { margin-left:12px; } }

/* One scrolling region in the review: selection above a persistent recap. */
.review-panel { display:flex; flex-direction:column; overflow:hidden; padding:16px; }
.review-panel-top { position:static; flex-shrink:0; padding:0 0 10px; }
#reviewContent { overflow-y:auto; min-height:0; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:5px; }
.review-choices { max-height:none; overflow:visible; }
.review-summary { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px; margin:4px 0 10px; }
.review-summary strong { grid-column:2; grid-row:1; font-size:22px; margin:0; }
.review-summary p { grid-column:1/-1; margin:2px 0 0; }
.review-toolbar { margin:8px 0; }
.review-ignore { margin:8px 0 12px; }
.review-panel h3 { margin:14px 0 10px; }
.invoice-evidence { background:#edf2fc; border:1px solid #e0e7f5; border-radius:7px; padding:8px 10px; gap:3px 10px; }
.invoice-evidence > strong { flex-basis:100%; font-size:10px; font-weight:600; color:#435b85; margin-bottom:2px; }
.invoice-evidence span { font-size:10px; color:#576c91; }
.review-footer { flex-shrink:0; padding-top:10px; border-top:1px solid #e4e9f2; background:white; }
.review-footer .review-totals { margin:0; padding:10px 12px; }
.review-footer .allocation-recap-total { padding:8px 0; }
.review-footer .allocation-recap-total strong { font-size:19px; }
.review-footer .review-actions { position:static; padding:10px 0 0; border:0; }
.allocation-breakdown { font-size:10px; color:#65758c; }
.allocation-breakdown summary { cursor:pointer; padding:4px 0; }
.review-footer .allocation-note,.review-footer .allocation-empty { margin:6px 0 0; }
@media(max-width:1100px) { .review-panel { display:none; } .review-panel.is-open { display:flex; } }

.review-panel > .review-summary { flex-shrink:0; }

/* Empty selection square; a vector check only appears when selected. */
.invoice-pick-mark { width:22px; height:22px; padding:0; border-radius:6px; display:flex; align-items:center; justify-content:center; align-self:start; margin-top:2px; }
.invoice-pick-mark svg { display:block; width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.is-selected .invoice-pick-mark svg { opacity:1; }
.bank-heading { gap:20px; margin-bottom:18px; align-items:center; }
.bank-heading h2 { font-size:25px; }
.bank-heading .btn { flex-shrink:0; }
.bank-demo { margin-bottom:14px; }
.bank-demo summary { width:fit-content; padding:7px 10px; border:1px solid #dce3ee; background:#f8faff; border-radius:7px; }
.bank-control-card { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:18px 20px; margin-bottom:18px; border:1px solid #e0e6ef; border-radius:12px; background:#fff; }
.bank-control-label { display:block; font-size:10px; color:#718099; margin-bottom:6px; }
.bank-sync-state strong,.bank-auto-settings strong { display:block; font-size:13px; color:#263653; }
.bank-sync-state > span:last-child { display:block; font-size:11px; line-height:1.5; color:#718099; margin-top:6px; }
.bank-auto-settings { border-left:1px solid #e6ebf3; padding-left:24px; }
.bank-auto-settings summary { display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; list-style:none; }
.bank-auto-settings summary::-webkit-details-marker { display:none; }
.bank-settings-trigger { border:1px solid #dce3ee; padding:7px 10px; border-radius:7px; font-size:11px; color:#435b85; background:#f8faff; }
.bank-auto-settings[open] .bank-settings-trigger { background:#edf2ff; }
.bank-auto-settings-body p { font-size:11px; line-height:1.6; color:#68788f; margin:12px 0; }
@media(max-width:767px) { .bank-control-card { grid-template-columns:1fr; gap:16px; padding:16px; } .bank-auto-settings { border-left:0; border-top:1px solid #e6ebf3; padding:14px 0 0; } .bank-heading .btn { white-space:normal; text-align:left; } }

.review-panel-top h2 { margin-right:auto; }
body .review-refresh { width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.registered-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 10px; }
.registered-heading h3 { margin:0; }
.registered-heading > span { font-size:10px; color:#718099; }
.review-allocation { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:7px 10px; border:1px solid #e2e8f2; border-radius:10px; padding:12px; margin-bottom:10px; background:#fafbfd; }
.allocation-file-icon { display:flex; align-items:center; justify-content:center; width:30px; height:34px; border-radius:7px; background:#edf2fc; color:#607bb3; }
.allocation-identity strong { display:block; font-size:12px; color:#263653; }
.allocation-identity > span { display:block; font-size:11px; color:#65758c; margin-top:4px; }
.allocation-amount { font-size:14px; color:#263653; font-variant-numeric:tabular-nums; white-space:nowrap; }
.review-panel .allocation-meta { grid-column:2/-1; margin:0; }
body .allocation-undo { grid-column:2/-1; justify-self:start; margin-top:3px; display:inline-flex; gap:6px; font-size:10px; min-height:29px; padding:5px 8px; }
.allocation-undo svg { width:13px; height:13px; }
.review-allocation > p,.allocation-confirm { grid-column:1/-1; margin:0; }
.allocation-confirm { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.allocation-complete { display:flex; align-items:center; gap:8px; color:#466b65; background:#f0f6f4; border-radius:8px; padding:11px 12px; margin:12px 0; font-size:11px; }
.allocation-complete svg { flex-shrink:0; }

/* Shared icons add a visual cue without replacing explicit labels. */
.ui-icon { display:inline-block; vertical-align:-3px; flex-shrink:0; }
.btn > .ui-icon { width:16px; height:16px; }
h2 > .ui-icon { width:17px; height:17px; margin-right:6px; color:#7188b9; }

.metric-caption { display:inline-flex; gap:9px; align-items:center; }
.metric-icon { width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:#8ba0f41a; color:#617fb4; flex-shrink:0; }
.metric-icon .ui-icon { width:18px; height:18px; }
.pilot-income .metric-icon,.bank-kpi:first-child .metric-icon { color:#b9c9ff; background:#ffffff12; }
.priority-symbol .ui-icon { width:20px; height:20px; }
.bank-control-label .ui-icon { width:16px; height:16px; margin-right:5px; color:#617fb4; }
.collection-title-group { display:flex; align-items:center; gap:14px; }
.collection-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:11px; background:#e9eefb; color:#607db2; flex-shrink:0; }
.collection-icon .ui-icon { width:24px; height:24px; }
@media(max-width:767px) { .bank-kpi .metric-caption { align-items:flex-start; flex-direction:column; gap:8px; } }

/* Align the actual pictogram, amount and caption to one left edge. */
.metric-icon { width:18px; height:26px; justify-content:flex-start; background:transparent; border-radius:0; }
.pilot-income .metric-icon,.bank-kpi:first-child .metric-icon { background:transparent; }
.metric-caption { justify-content:flex-start; text-align:left; }
.nav-caption { text-align:left; align-self:stretch; }
.review-refresh svg { width:18px; height:18px; }

/* Motion language: immediate feedback, short entrances, no layout movement. */
:root { --motion-fast:140ms; --motion-normal:200ms; --motion-ease:cubic-bezier(.2,.7,.2,1); }
@keyframes workspace-fade { from { opacity:0; } to { opacity:1; } }
@keyframes workspace-menu { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:no-preference) {
    .btn,.bank-settings-trigger,.modal-close { transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),color var(--motion-fast),opacity var(--motion-fast),transform var(--motion-fast) var(--motion-ease); }
    .nav-item,.tab,.bank-status,.settings-nav a { transition:background-color var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast); }
    .nav-item > svg { transition:color var(--motion-fast),transform var(--motion-normal) var(--motion-ease); }
    .bank-kpi,.pilot-metric,.priority-row,.pilot-invoice-row,.upcoming-row,.list-item { transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-normal); }
    .invoice-pick,.invoice-pick-mark,.invoice-evidence { transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast); }
    .invoice-pick-mark svg { transition:opacity var(--motion-fast); }
    .invoice-allocation-edit:not([hidden]) { animation:workspace-fade var(--motion-fast) ease-out; }
    .user-dropdown { transition:opacity var(--motion-fast),transform var(--motion-normal) var(--motion-ease),visibility var(--motion-normal); transform:translateY(-4px); }
    .user-dropdown.show { transform:translateY(0); }
    .modal-overlay { transition:opacity var(--motion-normal),visibility var(--motion-normal); }
    .modal { transform:translateY(16px); transition:transform var(--motion-normal) var(--motion-ease); }
    .modal-overlay.show .modal { transform:translateY(0); }
    details[open] > :not(summary) { animation:workspace-fade var(--motion-normal) ease-out; }
    .bank-control-card,.bank-overview,.bank-ledger,.collection-intro,.settings-layout,.mail-workspace { animation:workspace-fade var(--motion-normal) ease-out; }
    .review-panel.is-open { animation:workspace-fade var(--motion-fast) ease-out; }
    .note-menu.show { animation:workspace-menu var(--motion-fast) var(--motion-ease); }
    .form-input,select,textarea { transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast); }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    .nav-item:hover > svg { transform:translateX(2px); }
    .bank-kpi:hover { border-color:#bfcee9; box-shadow:0 3px 10px #202b4908; }
    .btn-ghost:hover,.btn-secondary:hover { box-shadow:0 2px 6px #202b490a; }
    .bank-settings-trigger:hover { background:#edf2ff; }
}

/* Content switches that previously jumped straight between display states. */
@media(prefers-reduced-motion:no-preference) {
    .tab-content:not(.hidden) { animation:workspace-menu 180ms var(--motion-ease); }
    .note-menu { transition:opacity 140ms,visibility 140ms,transform 180ms var(--motion-ease); }
    .autocomplete-dropdown { transition:opacity 140ms,transform 140ms; }
    .tag-selector,.tag-add-btn,.note-action-btn,.note-menu-item { transition:background-color 140ms,border-color 140ms,color 140ms,box-shadow 140ms; }
    .copy-btn.copied { animation:workspace-fade 140ms ease-out; }
    @supports (transition-behavior:allow-discrete) {
        .review-panel,.invoice-allocation-edit,.note-menu { transition:opacity 160ms,display 160ms allow-discrete; }
        .review-panel:not(.is-open),.invoice-allocation-edit[hidden],.tab-content.hidden { opacity:0; }
        @starting-style {
            .review-panel.is-open,.invoice-allocation-edit:not([hidden]),.tab-content:not(.hidden) { opacity:0; }
        }
    }
    @supports (interpolate-size:allow-keywords) {
        details { interpolate-size:allow-keywords; }
        details::details-content { block-size:0; overflow:clip; opacity:0; transition:block-size 180ms var(--motion-ease),opacity 140ms,content-visibility 180ms allow-discrete; }
        details[open]::details-content { block-size:auto; opacity:1; }
    }
}
/* Keep the empty desktop review visible; only the mobile overlay closes. */
@media(min-width:1101px) { .review-panel:not(.is-open) { opacity:1; } }
@media(prefers-reduced-motion:no-preference) {
    @supports(transition-behavior:allow-discrete) {
        .list-item,.txn-item,.invoice-table tbody tr { transition:opacity 140ms,background-color 140ms,display 140ms allow-discrete; }
        .list-item[hidden],.txn-item[hidden],.invoice-table tbody tr[hidden] { opacity:0; }
        @starting-style { .list-item:not([hidden]),.txn-item:not([hidden]),.invoice-table tbody tr:not([hidden]) { opacity:0; } }
    }
}

.page-return { margin:0; flex-shrink:0; display:flex; align-items:center; }
.page-return a { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid #dce3ee; border-radius:7px; background:#fff; color:#526789; font-size:12px; text-decoration:none; min-height:34px; }
.page-return a:hover { background:#edf2fc; border-color:#bdcbe4; }
.workspace-breadcrumb a { color:inherit; text-decoration:none; }
.workspace-breadcrumb a:hover { color:#385887; text-decoration:underline; }
@media(prefers-reduced-motion:no-preference) { .page-return a { transition:background-color 140ms,border-color 140ms; } }

.header-content:has(.page-return) .workspace-breadcrumb { display:none; }
@media(max-width:1100px) {
    .page-return a { width:34px; height:34px; padding:0; justify-content:center; }
    .page-return a span { display:none; }
}

/* Keep the shell out of the page cross-fade so the brand never fades twice. */
@media(prefers-reduced-motion:no-preference) {
    .workspace .nav-bottom { view-transition-name:workspace-navigation; }
    ::view-transition-old(workspace-navigation) { animation:none; opacity:0; }
    ::view-transition-new(workspace-navigation) { animation:none; mix-blend-mode:normal; }
    ::view-transition-group(workspace-navigation) { animation:none; }
    ::view-transition-group(root), ::view-transition-group(workspace-content) { animation:none; }
}
body[data-page="auth.login"] .auth-container { padding:48px 32px; }
body[data-page="auth.login"] .auth-card { display:grid; grid-template-columns:1.05fr 1fr; max-width:1040px; width:100%; min-height:600px; padding:0; overflow:hidden; border-radius:22px; background:#fff; }
.login-brand-panel { display:flex; flex-direction:column; align-items:flex-start; padding:44px; background:#edf1f9; border-right:1px solid #e1e7f1; }
.login-brand-mark { max-width:100%; padding:44px; background:#fff; border:1px solid #e1e7f1; border-radius:16px; box-shadow:0 4px 16px #23345206; }
.login-brand-logo { display:block; width:220px; max-width:100%; height:auto; aspect-ratio:680 / 552; object-fit:contain; }
.login-brand-copy { margin:32px 0 0; padding:0 0 28px; }
.login-brand-copy h2 { color:#233452; font-size:30px; line-height:1.25; letter-spacing:-.035em; margin:12px 0 16px; font-weight:600; }
.login-brand-copy > p:last-child { color:#64748c; font-size:14px; line-height:1.7; max-width:320px; }
.login-brand-footer { margin-top:auto; font-size:11px; color:#71819a; }
.login-form-panel { padding:60px 48px; display:flex; flex-direction:column; justify-content:center; }
.login-form-panel .auth-logo { margin-bottom:30px; }
.login-form-panel .auth-logo h1 { font-size:30px; margin:10px 0; }
.login-form-panel .form-group { margin-bottom:22px; }
.login-form-panel .form-input { min-height:48px; }
.login-form-panel .btn { width:100%; }
@media(max-width:767px) {
    body[data-page="auth.login"] .auth-container { padding:24px 16px; }
    body[data-page="auth.login"] .auth-card { grid-template-columns:1fr; min-height:0; max-width:480px; }
    .login-brand-panel { padding:38px; border-right:0; border-bottom:1px solid #e1e7f1; align-items:center; }
    .login-brand-mark { padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
    .login-brand-logo { width:160px; }
    .login-brand-copy,.login-brand-footer { display:none; }
    .login-form-panel { padding:30px 24px; }
}

/* Give statuses breathing room without shifting standalone table columns. */
.detail-subtitle .badge { margin-inline-start:10px; margin-block:4px; }
.badge + .badge { margin-inline-start:6px; }
.list-item-amount + .badge { margin-top:5px; }
.list-item-subtitle .badge { margin-inline:6px; margin-block:3px; }
.invoice-record-status { padding-block:5px; }
.detail-title + .badge,h2 + .badge,h3 + .badge { margin-inline-start:8px; }
.client-work-filter { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.client-work-filter label { font-size:12px; color:#526789; white-space:nowrap; }
.client-work-filter select { width:auto; max-width:100%; font-size:12px; }
.client-work-filter > span { font-size:11px; color:#748198; }
.client-billing-cell,.client-balance-cell { flex:0 0 200px; font-size:12px; }
.client-balance-cell { flex-basis:150px; text-align:right; }
.client-billing-cell small,.client-balance-cell small { display:block; font-size:10px; color:#718099; margin-top:6px; }
.client-balance-cell strong { font-variant-numeric:tabular-nums; color:#30476e; }
@media(max-width:900px) { .client-work-filter { flex-wrap:wrap; } .client-work-filter > span { display:none; } .client-item { flex-wrap:wrap; } .client-item .list-item-content { flex-basis:calc(100% - 70px); } .client-billing-cell { flex:1; padding-left:58px; } .client-balance-cell { flex:0 0 auto; } .client-item > svg:last-child { display:none; } }

.client-heading-layout { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
body[data-page="clients.detail"] .client-heading-layout .detail-header { margin-bottom:0; min-width:0; }
body[data-page="clients.detail"] .client-heading-layout .tabs { margin:0; flex-shrink:0; }
.client-heading-layout .detail-title { overflow-wrap:anywhere; }
.client-calendar-tab { display:flex; align-items:center; gap:6px; color:#5067a5; text-decoration:none; white-space:nowrap; }
.client-calendar-tab svg { flex-shrink:0; }
.client-calendar-tab svg:last-child { opacity:.7; }
.client-info-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:6px 0 18px; }
.client-info-heading h2 { margin:0; font-size:17px; color:#263653; }
.client-info-heading p { margin:6px 0 0; font-size:12px; color:#718099; }
.client-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1120px; }
.client-info-card { padding:22px; border:1px solid #e0e6ef; background:#fff; border-radius:12px; min-width:0; }
.client-info-card h3 { display:flex; align-items:center; gap:9px; margin:0 0 20px; font-size:13px; color:#30476e; }
.client-info-card h3 svg { color:#7188b9; }
.client-info-card dl { margin:0; display:grid; gap:16px; }
.client-info-card dt { color:#748198; font-size:11px; margin-bottom:5px; }
.client-info-card dd { margin:0; font-size:13px; color:#263653; overflow-wrap:anywhere; }
.client-info-card address { font-style:normal; font-size:13px; line-height:1.8; white-space:pre-line; }
.info-missing { color:#8190a3; }
.client-owner-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin:0 0 20px; padding-bottom:20px; border-bottom:1px solid #edf0f5; }
.client-owner-form .form-group { flex:1 1 180px; min-width:0; margin:0; }
.client-owner-form .form-input { width:100%; min-width:0; }
.client-owner-actions { flex:0 0 auto; }
.client-info-notes { margin-top:20px; padding-top:16px; border-top:1px solid #edf0f5; }
.client-info-notes h4 { font-size:11px; color:#748198; margin:0 0 8px; }
.client-info-notes p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.7; margin:0; }
@media(max-width:1250px) { .client-heading-layout { flex-wrap:wrap; } }
@media(max-width:767px) { .client-info-grid { grid-template-columns:1fr; gap:12px; } .client-info-card { padding:18px; } .client-info-heading { flex-wrap:wrap; } .client-heading-layout { gap:14px; } .client-heading-layout .tabs { width:100%; } }

/* A consistent, bounded editing canvas with persistent save controls. */
.editor-form { max-width:880px; margin-inline:auto; padding-bottom:12px; }
.editor-form.invoice-compose { max-width:1160px; }
.editor-form > .card,.editor-form .invoice-compose-fields > .card { border-radius:12px; box-shadow:none; margin-bottom:20px; }
.editor-form .card-header { padding:18px 24px; background:#fafbfd; border-bottom:1px solid #e8edf4; }
.editor-form .card-title { font-size:14px; color:#2d4264; }
.editor-form .card-body { padding:24px; }
.editor-form .form-group { margin-bottom:20px; }
.editor-form .form-group:last-child { margin-bottom:0; }
.editor-form .form-label { display:block; margin-bottom:7px; font-size:12px; }
.editor-form .form-input { min-height:42px; font-size:13px; }
.editor-form .form-actions { gap:10px; }
.editor-form > .form-actions { position:sticky; bottom:16px; z-index:10; display:flex; justify-content:flex-end; flex-wrap:wrap; padding:14px 18px; margin-top:24px; border:1px solid #dce3ee; border-radius:12px; background:#fff; box-shadow:0 4px 24px #202b4912; }
.editor-status { font-size:11px; color:#718099; align-self:center; margin-right:auto; }
.editor-form .field-error { margin:6px 0 0; color:#963c50; font-size:11px; }
.editor-form .form-input[aria-invalid="true"] { border-color:#b96d7b; }
.editor-form .invoice-summary .editor-status { display:block; margin:0 0 8px; }
@media(max-width:767px) {
    .editor-form .card-header { padding:15px 16px; }
    .editor-form .card-body { padding:18px 16px; }
    .editor-form > .form-actions { bottom:82px; padding:12px; }
    .editor-status { flex-basis:100%; }
}
.editor-optional summary { padding:18px 24px; cursor:pointer; color:#2d4264; font-size:13px; font-weight:600; }
.editor-optional summary span { margin-left:10px; color:#7a879a; font-size:11px; font-weight:400; }
.editor-form :is(input,textarea,select) { scroll-margin-block:100px 160px; }

/* Shared credential viewer: fields and copy controls always stay on one row. */
#passwordModal .modal { width:min(520px,calc(100vw - 28px)); border-radius:14px; }
#passwordModal .modal-header { padding:18px 22px; }
#passwordModal .modal-service-link { align-items:center; gap:8px; margin:16px 22px 0; padding:10px 12px; border:1px solid #dce3ee; border-radius:8px; background:#f5f7fc; color:#48628f; font-size:12px; text-decoration:none; overflow-wrap:anywhere; }
#passwordModal .modal-service-link svg { flex-shrink:0; }
#passwordModal .modal-body { padding:22px; }
#passwordModal .form-group { margin-bottom:20px; }
#passwordModal .form-label { display:block; margin-bottom:8px; }
#passwordModal .credential-field { display:flex; align-items:center; gap:8px; }
#passwordModal .credential-field .form-input { flex:1; min-width:0; width:0; height:44px; margin:0; }
#passwordModal .credential-copy-btn { width:40px; height:44px; flex:0 0 40px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid #dce3ee; border-radius:8px; background:#f5f7fc; color:#506b9d; cursor:pointer; }
#passwordModal .credential-copy-btn:hover { background:#e9effd; border-color:#b9c8e8; }
#passwordModal .credential-copy-btn.copied { background:#d5eade; color:#24634f; }
#passwordModal .modal-footer { padding:16px 22px; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
#passwordModal .modal-footer > .btn { flex:0 1 auto; }
@media(max-width:767px) { #passwordModal { align-items:center; } #passwordModal .modal-body { padding:18px; } #passwordModal .modal-footer { padding:14px 18px; } }
.service-suggestions { margin-top:6px; border:1px solid #dce3ee; border-radius:8px; background:#fff; max-height:220px; overflow:auto; box-shadow:0 4px 14px #202b490a; }
.service-suggestions button { display:block; width:100%; padding:10px 12px; border:0; border-bottom:1px solid #edf0f5; background:transparent; color:#30476e; cursor:pointer; text-align:left; }
.service-suggestions button:hover,.service-suggestions button[aria-selected="true"] { background:#edf2fc; }
.service-suggestions strong,.service-suggestions span { display:block; font-size:12px; overflow-wrap:anywhere; }
.service-suggestions span { margin-top:4px; font-size:11px; color:#718099; }
.client-balance-cell .client-late-badge { margin-top:8px; text-align:right; }
.message-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:22px; align-items:start; }
.message-editor .card-body { padding:22px; }
.message-editor .form-group { margin-bottom:18px; }
.message-tools { display:flex; gap:8px; margin-bottom:12px; align-items:start; }
.message-variables { padding:12px; max-height:280px; overflow:auto; border:1px solid #dce3ee; border-radius:8px; margin-top:6px; }
.message-variables p { font-size:11px; color:#718099; margin:0 0 8px; }
.message-variables button { display:block; width:100%; text-align:left; padding:9px; border:0; border-bottom:1px solid #edf0f5; background:#fff; color:#30476e; cursor:pointer; }
.message-variables button:hover { background:#edf2fc; }
.message-variables button strong,.message-variables button small { display:block; font-size:11px; }
.message-variables button small { color:#718099; margin-top:3px; }
.message-options { border-top:1px solid #e5eaf2; padding-top:16px; margin-top:20px; font-size:12px; }
.message-options summary { cursor:pointer; color:#526789; }
.message-signature { display:flex; align-items:center; gap:8px; margin:18px 0; }
.message-actions { padding:18px 22px; border-top:1px solid #e5eaf2; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.message-actions > span { font-size:11px; color:#718099; }
.message-preview { position:sticky; top:88px; overflow:hidden; }
.message-preview .card-header > span,.message-editor .card-header > span { font-size:10px; color:#718099; }
.message-preview-meta { padding:16px 20px; border-bottom:1px solid #edf0f5; }
.message-preview-meta span { display:block; color:#718099; font-size:11px; margin-bottom:9px; }
.message-preview-meta strong { font-size:14px; overflow-wrap:anywhere; }
#messageFrame { width:100%; height:480px; border:0; background:#fff; display:block; }
.message-preview-note { font-size:10px; color:#718099; padding:12px 18px; margin:0; border-top:1px solid #edf0f5; }
@media(max-width:1000px) { .message-layout { grid-template-columns:1fr; } .message-preview { position:static; } }
.message-tools { flex-wrap:wrap; }
#messageLinkEditor { padding:14px; background:#f5f7fc; border-radius:8px; margin:0 0 16px; }
#messageLinkEditor input { margin-bottom:10px; }
#messageLinkError { color:#963c50; font-size:11px; margin-left:8px; }
.message-tools { position:relative; }
#variablePicker { position:static; }
#variablePicker::details-content { overflow:visible; }
.message-tools .message-variables { position:absolute; left:0; top:calc(100% + 6px); width:min(340px,100%); z-index:30; background:white; margin:0; box-shadow:0 10px 32px #202b4926; }
.message-tools #messageLinkEditor { position:absolute; left:0; top:calc(100% + 6px); width:min(360px,100%); z-index:30; border:1px solid #dce3ee; background:white; box-shadow:0 10px 32px #202b4926; margin:0; }
.message-options { display:grid; gap:16px; border:0; padding:0; margin-top:22px; }
.message-option-section { padding:16px; border:1px solid #e2e8f1; background:#fafbfd; border-radius:10px; }
.message-option-section h3 { margin:0 0 8px; font-size:12px; color:#30476e; }
.message-option-section h3 span { font-size:10px; font-weight:400; color:#718099; margin-left:8px; }
.message-option-section .message-signature { margin:12px 0 0; }
.message-option-section input[type="checkbox"] { accent-color:#647fbb; width:16px; height:16px; }
.message-option-section input[type="file"]::file-selector-button { border:1px solid #dce3ee; border-radius:6px; background:white; color:#435c88; padding:7px 10px; margin-right:10px; cursor:pointer; }
#attachmentSummary { font-size:11px; color:#526789; overflow-wrap:anywhere; margin-bottom:0; }

.message-feedback {margin:12px 20px;padding:12px 14px;border:1px solid #d8e1f1;border-radius:8px;background:#f3f6fc;color:#405779;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
#variableWarnings {background:#fff7e9;border-color:#ecd4a9;color:#865716}

/* Composer: aligned working surfaces and explicit file actions. */
.message-layout {align-items:stretch}
.message-preview {position:static;display:flex;flex-direction:column;min-height:0}
.message-preview #messageFrame {flex:1;min-height:480px}
.signature-option {display:flex;align-items:center;gap:14px;cursor:pointer;transition:background .18s,border-color .18s}
.signature-option:has(input:checked) {background:#edf1ff;border-color:#899de0}
.signature-option:focus-within {outline:2px solid #899de0;outline-offset:2px}
.signature-option input {width:20px;height:20px;flex:0 0 20px;accent-color:#586eb6;margin:0}
.signature-option strong {font-size:12px;color:#344d76}
.signature-option .form-hint {display:block;margin-top:5px}
.composer-file {display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px}
.composer-file span {overflow-wrap:anywhere;min-width:0}
@media(max-width:1000px){.message-preview #messageFrame{flex:auto;height:560px}}

#draftState:empty {display:none}
.missing-attachments {padding:16px;margin:14px 0;background:#fff5e7;border:1px solid #dcb779;border-radius:10px;color:#79501e;font-size:13px;line-height:1.6}
.missing-attachments > strong {display:flex;align-items:center;gap:8px}
.missing-attachments p {margin:8px 0}
.missing-attachment-actions {display:flex;flex-wrap:wrap;gap:8px}
.preview-file {display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #dce3ef;margin-top:10px}
.preview-file > svg {flex-shrink:0;width:20px;height:20px}
.preview-file > span {flex:1;min-width:0}
.preview-file strong,.preview-file small {display:block;overflow-wrap:anywhere}
.preview-file small {color:#66768e;margin-top:2px}

.resume-draft-dialog {width:min(480px,calc(100vw - 32px));padding:26px;border:1px solid #dce3ef;border-radius:16px;color:#24324a;background:#fff;box-shadow:0 24px 80px #15233d33}
.resume-draft-dialog::backdrop {background:#15233d70}
.resume-draft-dialog h2 {font-size:20px;margin:0 0 12px}
.resume-draft-dialog p {font-size:13px;line-height:1.6;color:#63728a}
.resume-draft-dialog ul {font-size:13px;overflow-wrap:anywhere}
.resume-draft-actions {display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:22px}
#resumeDraftFiles {padding:0 14px;background:#fff6e8;border:1px solid #e6cc9f;border-radius:8px;margin-top:16px}
#previewAttachments {padding:10px 14px;margin:0 20px 12px;background:#f8f9fc}
#previewAttachments > strong {font-size:11px}
#previewAttachments .preview-file {padding:6px 0;margin:0;border:0;gap:8px}
#previewAttachments .preview-file > svg {width:16px;height:16px}
#previewAttachments .preview-file > span {display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#previewAttachments .preview-file strong {font-size:12px;font-weight:500}
#previewAttachments .preview-file small {font-size:10px;margin:0}
.resume-draft-dialog {position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 40px);overflow:auto}
.resume-draft-dialog ul {padding-left:20px;margin:10px 0 14px}
/* A continuous attachment footer, rather than a second inset card. */
#previewAttachments {margin:0;padding:14px 20px;border:0;border-top:1px solid #e2e7ef;border-radius:0;background:#f3f5f9;flex-shrink:0}
#previewAttachments .preview-file > span {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
#previewAttachments .preview-file small {white-space:nowrap}
#previewAttachments .preview-file strong {line-height:1.5}
.resume-draft-dialog {width:min(520px,calc(100vw - 32px));padding:28px}
.draft-dialog-symbol {display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#edf1fc;color:#536caa;margin-bottom:18px}
.draft-dialog-symbol svg {width:21px;height:21px}
.resume-draft-dialog h2 {font-size:21px;line-height:1.3;margin:0 0 10px;letter-spacing:-.35px}
#resumeDraftDescription {margin:0 0 20px;line-height:1.65}
.draft-subject {padding:14px 0;border-top:1px solid #e7ebf2;border-bottom:1px solid #e7ebf2}
.draft-subject > span {display:block;font-size:11px;color:#718099;margin-bottom:5px}
#resumeDraftSubject {display:block;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#resumeDraftFiles {padding:16px;margin-top:20px;background:#fffaf1;border-color:#ead7b4}
.draft-files-title {display:flex;align-items:center;gap:8px;font-size:12px;color:#805c28}
#resumeDraftFiles p {margin:8px 0 12px;font-size:12px}
#resumeDraftFileNames,#missingAttachmentNames {list-style:none;padding:0;margin:10px 0 0}
#resumeDraftFileNames li,#missingAttachmentNames li {padding:8px 0;border-top:1px solid #eaddc7;line-height:1.5;overflow-wrap:anywhere;font-size:12px}
.resume-draft-actions {margin-top:24px;gap:10px}
.resume-draft-dialog .draft-dialog-footnote {display:flex;align-items:flex-start;gap:8px;font-size:11px;margin:16px 0 0;line-height:1.6}
.draft-dialog-footnote svg {flex-shrink:0;margin-top:2px}
#freshDraftHint {font-size:11px;margin:14px 0 0}
.missing-attachments {padding:18px;background:#fffaf1;border-color:#ead7b4}
.missing-attachments > strong {font-size:14px;color:#795421}
.missing-attachments p {font-size:12px;line-height:1.65;margin:10px 0}
.missing-gate-label {display:block;font-size:11px;font-weight:600;color:#805c28}
.missing-attachment-actions {margin-top:16px;align-items:center;gap:10px}
@media(max-width:600px){.resume-draft-dialog{padding:22px}.resume-draft-actions{justify-content:flex-start}#previewAttachments .preview-file > span{grid-template-columns:1fr;gap:2px}}
@media(prefers-reduced-motion:no-preference){.resume-draft-dialog[open]{animation:draft-appear .18s ease-out}#previewAttachments:not([hidden]){animation:draft-appear .18s ease-out}}
@keyframes draft-appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.recipient-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.recipient-controls {min-width:0}
.recipient-preview {position:sticky;top:84px;overflow:hidden}
#recipientMessageFrame {display:block;width:100%;height:560px;border:0;background:#f3f5f9}
#recipientPreviewState {padding:12px 20px;margin:0}
.recipient-files {background:#f3f5f9;border-top:1px solid #e2e7ef;padding:12px 20px;font-size:11px}
.recipient-files > div {display:flex;align-items:center;gap:8px;padding-top:8px}
.recipient-files span {flex:1;min-width:0;overflow-wrap:anywhere}
.recipient-files svg {flex-shrink:0}
.recipient-controls .selection-modes {grid-template-columns:repeat(2,minmax(0,1fr))}
.recipient-controls .card-header {flex-wrap:wrap;gap:10px}
.recipient-controls .form-actions {margin-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:1000px){.recipient-layout{grid-template-columns:1fr}.recipient-preview{position:static;order:2}.recipient-controls{order:1}#recipientMessageFrame{height:480px}}
@media(max-width:440px){.recipient-controls .selection-modes{grid-template-columns:1fr}}
.final-review {grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr)}
#finalMessageFrame {width:100%;height:560px;border:0;display:block;background:#f3f5f9}
.final-review-controls {display:grid;gap:18px;min-width:0}
.final-recipient-list {max-height:330px;overflow:auto;padding:4px 20px}
.final-recipient-list > div {padding:12px 0;border-bottom:1px solid #e8ecf3}
.final-recipient-list > div:last-child {border-bottom:0}
.final-recipient-list strong,.final-recipient-list span {display:block;overflow-wrap:anywhere;font-size:12px}
.final-recipient-list span {margin-top:4px;color:#718099}
.final-send {padding:20px}
.final-send h3 {display:flex;align-items:center;gap:8px;font-size:14px;margin:0}
.final-send p {font-size:12px;line-height:1.7;color:#63728a;margin:12px 0 18px}
.final-send form + form {margin-top:12px}
.final-send .btn {white-space:normal}
.final-review .recipient-files > strong {display:flex;align-items:center;gap:8px}
@media(max-width:1000px){.final-review{grid-template-columns:1fr}.final-review .recipient-preview{order:0}.final-review-controls{order:1}}
.send-tracker {max-width:880px;margin:20px auto;padding:30px}
.send-tracker-heading {display:flex;gap:18px;align-items:flex-start;margin-bottom:28px}
.send-symbol {background:#edf1fc;color:#536caa;border-radius:14px;padding:14px;display:flex}
.send-symbol svg {width:24px;height:24px}
.send-tracker h2 {font-size:24px;margin:5px 0 8px}
.send-subject {font-size:13px;color:#687991;overflow-wrap:anywhere}
.send-progress-label {display:flex;justify-content:space-between;font-size:12px;color:#62728a;margin-bottom:10px}
.send-track {height:8px;background:#e6eaf3;border-radius:8px;overflow:hidden}
#progressBar {height:100%;width:0;background:#8298df;border-radius:8px}
.send-metrics {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0;padding-bottom:24px;border-bottom:1px solid #e6eaf3}
.send-metrics > div {display:grid;grid-template-columns:20px 1fr;gap:8px;color:#61769f}
.send-metrics strong {font-size:26px;color:#273b60;line-height:1}
.send-metrics span {grid-column:2;font-size:12px}
#statusMessage {font-size:12px;line-height:1.7;color:#61718a;margin-bottom:20px}
#failedDetails {padding:14px;background:#fff3f3;border-radius:8px;margin-bottom:20px;overflow-wrap:anywhere}
#failedDetails h3 {font-size:13px}
@media(prefers-reduced-motion:no-preference){#progressBar{transition:width .65s cubic-bezier(.2,.7,.3,1)}.send-tracker:not(.is-done) .send-symbol{animation:send-breathe 2s ease-in-out infinite}}
@keyframes send-breathe {50%{background:#dce4fb;transform:translateY(-2px)}}
@media(max-width:600px){.send-tracker{padding:20px}.send-metrics{gap:10px}.send-metrics span{font-size:11px}}
.send-history {margin-top:36px}
.send-history-heading {margin-bottom:14px}
.send-history-heading h2 {display:flex;align-items:center;gap:9px;font-size:15px;margin:0;color:#304563}
.send-history-heading h2 > span {font-size:11px;font-weight:500;background:#e8edf7;padding:3px 8px;border-radius:6px;color:#637799}
.send-history-heading p {font-size:12px;color:#718099;margin:7px 0 0}
.send-history-list {overflow:hidden}
.send-history-row {display:flex;align-items:center;gap:16px;padding:18px 20px;text-decoration:none;color:#304563;border-bottom:1px solid #e6ebf3;transition:background .18s}
.send-history-row:last-child {border-bottom:0}
.send-history-row:hover {background:#f3f6fc}
.send-history-row:focus-visible {outline:2px solid #859bda;outline-offset:-3px}
.send-history-icon {display:flex;padding:10px;border-radius:10px;background:#eef2fa;color:#6079ad;flex-shrink:0}
.send-history-copy {flex:1;min-width:0}
.send-history-copy strong {display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.send-history-copy small {display:block;font-size:11px;color:#718099;margin-top:5px}
.send-history-state {display:flex;align-items:center;gap:6px;font-size:11px;color:#506992;white-space:nowrap}
.send-history-state.needs-attention {color:#98641e}
.send-history-follow {font-size:12px;color:#536eaa;white-space:nowrap;margin-left:14px}
@media(max-width:600px){.send-history-row{flex-wrap:wrap;gap:12px;padding:16px}.send-history-copy{flex-basis:calc(100% - 62px)}.send-history-state{margin-left:48px}.send-history-follow{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.send-history-row{transition:none}}
.sent-message-preview {max-width:880px;margin:24px auto;overflow:hidden}
.sent-message-preview iframe {display:block;width:100%;height:560px;border:0}
.campaign-layout {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.campaign-fields {min-width:0}
.campaign-fields .card-body {padding:22px}
.campaign-fields .form-input {margin-bottom:14px}
.campaign-fields .signature-option {margin-top:16px}
.campaign-tools {margin-top:16px;position:relative}
#campaignVariables .message-variables,#campaignLinkPanel {position:absolute;top:calc(100% + 8px);left:0;width:min(350px,100%);z-index:30;background:#fff;border:1px solid #dce3ee;box-shadow:0 12px 32px #24324a22;border-radius:10px;padding:14px}
.campaign-preview {position:sticky;top:84px;overflow:hidden}
#campaignFrame {width:100%;height:580px;border:0;display:block}
.campaign-save {padding:18px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
#campaignSchedule {font-size:12px;color:#50678b;max-width:300px;line-height:1.6}
#campaignPreviewState {font-size:11px;color:#718099}
@media(max-width:1000px){.campaign-layout{grid-template-columns:1fr}.campaign-preview{position:static}}
.campaign-list-row {display:flex;justify-content:space-between;gap:24px;padding:22px;margin-bottom:16px}
.campaign-list-main {min-width:0;flex:1}
.campaign-list-title {display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.campaign-list-title h3 {font-size:15px;margin:0}
.campaign-list-title a {color:#2d4266;text-decoration:none}
.campaign-list-main p {font-size:13px;margin:10px 0;color:#60738f;overflow-wrap:anywhere}
.campaign-list-schedule {display:flex;align-items:center;gap:7px;font-size:12px;color:#435b80}
.campaign-list-main small {display:block;margin-top:9px;color:#718099;font-size:11px}
.campaign-list-actions {display:flex;flex-wrap:wrap;align-content:center;gap:8px;max-width:380px}
.campaign-empty {padding:30px;margin-bottom:24px;max-width:700px}
.campaign-empty h3 {margin:16px 0 10px}
.campaign-empty p {font-size:13px;line-height:1.7;color:#657790;margin-bottom:20px}
@media(max-width:900px){.campaign-list-row{flex-direction:column}.campaign-list-actions{max-width:none}}
.campaign-recipient-modes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.campaign-recipient-mode {position:relative;display:flex;align-items:center;gap:12px;border:1px solid #dce3f0;border-radius:10px;padding:14px;cursor:pointer;background:#fff}
.campaign-recipient-mode input {position:absolute;opacity:0;width:1px;height:1px}
.campaign-recipient-mode:has(input:checked) {background:#eef2ff;border-color:#667fbc;box-shadow:inset 0 0 0 1px #667fbc}
.campaign-recipient-mode:focus-within {outline:2px solid #8299d8;outline-offset:3px}
.campaign-mode-icon {display:flex;padding:10px;background:#edf1fa;border-radius:9px;color:#6176a7}
.campaign-recipient-mode:has(input:checked) .campaign-mode-icon {color:#fff;background:#566da6}
.campaign-recipient-mode strong,.campaign-recipient-mode small {display:block;font-size:12px}
.campaign-recipient-mode small {font-size:11px;color:#718099;margin-top:5px}
.campaign-client-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#campaignClientCount {font-size:11px;color:#718099}
.campaign-history-layout {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.campaign-history-preview {overflow:hidden}
.campaign-history-preview iframe {display:block;width:100%;height:560px;border:0}
.campaign-history-content {display:grid;gap:20px}
.campaign-history-summary {padding:20px}
.campaign-history-summary h3 {display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 16px}
.campaign-history-summary p {font-size:13px;margin:16px 0 8px}
.campaign-history-summary small {color:#718099;line-height:1.6}
.campaign-history-empty {padding:26px;display:grid;gap:10px;font-size:13px;color:#637591}
.campaign-history-empty strong {color:#344d70}
.campaign-history-empty p {margin:0;font-size:12px;line-height:1.6}
.campaign-log-totals {display:flex;gap:24px;padding:16px 20px;background:#f6f8fc;font-size:12px}
.campaign-log-totals strong {font-size:20px;margin-right:5px;color:#344d70}
.campaign-log-entry {padding:18px 20px;border-top:1px solid #e6ebf3}
.campaign-log-entry > div {display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}
.campaign-log-entry p,.campaign-log-entry li {font-size:12px;line-height:1.6;color:#637591;overflow-wrap:anywhere}
@media(max-width:1000px){.campaign-history-layout{grid-template-columns:1fr}.campaign-history-content{order:-1}}
@media(max-width:500px){.campaign-recipient-modes{grid-template-columns:1fr}}

/* Shared tags: compact labels with a clear colored marker. */
.client-tag {display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 18%,transparent);border-radius:7px;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-decoration:none;vertical-align:middle}
.client-tag::before {content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.85}
.client-list-tags {display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.client-list-tags .client-tag {font-size:10px;padding:3px 8px}
.client-tag.tag-filter {padding:6px 10px}
.client-tag.tag-filter.active {box-shadow:0 0 0 1px currentColor}
.client-tags {gap:8px}
.client-tag .tag-remove {display:inline-flex;align-items:center;justify-content:center;margin-left:3px}
@media(prefers-reduced-motion:no-preference){.client-tag{transition:background-color .16s,border-color .16s,box-shadow .16s}}
/* Keep the banking workspace focused on transactions and matching. */
.bank-heading {margin-bottom:12px}
.bank-control-card {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;margin:12px 0;border:0;border-radius:0;background:transparent;position:relative;z-index:5}
.bank-sync-state {display:flex;align-items:center;gap:7px;color:#718099;font-size:11px}
.bank-sync-state > span:last-child {display:inline;margin:0;font-size:11px}
.bank-sync-state > svg {width:14px;height:14px;flex-shrink:0}
.bank-auto-settings {border:0;padding:0;position:relative}
.bank-auto-settings summary.bank-settings-trigger {display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:8px 11px;font-size:11px}
.bank-auto-state {color:#6c7b92;font-size:10px;padding-left:8px;border-left:1px solid #dce3ee}
.bank-auto-settings-body {position:absolute;right:0;top:calc(100% + 8px);width:min(360px,calc(100vw - 40px));padding:16px;background:#fff;border:1px solid #dce3ee;border-radius:10px;box-shadow:0 12px 32px #23324b22;z-index:20}
.bank-auto-settings-body p:first-child {margin-top:0}
.bank-overview {gap:12px;margin-bottom:16px}
.bank-kpi {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:9px}
.bank-kpi > span {flex:1}
.bank-kpi strong {font-size:23px;margin:0;line-height:1.2}
.bank-kpi i {display:none}
.bank-kpi .metric-caption {display:flex;align-items:center;flex-direction:row;gap:8px;font-size:12px}
.bank-kpi .metric-icon {padding:0;width:18px;height:18px;display:flex;align-items:center}
@media(max-width:767px){.bank-control-card{flex-wrap:wrap;gap:10px}.bank-auto-settings{margin-left:auto;border:0;padding:0}.bank-overview{gap:7px}.bank-kpi{padding:10px;gap:7px;flex-direction:column;align-items:flex-start}.bank-kpi .metric-caption{font-size:10px;gap:5px}.bank-kpi strong{font-size:21px}}
.bank-heading-actions {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;position:relative;z-index:5}
.bank-topbar-sync {font-size:11px;color:#6c7d97;line-height:1.5;text-align:right}
.bank-topbar-sync > span {display:block;font-size:10px}
.bank-heading-actions .bank-auto-settings {margin:0}
.bank-heading-actions .bank-settings-trigger {min-height:40px}
.bank-workspace .bank-demo {margin-bottom:14px}
@media(max-width:767px){.bank-heading-actions{justify-content:flex-start;margin-top:14px}.bank-heading .bank-heading-actions .btn{margin-top:0}.bank-heading-actions .bank-auto-settings-body{left:0;right:auto}.bank-topbar-sync{font-size:10px;max-width:100px}.bank-topbar-sync > span{font-size:9px}}
@media(max-width:767px) {
    body[data-page="banking.index"] .header { height:auto; }
    body[data-page="banking.index"] .header-content { flex-wrap:wrap; }
    body[data-page="banking.index"] .header-actions { flex:1 1 100%; min-width:0; flex-wrap:wrap; }
    body[data-page="banking.index"] .header-actions .user-menu { margin-left:auto; }
}

/* Bridge credentials: same settings language as the cabinet workspace. */
.bank-setup { max-width: 820px; }
.bank-setup .overview-heading { align-items: flex-start; margin-bottom: 22px; }
.bank-setup .overview-heading .badge { margin-top: 28px; }
.bank-setup-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; margin: 0; }
.bank-setup-facts dt { font-size: 11px; color: var(--color-text-light); margin: 0 0 5px; }
.bank-setup-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: #263653; }
.bank-setup-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 9px; background: #fcf2df; color: var(--color-warning); font-size: 12px; line-height: 1.6; }
.bank-setup-note .ui-icon { margin-top: 1px; }
.bank-setup-note p { margin: 0; }
.bank-setup-note code { font-size: 11px; background: #fff8ea; padding: 1px 5px; border-radius: 4px; }
.bank-setup-danger { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e5e9f2; }
.bank-setup-danger h3 { font-size: 14px; margin: 0 0 8px; color: #263653; }
.bank-setup-danger p { font-size: 13px; line-height: 1.6; color: var(--color-text-light); margin: 0 0 16px; max-width: 54ch; }
@media(max-width:700px) {
    .bank-setup .overview-heading .badge { margin-top: 0; }
    .bank-setup-facts { grid-template-columns: 1fr; gap: 14px; }
}

/* Settings: focused sections and compact, contextual forms. */
.settings-intro { margin:0 0 24px; }
.settings-intro h2 { font-size:26px; letter-spacing:-.7px; margin:5px 0 7px; }
.settings-intro > p:last-child { color:var(--color-text-light); font-size:13px; margin:0; }
.settings-workspace { display:grid; grid-template-columns:210px minmax(0,820px); gap:32px; align-items:start; }
.settings-menu { display:flex; flex-direction:column; gap:5px; position:sticky; top:90px; }
.settings-menu a { display:flex; align-items:center; gap:10px; min-height:42px; padding:10px 12px; border:1px solid transparent; border-radius:9px; text-decoration:none; color:var(--color-text-light); font-size:13px; transition:background 150ms,color 150ms; }
.settings-menu a:hover { background:#edf1fa; }
.settings-menu a.active { background:#e3eafa; color:#304c80; border-color:#d5dff4; font-weight:600; }
.settings-menu .ui-icon { flex-shrink:0; }
.settings-dirty-dot { width:6px; height:6px; border-radius:50%; background:#b47925; margin-left:auto; flex-shrink:0; }
.settings-panels { min-width:0; }
.settings-panel[hidden], .settings-dirty-dot[hidden] { display:none; }
.settings-panel { scroll-margin-top:88px; }
.settings-panel-heading { display:flex; align-items:flex-start; gap:20px; justify-content:space-between; margin:2px 0 20px; }
.settings-panel-heading h2 { font-size:19px; letter-spacing:-.35px; margin:0 0 7px; }
.settings-panel-heading p { font-size:13px; color:var(--color-text-light); line-height:1.6; margin:0; max-width:540px; }
.settings-panel-heading .badge { flex-shrink:0; margin:2px 0 0; }
.settings-card { border-radius:12px; overflow:hidden; }
.settings-form .card-body { padding:24px; }
.settings-form .form-group { margin-bottom:18px; min-width:0; }
.settings-form .form-row { gap:20px; }
.settings-form .form-label { font-size:12px; margin-bottom:7px; }
.settings-form .form-input { font-size:13px; min-height:40px; padding:10px 12px; }
.settings-form .form-hint { font-size:11px; line-height:1.6; margin:6px 0 0; }
.settings-form .card-body > .form-group:last-child { margin-bottom:0; }
.settings-savebar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:16px 24px; background:#f7f9fd; border-top:1px solid #e2e7f0; }
.settings-form-status { margin:0; padding:0 24px; font-size:12px; color:#5067a5; background:#f7f9fd; }
.settings-form-status:not(:empty) { padding-bottom:14px; }
.settings-form-status.is-error { color:#ad364a; }
.settings-switch { display:flex; align-items:center; gap:12px; border:1px solid #dce3f1; background:#f6f8fd; border-radius:9px; padding:16px; font-size:13px; font-weight:600; cursor:pointer; }
.settings-switch input { appearance:none; flex-shrink:0; width:34px; height:20px; border-radius:20px; background:#c8d1e0; position:relative; cursor:pointer; transition:background 150ms; }
.settings-switch input::after { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:white; border-radius:50%; box-shadow:0 1px 3px #23314b30; transition:transform 150ms; }
.settings-switch input:checked { background:#8095df; }
.settings-switch input:checked::after { transform:translateX(14px); }
.settings-switch input:focus-visible { outline:2px solid #5067a5; outline-offset:3px; }
.settings-tools { display:grid; gap:12px; }
.settings-tools a { display:flex; align-items:center; gap:16px; padding:20px; background:white; border:1px solid #dce3f1; border-radius:12px; color:var(--color-text); text-decoration:none; transition:border-color 150ms; }
.settings-tools a:hover { border-color:#9baee0; }
.settings-tools a > .ui-icon { width:22px; height:22px; color:#6079b7; flex-shrink:0; }
.settings-tools a > span:last-child { margin-left:auto; color:#6079b7; }
.settings-tools strong { display:block; font-size:14px; }
.settings-tools small { display:block; color:var(--color-text-light); margin-top:5px; line-height:1.5; }
.settings-variable-help { padding:16px; background:#f3f6fc; border:1px solid #dce3f1; border-radius:9px; font-size:12px; }
.settings-variable-help p { color:var(--color-text-light); margin:6px 0 12px; }
.settings-variable-help > div { display:flex; flex-wrap:wrap; gap:8px; }
@media(min-width:1000px) {
 #settings-cabinet .card-body { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
 #settings-cabinet .form-row, #settings-cabinet h4, #settings-cabinet .form-group:has(textarea), #settings-cabinet .form-group:has(#site_url) { grid-column:1/-1; }
 #settings-invoices .card-body { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
 #settings-invoices .form-group:has(textarea) { grid-column:1/-1; }
}
@media(max-width:1000px) {
 .settings-workspace { grid-template-columns:175px minmax(0,1fr); gap:20px; }
 .settings-menu a { font-size:12px; }
}
@media(max-width:767px) {
 .settings-workspace { display:block; }
 .settings-intro { margin-bottom:18px; }
 .settings-intro h2 { font-size:23px; }
 .settings-menu { position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:10px; margin-bottom:16px; }
 .settings-menu a { flex-shrink:0; background:#f5f7fc; border-color:#e1e6ef; }
 .settings-panel-heading { gap:12px; }
 .settings-panel-heading h2 { font-size:18px; }
 .settings-form .card-body { padding:18px; }
 .settings-savebar { padding:14px 18px; }
 .settings-form-status { padding-left:18px; }
}
@media(prefers-reduced-motion:reduce) { .settings-menu a,.settings-switch input,.settings-switch input::after { transition:none; } }
@media(min-width:1000px) {
 #settings-cabinet .form-group:has(#cabinet_name), #settings-cabinet .form-group:has(#cabinet_address) { grid-column:auto; }
 #settings-cabinet h4 { margin-top:10px; padding-top:18px; border-top:1px solid #e5e9f2; color:#354c74; }
}
/* Invoice and reminder template studio shares the message editor layout. */
.settings-workspace:has(#settings-templates:not([hidden])) { grid-template-columns:190px minmax(0,1fr); gap:24px; }
.template-kind { display:flex; gap:8px; margin-bottom:18px; }
.template-kind .active { background:#e3eafa; border-color:#aebde7; color:#304c80; }
.template-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.template-editor,.template-preview { min-width:0; border-radius:12px; }
.template-columns .card-header { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; padding:16px 20px; }
.template-columns .card-title { font-size:14px; display:flex; align-items:center; gap:8px; }
.template-columns .card-header > span { color:var(--color-text-light); font-size:11px; }
.template-editor .card-body { padding:20px; }
.template-toolbar { display:flex; gap:8px; margin:0 0 16px; }
#templateVariables { position:relative; }
#templateVariables summary { list-style:none; }
#templateVariables summary::-webkit-details-marker { display:none; }
.template-variable-popover { position:absolute; top:calc(100% + 8px); left:0; width:280px; max-width:calc(100vw - 60px); padding:14px; background:white; border:1px solid #d5def0; border-radius:12px; box-shadow:0 12px 35px #18294320; z-index:20; }
.template-variable-list { max-height:230px; overflow:auto; margin-top:10px; }
.template-variable-list button { display:block; width:100%; border:0; border-radius:6px; text-align:left; padding:9px; background:transparent; cursor:pointer; color:#344c78; }
.template-variable-list button:hover,.template-variable-list button:focus-visible { background:#ecf1fb; }
.template-variable-list small { display:block; margin-top:4px; color:var(--color-text-light); }
.template-variable-list [hidden],[data-template-fields][hidden] { display:none; }
.template-preview { display:flex; flex-direction:column; background:#f5f7fc; overflow:hidden; }
.template-preview iframe { width:100%; flex:1; min-height:500px; border:0; background:#f5f7fc; }
.template-preview-note { font-size:11px; color:var(--color-text-light); padding:12px 18px; margin:0; line-height:1.6; border-top:1px solid #e2e7f0; }
.template-studio > .settings-savebar { margin-top:18px; border:1px solid #e2e7f0; border-radius:10px; }
.template-studio > .settings-form-status { background:transparent; padding-top:10px; }
@media(max-width:1199px) { .template-columns { grid-template-columns:1fr; } .template-preview iframe { min-height:620px; } }
@media(max-width:767px) { .settings-workspace:has(#settings-templates:not([hidden])) { display:block; } .template-variable-popover { left:auto; right:-24px; } .template-editor .card-body { padding:16px; } }

#templateVariables::details-content { overflow:visible; }

/* Recurring billing: focus on periods and explicit batch selection. */
.billing-workspace { max-width:1240px; margin:auto; }
.billing-heading,.billing-section-heading,.billing-selection { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.billing-heading { margin-bottom:22px; }.billing-heading h2 { font-size:25px; margin:0 0 6px; letter-spacing:-.6px; }
.billing-heading p,.billing-section-heading p,.billing-clear p { color:var(--color-text-light); margin:5px 0 0; font-size:13px; }
.billing-overview { display:flex; align-items:center; gap:26px; padding:16px 0; margin-bottom:20px; border-block:1px solid var(--color-border); font-size:13px; }
.billing-overview>div { display:flex; align-items:center; gap:9px; }.billing-overview strong { font-size:19px; margin-right:5px; }
.billing-overview .ui-icon,.billing-section-heading .ui-icon,.billing-footnote .ui-icon { color:#637daf; flex-shrink:0; }
.billing-automation { margin-left:auto; position:relative; }.billing-automation summary { cursor:pointer; display:flex; gap:8px; align-items:center; }
.billing-automation>div { position:absolute; right:0; top:34px; width:300px; z-index:10; padding:16px; background:white; border:1px solid var(--color-border); border-radius:12px; box-shadow:0 8px 24px #18294315; }
.billing-automation::details-content { overflow:visible; }
.billing-section { margin-bottom:22px; overflow:hidden; border-radius:14px; }
.billing-section-heading { padding:20px; }.billing-section-heading h3 { display:flex; align-items:center; gap:9px; margin:0; font-size:15px; }
.billing-tools { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:12px 20px; background:#f5f7fc; border-block:1px solid var(--color-border); }
.billing-tools .form-input { max-width:280px; }.billing-select { display:flex; gap:10px; align-items:center; font-size:13px; cursor:pointer; }
.billing-workspace input[type=checkbox] { appearance:auto; width:18px; height:18px; margin:0; accent-color:#637cce; flex-shrink:0; }
.billing-catchup-row,.billing-due-row { display:flex; align-items:center; gap:14px; padding:17px 20px; border-bottom:1px solid var(--color-border); color:inherit; text-decoration:none; }
.billing-catchup-row { cursor:pointer; transition:background 160ms ease; }.billing-catchup-row:has(input:checked) { background:#edf1ff; }.billing-catchup-row[hidden] { display:none; }
.billing-client { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }.billing-client strong { font-size:13px; }.billing-client small,.billing-price small { font-size:12px; color:var(--color-text-light); font-weight:400; }
.billing-periods { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:11px; color:#586a89; margin-top:3px; }
.billing-price { display:flex; align-items:flex-end; flex-direction:column; gap:5px; text-align:right; font-size:14px; font-variant-numeric:tabular-nums; }
.billing-selection { padding:16px 20px; background:#f7f8fc; }.billing-selection strong { font-size:13px; }.billing-selection small { display:block; max-width:580px; font-size:12px; color:var(--color-text-light); margin-top:5px; }.billing-selection .btn { flex-shrink:0; }
.billing-search { display:flex; gap:8px; align-items:center; }.billing-search .form-input { max-width:220px; }
.billing-table-head,.billing-schedule-row { display:grid; grid-template-columns:1.3fr 1fr .8fr; gap:18px; align-items:center; padding:15px 20px; }
.billing-table-head { font-size:11px; color:var(--color-text-light); background:#f5f7fc; }.billing-table-head>span:last-child { text-align:right; }
.billing-schedule-row { border-top:1px solid var(--color-border); color:inherit; text-decoration:none; font-size:13px; transition:background 160ms; }.billing-schedule-row:hover,.billing-due-row:hover,.billing-catchup-row:hover { background:#f0f3fb; }.billing-schedule-row>span:nth-child(2) { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }.billing-schedule-row .billing-price,.billing-due-row .billing-price { flex-direction:row; align-items:center; justify-content:flex-end; gap:15px; }
.billing-empty { padding:30px 20px; text-align:center; color:var(--color-text-light); }.billing-clear { display:flex; align-items:center; gap:14px; padding:20px 0 28px; }.billing-clear>.ui-icon { color:#637cce; width:25px; height:25px; }
.billing-pagination { display:flex; gap:16px; justify-content:center; align-items:center; padding:16px; font-size:12px; }
.billing-footnote { display:flex; align-items:flex-start; gap:8px; color:var(--color-text-light); font-size:12px; }
@media(max-width:1000px) { .billing-section-heading { align-items:flex-start; flex-direction:column; }.billing-overview { flex-wrap:wrap; gap:14px 24px; }.billing-automation { margin-left:0; }.billing-search { width:100%; } }
@media(max-width:600px) { .billing-heading { align-items:flex-start; flex-direction:column; }.billing-heading h2 { font-size:22px; }.billing-selection { flex-direction:column; align-items:flex-start; }.billing-tools { flex-wrap:wrap; }.billing-tools .form-input { max-width:none; }.billing-catchup-row { flex-wrap:wrap; }.billing-catchup-row .billing-price { margin-left:32px; align-items:flex-start; text-align:left; }.billing-table-head { display:none; }.billing-schedule-row { grid-template-columns:1fr auto; gap:10px; }.billing-schedule-row>span:nth-child(2) { grid-row:2; font-size:12px; }.billing-schedule-row .billing-price { grid-column:2; grid-row:1/3; }.billing-search { flex-wrap:wrap; }.billing-search .form-input { flex:1; min-width:150px; }.billing-automation>div { left:0; right:auto; max-width:calc(100vw - 65px); } }
@media(prefers-reduced-motion:reduce) { .billing-catchup-row,.billing-schedule-row { transition:none; } }

/* Notes: neutral reading surfaces with optional color markers. */
.notes-workspace { max-width:1250px; margin:auto; }
.notes-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.notes-heading h2 { margin:0 0 7px; font-size:25px; letter-spacing:-.5px; }.notes-heading p { margin:0; color:var(--color-text-light); font-size:13px; }
.notes-toolbar { display:flex; gap:10px; margin-bottom:28px; align-items:center; flex-wrap:wrap; }.notes-toolbar>label { flex:1; min-width:200px; }.notes-toolbar>select { width:200px; }.notes-toolbar>.notes-color-filter { width:170px; }
.notes-group { margin-bottom:28px; }.notes-group>h3 { display:flex; gap:9px; align-items:center; font-size:13px; margin:0 0 14px; }.notes-group>h3 span { color:var(--color-text-light); font-weight:400; }
.notes-board-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.memo { background:white; border:1px solid var(--color-border); border-radius:13px; padding:18px; min-width:0; display:flex; flex-direction:column; transition:box-shadow 160ms,border-color 160ms; }
.memo:hover { border-color:#bdcbe5; box-shadow:0 4px 15px #15264008; }
.memo>header { display:flex; align-items:center; gap:12px; margin-bottom:13px; }.memo>header>a { flex:1; min-width:0; overflow-wrap:anywhere; font-size:13px; font-weight:600; color:#344c76; text-decoration:none; }.memo>header>a::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--memo-color); display:inline-block; margin-right:8px; }.memo-pin { padding:7px; min-width:30px; min-height:30px; }.memo-pin[aria-pressed=true] { background:#e8edff; color:#405b9d; border-color:#b6c5ed; }
.memo-open { text-align:left; display:flex; flex-direction:column; flex:1; gap:12px; border:0; background:none; color:var(--color-text); cursor:pointer; padding:0; width:100%; font:inherit; }
.memo-open>span { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; font-size:14px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }.memo-open>small { display:flex; align-items:center; gap:6px; color:#5c719b; font-size:11px; margin-top:auto; }.memo-open .ui-icon { width:13px; height:13px; }
.memo>footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 10px; padding-top:14px; margin-top:14px; border-top:1px solid #edf0f6; font-size:10px; color:var(--color-text-light); }
.notes-empty { text-align:center; padding:55px 20px; }.notes-empty>.ui-icon { width:30px; height:30px; color:#7188ba; }.notes-empty p { color:var(--color-text-light); }
.memo-dialog { padding:0; border:1px solid #dce3f0; border-radius:16px; width:min(620px,calc(100vw - 28px)); max-height:calc(100dvh - 40px); color:var(--color-text); box-shadow:0 20px 80px #15264030; }.memo-dialog::backdrop { background:#141e3766; backdrop-filter:blur(3px); }.memo-dialog[open] { animation:memo-appear 160ms ease-out; }
.memo-dialog header,.memo-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; }.memo-dialog header { border-bottom:1px solid var(--color-border); }.memo-dialog h3 { margin:4px 0 0; font-size:20px; }.memo-dialog header small { color:var(--color-text-light); }.memo-editor-body { padding:22px 24px; }.memo-editor-body>label { margin-top:18px; }.memo-dialog textarea { resize:vertical; min-height:190px; line-height:1.65; }.memo-dialog footer { border-top:1px solid var(--color-border); background:#f8f9fd; }.memo-dialog footer>div { display:flex; gap:8px; margin-left:auto; }.memo-delete { color:#b24050; }
.memo-colors { border:0; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px; }.memo-colors legend { font-size:12px; font-weight:600; margin-bottom:10px; }.memo-colors label { position:relative; display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid #dce3f0; border-radius:8px; cursor:pointer; font-size:11px; }.memo-colors input { position:absolute; opacity:0; width:1px; height:1px; }.memo-colors span { width:9px; height:9px; border-radius:50%; background:var(--memo-color); }.memo-colors label:has(input:checked) { background:#eef2ff; border-color:#8399d4; }.memo-colors label:has(input:focus-visible) { outline:2px solid #637cce; outline-offset:2px; }
#noteEditorError { color:#b24050; font-size:13px; }
@keyframes memo-appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1100px) { .notes-board-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .notes-heading { align-items:flex-start; flex-direction:column; }.notes-board-grid { grid-template-columns:1fr; }.notes-toolbar>select { flex:1; min-width:140px; }.notes-toolbar>label { flex-basis:100%; }.memo-dialog header,.memo-dialog footer,.memo-editor-body { padding:16px; }.memo-dialog footer { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .memo-dialog[open] { animation:none; }.memo,.memo-client-list [role=option] { transition:none; } }

.notes-toolbar .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.notes-toolbar>.notes-color-filter { width:190px; }
.memo-dialog { position:fixed; inset:0; margin:auto; }
.memo-quick { background:white; border:1px solid var(--color-border); border-radius:13px; padding:18px 20px; margin-bottom:26px; }
.memo-quick textarea { resize:vertical; min-height:86px; line-height:1.6; }
.memo-quick-footer { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.memo-quick-footer>select { width:230px; }.memo-quick-footer .memo-colors { margin:0; flex:1; }.memo-quick-footer>.btn { margin-left:auto; }
.memo-quick .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#quickNoteError { color:#b24050; font-size:13px; }
@media(max-width:600px) { .memo-quick { padding:16px; }.memo-quick-footer>select { width:100%; }.memo-quick-footer .memo-colors { flex-basis:100%; } }
.memo-client-picker { position:relative; flex:1 1 240px; max-width:320px; min-width:200px; }
.memo-client-combobox { position:relative; }
.memo-client-combobox>.ui-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--color-text-light); pointer-events:none; }
.memo-client-combobox .form-input { padding-left:36px; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; }
.memo-client-list { position:absolute; z-index:30; inset:calc(100% + 6px) 0 auto; max-height:240px; overflow:auto; margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--color-border); border-radius:10px; box-shadow:var(--shadow-md); }
.memo-client-list [role=option] { padding:9px 10px; border-radius:7px; cursor:pointer; font-size:13px; line-height:1.35; overflow-wrap:anywhere; transition:background 140ms,color 140ms; }
.memo-client-list [role=option]:hover { background:#f2f4fa; color:var(--color-text); }
.memo-client-list [role=option][aria-selected=true] { background:var(--color-primary-light); color:var(--color-primary-dark); }
.memo-client-list [role=option][aria-selected=true]:hover { background:#e4eafc; }
.memo-client-empty { padding:12px 10px; color:var(--color-text-light); font-size:12px; }
.memo-quick-footer { gap:18px; }
.notes-empty { padding:44px 24px 50px; }
.notes-empty>.ui-icon { display:block; margin:0 auto 18px; }
.notes-empty h3 { margin:0 0 12px; line-height:1.4; }
.notes-empty p { max-width:520px; margin:0 auto 24px; line-height:1.65; }
@media(max-width:600px) { .memo-client-picker { max-width:none; width:100%; flex-basis:100%; }.notes-empty { padding:34px 18px 40px; } }

/* Bounded lists: totals and navigation remain visible on small screens. */
.list-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:20px 0; font-size:12px; color:var(--color-text-light); }
.list-pagination > div { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-left:auto; }
[data-list-search] input[name="search"] { min-width:0; flex:1; }
[data-list-search] button { flex-shrink:0; }

.pagination-number { padding:7px 10px; border-radius:5px; color:inherit; }
.pagination-number[aria-current="page"] { background:var(--color-primary); color:#fff; font-weight:600; }
@media(max-width:480px) { .list-pagination > div { gap:4px; } .pagination-number { padding:7px; } }
[data-list-search] { display:flex; align-items:center; gap:8px; }
[data-list-search]:not(:has(> svg)) input[name="search"] { padding-left:14px; }

/* Lucide inherits the existing navigation colors, including the active accent. */
body .ui-icon { flex-shrink:0; vertical-align:middle; }
.user-menu-item .ui-icon { width:16px; height:16px; }

/* Page entrances run on the live sections, including browsers without
   cross-document view transitions. Never animate the navigation or logo. */
@view-transition { navigation:none; }
@keyframes workspace-section-in {
    from { opacity:0; transform:translateY(12px); }
    to { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:no-preference) {
    .workspace .overview-heading,
    .workspace .notes-heading,
    .workspace .main-content > .collection-intro,
    .workspace .main-content > .card,
    .workspace .overview-charts,
    .workspace .overview-operations,
    .workspace .record-summary,
    .workspace .record-body,
    .workspace .pilot-metrics,
    .workspace .pilot-main,
    .workspace .pilot-aging,
    .workspace .pilot-work,
    .workspace .bank-overview,
    .workspace .bank-ledger,
    .workspace .bank-setup,
    .workspace .settings-layout,
    .workspace .mail-workspace {
        animation:workspace-section-in 360ms var(--ease-out) both;
    }
    .workspace .pilot-metrics, .workspace .bank-overview { animation-delay:40ms; }
    .workspace .pilot-main, .workspace .record-body,
    .workspace .bank-ledger, .workspace .overview-charts { animation-delay:80ms; }
    .workspace .pilot-aging, .workspace .pilot-work,
    .workspace .overview-operations { animation-delay:100ms; }
}

/* Banking: transaction filters and a focused reconciliation flow. */
.bank-ledger .bank-transaction-status { margin-top:0; padding-top:12px; border-top:1px solid #edf0f5; }
.review-panel .review-hint { margin:0 0 12px; }
.review-panel .review-ignore { margin:16px 0 8px; padding-top:12px; border-top:1px solid #edf0f5; }
.review-footer .review-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.review-footer .review-actions .btn { white-space:normal; justify-content:center; }
.review-summary p,.invoice-pick-name { overflow-wrap:anywhere; min-width:0; }
.review-footer .allocation-breakdown { max-height:150px; overflow:auto; }
@media(max-width:500px) {
    .review-panel-top h2 { font-size:14px; }
    .review-footer .review-actions { grid-template-columns:1fr; gap:6px; }
    .review-footer .allocation-recap-total strong { font-size:17px; }
}

/* A compact transfer receipt, separate from invoice suggestions. */
.review-panel > .review-summary { background:#f7f9fc; border:1px solid #e1e7f0; border-left:3px solid #879bea; border-radius:8px; padding:14px 16px; gap:10px 16px; }
.review-transfer-meta { display:flex; flex-direction:column; gap:3px; }
.review-transfer-meta > span { font-size:11px; font-weight:600; color:#526580; }
.review-panel .review-transfer-meta small { margin:0; font-size:11px; }
.review-summary > strong { align-self:center; font-size:24px; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.review-summary > p { border-top:1px solid #e1e7f0; padding-top:10px; font-size:12px; line-height:1.5; color:#354761; }
.review-footer .review-actions { grid-template-columns:1fr; }
.invoice-evidence { background:#faf7ef; border-color:#ede4cd; }
.invoice-evidence > strong { color:#80622c; }
.invoice-evidence.is-strong { background:#edf6f1; border-color:#d6e8dd; }
.invoice-evidence.is-strong > strong { color:#32694c; }
.bank-ledger[aria-busy="true"] .bank-transactions { opacity:.55; }
#bankListFeedback:empty { display:none; }

/* Compact ledger controls; keep the list surface stable during refresh. */
body .bank-ledger .bank-compact-filters { margin:14px 20px 10px; }
.bank-search-row { display:flex; align-items:center; gap:10px; }
.bank-search-row > .app-select { width:175px; flex-shrink:0; }
.bank-search-row > select { width:175px; min-width:0; flex-shrink:0; font-size:12px; min-height:36px; padding:8px 26px 8px 10px; }
body .bank-compact-filters .search-box { flex:1; min-width:0; margin:0; }
body .bank-ledger .bank-compact-filters .search-box > svg { display:block; position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; }
body .bank-ledger .bank-compact-filters .search-box input[name="search"] { min-height:40px; padding:8px 10px 8px 38px; }
.bank-status-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.bank-status-row .bank-status-filter { flex:1; gap:2px; }
.bank-status-row .bank-status { padding:8px 9px; font-size:11px; }
.bank-status-row > select { width:115px; min-height:32px; padding:6px 24px 6px 8px; font-size:11px; margin-left:auto; }
.bank-status-row > .app-select { width:115px; flex-shrink:0; margin-left:auto; }
body .bank-ledger > .list-filter-summary { margin-top:8px; margin-bottom:4px; padding:7px 10px; gap:8px; font-size:11px; }
.bank-ledger .list-filter-summary strong { font-size:14px; }
body .bank-ledger > .bank-scope-help { margin-top:4px; margin-bottom:8px; font-size:10px; }
.bank-scope-help summary { cursor:pointer; color:#718099; }
.bank-scope-help p { margin:6px 0; }
.bank-ledger[aria-busy="true"] .bank-transactions { opacity:1; }
.bank-ledger { position:relative; }
.bank-ledger::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#879bea; opacity:0; pointer-events:none; transition:opacity 120ms; }
.bank-ledger[aria-busy="true"]::before { opacity:1; transition-delay:180ms; }
.bank-ledger .list-filter-panel { animation:none; }
@media(max-width:767px) {
    body .bank-ledger .bank-compact-filters { margin-left:14px; margin-right:14px; }
    .bank-search-row > select, .bank-search-row > .app-select { width:130px; font-size:11px; }
    .bank-status-row .bank-status-filter { flex-basis:100%; }
    .bank-status-row > select { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) { .bank-ledger::before { transition:none; } }
.bank-compact-filters .bank-status-filter { order:0; }
@media(max-width:767px) {
    .bank-compact-filters .bank-status-filter { flex-wrap:nowrap; overflow-x:auto; min-width:0; }
    .bank-compact-filters .bank-status { flex-shrink:0; padding:8px 6px; font-size:10px; }
    .bank-status-row > select, .bank-status-row > .app-select { order:1; }
}
@media(max-width:500px) {
    .bank-search-row { flex-direction:column; align-items:stretch; }
    .bank-search-row > select, .bank-search-row > .app-select { width:100%; }
    body .bank-compact-filters .search-box { flex:auto; max-width:none; }
    body .bank-ledger .bank-compact-filters .search-box input[name="search"] { min-height:44px; }
}

/* Bank account management shares the banking workspace's ledger treatment. */
.bank-accounts-heading { justify-content: space-between; gap: 12px; }
.bank-accounts-heading > span { font-size: 12px; color: var(--color-text-light); white-space: nowrap; }
.bank-accounts-list { list-style: none; margin: 0; padding: 0; }
.bank-account-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; align-items: center; gap: 28px; padding: 24px 20px; }
.bank-account-row + .bank-account-row { border-top: 1px solid var(--color-border); }
.bank-account-identity { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.bank-account-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--accent-blue-soft); color: var(--color-primary); }
.bank-account-details { min-width: 0; }
.bank-account-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bank-account-title h3 { font-size: 15px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.bank-account-title .badge { font-size: 10px; }
.bank-account-iban { margin: 6px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bank-account-type { margin: 4px 0 0; font-size: 12px; color: var(--color-text-light); overflow-wrap: anywhere; }
.bank-account-sync { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11px; color: var(--color-text-light); }
.bank-account-balance { display: flex; flex-direction: column; gap: 5px; text-align: right; }
.bank-account-balance > span { color: var(--color-text-light); font-size: 11px; }
.bank-account-balance strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-blue-ink); white-space: nowrap; }
.bank-account-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.bank-account-actions .btn { width: 100%; }
.bank-account-delete { color: var(--color-error); background: transparent; border-color: transparent; }
.bank-account-delete:hover { color: var(--color-error); background: #fff1f2; }
@media (max-width: 767px) {
    .bank-account-row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 16px; }
    .bank-account-balance { text-align: left; padding-top: 14px; border-top: 1px solid var(--color-border); }
    .bank-account-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .bank-account-actions > .btn { width: auto; }
}

/* Banking controls sit outside animated headings so the popover stays above KPIs. */
.bank-toolbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 14px 0; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.bank-toolbar-settings, .bank-toolbar-sync { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.bank-toolbar .bank-auto-settings { margin: 0; }
.bank-toolbar .bank-settings-trigger { min-height: 36px; background: #fff; }
.bank-toolbar .bank-auto-settings-body { left: 0; right: auto; width: min(360px, calc(100vw - 48px)); }
.bank-toolbar .bank-auto-settings-body .btn { white-space: normal; text-align: left; }
.bank-toolbar .bank-toolbar-link { color: var(--color-text-light); background: transparent; border-color: transparent; }
.bank-toolbar .bank-toolbar-link:hover { color: var(--color-primary-dark); background: var(--accent-blue-soft); }
.bank-sync-caption { color: var(--color-text-light); font-size: 11px; }
.bank-auto-state.is-enabled { color: var(--color-success); }
.bank-settings-chevron { transform: rotate(90deg); transition: transform 150ms; }
.bank-auto-settings[open] .bank-settings-chevron { transform: rotate(270deg); }
@media (max-width: 767px) {
    .bank-toolbar { gap: 14px; padding-top: 8px; }
    .bank-toolbar-settings, .bank-toolbar-sync { width: 100%; }
    .bank-toolbar-sync { justify-content: space-between; }
    .bank-toolbar .bank-settings-trigger { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .bank-settings-chevron { transition: none; } }

/* Team roster and account editor. */
.user-roster-item { align-items: center; gap: 16px; }
.user-roster-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.user-roster-main:hover .list-item-title { color: var(--color-primary-dark); }
.user-roster-avatar { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #e9edfa; color: #354571; font-size: 11px; font-weight: 650; flex-shrink: 0; }
.user-roster-item .list-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal; overflow: visible; }
.user-roster-meta { display: flex; align-items: center; flex-shrink: 0; }
.user-roster-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.user-roster-self { font-size: 11px; color: #657084; }
.user-roster-open { display: grid; place-items: center; color: #9aa6b8; }
.user-roster-delete { color: var(--color-error); }
.user-roster-delete:hover { background: #f8eaea; border-color: #e8c9ce; }
.user-roster-item.is-inactive .user-roster-avatar { opacity: .45; }
.user-roster-item.is-inactive .list-item-title { color: #7a8699; }
.user-role-picker { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.user-role-picker legend { padding: 0; }
.user-role-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #dce3ee; border-radius: 10px; background: #fff; cursor: pointer; }
.user-role-option:hover { border-color: #c5cee3; background: #f7f9fe; }
.user-role-option:has(input:checked) { border-color: #b7c4e6; background: #f5f7fd; }
.user-role-option input { margin-top: 3px; accent-color: var(--color-primary); }
.user-role-option strong { display: block; font-size: 13px; font-weight: 600; }
.user-role-option small { display: block; color: #657084; font-size: 12px; margin-top: 3px; line-height: 1.45; }
.user-role-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.user-account-switch { margin-top: 6px; }
.user-password-lead { margin-bottom: 16px; }
.user-password-field { position: relative; }
.user-password-field .form-input { padding-right: 44px; }
.btn-toggle-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #657084; cursor: pointer; }
.btn-toggle-password:hover, .btn-toggle-password[aria-pressed="true"] { background: #eef2fb; color: #354571; }
.user-account-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 880px; margin: 8px auto 0; padding: 16px 4px 8px; }
.user-account-danger strong { display: block; font-size: 13px; }
.user-account-danger p { margin: 4px 0 0; font-size: 12px; color: #657084; }
@media (max-width: 767px) {
    .user-roster-item { flex-wrap: wrap; }
    .user-roster-main { flex: 1 1 100%; }
    .user-roster-meta { padding-left: 48px; }
    .user-roster-actions { width: 100%; padding-left: 48px; }
    .user-roster-actions .btn { min-height: 36px; }
    .user-roster-open { display: none; }
    .user-account-danger { flex-direction: column; align-items: flex-start; }
}
/* Preserve the Notes toolbar sizing when selects receive their custom wrapper. */
.notes-toolbar>.app-select { width:200px; }
.notes-toolbar>.app-select:has(.notes-color-filter) { width:190px; }
@media(max-width:600px) {
 .notes-toolbar>.app-select { flex:1; min-width:140px; }
}

/* The selection travels on the destination page, including browsers without
   cross-document View Transitions. No page-load delay is introduced. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .nav-bottom > .nav-item { transition: color 160ms, transform 160ms var(--motion-ease); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .nav-bottom > .nav-item, .nav-bottom > .nav-item > svg { transition: none; animation: none; }
    .nav-bottom > .nav-item:active { transform: none; }
}

/* Messages de confirmation et d’erreur, cohérents avec le centre de notifications. */
.flash { padding:14px 12px 14px 14px; gap:11px; border-color:#e2e7f0; border-radius:15px; box-shadow:0 10px 32px #20304a16; font-size:12px; }
.flash-symbol { width:34px; height:34px; border-radius:11px; }
.flash-text { overflow-wrap:anywhere; }
.flash-close:focus-visible { outline:3px solid #8b9edf; outline-offset:2px; }
.resume-draft-dialog > [data-popup-close] { position:absolute; top:14px; right:14px; }

.app-confirm-dialog { margin:auto; width:min(440px, calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; padding:28px; border:1px solid #dce3ef; border-radius:16px; color:#24324a; background:#fff; box-shadow:0 24px 80px #15233d33; }
.app-confirm-dialog::backdrop { background:#15233d70; }
.app-confirm-dialog .app-confirm-symbol { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:#edf1fc; color:#536caa; margin-bottom:18px; }
.app-confirm-dialog .app-confirm-symbol[data-tone=danger] { background:#fdecee; color:#b24050; }
.app-confirm-dialog .app-confirm-symbol[hidden] { display:none; }
.app-confirm-dialog h2 { font-size:21px; line-height:1.3; margin:0 0 10px; letter-spacing:-.35px; }
.app-confirm-dialog p { margin:0; font-size:13px; line-height:1.65; color:#63728a; white-space:pre-line; overflow-wrap:anywhere; }
.app-confirm-dialog p[hidden] { display:none; }
.app-confirm-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:24px; }
.app-confirm-dialog .app-confirm-actions .btn { min-height:40px; }
.app-confirm-dialog :is(button):focus-visible { outline:3px solid #8b9edf; outline-offset:2px; }
@media(max-width:600px) {
    .app-confirm-dialog { padding:22px; width:calc(100vw - 16px); }
    .app-confirm-actions { justify-content:stretch; }
    .app-confirm-actions .btn { flex:1; }
}
@media(prefers-reduced-motion:no-preference) {
    .app-confirm-dialog[open] { animation:draft-appear .18s ease-out; }
}