/* VindNord application components: the app shell, forms, tables, badges, alerts, menus and cards that vnbooks
   (and any other VindNord tool) builds on top of base.css and components.css. Semantic tokens only; the one place
   with hex values is the dark block below. Shown live on /dizaina-sistema/ (08 Lietotne). */

/* app tokens: dark - the application follows the system colour scheme, the website stays light */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: var(--pal-night-raised);
    --color-paper: var(--pal-night);
    --color-ink: var(--pal-on-night);
    --color-muted: color-mix(in srgb, var(--pal-on-night) 72%, var(--pal-night));
    --color-line: color-mix(in srgb, var(--pal-on-night) 18%, var(--pal-night));
    --color-accent: var(--pal-night-accent);
    --color-accent-hover: color-mix(in srgb, var(--pal-night-accent) 85%, #fff);
    --color-accent-soft: color-mix(in srgb, var(--pal-night-accent) 14%, var(--pal-night));
    --color-on-accent: var(--pal-night);
    --color-focus: var(--pal-night-accent);
    --color-ok: #7fd6a0; --color-warn: #f0b46a; --color-error: #ff8fa3;
    --color-ok-soft: color-mix(in srgb, var(--color-ok) 18%, var(--pal-night));
    --color-warn-soft: color-mix(in srgb, var(--color-warn) 18%, var(--pal-night));
    --color-error-soft: color-mix(in srgb, var(--color-error) 18%, var(--pal-night));
    --color-control: color-mix(in srgb, var(--color-ink) 45%, var(--color-surface));
    --shadow-menu: 0 16px 30px -12px rgba(0, 0, 0, .7);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ecf3f8' stroke-width='1.5'/%3E%3C/svg%3E");
  }
}
/* end tokens */

