/* Vlerano — Ledger theme. Local assets only; accounting behavior stays in app.js. */
:root {
  --ink: #202b3b;
  --muted: #687384;
  --line: #e2e5e9;
  --paper: #f7f8fa;
  --green: #365ac2; /* Legacy component token: primary action color. */
  --accent: #d6e0ff;
  --white: #fff;
  --soft: #f0f3fa;
  --nav: #192331;
  --success: #26705a;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
:focus-visible { outline: 3px solid #8099e6; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
.sidebar { width: 236px; padding: 32px 18px 24px; background: var(--nav); border-right: 0; color: #fff; overflow-y: auto; }
.brand { padding: 0 12px; gap: 10px; font-size: 27px; font-weight: 600; letter-spacing: -1.1px; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; background: transparent; border: 0; border-radius: 0; color: #f4f6fa; }
.brand-mark::before, .assistant-mark::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: url("/static/brand-ledger.svg") center / contain no-repeat; mask: url("/static/brand-ledger.svg") center / contain no-repeat; }
.assistant-mark::before { width: 28px; height: 28px; }
.brand-dot { color: #a9bce8; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; }
.sidebar > .eyebrow { color: #8e9db2; margin: 48px 14px 17px; font-size: 9px; }
.nav-button { position: relative; min-height: 44px; margin-bottom: 5px; padding: 11px 14px; gap: 12px; border-radius: 6px; color: #aeb9c9; font-size: 13px; font-weight: 500; }
.nav-button span { display: inline-flex; align-items: center; width: 18px; }
.ui-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nav-button.active { background: #2c3b50; color: #fff; box-shadow: inset 2px 0 #a9bce8; }
.nav-button:hover:not(.active) { background: #233144; color: #fff; }
.help-link { margin-top: 24px; border-top: 1px solid #334052; padding-top: 22px; border-radius: 0; }
.sidebar-bottom { padding: 24px 14px 0; }
.sidebar-bottom .badge { color: #b5c1d3; background: #253246; border: 1px solid #3b485c; font-size: 9px; }
.sidebar-bottom p { color: #8e9db2; font-size: 12px; line-height: 1.7; margin: 15px 0 23px; }
.sidebar-bottom .text-button { color: #c0cbdc; font-size: 11px; }
.workspace { margin-left: 236px; }
.topbar { height: 76px; padding: 0 38px; background: #fff; }
.company-avatar { background: #f1f3f7; border-color: #e0e4ec; color: #485a76; width: 34px; height: 34px; font-size: 12px; border-radius: 7px; }
.company-control { min-width: 0; }
.company-control select { font-size: 13px; font-weight: 600; max-width: 300px; }
.top-actions { gap: 10px; font-size: 11px; }
.local-dot { background: #527f6b; }
.top-actions .secondary { margin-left: 12px; }
.demo-strip { padding: 9px 38px; background: #f5f3ec; border-bottom: 1px solid #e9e5d9; color: #746a50; font-size: 10px; }
.demo-strip strong { font-size: 9px; letter-spacing: 1.4px; }
main { max-width: 1540px; padding: 37px 38px 24px; }
.page-heading { margin-bottom: 7px; }
.page-heading .eyebrow { color: #6e7b90; margin: 0 0 12px; font-size: 9px; }
.page-heading h1 { font-size: 29px; line-height: 1.25; letter-spacing: -1px; font-weight: 600; margin: 0 0 10px; }
.page-heading p:not(.eyebrow) { font-size: 12px; margin: 0; line-height: 1.7; }
.primary { border-radius: 6px; padding: 11px 17px; font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px #18347214; }
.primary:hover { background: #2849a9; border-color: #2849a9; }
.secondary { border-radius: 6px; padding: 9px 13px; font-size: 12px; background: #fff; border-color: #dce1e8; font-weight: 500; }
.secondary:hover { background: #f2f5fa; border-color: #bcc8dc; }
.compact { padding: 7px 10px; font-size: 11px; }
.text-button { font-weight: 500; }
.text-button:hover { color: #223f90; text-decoration: underline; text-underline-offset: 4px; }
.filters { gap: 18px; margin: 29px 0 24px; padding-top: 21px; border-top: 1px solid var(--line); font-size: 11px; }
.filters input { border-color: #dce1e8; padding: 7px 9px; font-size: 11px; border-radius: 5px; }
.filters > span { font-size: 10px; }
.metric-grid { gap: 0; border: 1px solid var(--line); background: #fff; border-radius: 8px; overflow: hidden; }
.metric { padding: 25px 23px 24px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.metric:last-child { border-right: 0; }
.metric.featured { background: #f0f3fa; color: var(--ink); border-color: var(--line); }
.metric-top { font-size: 11px; gap: 10px; align-items: flex-start; min-height: 34px; color: #5e6b7e; }
.metric.featured .metric-top, .metric.featured .metric-caption { color: #5e6b7e; }
.metric-icon, .metric.featured .metric-icon { width: 20px; height: 20px; background: transparent; color: #7d8da7; border-radius: 0; }
.metric-icon .ui-icon { width: 17px; height: 17px; }
.metric-value { font-size: clamp(24px, 2.3vw, 34px); font-weight: 500; letter-spacing: -1.2px; margin-top: 9px; line-height: 1.3; overflow-wrap: anywhere; }
.metric.featured .metric-value { color: #304f9f; }
.metric-caption { font-size: 10px; margin-top: 14px; line-height: 1.6; }
.two-column { gap: 22px; margin-top: 24px; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); }
.panel { border-radius: 8px; margin-bottom: 22px; box-shadow: 0 2px 3px #1b304503; }
.panel-head { padding: 22px 24px 18px; align-items: flex-start; }
.panel h2 { font-size: 14px; letter-spacing: -.2px; font-weight: 600; }
.panel-subtitle { font-size: 11px; margin-top: 7px; line-height: 1.6; }
.panel-content { padding: 0 24px 21px; }
.financial-row { font-size: 12px; padding: 15px 0; border-bottom-color: #edf0f3; align-items: baseline; }
.financial-row strong { font-weight: 600; white-space: nowrap; }
.financial-row.total { color: var(--ink); border-top: 1px solid #ccd4df; border-bottom: 0; margin-top: -1px; padding-top: 17px; font-weight: 600; }
.financial-row.total strong { font-size: 16px; color: #304f9f; }
.badge { background: #edf4f0; color: #38715b; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: .55px; padding: 5px 7px; }
.good { color: var(--success); }
.info-box { background: #f7f8fa; border-radius: 5px; border-left: 2px solid #bdc9dc; padding: 12px 14px; margin-top: 15px; }
.info-box .good { color: #485a76; }
.info-box p { font-size: 10px; line-height: 1.7; }
.notice { background: #f8f6f0; border: 1px solid #e8e2d4; color: #746649; border-radius: 5px; font-size: 11px; }
th { background: #f8f9fb; font-size: 10px; font-weight: 600; color: #6b7688; padding: 12px 24px; }
td { padding: 18px 24px; border-bottom-color: #edf0f3; font-size: 12px; }
tbody tr:hover { background: #fafbfd; }
td strong { font-weight: 600; }
.subtext { margin-top: 5px; font-size: 11px; }
.status { font-size: 10px; font-weight: 500; border-radius: 4px; padding: 4px 7px; }
.status.paid { background: #edf5f0; color: #317053; }
.status.partial { background: #faf3e6; color: #886524; }
.status.open { background: #f8eeeb; color: #975444; }
.status.draft, .status.corrected { background: #edf0f5; color: #617086; }
.empty { padding: 46px 24px; background: #fcfcfd; font-size: 12px; }
.code { font-size: 11px; color: #69778a; }
footer { font-size: 10px; line-height: 1.7; margin-top: 32px; padding-top: 18px; }
footer span { white-space: nowrap; font-weight: 600; letter-spacing: .3px; }
/* A composed sign-in page, with a restrained typographic brand panel. */
.login-screen { grid-template-columns: minmax(300px, 1fr) minmax(440px, 1fr); padding: 0; background: #fff; }
.login-story { align-self: stretch; width: 100%; background: var(--nav); color: #fff; padding: clamp(35px, 6vw, 90px); display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }
.login-story .brand { padding: 0; }
.login-story-copy { padding: 70px 0; max-width: 450px; }
.login-story .eyebrow { color: #a7b6ce; font-size: 10px; }
.login-story h2 { font: 400 clamp(38px, 4.1vw, 62px)/1.14 Georgia, serif; letter-spacing: -1.8px; margin: 26px 0; }
.login-story-copy > p:last-child { color: #aebbd0; max-width: 350px; font-size: 14px; line-height: 1.9; }
.login-story-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid #39465a; color: #93a2b9; font-size: 10px; letter-spacing: .6px; }
.login-card { width: 438px; padding: 45px 35px; border: 0; border-radius: 0; box-shadow: none; }
.login-card > .brand-mark { color: #365ac2; width: 40px; height: 40px; margin-bottom: 16px; }
.login-card h1 { font-size: 27px; font-weight: 600; line-height: 1.35; margin-bottom: 15px; }
.login-card > p { font-size: 12px; line-height: 1.8; }
.login-card .notice { margin: 24px 0; }
.login-card form { margin-top: 27px; }
.login-card button { padding: 12px 15px; }
.login-card label, dialog label { font-size: 11px; font-weight: 600; margin: 17px 0 7px; }
.login-card input, dialog input, dialog select { border-color: #d8dee8; border-radius: 5px; padding: 11px 12px; font-size: 13px; }
.login-card #login-note { font-size: 10px; margin-top: 21px; }
/* Shared form, assistant and document-review surfaces. */
dialog { padding: 29px; border-radius: 9px; border-color: #d8dee8; box-shadow: 0 24px 90px #101c3330; max-height: calc(100dvh - 32px); overflow-y: auto; }
dialog::backdrop { background: #15213675; backdrop-filter: blur(2px); }
.modal-head { margin-bottom: 20px; }
.modal-head h2 { font-size: 21px; font-weight: 600; letter-spacing: -.6px; }
.modal-actions { border-top: 1px solid var(--line); padding-top: 20px; }
.icon-button { width: 32px; height: 32px; border-radius: 4px; line-height: 1; }
.icon-button:hover { background: var(--soft); }
.toast { background: var(--nav); border-radius: 6px; box-shadow: 0 6px 24px #14213720; }
.assistant-intro { margin: 4px 0 26px; }
.assistant-mark { width: 44px; height: 44px; border-radius: 9px; background: #eaf0fc; border: 1px solid #d5dff3; color: #4d66a0; font-size: 29px; }
.assistant-intro h2 { font-size: 22px; font-weight: 600; letter-spacing: -.65px; }
.assistant-intro p { font-size: 12px; line-height: 1.8; }
.inbox-layout { gap: 22px; }
.assistant-bubble { border-radius: 7px; font-size: 12px; padding: 18px 21px; }
.user-bubble { background: #edf1fa; border: 1px solid #e0e6f1; border-radius: 7px; font-size: 12px; }
.chat-workspace { border-color: var(--line); border-radius: 8px; padding: 24px; }
.chat-welcome { padding: 22px 0 25px; }
.chat-welcome h3 { font-size: 22px; font-weight: 500; letter-spacing: -.6px; }
.chat-welcome p { color: var(--muted); font-size: 12px; }
.chat-suggestions { gap: 9px; }
.chat-suggestions .secondary { font-size: 11px; padding: 10px 12px; background: #fbfcfe; }
.chat-composer textarea { border-color: #d8dee8; border-radius: 6px; background: #fcfcfd; color: var(--ink); font-size: 13px; min-height: 82px; }
.chat-composer textarea:focus { outline-color: #8099e6; }
.chat-metrics div { border-color: var(--line); border-radius: 6px; }
.chat-metrics dt { color: var(--muted); }
.chat-metrics dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.chat-proposal fieldset { border-color: #d8dee8; border-radius: 6px; }
.invoice-drop { border: 1px dashed #bbc7d9; border-radius: 8px; background: #fafbfd; padding: 28px 22px; }
.invoice-drop.dragging { background: #edf2ff; border-color: #365ac2; }
.invoice-drop h3 { font-size: 16px; font-weight: 600; }
.upload-symbol { color: #7387a7; }
.source-preview, .review-form { border-radius: 8px; border-color: var(--line); }
.review-form input:not([type=checkbox]), .review-form select { border-color: #d8dee8; }
.source-item { border-radius: 5px; }
.progress-number { background: #eef1f7; color: #657590; }
.progress-row { padding: 15px 0; margin-bottom: 9px; }
/* Keep all navigation available at narrow widths and at browser zoom. */
@media (max-width: 1200px) and (min-width: 701px) {
  .sidebar { width: 214px; padding-left: 12px; padding-right: 12px; }
  .workspace { margin-left: 214px; }
  main { padding: 30px 26px 24px; }
  .topbar { padding: 0 26px; }
  .demo-strip { padding: 9px 26px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .two-column { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-card { width: 450px; max-width: 100%; padding: 36px 30px; }
}
@media (max-width: 700px) {
  .sidebar { position: static; width: 100%; padding: 17px 14px 8px; overflow: visible; }
  .brand { font-size: 23px; padding: 0 4px; }
  .brand-mark { height: 28px; width: 28px; font-size: 23px; }
  .sidebar > .eyebrow, .sidebar-bottom { display: none; }
  .sidebar nav { gap: 5px; margin-top: 18px; padding-bottom: 5px; }
  .nav-button { min-height: 40px; padding: 10px 12px; font-size: 11px; margin-bottom: 0; flex-shrink: 0; }
  .nav-button span { display: none; }
  .help-link { margin-top: 0; padding-top: 10px; border-top: 0; border-radius: 6px; }
  .workspace { margin-left: 0; }
  .topbar { height: 64px; padding: 0 16px; gap: 8px; }
  .company-control { gap: 8px; }
  .company-control select { max-width: 170px; font-size: 11px; }
  .company-avatar { width: 28px; height: 28px; flex-shrink: 0; }
  .top-actions .secondary { margin-left: 0; font-size: 10px; padding: 7px; }
  .demo-strip { padding: 9px 16px; gap: 9px; font-size: 9px; }
  main { padding: 26px 16px 20px; }
  .page-heading { gap: 12px; flex-wrap: wrap; }
  .page-heading h1 { font-size: 25px; }
  .page-heading p:not(.eyebrow) { font-size: 11px; }
  .page-heading .primary { font-size: 11px; padding: 10px 12px; }
  .filters { flex-wrap: wrap; gap: 10px; padding-top: 17px; margin: 22px 0 18px; }
  .filters label { gap: 5px; font-size: 10px; }
  .filters input { max-width: 125px; padding: 7px; }
  .filters > span { width: 100%; font-size: 9px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 18px 15px; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metric-top { font-size: 10px; min-height: 32px; }
  .metric-icon { display: none; }
  .metric-value { font-size: 24px; }
  .metric-caption { font-size: 9px; margin-top: 8px; }
  .two-column { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; }
  .panel-head { padding: 18px; flex-wrap: wrap; }
  .panel-content { padding: 0 18px 18px; }
  .panel h2 { font-size: 13px; }
  .financial-row { font-size: 11px; }
  .financial-row.total strong { font-size: 14px; }
  .chat-workspace { padding: 18px; }
  .chat-toolbar { flex-wrap: wrap; }
  .chat-welcome h3 { font-size: 20px; }
  .chat-suggestions { flex-direction: column; align-items: stretch; }
  .chat-suggestions .secondary { text-align: left; }
  .assistant-intro h2 { font-size: 20px; }
  .assistant-intro p { font-size: 11px; }
  .inbox-history .panel-head { padding: 16px; }
  dialog { padding: 21px; }
  .modal-head h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
#content > .notice { margin-bottom: 20px; }
@media (max-width: 700px) {
  .company-control { flex: 1; }
  .company-control select { min-width: 0; width: 100%; }
  .top-actions { flex-shrink: 0; }
}

.tax-fields{border:1px solid #dce2e9;border-radius:10px;padding:16px;margin:20px 0}.tax-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6;margin:16px 0}.tax-check input{width:auto;flex-shrink:0;margin-top:5px}.tax-fields legend{padding:0 8px;font-weight:600}