/* the Accounting and tax app's own, over the design kit (css/ds.css: chassis 1.118.0, 3Sry's
   D-228). Layout, type, the shell, the templates and the states are the
   kit's; this keeps only what is Accounting and tax's: its catalogue green as its one
   primary (the owner's answer to the chassis's Q-1118-1), the VAT boxes, the
   profit and loss, the Inbox's cards and the dialog. Every colour is a kit
   token, and every side is logical, so the page mirrors right to left.

   The catalogue green (#0b3d2e) carries white words at 12:1 in both themes,
   but on the kit's dark surface a button of it is 1.4:1, so it vanishes. In
   dark mode the closest lighter green that keeps white words at 4.5:1 and
   stands out from the surface (3.3:1) is used, #167a5b, with links in a
   light green that reads on the dark ground. */
:root {
  --primary: #0b3d2e; --primary-hover: #082e23; --on-primary: #ffffff;
  --primary-tint: #eaf4ef; --primary-line: #b9d8c9; --link: #0b5c45;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #167a5b; --primary-hover: #136b50; --on-primary: #ffffff;
    --primary-tint: #13302a; --primary-line: #2a5f4d; --link: #86dcb5;
  }
}
:root[data-theme="light"] {
  --primary: #0b3d2e; --primary-hover: #082e23; --on-primary: #ffffff;
  --primary-tint: #eaf4ef; --primary-line: #b9d8c9; --link: #0b5c45;
}
:root[data-theme="dark"] {
  --primary: #167a5b; --primary-hover: #136b50; --on-primary: #ffffff;
  --primary-tint: #13302a; --primary-line: #2a5f4d; --link: #86dcb5;
}

h1, h2, h3 { margin-block: 0 0.4em; line-height: 1.2; }
h2 { font-size: var(--text-lg); }
p { margin-block: 0 0.6em; }
.muted { color: var(--ink-2); font-weight: 400; }
.link { background: none; border: none; border-radius: 0; color: var(--link); text-decoration: underline; padding: 0; font: inherit; font-weight: 400; }

/* The mark beside the name in the header. */
.ds-brand .logo {
  inline-size: 32px; block-size: 32px; border-radius: var(--radius-sm); background: var(--primary);
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 700; color: var(--on-primary);
}
.company-chip { font-size: var(--text-sm); color: var(--ink-2); text-align: end; }

.view { display: none; }
.view.active { display: block; }
#licence-home[hidden] { display: none; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding-block: 1.1rem; padding-inline: 1.2rem; margin-block-end: 1rem; box-shadow: var(--shadow);
}
.panel.note { background: var(--attention-tint); border-color: color-mix(in srgb, var(--attention) 35%, var(--line)); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* The dashboard's figures are the kit's tiles (T2): only their colours are Accounting and tax's. */
.cards { margin-block-end: 1rem; }
.t2-tile.pay .t2-value { color: var(--risk); }
.t2-tile.reclaim .t2-value { color: var(--good); }
/* Rows and totals that still need attention before filing: the tile goes where the answer is. */
.t2-tile.warn { background: var(--attention-tint); cursor: pointer; }
.t2-tile.warn .t2-value { color: var(--attention); }
select.warn { border-color: var(--attention); background: var(--attention-tint); color: var(--attention); }
/* A question the owner has to answer before there is a figure. */
.notice.warn { border: 1px solid color-mix(in srgb, var(--attention) 35%, var(--line)); background: var(--attention-tint); color: var(--ink); border-radius: var(--radius-sm); padding-block: 0.2rem; padding-inline: 0.8rem; margin-block: 0.6rem; }
.alarm { color: var(--risk); }

.field { display: flex; flex-direction: column; gap: 0.25rem; margin-block-end: 0.7rem; }
.field > span { font-size: var(--text-sm); color: var(--ink-2); }
.field input, .field select { inline-size: 100%; }
.check { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-md); }
.check input { inline-size: auto; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.import-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.mapping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8rem; }

.row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.row-actions.full { grid-column: 1 / -1; margin-block-start: 0.4rem; }
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-block: 0.6rem; }
.filters input[type="search"] { max-inline-size: 260px; }
.filters select { inline-size: auto; max-inline-size: 100%; }

