/* zora-fin layouts on the CPG design system.
   Palette, type, radii, elevation and appearance come from vendor/cpg-theme.css. */
[hidden] { display: none !important; }
body { margin: 0; }
button, input { font: inherit; }
button, a, input { outline-offset: 3px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
svg { width: 1rem; height: 1rem; flex-shrink: 0; }
button svg, a svg { pointer-events: none; }
:focus-visible { outline: 2px solid hsl(var(--ring)); }
.content { width: 100%; max-width: var(--layout-content-max); margin-inline: auto; padding: 1.25rem var(--island-gap) 2rem; }
.app-sidebar .nav-item { width: 100%; text-align: left; border: 0; background: transparent; min-height: 2.25rem; }
.app-sidebar .nav-item.active { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-weight: 600; }
.app-sidebar .nav-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.sidebar-user-info { overflow: hidden; }
.topbar-left { min-width: 0; flex: 1; }
.breadcrumb-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-mobile-toggle { display: none; }
.audit-mobile-backdrop { position: fixed; inset: 0; z-index: 25; background: hsl(var(--shadow-color) / .5); }
.page-heading { margin-bottom: 1.25rem; }
.page-heading .eyebrow { display: none; }
.heading-actions { display: flex; align-items: center; gap: .75rem; }
.updated, .fine-print, .section-heading > span, .page-footer, .login-note { font-size: .75rem; color: hsl(var(--muted-foreground)); }
.secondary, .primary { gap: .4rem; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.section-heading h2, .ledger-heading h2 { font-size: .9375rem; font-weight: 600; }
.ledger-card { padding: 0; gap: 0; overflow: hidden; }
.ledger-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; }
.ledger-heading h2 { display: flex; align-items: center; gap: .5rem; }
.ledger-heading p { color: hsl(var(--muted-foreground)); font-size: .8125rem; margin-top: .375rem; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-pill); padding: .1rem .45rem; font-size: .6875rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; padding: 0 1.25rem 1.25rem; }
.filters label { display: flex; flex-direction: column; gap: .375rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.filters input { height: 2.25rem; border: 1px solid hsl(var(--input)); background: hsl(var(--background) / .35); color: hsl(var(--foreground)); border-radius: calc(var(--radius) - 2px); padding: .5rem .75rem; font-size: .8125rem; min-width: 0; }
.filters input::placeholder { color: hsl(var(--muted-foreground)); }
.filters label:not(.search-field) input { width: 9rem; }
.filters .search-field { flex: 1; min-width: 14rem; display: flex; flex-direction: row; align-items: center; position: relative; }
.search-field input { width: 100%; padding-left: 2.25rem; }
.search-field > svg { position: absolute; left: .75rem; }
.filters button { height: 2.25rem; }
.ledger-tabs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .625rem 1.25rem; border-block: 1px solid hsl(var(--border)); }
.ledger-tabs > div { display: inline-flex; gap: .25rem; border-radius: var(--radius-sm); background: hsl(var(--muted)); padding: .25rem; }
.view-tab { border: 0; border-radius: calc(var(--radius-sm) - .15rem); background: transparent; color: hsl(var(--muted-foreground)); font-size: .75rem; font-weight: 500; padding: .375rem .75rem; }
.view-tab.active { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); }
.ledger-tabs > span { color: hsl(var(--muted-foreground)); font-size: .6875rem; max-width: 48%; line-height: 1.5; text-align: right; }
.table-scroll { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.table th { padding: .75rem 1rem; background: hsl(var(--muted) / .45); color: hsl(var(--muted-foreground)); font-size: .75rem; font-weight: 500; text-align: left; white-space: nowrap; }
.table td { padding: .875rem 1rem; border-top: 1px solid hsl(var(--border)); vertical-align: middle; }
.table td strong { font-size: .8125rem; font-weight: 550; }
.table td small { display: block; font-size: .6875rem; color: hsl(var(--muted-foreground)); line-height: 1.5; margin-top: .25rem; }
.table tbody tr:hover { background: hsl(var(--muted) / .4); }
.amount-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono, .detail-row strong { font-family: var(--font-mono); font-size: .6875rem; }
.pill { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: .2rem .55rem; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); color: hsl(var(--muted-foreground)); font-size: .6875rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.pill.complete { color: hsl(var(--success-text)); background: hsl(var(--success) / .1); border-color: hsl(var(--success) / .25); }
.pill.pending { color: hsl(var(--warning-text)); background: hsl(var(--warning) / .1); border-color: hsl(var(--warning) / .25); }
.pill.attention { color: hsl(var(--destructive-text)); background: hsl(var(--destructive) / .1); border-color: hsl(var(--destructive) / .25); }
.table-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid hsl(var(--border)); padding: .875rem 1.25rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.table-footer > div { display: flex; align-items: center; gap: .75rem; }
.table-footer button { font-size: .75rem; }
.page-error { margin: 1rem; border: 1px solid hsl(var(--destructive) / .2); background: hsl(var(--destructive) / .07); color: hsl(var(--destructive-text)); padding: .875rem 1rem; border-radius: var(--radius); font-size: .8125rem; line-height: 1.6; }
.loading, .empty { padding: 2rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: .8125rem; }
.loading { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.empty h3 { font-size: .875rem; font-weight: 550; color: hsl(var(--foreground)); margin-bottom: .375rem; }
.empty > span, .empty > svg { display: block; margin: 0 auto .75rem; }
.spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); animation: audit-spin 1s linear infinite; }
@keyframes audit-spin { to { transform: rotate(360deg); } }
.fine-print { line-height: 1.7; margin-top: .75rem; }
.page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: 2rem; font-size: .6875rem; }
.detail-backdrop { position: fixed; inset: 0; background: hsl(var(--shadow-color) / .4); backdrop-filter: blur(3px); z-index: 60; }
.details { position: fixed; top: var(--island-gap); bottom: var(--island-gap); right: var(--island-gap); width: min(29rem, calc(100vw - 1.5rem)); padding: 1.5rem; overflow-y: auto; border: 1px solid hsl(var(--border)); border-radius: var(--island-radius); background: hsl(var(--popover)); box-shadow: var(--shadow-lg); z-index: 61; }
.details > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.5rem; }
.details > header button { display: grid; place-items: center; background: transparent; color: hsl(var(--muted-foreground)); border: 0; width: 2rem; height: 2rem; border-radius: var(--radius-sm); font-size: 1.5rem; }
.details > header button:hover { background: hsl(var(--muted)); }
.eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.details h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.018em; margin: .75rem 0 .375rem; }
.details p { font-size: .8125rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.detail-amount { font-size: 1.75rem; font-weight: 600; margin-block: 1.25rem; font-variant-numeric: tabular-nums; }
.detail-amount small { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.detail-section { padding-block: 1rem; border-top: 1px solid hsl(var(--border)); }
.detail-section h3 { font-size: .8125rem; font-weight: 600; margin-bottom: .75rem; }
.detail-row { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; margin: .75rem 0; font-size: .75rem; line-height: 1.6; }
.detail-row span { color: hsl(var(--muted-foreground)); }
.detail-row strong { font-weight: 450; overflow-wrap: anywhere; white-space: pre-wrap; }
.detail-note { padding: .75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--muted) / .5); margin-top: .75rem; }
.related-button { width: 100%; justify-content: flex-start; margin-top: .5rem; }
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; }
.login-container { width: 100%; max-width: 25rem; }
.audit-login-card { margin-top: 1.5rem; }
.login-brand { display: flex; flex-direction: column; align-items: center; }
.login-form label { display: flex; flex-direction: column; gap: .5rem; }
.login-form .primary { width: 100%; }
.login-note { text-align: center; margin-top: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 768px) {
  .audit-mobile-toggle { display: inline-flex; }
  .content { padding-top: 1rem; }
  .topbar { gap: .5rem; padding-inline: .75rem; }
  .topbar-actions { gap: .375rem; }
  .topbar #logout span { display: none; }
  .page-heading h1 { font-size: 1.375rem; }
  .page-heading p { font-size: .8125rem; }
  .section-heading { align-items: flex-start; }
  .section-heading > span { text-align: right; max-width: 11rem; }
  .ledger-tabs { gap: .5rem; padding-inline: .75rem; }
  .ledger-tabs > span { display: none; }
  .filters { padding-inline: 1rem; gap: .5rem; }
  .filters .search-field { flex-basis: 100%; }
  .filters label:not(.search-field) { flex: 1; min-width: 6rem; }
  .filters label:not(.search-field) input { width: 100%; }
  .table-footer { flex-wrap: wrap; padding: .875rem; }
  .table-footer > div { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.mobile-drawer-open { overflow: hidden; }
/* React workspace: larger figures, stronger hierarchy, vivid CPG accents. */
.page-kicker { display: block; color: hsl(var(--primary)); font-size: .7rem; font-weight: 750; letter-spacing: .1em; margin-bottom: .5rem; }
.page-header h1 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 780; letter-spacing: -.045em; }
.page-header p { max-width: 48rem; font-size: .9375rem; line-height: 1.7; margin-top: .5rem; }
.page-heading { margin-block: .5rem 1.75rem; }
.content { padding-top: 1.75rem; }
.section-heading h2, .ledger-heading h2 { font-size: 1.05rem; font-weight: 700; }
.table td { padding-block: 1rem; }
.table td strong { font-size: .9375rem; font-weight: 650; }
.table .amount-cell strong { font-size: 1.125rem; font-weight: 780; letter-spacing: -.02em; }
.table .amount-cell strong small { font-size: .75rem; font-weight: 500; }
.pill { font-size: .75rem; font-weight: 650; padding: .25rem .6rem; }
.detail-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; }
.details h2 { font-size: 1.5rem; font-weight: 750; }
.calculation-note { margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: hsl(var(--primary) / .035); border: 1px solid hsl(var(--primary) / .15); border-radius: var(--radius); font-size: .8125rem; color: hsl(var(--muted-foreground)); line-height: 1.8; }
.calculation-note summary { cursor: pointer; font-size: .875rem; font-weight: 650; color: hsl(var(--foreground)); }
.calculation-note summary svg { display: inline; vertical-align: middle; margin-inline: .25rem .5rem; color: hsl(var(--primary)); }
.calculation-note p { margin-top: .75rem; max-width: 80rem; }
.calculation-note strong { color: hsl(var(--foreground)); font-weight: 650; }
.report-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.report-form label { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 9rem; }
.report-form label:first-child { flex: 1.5; }
.report-form .input { width: 100%; }
.report-builder { margin-bottom: 1.5rem; }
.spin { animation: audit-spin 1s linear infinite; }
/* Liquid glass: floating navigation, quiet content islands, neutral edges.
   Keep financial data on denser surfaces for contrast and readability. */