/* App shell: paper page, sticky white bar, one-line footer */
.appbar { position: sticky; top: 0; z-index: 20; }
.appbar .mainbar__in { gap: var(--space-5); }
.appbar__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.appbar__brand .mainbar__title { white-space: nowrap; }
.mainbar__nav a { display: inline-block; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.mainbar__nav a[aria-current="page"] { color: var(--color-accent); border-bottom-color: currentColor; }
.appbar__tools { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.mainbar__menu ul ul { position: static; padding: 0 0 var(--space-2) var(--space-4); border: 0; box-shadow: none; background: none; }
.mainbar__menu ul ul a { font-weight: 400; font-size: var(--text-sm); }
.mainbar__menu a[aria-current="page"] { color: var(--color-accent); }
.mainbar__menu summary .icon { width: 24px; height: 24px; }
@media (max-width: 980px) {
  .mainbar__menu ul { max-height: calc(100vh - 80px); overflow-y: auto; }
}
@media (max-width: 600px) { .appbar__brand .mainbar__title { display: none; } }
.subnav { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.subnav ul { display: flex; gap: var(--space-5); list-style: none; padding: 0; overflow-x: auto; scrollbar-width: none; font-size: var(--text-sm); font-weight: 500; }
.subnav li { white-space: nowrap; }
.subnav a { display: inline-block; padding: var(--space-3) 0; text-decoration: none; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--color-accent); }
.subnav a[aria-current="page"] { color: var(--color-accent); border-bottom-color: currentColor; }
.app-main { width: var(--wrap); margin-inline: auto; padding-block: var(--space-6) var(--space-8); }
.app-main:focus { outline: none; }
.app-main > * + * { margin-top: var(--space-5); }
.app-main h2 { font-size: var(--text-h3); }
.app-main h3 { font-size: var(--text-h4); }
.app-main a { color: var(--color-accent); }
.app-main a:hover { color: var(--color-accent-hover); }
.app-main ul:not([class]) { padding-left: var(--space-5); }
.app-footer { width: var(--wrap); margin-inline: auto; padding-block: var(--space-5) var(--space-6); border-top: 1px solid var(--color-line); font-size: var(--text-xs); color: var(--color-muted); }

/* Menus: <details class="menu"> with a button-like summary and a floating panel */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.menu[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.menu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; list-style: none; margin: 0; padding: var(--space-2) 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-m); box-shadow: var(--shadow-menu); }
.menu__panel a, .menu__panel button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px var(--space-4); border: 0; background: none; color: var(--color-ink); font: 500 var(--text-sm)/1.3 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.menu__panel a:hover, .menu__panel button:hover { background: var(--color-accent-soft); color: var(--color-ink); }
.menu__panel li + li.menu__sep { border-top: 1px solid var(--color-line); margin-top: var(--space-2); padding-top: var(--space-2); }
.menu__panel form { margin: 0; }

/* Page header: title, meta, actions on the right */
.page-head { display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; gap: var(--space-3) var(--space-5); }  /* same height with or without 44px buttons, so the title never jumps */
.page-head h1 { font-size: var(--text-h2); }
.page-head__meta { font-size: var(--text-sm); color: var(--color-muted); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-left: auto; }
.app-main > h1 { font-size: var(--text-h2); }

/* Panels and grids */
.panel { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-l); padding: var(--card-pad); }
.panel > h2 { font-size: var(--text-h4); line-height: 1.3; margin-bottom: var(--space-4); }
.panel > * + * { margin-top: var(--space-4); }
.panel > h2 + * { margin-top: 0; }
.panels { display: flex; flex-direction: column; gap: var(--space-5); }
.grid-2, .grid-3 { display: grid; gap: var(--space-5); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.grid-3 { --cols: 3; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Forms: labelled controls, 44px targets, borders at 3:1 */
.app-main label { display: block; font-weight: 600; font-size: var(--text-sm); }
.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.app-main select, .app-main textarea {
  min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--color-control); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-ink); font: 400 var(--text-base)/1.4 var(--font-body);
}
.app-main textarea { min-height: 96px; }
/* selects drop the native button look (Safari) and get the header menus' chevron (--select-chevron in the tokens block) */
.app-main select:not([multiple]) {
  appearance: none; padding-right: 36px;
  background-image: var(--select-chevron); background-position: right 10px center; background-size: 14px 14px; background-repeat: no-repeat;
}
.app-main input[type="file"] { font: inherit; max-width: 100%; }
.app-main input[type="checkbox"], .app-main input[type="radio"] { width: 18px; height: 18px; margin: 3px; accent-color: var(--color-accent); vertical-align: middle; }
.app-main label:has(> input[type="checkbox"]), .app-main label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px; font-weight: 500; }
.app-main form p + p, .app-main form p + div, .app-main form div + p { margin-top: var(--space-4); }
.app-main form p > label, .field > label { margin-bottom: var(--space-1); }
.field > input:not([type="checkbox"]):not([type="radio"]), .field > select, .field > textarea { width: 100%; }
.field > .caption, .helptext { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-muted); }
.errorlist { list-style: none; padding: 0; margin: var(--space-1) 0 0; color: var(--color-error); font-size: var(--text-sm); font-weight: 500; }
.field--error input, .field--error select, .field--error textarea, [aria-invalid="true"] { border-color: var(--color-error) !important; }
.form-grid { display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.form-grid + .form-actions, .field + .form-actions { margin-top: var(--space-5); }

/* Filters row and wide form fields */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.filters .field { min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.lines select, .lines input { width: 100%; min-width: 0; }
.lines { min-width: 760px; }
.lines td { padding: 8px 10px; }
.lines caption { position: sticky; left: 0; text-align: left; }
.report { overflow-x: auto; }
.report:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.report > * + * { margin-top: var(--space-4); }
.report > table { border: 1px solid var(--color-line); border-radius: var(--radius-m); }
.report > h2 { font-size: var(--text-h4); }
.report > p { font-size: var(--text-sm); color: var(--color-muted); }
.report-card { display: block; height: 100%; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-line); }
.report-card:hover { border-color: var(--color-accent); }
.report-card h3 { color: var(--color-accent); }
.report-card p { font-size: var(--text-sm); color: var(--color-muted); }

/* Buttons: the website .btn set, plus danger; bare buttons in the page (specificity 0,0,1 so menus win) */
button.btn { font-family: var(--font-body); }
.btn--secondary { border-color: var(--color-ink); color: var(--color-ink); }
.btn--danger { background: var(--color-error); border-color: var(--color-error); color: var(--color-surface); }
.btn--danger:hover { background: color-mix(in srgb, var(--color-error) 85%, var(--color-ink)); }
.btn--block { width: 100%; }
.app-main a.btn--primary, .app-main a.btn--primary:hover { color: var(--color-on-accent); }
.app-main a.btn--secondary, .app-main a.btn--secondary:hover { color: var(--color-ink); }
.app-main a.btn--danger, .app-main a.btn--danger:hover { color: var(--color-surface); }
:where(.app-main) button:where(:not([class])) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1.5px solid var(--color-ink); border-radius: var(--radius-s); background: transparent; color: var(--color-ink); font: 600 var(--text-sm)/1.2 var(--font-body); cursor: pointer; }
:where(.app-main) button:where(:not([class])):hover { background: var(--color-paper); }