/* A danger is a button of the kit's, in the risk colour. */
button.danger { background: var(--risk-tint); color: var(--risk); border-color: color-mix(in srgb, var(--risk) 35%, var(--line)); }
.btn-file { border-radius: 999px; padding-block: 8px; padding-inline: 16px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
.btn-file:hover { background: var(--surface-2); }

.table-wrap { overflow-x: auto; }
/* A form of fields on one row wraps on a narrow screen, never wider than it. */
.view form.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.view form.row > input, .view form.row > select { min-inline-size: 0; max-inline-size: 100%; }
table { border-collapse: collapse; inline-size: 100%; font-size: var(--text-md); }
th, td { text-align: start; padding-block: 0.5rem; padding-inline: 0.6rem; border-block-end: 1px solid var(--line); white-space: nowrap; }
th { color: var(--ink-2); font-weight: 650; font-size: var(--text-sm); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
tr:hover td { background: var(--surface-2); }
.pill.in { background: var(--good-tint); color: var(--good); }
.pill.out { background: var(--risk-tint); color: var(--risk); }
.pill.warn { background: var(--attention-tint); color: var(--attention); }
.icon-btn { background: none; border: none; padding-block: 0.2rem; padding-inline: 0.4rem; color: var(--ink-2); font-size: 1rem; }
.icon-btn:hover { color: var(--ink); }
td select, td input { padding-block: 0.3rem; padding-inline: 0.4rem; font-size: var(--text-sm); }

/* VAT boxes */
.vat-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.vat-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 0.6rem; padding-block: 0.6rem; padding-inline: 0.9rem; border-block-end: 1px solid var(--line); }
.vat-row:last-child { border-block-end: none; }
.vat-row .bn { inline-size: 30px; block-size: 30px; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 700; font-size: var(--text-sm); }
.vat-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: end; direction: ltr; unicode-bidi: isolate; }
/* A box's label column shrinks and wraps, so its amount stays on the screen
   (the walk of 2026-10-10, W-3). */
.vat-row > * { min-width: 0; }
.vat-row > span:nth-child(2) { overflow-wrap: anywhere; }
.vat-row.total { background: var(--surface-2); font-weight: 700; }
.vat-row.result { background: var(--primary-tint); font-weight: 700; }

/* P&L */
.pl-line { display: flex; justify-content: space-between; padding-block: 0.35rem; border-block-end: 1px dashed var(--line); }
.pl-line.head { font-weight: 700; border-block-end: 1px solid var(--ink); margin-block-start: 0.5rem; }
.pl-line.sub { padding-inline-start: 1rem; color: var(--ink-2); }
.pl-line .amt { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

.ct-figure { display: flex; justify-content: space-between; align-items: baseline; padding-block: 0.4rem; }
.ct-total { font-size: var(--text-3xl); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

dialog { border: none; border-radius: var(--radius); padding: 1.2rem; max-inline-size: 460px; inline-size: 92%; box-shadow: var(--shadow); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgba(10, 16, 32, 0.45); }

/* A message at the foot of the screen, as the kit's toast draws one. */
.toast {
  position: fixed; inset-inline: 0; margin-inline: auto; inline-size: fit-content; max-inline-size: calc(100vw - 32px); bottom: 24px;
  background: var(--ink); color: var(--bg); padding-block: 10px; padding-inline: 18px; border-radius: 16px;
  box-shadow: var(--shadow); z-index: 70; font-weight: 600; font-size: var(--text-md);
}

/* Import, as the kit's workflow (T4): the panels are the step now. */
.t4-now .panel { border: 0; box-shadow: none; padding: 0; margin-block-end: 1.2rem; }
/* Settings, as the kit's settings page (T6): its pages beside it. */
.t6-main .panel { scroll-margin-block-start: calc(var(--header) + 12px); }

@media (max-width: 560px) {
  .two { grid-template-columns: 1fr; }
  .company-chip { display: none; }
  /* The provisional link (the chassis's, nowrap) wraps inside a card on a
     phone rather than pushing the page wider than the screen. */
  .cards .pa-prov { white-space: normal; }
  /* A VAT box on a phone: the number and its label on one line, the amount
     on its own line below, at the end and whole (W-3). */
  .vat-row { grid-template-columns: 34px 1fr; padding-block: 0.6rem; padding-inline: 0.7rem; }
  .vat-row .amt { grid-column: 2; font-size: 1.05rem; }
  .vat-row .pa-prov { white-space: normal; }
}

/* Transactions at a desk (W-3): the category and VAT pickers as wide as
   their words, a long description wrapping, and nothing clipped. */
#txTable th, #txTable td { padding-block: 0.45rem; padding-inline: 0.35rem; }
#txTable select { width: auto; min-inline-size: 7rem; max-inline-size: 11rem; }
#txTable td.desc { white-space: normal; min-inline-size: 10rem; max-inline-size: 18rem; }
#txTable td:last-child { white-space: nowrap; }
/* A form's line across every column. */
.form-grid .full { grid-column: 1 / -1; }
/* Source markers set apart, so 1, 2 and 3 don't read as 123 (W-24). */
.pa-fn + .pa-fn::before { content: ","; }

/* Review queue */
.inbox-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding-block: 0.8rem; padding-inline: 1rem; margin-block-end: 0.8rem; background: var(--surface);
}
.inbox-item.unsure { border-color: color-mix(in srgb, var(--attention) 35%, var(--line)); background: var(--attention-tint); }
.inbox-item h3 { font-size: 1rem; margin: 0; }
.inbox-item .panel-head { align-items: flex-start; }
p.warn { color: var(--attention); border: 1px solid var(--attention); border-radius: 6px; padding-block: 8px; padding-inline: 10px; }