:root {
  --island-gap: 1.125rem;
  --island-radius: 1.75rem;
  --radius: 1.4rem;
  --radius-sm: .85rem;
  --layout-sidebar-width: 15.25rem;
  --layout-navbar-height: 3.8rem;
  --glass-chrome: rgb(255 255 255 / .6);
  --glass-content: rgb(255 255 255 / .82);
  --glass-raised: rgb(255 255 255 / .94);
  --glass-control: rgb(255 255 255 / .66);
  --glass-hover: rgb(255 255 255 / .9);
  --glass-line: rgb(31 41 55 / .07);
  --glass-shadow: 0 12px 36px -18px rgb(26 39 65 / .18), 0 2px 6px rgb(26 39 65 / .025);
  --glass-float: 0 18px 48px -18px rgb(26 39 65 / .22), inset 0 0 0 1px rgb(255 255 255 / .6);
  --glass-canvas: radial-gradient(ellipse at 9% 0%, #e0e8f0 0%, transparent 48%), radial-gradient(ellipse at 90% 25%, #eae5ef 0%, transparent 45%), linear-gradient(145deg, #f3f5f7, #edf0f3 55%, #f6f3ef);
}
html.dark, html[data-theme='dark'] {
  --glass-chrome: rgb(32 35 42 / .66);
  --glass-content: rgb(33 36 43 / .88);
  --glass-raised: rgb(39 42 50 / .96);
  --glass-control: rgb(255 255 255 / .065);
  --glass-hover: rgb(255 255 255 / .11);
  --glass-line: rgb(255 255 255 / .065);
  --glass-shadow: 0 16px 38px -16px rgb(0 0 0 / .36), 0 2px 5px rgb(0 0 0 / .1);
  --glass-float: 0 20px 48px -18px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .07);
  --glass-canvas: radial-gradient(ellipse at 10% 0%, #202b39 0%, transparent 48%), radial-gradient(ellipse at 95% 35%, #2a2634 0%, transparent 50%), linear-gradient(145deg, #171b22, #11141a);
}
body { background: var(--glass-canvas); background-attachment: fixed; }
.app-shell { background: transparent; }
.app-main::before { display: none; }
.app-sidebar, .app-topbar, .theme-menu {
  border: 0;
  background: var(--glass-chrome);
  backdrop-filter: blur(32px) saturate(145%);
  -webkit-backdrop-filter: blur(32px) saturate(145%);
  box-shadow: var(--glass-float);
}
.app-sidebar { padding: .5rem; }
.app-topbar { border-radius: 999px; padding-inline: 1.3rem; flex-shrink: 0; }
.sidebar-brand { border: 0; padding-inline: .875rem; margin-top: .35rem; }
.sidebar-brand-logo { width: 2.1rem; height: 2.1rem; }
.sidebar-brand-name { letter-spacing: -.035em; font-weight: 720; }
.sidebar-brand-tag { font-size: .6875rem; }
.sidebar-nav { padding: 1rem .25rem; gap: .25rem; }
.sidebar-section-label { font-size: .6rem; letter-spacing: .12em; padding-inline: .9rem; opacity: .85; }
.sidebar-divider { border: 0; height: 0; margin-block: .5rem; }
.app-sidebar .nav-item { min-height: 2.55rem; border-radius: 999px; padding-inline: .85rem; font-size: .8125rem; }
.app-sidebar .nav-item.active { background: var(--glass-hover); color: hsl(var(--foreground)); box-shadow: 0 3px 12px rgb(0 0 0 / .04); font-weight: 650; }
.app-sidebar .nav-item.active svg { color: hsl(var(--primary)); }
.app-sidebar .nav-item:hover { background: var(--glass-control); }
.sidebar-footer { border-color: var(--glass-line); padding: .875rem .6rem .5rem; }
.sidebar-user-avatar { background: var(--glass-control); box-shadow: var(--glass-shadow); }
.content { padding-top: 2rem; }
.page-heading { margin-block: .25rem 1.6rem; padding-inline: .25rem; }
.page-kicker { color: hsl(var(--muted-foreground)); font-size: .625rem; letter-spacing: .14em; font-weight: 600; }
.page-header h1 { font-size: clamp(1.9rem, 2.7vw, 2.8rem); font-weight: 740; letter-spacing: -.055em; }
.page-header p { font-size: .875rem; max-width: 44rem; }
.ledger-card, .report-builder, .audit-login-card {
  border: 0;
  border-radius: var(--island-radius);
  background: var(--glass-content);
  box-shadow: var(--glass-shadow);
}
.calculation-note, .page-error {
  border: 0; border-radius: 1.25rem; background: var(--glass-control); box-shadow: none;
}
.ledger-heading { padding: 1.5rem; }
.filters { padding-inline: 1.5rem; }
.ledger-tabs { border: 0; padding: .5rem 1.5rem 1rem; }
.ledger-tabs > div, .theme-segmented { border: 0; border-radius: 999px; background: rgb(125 130 145 / .09); padding: .3rem; gap: .2rem; }
.view-tab, .theme-segment { border: 0; border-radius: 999px; padding: .5rem .9rem; font-size: .75rem; }
.view-tab.active, .theme-segment[aria-pressed='true'] { background: var(--glass-raised); box-shadow: 0 3px 10px rgb(0 0 0 / .07); }
.table th { border: 0; background: rgb(125 130 145 / .035); font-size: .6875rem; font-weight: 550; padding-block: .9rem; }
.table td { border-color: var(--glass-line); padding-block: 1.15rem; }
.table tbody tr:hover { background: rgb(125 130 145 / .035); }
.table-footer, .detail-section, .detail-row { border-color: var(--glass-line); }
.table-footer { border-top: 0; padding: 1rem 1.5rem; }
.count-badge { border: 0; background: rgb(125 130 145 / .08); padding: .2rem .55rem; }
.pill, .pill.complete, .pill.pending, .pill.attention {
  border: 0; background: rgb(125 130 145 / .075); font-size: .6875rem; font-weight: 600; padding: .4rem .7rem;
}
.app-shell :is(.btn-outline,.btn-sm-outline,.btn-icon-outline), .details .btn-outline {
  border: 0; background: var(--glass-control); color: hsl(var(--foreground));
  box-shadow: 0 2px 8px rgb(0 0 0 / .045), inset 0 0 0 1px var(--glass-line); border-radius: 999px;
}
.app-shell :is(.btn-outline,.btn-sm-outline,.btn-icon-outline):hover, .details .btn-outline:hover { background: var(--glass-hover); }
.app-shell .btn-sign-out, .app-shell .btn-sign-out:hover { border: 0; color: hsl(var(--muted-foreground)); background: transparent; box-shadow: none; }
.btn-primary { border: 0; border-radius: 999px; box-shadow: 0 5px 14px hsl(var(--primary) / .18); }
.btn-ghost, .btn-icon-ghost { border: 0; border-radius: 999px; }
.filters input, .report-form .input, .login-form .input {
  border: 0; border-radius: 1rem; background: rgb(125 130 145 / .075); box-shadow: inset 0 0 0 1px var(--glass-line);
  min-height: 2.55rem; color: hsl(var(--foreground));
}
.filters input:focus, .report-form .input:focus, .login-form .input:focus { box-shadow: inset 0 0 0 1px hsl(var(--foreground) / .2); }
.details { border: 0; border-radius: 2rem; background: var(--glass-raised); backdrop-filter: blur(40px) saturate(140%); -webkit-backdrop-filter: blur(40px) saturate(140%); box-shadow: var(--glass-float); padding: 1.75rem; }
.detail-backdrop { background: rgb(25 31 42 / .18); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.detail-note { border: 0; background: var(--glass-control); border-radius: 1.1rem; padding: 1rem; }
.theme-menu { background: var(--glass-raised); border-radius: 1.5rem; }
.theme-menu-section + .theme-menu-section { border-color: var(--glass-line); }
.theme-swatch[aria-pressed='true'] { outline-color: hsl(var(--foreground)); }
.app-footer { padding-inline: calc(var(--island-gap) + .25rem); font-size: .625rem; opacity: .8; }
@media (max-width: 768px) {
  :root { --island-gap: .75rem; --island-radius: 1.4rem; }
  .app-topbar { padding-inline: .75rem; }
  .app-sidebar { background: var(--glass-raised); }
  .content { padding-top: 1.5rem; }
  .ledger-heading { padding: 1.2rem; }
  .ledger-tabs { padding-inline: 1rem; overflow-x: auto; }
  .ledger-tabs > div { flex-shrink: 0; }
  .details { padding: 1.25rem; width: calc(100vw - 1.5rem); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .app-sidebar, .app-topbar, .theme-menu, .details, .ledger-card { background: hsl(var(--card)); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .detail-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(0 0 0 / .4); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar, .app-topbar, .theme-menu, .details { background: hsl(var(--card)); }
}
/* Color lives inside the material, never in a card outline or top stripe. */
.app-topbar { position: relative; top: auto; }
.content { scroll-margin-top: 1.5rem; }
.page-kicker { color: hsl(var(--primary)); }
.pill.complete { background: hsl(var(--success) / .12); }
.pill.pending { background: hsl(var(--warning) / .12); }
.pill.attention { background: hsl(var(--destructive) / .1); }
.page-kicker { display: inline-flex; padding: .4rem .7rem; border-radius: 999px; background: hsl(var(--primary) / .12); margin-bottom: .8rem; }
.app-sidebar .nav-item.active { background: hsl(var(--primary) / .16); color: hsl(var(--foreground)); }
@media (max-width: 768px) { .page-header h1 { font-size: 1.875rem; } .report-form label { min-width: 8rem; } .report-form label:first-child { flex-basis: 100%; } }

/* Shell pieces: the Data as of bar, the period picker, and report warnings and notes. */
.data-as-of { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; width: 100%; max-width: var(--layout-content-max); margin: 1rem auto 0; padding-inline: calc(var(--island-gap) + .25rem); font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.data-as-of-text { font-variant-numeric: tabular-nums; }
.data-as-of .page-error { flex: 1 0 100%; margin: 0; }
.data-as-of button { gap: .4rem; }
.period-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.period-picker label { display: flex; flex: 1 1 8rem; flex-direction: column; gap: .375rem; max-width: 10.5rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.period-picker input[type='date'] { width: 100%; min-height: 2.55rem; padding: .5rem .75rem; border: 0; border-radius: 1rem; background: rgb(125 130 145 / .075); box-shadow: inset 0 0 0 1px var(--glass-line); color: hsl(var(--foreground)); font-size: .8125rem; }
.period-picker input[type='date']:focus { box-shadow: inset 0 0 0 1px hsl(var(--foreground) / .2); }
.period-picker input[aria-invalid='true'] { box-shadow: inset 0 0 0 1px hsl(var(--destructive) / .6); }
.period-picker :is(.btn-sm-primary, .btn-sm-outline) { height: 2.55rem; border-radius: 999px; }
.period-presets { display: flex; gap: .5rem; }
.period-problem { flex: 1 0 100%; margin: 0; font-size: .75rem; color: hsl(var(--destructive-text)); }
.report-notices { display: grid; gap: .75rem; }
.report-warnings, .report-notes { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.report-warnings li { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem 1rem; border-radius: 1.25rem; background: hsl(var(--warning) / .1); color: hsl(var(--warning-text)); font-size: .8125rem; line-height: 1.6; }
.report-warnings li > span:first-of-type { flex: 1; }
.report-warnings svg { margin-top: .25rem; }
.report-notes li { display: flex; align-items: flex-start; gap: .5rem; font-size: .75rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.report-notes svg { margin-top: .2rem; }
/* The CPG theme capitalizes card titles, which would spell the product name Zora-Fin. */
.audit-login-card > header h2 { text-transform: none; }
.nav-fa { white-space: nowrap; }

/* Reports: the Customer Balance page, the report table the report pages share, and the drill-down drawer. */
.report-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; padding: 1.25rem 1.5rem; }
.report-controls > .period-picker { flex: 1 1 100%; }
.report-search { display: flex; flex: 1 1 16rem; flex-direction: column; gap: .375rem; max-width: 26rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.report-search-field { position: relative; display: flex; align-items: center; }
/* A box for a number (the size of an account) needs less room than one for a name. */
.report-search:has(input[inputmode='numeric']) { flex: 0 1 11rem; }
.report-search-field > svg { position: absolute; left: .75rem; color: hsl(var(--muted-foreground)); }
.report-controls .input:not([type='checkbox']), .drill-controls .input:not([type='checkbox']) {
  width: 100%; min-height: 2.55rem; padding: .5rem .75rem; border: 0; border-radius: 1rem; background: rgb(125 130 145 / .075);
  box-shadow: inset 0 0 0 1px var(--glass-line); color: hsl(var(--foreground)); font-size: .8125rem;
}
.report-controls .report-search-field .input, .drill-controls .report-search-field .input { padding-left: 2.25rem; }
.report-controls .input:not([type='checkbox']):focus, .drill-controls .input:not([type='checkbox']):focus { box-shadow: inset 0 0 0 1px hsl(var(--foreground) / .2); }
.report-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.55rem; font-size: .8125rem; }
/* The filters of the Invoices page, and the as-of date it shares with the Discounts page. */
.report-filter { display: flex; flex: 1 1 10rem; flex-direction: column; gap: .375rem; min-width: 8rem; max-width: 14rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.as-of { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.as-of .report-filter { flex: 0 0 10.5rem; }
.as-of .btn-sm-outline { height: 2.55rem; border-radius: 999px; }
.export-links { display: inline-flex; align-items: center; gap: .5rem; margin-inline-start: auto; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.export-links a { gap: .4rem; text-decoration: none; }
.details .export-links a { border: 0; background: var(--glass-control); color: hsl(var(--foreground)); box-shadow: 0 2px 8px rgb(0 0 0 / .045), inset 0 0 0 1px var(--glass-line); border-radius: 999px; }
.details .export-links a:hover { background: var(--glass-hover); }
/* What a page or a drill-down says while it catches up with a newer snapshot. */
.refreshed-notice { margin: 0; padding: .75rem 1rem; border-radius: 1.25rem; background: hsl(var(--primary) / .1); color: hsl(var(--foreground)); font-size: .8125rem; line-height: 1.6; }
.report-card > .refreshed-notice { margin: 0 1.5rem 1rem; }
.report-card > .report-notices { padding: 0 1.5rem 1rem; }
.report-card > .page-error { margin-inline: 1.5rem; }
.report-retry { margin: 0 1.5rem 1rem; align-self: flex-start; }
.totals-note { margin: 0; padding: 0 1.5rem .75rem; }

/* The table holds its own scrolling, both ways, so that the two header rows and the totals row can stay in sight. */
.report-scroll { max-height: min(70vh, 54rem); overflow: auto; }
.report-table[aria-busy='true'] .report-scroll { opacity: .6; transition: opacity .15s; }
table.report { --group-row: 2.5rem; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
table.report th, table.report td { padding: .45rem .75rem; vertical-align: middle; }
table.report td { border-top: 1px solid var(--glass-line); white-space: nowrap; }
table.report tbody tr:first-child td { border-top: 0; }
table.report thead th { position: sticky; top: 0; z-index: 1; background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); }
table.report thead th[scope='col'] { min-width: 7.5rem; max-width: 13rem; vertical-align: bottom; white-space: normal; }
/* The row of groups is the first of two, and the row of columns stays in sight just below it. */
table.report thead th.group-head { z-index: 2; height: var(--group-row); padding-block: 0; border-bottom-color: var(--glass-line); color: hsl(var(--foreground)); font-size: .75rem; font-weight: 650; text-align: start; }
table.report thead tr + tr th { top: var(--group-row); }
table.report tfoot td { position: sticky; bottom: 0; z-index: 2; background: hsl(var(--card)); border-top: 1px solid hsl(var(--border)); font-weight: 650; }
/* A group's name stays in view while any of its columns is. */
.group-head > span { position: sticky; left: .75rem; display: inline-block; white-space: nowrap; }
.col-text, .col-en, .col-fa { display: block; }
.col-fa { margin-top: .125rem; font-weight: 400; }
table.report th.num { text-align: right; }
.sort-button { display: inline-flex; align-items: flex-end; gap: .35rem; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.sort-button:hover { color: hsl(var(--foreground)); }
th[aria-sort] .sort-button { color: hsl(var(--foreground)); }
th.num .sort-button { flex-direction: row-reverse; }
.report .num { text-align: right; font-variant-numeric: tabular-nums; }
.report .zero { color: hsl(var(--muted-foreground)); opacity: .6; }
.report .flag-cell { text-align: center; }
.flag.passed { color: hsl(var(--success-text)); }
.flag.failed { color: hsl(var(--destructive-text)); font-weight: 700; }
.report .muted { color: hsl(var(--muted-foreground)); font-style: italic; }
/* A figure that opens the rows behind it. */
.cell-link { margin: 0; padding: 0; border: 0; border-radius: .25rem; background: none; color: hsl(var(--primary)); font: inherit; font-variant-numeric: tabular-nums; text-decoration: underline dotted; text-underline-offset: .2em; cursor: pointer; }
.cell-link:hover { text-decoration-style: solid; }

/* The drill-down opens wide: it is a table of up to thirteen columns. */
.details:has(.drill-body) { width: min(80rem, calc(100vw - 2 * var(--island-gap))); }
.details:has(.drill-body) h2 { font-size: 1.25rem; line-height: 1.4; }
.drill-subject { color: hsl(var(--muted-foreground)); font-weight: 500; }
/* minmax(0, 1fr): a column that can be narrower than the table in it, which scrolls by itself. */
.drill-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.drill-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; }
.drill-group { display: flex; flex-direction: column; gap: .375rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.drill-controls .report-search { flex: 1 1 14rem; }
.details .drill-total { display: flex; align-items: baseline; gap: .75rem; margin: 0; color: hsl(var(--muted-foreground)); font-size: .8125rem; }
.drill-total strong { color: hsl(var(--foreground)); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.details .drill-inputs { margin: 0; padding: .75rem 1rem; border-radius: 1.1rem; background: var(--glass-control); }
.drill-groups { max-height: 14rem; overflow: auto; }
.drill-groups table.report { width: 100%; }
.drill-body .report-scroll { max-height: min(50vh, 32rem); }
.drill-body .table-footer { padding-inline: 0; }
@media (max-width: 768px) {
  .report-controls { padding: 1rem; }
  .export-links { margin-inline-start: 0; }
  .report-card > .report-notices, .totals-note { padding-inline: 1rem; }
  .report-card > .page-error { margin-inline: 1rem; }
  .report-retry { margin-inline: 1rem; }
}

/* The Definitions page: three tables of text, which wrap, with the report columns each row names listed in its cell. */
.definitions-card + .definitions-card { margin-top: 1.5rem; }
/* The theme capitalizes every word of a card title, which would make "Not Recorded By The Platform" of it. */
.definitions-card > header h2 { text-transform: none; }
.definitions-table td, .definitions-table th { vertical-align: top; }
/* Persian names read right to left but stay under their left-aligned header, as the reports' Persian headers do. */
.definitions-table td { min-width: 7rem; line-height: 1.6; text-align: left; white-space: normal; }
.definitions-table th { white-space: normal; }
.definitions-table td.definition-text { min-width: 18rem; }
.definitions-table td.note-text { min-width: 12rem; }
.column-list { display: grid; gap: .375rem; min-width: 14rem; margin: 0; padding: 0; list-style: none; font-size: .75rem; line-height: 1.5; }
.column-list li { overflow-wrap: anywhere; }
.definitions-table th.rules-wallet { padding-block: .625rem; background: hsl(var(--muted) / .7); color: hsl(var(--foreground)); font-size: .8125rem; font-weight: 650; text-align: start; }
.definitions-table tbody + tbody th.rules-wallet { border-top: 1px solid hsl(var(--border)); }