/* Tables: white rows on paper, muted header, right-aligned tabular numbers */
.table, .app-main table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); }
.table th, .table td, .app-main th, .app-main td { padding: 12px 14px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.table thead th, .app-main thead th { background: var(--color-paper); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.table tbody tr:hover, .app-main tbody tr:hover { background: var(--color-accent-soft); }
.table tfoot th, .table tfoot td, .app-main tfoot th, .app-main tfoot td { border-top: 2px solid var(--color-ink); border-bottom: 0; background: var(--color-paper); font-weight: 700; }
.table tfoot th, .app-main tfoot th { color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.app-main caption { caption-side: top; padding: var(--space-3) 14px var(--space-2); text-align: left; font-size: var(--text-xs); color: var(--color-muted); }
.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-muted); }
/* Entry links under a document: 24px targets (WCAG 2.5.8) */
.entry-links { margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.entry-links li { display: inline; }
.entry-links a { display: inline-block; min-width: 24px; min-height: 24px; padding-block: var(--space-1); margin-right: var(--space-2); line-height: 16px; }
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-m); background: var(--color-surface); }
.table-wrap table { border: 0; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.table-wrap:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Badges: strong text on its soft colour */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-s); font: 600 var(--text-xs)/1.5 var(--font-body); white-space: nowrap; background: var(--color-paper); color: var(--color-muted); }
.badge--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.badge--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.badge--error { background: var(--color-error-soft); color: var(--color-error); }
.badge--info { background: var(--color-accent-soft); color: var(--color-accent); }

/* Alerts: left border + soft background */
.alert { padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-accent); border-radius: var(--radius-s); background: var(--color-accent-soft); color: var(--color-ink); font-size: var(--text-sm); }
.alert--ok { border-color: var(--color-ok); background: var(--color-ok-soft); }
.alert--warn { border-color: var(--color-warn); background: var(--color-warn-soft); }
.alert--error { border-color: var(--color-error); background: var(--color-error-soft); }
.alert > strong:first-child { display: block; }
.alert ul { margin-top: var(--space-1); padding-left: var(--space-5); }
.empty { padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-muted); }
.empty > * + * { margin-top: var(--space-4); }

/* Item list: label (often a link) on the left, value or badge on the right */
.item-list { list-style: none; padding: 0; font-size: var(--text-sm); }
.item-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.item-list > li:first-child { padding-top: 0; }
.item-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.item-list__value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-list__note { color: var(--color-muted); }
.month-pick { display: flex; align-items: center; gap: var(--space-2); }
.month-pick label { font-weight: 500; color: var(--color-muted); }

/* Stat cards */
.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-l); padding: var(--space-5); }
.stat__label { font-size: var(--text-sm); color: var(--color-muted); }
.stat__value { margin-top: var(--space-2); font: 600 var(--text-h3)/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.stat__unit { font: 500 var(--text-sm) var(--font-body); color: var(--color-muted); }
.stat__sub { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-muted); }

