/* FinPult Design Foundation. Local assets only; no framework or font imports. */
:root {
  --color-bg: #F7F9FB;
  --color-surface: #FFFFFF;
  --color-text: #17283A;
  --color-text-secondary: #64748B;
  --color-border: #E4EAF0;
  --color-primary: #0F766E;
  --color-primary-soft: #E6F3F0;
  --color-success: #16785D;
  --color-warning: #A85D12;
  --color-danger: #B42318;
  --color-primary-hover: #0B625C;
  --color-danger-hover: #921C13;
  --color-warning-soft: #FFF6E8;
  --color-danger-soft: #FEF3F2;
  --color-backdrop: rgb(23 40 58 / 28%);
  --radius-sm: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --shadow-soft: 0 2px 8px rgb(23 40 58 / 3%);
  --control-height: 40px;
  --control-compact-height: 36px;
  --sidebar-width: 216px;
  --sidebar-compact-width: 72px;
  --header-height: 64px;
  --content-width: 1440px;
  --font-body: 14px;
  --font-small: 12px;
  --font-section: 16px;
  --font-title: 24px;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 var(--font-body)/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
main:focus { outline: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--font-title); line-height: 1.3; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
h2, h3 { font-size: var(--font-section); font-weight: 600; line-height: 1.4; }
.icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; }
.small { font-size: var(--font-small); }
.secondary-text, .help-text { color: var(--color-text-secondary); }
.numeric, .amount, .date { font-variant-numeric: tabular-nums; }
.amount { text-align: right; }
.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 100; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-sm); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: 18px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: var(--sidebar-width); background: var(--color-surface); border-right: 1px solid var(--color-border); }
.sidebar-brand { min-height: var(--header-height); padding: 0 var(--space-5); }
.navigation { padding: var(--space-4) var(--space-3); }
.nav-link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text-secondary); font-weight: 500; }
.nav-link:hover { background: var(--color-bg); color: var(--color-text); }
.nav-link.is-active { background: var(--color-primary-soft); color: var(--color-text); }
.nav-link.is-active .icon { color: var(--color-primary); }
.sidebar-caption { margin-top: auto; padding: var(--space-5); font-size: var(--font-small); color: var(--color-text-secondary); }
.app-workspace { margin-left: var(--sidebar-width); min-width: 0; }
.app-header { min-height: var(--header-height); padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.header-section, .owner-actions { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.header-title { font-weight: 600; }
.owner-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); font-size: var(--font-small); }
.environment { display: inline-flex; align-items: center; padding: 3px var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 10px; line-height: 1.5; font-weight: 700; letter-spacing: .05em; color: var(--color-text-secondary); background: var(--color-bg); white-space: nowrap; }
.app-content { max-width: var(--content-width); padding: var(--space-5); margin: 0 auto; min-width: 0; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-heading p { margin-top: var(--space-1); }
.card { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); }
.context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.card-label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-text-secondary); }
.card-label h2 { font-size: var(--font-small); font-weight: 500; }
.context-value { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: 22px; line-height: 1.4; font-weight: 600; margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.context-value--text { font-size: 18px; }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2); border-radius: var(--radius-pill); font-size: var(--font-small); line-height: 1.5; font-weight: 500; white-space: nowrap; }
.badge--neutral { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.badge--success { background: var(--color-primary-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.empty-state { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-secondary); }
.empty-state h3 { color: var(--color-text); margin-bottom: var(--space-2); }
.empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); border-radius: var(--radius-card); background: var(--color-bg); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.empty-state p { max-width: 480px; margin: 0 auto; }
.workspace-note { margin-top: var(--space-4); font-size: var(--font-small); color: var(--color-text-secondary); }
.notice { padding: var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.notice--warning { color: var(--color-warning); background: var(--color-warning-soft); }
.button { min-height: var(--control-compact-height); display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-weight: 500; line-height: 1.25; text-decoration: none; cursor: pointer; }
.button--primary { color: var(--color-surface); background: var(--color-primary); }
.button--primary:hover { background: var(--color-primary-hover); }
.button--secondary { color: var(--color-text); background: var(--color-surface); border-color: var(--color-border); }
.button--secondary:hover, .button--ghost:hover { background: var(--color-bg); }
.button--ghost { color: var(--color-text-secondary); background: transparent; }
.button--destructive { color: var(--color-surface); background: var(--color-danger); }
.button--destructive:hover { background: var(--color-danger-hover); }
.button:disabled, .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.button[aria-busy="true"] { cursor: progress; }
.button[aria-busy="true"]::after { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.button--full { width: 100%; min-height: var(--control-height); }
.icon-button { padding: var(--space-2); min-width: var(--control-compact-height); }
.logout-form { margin: 0; }
.auth-layout { width: min(100% - 2 * var(--space-4), 420px); margin: clamp(var(--space-5), 9vh, 80px) auto var(--space-5); }
.auth-brand-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.auth-card { padding: var(--space-5); box-shadow: var(--shadow-soft); }
.auth-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; margin: 0 0 var(--space-5); font-size: var(--font-small); color: var(--color-text-secondary); }
.auth-steps [aria-current="step"] { color: var(--color-primary); font-weight: 600; }
.auth-description { color: var(--color-text-secondary); margin: var(--space-2) 0 var(--space-5); }
.auth-form { display: grid; gap: var(--space-4); }
.field { min-width: 0; }
.field label { display: block; font-weight: 500; margin-bottom: var(--space-2); }
.field input:not([type="hidden"]), .field select, .field textarea { display: block; width: 100%; min-width: 0; height: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.field textarea { height: auto; min-height: 100px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary-soft); outline-offset: 1px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--color-bg); color: var(--color-text-secondary); cursor: not-allowed; }
.field--error input, .field input[aria-invalid="true"] { border-color: var(--color-danger); }
.help-text { font-size: var(--font-small); margin-top: var(--space-2); }
.form-errors { color: var(--color-danger); background: var(--color-danger-soft); padding: var(--space-3); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.field-errors { color: var(--color-danger); font-size: var(--font-small); margin-top: var(--space-2); }
.errorlist { list-style: none; padding: 0; margin: 0; }
.auth-note { display: flex; justify-content: center; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-small); margin-top: var(--space-5); }
.auth-exit { display: flex; justify-content: center; margin-top: var(--space-4); }
.eyebrow { display: block; color: var(--color-primary); font-size: var(--font-small); font-weight: 600; margin-bottom: var(--space-3); }
.qr-container { display: flex; justify-content: center; margin: var(--space-4) 0 var(--space-5); }
.qr-container img { max-width: 100%; height: auto; object-fit: contain; }
/* Reusable table baseline. Business tables and sample amounts are not rendered. */
.table-container { max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th, .data-table td { height: 46px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table th { background: var(--color-bg); color: var(--color-text-secondary); font-size: var(--font-small); font-weight: 600; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .date, .data-table .status { white-space: nowrap; }
.table-state { padding: var(--space-5); color: var(--color-text-secondary); text-align: center; }
.table-state--empty, .table-state--loading { background: var(--color-surface); }
.table-state--error { color: var(--color-danger); background: var(--color-danger-soft); }
.menu-toggle, .noscript-navigation { display: none; }
.mobile-navigation { inset: 0 auto 0 0; margin: 0; width: min(300px, 88vw); height: 100%; height: 100dvh; max-height: none; max-width: none; padding: 0; border: 0; border-right: 1px solid var(--color-border); color: var(--color-text); background: var(--color-surface); }
.mobile-navigation::backdrop { background: var(--color-backdrop); }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--header-height); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
body:has(.mobile-navigation[open]) { overflow: hidden; }
@media (max-width: 1024px) {
  .sidebar { width: var(--sidebar-compact-width); }
  .sidebar-brand { padding: 0; justify-content: center; }
  .sidebar .brand-name, .sidebar .nav-label, .sidebar-caption { display: none; }
  .sidebar .navigation { padding-inline: var(--space-3); }
  .sidebar .nav-link { justify-content: center; padding-inline: 0; }
  .app-workspace { margin-left: var(--sidebar-compact-width); }
  .context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .app-workspace { margin-left: 0; }
  .app-header { padding-inline: var(--space-4); }
  .menu-toggle { display: inline-flex; }
  .noscript-navigation { display: block; }
  .owner-name { max-width: 120px; }
  .page-heading { align-items: flex-start; }
}
@media (max-width: 540px) {
  .app-content { padding: var(--space-4); }
  .app-header { gap: var(--space-2); padding-inline: var(--space-3); }
  .header-section { gap: var(--space-2); }
  .owner-name { display: none; }
  .context-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
  .page-heading { flex-direction: column; margin-bottom: var(--space-4); }
  .card-heading { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .context-card { padding: var(--space-4); }
  .card-label { margin-bottom: var(--space-2); }
  .auth-card { padding: var(--space-4); }
  .auth-layout { margin-top: var(--space-5); }
}