/* Chart (vnbooks core/_chart.html): no viewBox, x in percent, y in px, so labels keep their size at any width */
.chart svg { display: block; width: 100%; height: 200px; overflow: visible; }
.chart__income { fill: var(--color-accent); }
.chart__expense { fill: var(--color-muted); }
.chart__grid { stroke: var(--color-line); stroke-width: 1; stroke-dasharray: 4 4; }
.chart__axis { stroke: var(--color-control); stroke-width: 1; }
.chart__label { fill: var(--color-muted); font: 400 var(--text-xs) var(--font-body); }
@media (max-width: 560px) { .chart__label--even { display: none; } }
.chart__legend { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; font-size: var(--text-xs); color: var(--color-muted); }
.chart__table > summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); color: var(--color-accent); }
.chart__table > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.chart__table[open] > summary { margin-bottom: var(--space-3); }
.chart__legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--key); }

/* Login: night panel with the big D, form panel on the right */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.login__brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-4); padding: var(--block-pad); background: var(--color-night); color: var(--color-on-night); }
.login__brand > :not(.bigd) { position: relative; }
.login__brand { border-right: 1px solid var(--color-night-line); }
.login__brand h2 { font-size: var(--text-h2); margin-top: var(--space-5); }
.login__brand .bigd { max-width: none; right: -18%; bottom: -12%; height: 62%; }
.login__main { display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.login__main .panel { width: min(440px, 100%); }
.login__main .panel h1 { font-size: var(--text-h2); }
.login__main form > * + * { margin-top: var(--space-4); }
.login__main label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.login__main input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-control); border-radius: var(--radius-s); background: var(--color-surface); color: var(--color-ink); font: 400 var(--text-base)/1.4 var(--font-body); }
@media (max-width: 980px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login__brand { flex-direction: row; align-items: center; justify-content: flex-start; padding: var(--space-5) var(--space-4); border-bottom: 1px solid var(--color-night-line); }
  .login__brand h2 { margin: 0; font-size: var(--text-h4); }
  .login__brand p { display: none; }
  .login__brand .bigd { right: -40px; bottom: auto; top: -30%; height: 160%; }
  .login__main { place-items: start center; }
}

/* Utilities and old class names */
.hash { overflow-wrap: anywhere; }
.warn { color: var(--color-warn); }
.error { color: var(--color-error); }
label.required::after { content: " *"; }
#errors:focus { outline: 3px solid var(--color-error); outline-offset: 2px; }
@media print {
  .appbar, .subnav, .app-footer, .page-head__actions, .skip { display: none !important; }
  body { background: none; }
}

/* Totals block (invoice form): right-aligned label/value pairs */
.panel--totals { margin-left: auto; width: min(100%, 360px); }
.totals { font-size: var(--text-sm); }
.totals > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
.totals dd { font-variant-numeric: tabular-nums; }
.totals__sum { font-weight: 700; border-bottom: 0 !important; }
.totals .num { text-align: right !important; }

/* Bank: signed bank amounts (the + / - sign is the cue, colour only supports it) */
.amount--in { color: var(--color-ok); font-weight: 600; }
.lines--wide { min-width: 1280px; }
.app-main input[type="file"]::file-selector-button { min-height: 36px; margin-right: var(--space-3); padding: 6px 12px; border: 1.5px solid var(--color-ink); border-radius: var(--radius-s); background: transparent; color: var(--color-ink); font: 600 var(--text-xs)/1.2 var(--font-body); cursor: pointer; }
.item-list__value--break { white-space: normal; overflow-wrap: anywhere; text-align: right; }

/* VAT month cards */
.vat-cards { --cols: 3; }
@media (max-width: 1000px) { .vat-cards { --cols: 2; } }
@media (max-width: 760px) { .vat-cards { --cols: 1; } }
.vat-card { --card-bg: var(--color-surface); border: 1px solid var(--color-line); display: flex; flex-direction: column; gap: var(--space-2); }
.vat-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.vat-card__head h2 { font-size: var(--text-h4); }
.vat-card__line { font-size: var(--text-sm); color: var(--color-muted); display: flex; justify-content: space-between; gap: var(--space-3); }
.vat-card__line strong { color: var(--color-ink); }
.vat-card .btn-row { margin-top: auto; padding-top: var(--space-3); }
.app-main .vat-sub { font-size: var(--text-h5); margin-bottom: var(--space-2); }