/* Pinocchi books, in the shop's colours (from the business card): the logo's plum for the brand and what
   comes in, its magenta for what goes out, lavender and the card's pastel yellow for quiet fills.
   Light, airy surfaces with soft shadows. One family (IBM Plex Sans Arabic, bundled) for both languages. */
@font-face { font-family: "Plex Arabic"; src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --canvas: #F8F4FA;         /* page background: lavender-white */
  --paper: #FFFFFF;
  --sunk: #F6F0F8;           /* table heads, quiet fills */
  --ink: #2A1830;            /* plum-black text */
  --ink-2: #574560;
  --muted: #7B6983;
  --line: #E8DCEC;
  --line-2: #F2EAF4;
  --brand: #7A2E80;          /* logo plum: primary actions, money in */
  --brand-deep: #5C1D63;
  --brand-wash: #F4E7F5;
  --brand-soft: #C9A0D0;
  --accent: #C8157B;         /* logo magenta: money out, highlights */
  --accent-deep: #A10E62;
  --accent-wash: #FDE8F2;
  --accent-soft: #F2A8CD;
  --amber: #8F6200;          /* the card's pastel yellow, for warnings */
  --amber-wash: #FFF5D3;
  --link: #7A2E80;
  --side: #FFFFFF;           /* light sidebar, so the logo shows in its own colours */
  --side-2: #F4E7F5;
  --side-text: #574560;
  --side-dim: #9A88A1;
  --side-ink: #2A1830;
  --side-line: #EFE5F2;
  --shadow: 0 1px 2px rgba(74, 32, 84, .05), 0 8px 24px -12px rgba(74, 32, 84, .14);
  --radius: 14px;
  --radius-s: 9px;
  --font: "Plex Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  --font-ar: var(--font);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #17101A; --paper: #211826; --sunk: #281D2E; --ink: #F3EAF5; --ink-2: #CEBDD4; --muted: #A493AB;
    --line: #3B2C42; --line-2: #2F2335; --brand: #D9A3E1; --brand-deep: #E9C6EE; --brand-wash: #3A2342;
    --brand-soft: #8F5C98; --accent: #F47CBA; --accent-deep: #F8A7D0; --accent-wash: #47182F; --accent-soft: #A4497C;
    --amber: #F0C66B; --amber-wash: #3A2E12; --link: #E2B6E9; --side: #1D1422; --side-2: #35233C;
    --side-text: #CEBDD4; --side-dim: #8F7F96; --side-ink: #F3EAF5; --side-line: #2F2335;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5); color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.num, .figures dd, input.num, .grid td, .pl-summary td { font-feature-settings: "tnum" 1, "lnum" 1; }
a { color: var(--link); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.85rem; letter-spacing: -.015em; }
h2 { font-size: 1.08rem; }
h3 { font-size: .95rem; color: var(--ink-2); margin-top: 1rem; }
code { font-size: .9em; background: var(--line-2); padding: .1em .35em; border-radius: 3px; }
.muted { color: var(--muted); }
.pre { white-space: pre-line; }
.strong { font-weight: 600; }
.neg, .neg dd, dd.neg, td.neg { color: var(--accent); }
.quiet-link { font-size: .9rem; color: var(--ink-2); }

/* Shell */
.shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); color: var(--side-text); padding: 1.1rem .9rem 1.3rem; position: sticky; top: 0;
  height: 100vh; overflow-y: auto; display: flex; flex-direction: column; font-size: .95rem;
  border-inline-end: 1px solid var(--side-line); scrollbar-width: thin; }
.side-menu { display: flex; flex-direction: column; flex: 1 1 auto; scrollbar-width: thin; }
.menu-toggle { display: none; }
.brand { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-decoration: none;
  padding: .2rem .4rem 1rem; border-bottom: 1px solid var(--side-line); margin-bottom: .4rem; }
.brand-logo { display: block; width: 136px; height: auto; }
.brand small { display: block; font-size: .78rem; font-weight: 500; color: var(--side-dim); }
.side h2 { font-size: .74rem; font-weight: 600; color: var(--side-dim); margin: 1.15rem .7rem .35rem; letter-spacing: .04em;
  text-transform: uppercase; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side li a { display: flex; align-items: center; gap: .65rem; color: var(--side-text); text-decoration: none; padding: .45rem .7rem;
  border-radius: var(--radius-s); position: relative; transition: background-color .15s, color .15s; }
.side li a:hover { background: var(--line-2); color: var(--side-ink); }
.side li a:hover .ico { color: var(--brand); }
.side li a[aria-current] { background: var(--side-2); color: var(--brand); font-weight: 600; }
.side li a[aria-current] .ico { color: var(--brand); opacity: 1; }
/* line icons (templates/_icons.html) */
.ico { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
  stroke-linejoin: round; }
.side li .ico { color: var(--side-dim); opacity: .9; transition: color .15s; }
/* "Hide numbers": app.js turns amounts into *****; until it has, the page stays hidden so no number flashes up */
body.hide-nums:not(.nums-ready) #main { visibility: hidden; }
.nums-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.btn.nums-toggle[aria-pressed=true] { background: var(--amber-wash); border-color: transparent; color: var(--amber); }
.me .nums-toggle[aria-pressed=true], .me .nums-toggle[aria-pressed=true] .ico { color: var(--amber); font-weight: 600; }
.side li a[aria-current]::before { content: ""; position: absolute; inset-block: .5rem; inset-inline-start: -.9rem;
  width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--brand), var(--accent)); }
[dir=rtl] .side li a[aria-current]::before { border-radius: 4px 0 0 4px; }
.me { margin-top: auto; padding: 1rem .3rem 0; border-top: 1px solid var(--side-line); font-size: .9rem; }
.me a { color: var(--side-ink); text-decoration: none; }
.me-card { display: flex; align-items: center; gap: .65rem; padding: .45rem .4rem; border-radius: var(--radius-s); }
.me-card:hover { background: var(--line-2); }
.avatar { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent)); }
.me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.me-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .role { display: block; color: var(--side-dim); font-size: .8rem; }
/* Language, hide numbers, sign out: one tidy list, each with its icon, same height and indent in both directions */
.me-actions { display: flex; flex-direction: column; gap: 1px; padding: .35rem 0 0; }
.me-actions form { margin: 0; }
.me-act { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: .65rem; cursor: pointer;
  padding: .42rem .7rem; border-radius: var(--radius-s); color: var(--side-text); font-size: .9rem; }
.me-act:hover { background: var(--line-2); color: var(--side-ink); }
.me-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.me-act .ico { color: var(--side-dim); }
/* logo-outline.png carries its own thin white outline, so it reads on dark backgrounds without a white box. */
/* The page uses the whole width next to the sidebar (it used to stop at 1280px and leave an empty strip on the
   far side: the left in Arabic, the right in English). Only very wide screens get a cap, centred. */
main#main { padding: clamp(1rem, 2.2vw, 2.4rem) clamp(1rem, 2.6vw, 2.8rem) 4rem; width: 100%; max-width: 1840px;
  margin-inline: auto; min-width: 0; }
main.solo { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }

/* Page header */
header.page { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .45rem 1.5rem; margin-bottom: 1.5rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
header.page h1 { margin: 0; flex: 1 1 auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* The description always takes its own line under the title (with a 72ch cap it used to squeeze in beside the
   buttons on wide screens). */
header.page .sub { flex: 1 0 100%; order: 3; margin: 0; color: var(--muted); max-width: none; text-wrap: pretty; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
header.page .actions { align-items: stretch; }   /* buttons, the currency switch and links: one height */
header.page .actions > .btn, header.page .actions > a.btn { min-height: 2.6rem; }
.actions form { margin: 0; }

/* Surfaces */
.panel { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem; box-shadow: var(--shadow); }
.panel > h2:first-child, .panel-head { padding-bottom: .75rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line-2); }
.panel-head { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; }
.panel-head h2 { margin: 0; flex: 1 1 auto; }
.panel.narrow { max-width: 720px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 1.25rem; align-items: start; }
.cols.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.day-bar { display: block; width: 100%; height: 4px; margin-top: .3rem; }
.nowrap, .grid td bdi[dir=ltr] { white-space: nowrap; }
/* Wide tables scroll inside their panel instead of pushing the whole page sideways. */
.scroll-x, .panel:has(> table) { overflow-x: auto; }   /* a wide table scrolls inside its panel, never the page */
.grid td.name-cell { min-width: 11rem; }   /* product names don't squeeze to one word a line */
.grid.report td { white-space: nowrap; }
.grid.report th, .grid.report td { padding-inline: .55rem; }   /* wide reports: more columns fit before scrolling */
.grid.report td:first-child { white-space: normal; min-width: 7rem; }
.lead { font-size: 1.1rem; margin-top: 0; }

/* Key figures: a ledger strip rather than cards */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 1.25rem;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.figures > div { padding: 1.05rem 1.3rem 1.1rem; border-inline-end: 1px solid var(--line-2); position: relative; }
/* The first figure (the cash box) gets the brand's plum-to-magenta stripe. */
.figures > div:first-child::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
  background: linear-gradient(var(--brand), var(--accent)); }
.figures > div:last-child { border-inline-end: 0; }
.figures dt { color: var(--muted); font-size: .86rem; }
.figures dd { margin: .2rem 0 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.figures dd .unit { font-size: .55em; font-weight: 400; color: var(--muted); }
.figures.small dd { font-size: 1.2rem; }
.figures-note { margin: -.6rem 0 1.25rem; font-size: .86rem; max-width: 72ch; }
.panel .figures { border-color: var(--line-2); background: var(--sunk); box-shadow: none; }
/* US-dollar comparison: its own strip, in the card's pastel yellow so it reads as "the same, in dollars". */
.figures.usd { background: color-mix(in srgb, var(--amber-wash) 70%, var(--paper)); border-color: color-mix(in srgb, var(--amber) 22%, var(--line-2)); }
.figures.usd dd { font-size: 1.35rem; color: var(--ink); }
.figures.usd > div:first-child::before { background: linear-gradient(var(--amber), color-mix(in srgb, var(--amber) 40%, var(--accent))); }
.figures.usd .fx-rate dd { font-size: 1.1rem; }
.figures.usd small { display: block; font-size: .78rem; }
.usd-line { display: block; font-size: .8rem; font-weight: 500; color: var(--amber); line-height: 1.3; }
.year-pick { margin-bottom: .8rem; }
.month-pick { margin-top: -.4rem; }
.month-pick a { font-size: .84rem; }
.usd-cell { color: var(--amber); font-weight: 500; }
.panel .figures > div:first-child::before { display: none; }
.small-figure { font-size: .95rem !important; font-weight: 500 !important; }

/* Tables */
table.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: .55rem .65rem; text-align: start; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.grid thead th { font-size: .83rem; font-weight: 500; color: var(--muted); background: var(--sunk); border-bottom: 1px solid var(--line);
  white-space: nowrap; }
.grid thead th:first-child { border-start-start-radius: var(--radius-s); }
.grid thead th:last-child { border-start-end-radius: var(--radius-s); }
.grid tfoot th, .grid tfoot td { font-weight: 600; border-top: 1px solid var(--line); }
.grid tfoot th, .grid tfoot td { border-bottom: 0; }
.grid tbody tr:hover { background: color-mix(in srgb, var(--brand-wash) 45%, transparent); }
.grid.compact th, .grid.compact td { padding: .35rem .45rem; font-size: .93rem; }
.grid.compact td { white-space: nowrap; }
.grid.compact td:nth-child(2) { white-space: normal; }
.num { text-align: end !important; white-space: nowrap; }
/* Amounts read left-to-right in both languages: (1,250.00) and -3.50 keep their shape in Arabic. */
td.num, th.num, dd, input.num, .figures dd { unicode-bidi: plaintext; }
[dir=rtl] td.num, [dir=rtl] input.num { direction: ltr; text-align: left !important; }
/* The heading of a number column lines up on the same side as its numbers. (A heading holding only the sort
   button has no Arabic letter to take its direction from, so "end" alone put it on the far side.) */
[dir=rtl] th.num { text-align: left !important; }
tr.inactive td { color: var(--muted); }
tr.low td:first-child, tr.late td:first-child { box-shadow: inset 3px 0 var(--amber); }
[dir=rtl] tr.low td:first-child, [dir=rtl] tr.late td:first-child { box-shadow: inset -3px 0 var(--amber); }
tr.warn td { background: var(--amber-wash); }
td.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
td.clip { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report .r-head td { font-weight: 650; padding-top: 1.1rem; border-bottom-color: var(--line); }
.report .r-total td { font-weight: 600; border-top: 1px solid var(--line); }
.report .r-grand td { font-weight: 700; border-top: 1.5px solid var(--ink); border-bottom: 3px double var(--ink); font-size: 1.05rem; }
.report .r-warn td { color: var(--accent-deep); font-weight: 600; }
.report .r-note td { color: var(--muted); font-style: italic; }
.report .r-row td:first-child { padding-inline-start: 1.2rem; }

/* Document line editor */
.lines td { padding: .25rem .3rem; }
.lines select, .lines input { width: 100%; }
.lines input.short { width: 7.5rem; }

/* Forms */
.stack > * + * { margin-top: .9rem; }
/* Form rows are a grid of equal columns: fields line up, and one that wraps to the next line keeps its column's
   width instead of stretching across the whole form. A wide field takes two columns. */
.row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .9rem 1rem;
  align-items: start; margin-bottom: .9rem; }
.row > .field.wide { grid-column: span 2; }
@media (max-width: 600px) { .row > .field.wide { grid-column: auto; } }   /* one column on phones: never span two */
.row > .btn, .row > button { align-self: end; justify-self: start; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field > span { font-weight: 550; font-size: .92rem; }
.field small, .check small { color: var(--muted); font-size: .83rem; display: block; }
.field.end { justify-content: flex-end; align-self: flex-end; }
abbr[title] { text-decoration: none; color: var(--accent); }
.field > span { color: var(--ink-2); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: .5rem .65rem; min-height: 2.45rem; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink-2) 40%, var(--line)); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: 3px solid var(--brand-wash); }
input[type=file] { padding: .35rem .5rem; background: var(--sunk); }
input.num { text-align: right; }
textarea { resize: vertical; }
.check { display: flex; gap: .55rem; align-items: flex-start; }
.check input { min-height: auto; margin-top: .3rem; }
fieldset.choice { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem .8rem; margin: 0; }
fieldset.choice legend { font-weight: 550; font-size: .92rem; padding: 0 .3rem; }
fieldset.choice label { display: block; padding: .2rem 0; }
form.inline, .report-params { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
form.inline input[name=code] { width: 8rem; letter-spacing: .2em; }
.search { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 480px; }
.search input { flex: 1; min-width: 0; }   /* never wider than the phone */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 500;
  padding: .5rem 1.05rem; min-height: 2.45rem; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s; }
.btn:hover { border-color: var(--brand-soft); color: var(--brand); background: var(--brand-wash); }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--accent)); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { background: linear-gradient(135deg, var(--brand-deep), var(--accent-deep)); border-color: transparent; color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary, .btn.primary:hover { color: #1D1422; } }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.danger { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.btn.danger:hover { background: var(--accent-wash); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.block { width: 100%; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; }
.row-actions form { display: flex; gap: .8rem; flex-wrap: wrap; }

/* Status tags */
.tag { display: inline-block; font-size: .76rem; font-weight: 600; padding: .08rem .45rem; border-radius: 999px;
  vertical-align: middle; white-space: nowrap; border: 1px solid transparent; }
.tag-draft { background: var(--line-2); color: var(--ink-2); }
.tag-open { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.tag-paid { background: var(--brand-wash); color: var(--brand); }
.tag-late { background: var(--amber-wash); color: var(--amber); }
.grid tr.inactive td { color: var(--muted); }
.tag-void {background: transparent; color: var(--muted); border-color: var(--line); text-decoration: line-through; }
.tag-sys { background: transparent; color: var(--muted); border-color: var(--line); }

/* Messages */
.flash { padding: .75rem 1.05rem; border-radius: var(--radius); margin: 0 0 1rem; border: 1px solid; border-inline-start-width: 4px; }
.flash-ok { border-inline-start-color: var(--brand) !important; }
.flash-error { border-inline-start-color: var(--accent) !important; }
.flash-ok { background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.flash-error { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.filters { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .9rem; }
.filters a { padding: .25rem .75rem; border-radius: 999px; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line);
  background: var(--paper); font-size: .9rem; }
.filters a[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; justify-content: flex-end; margin-top: .7rem; }
.pager .pg-num, .pager .pg-step { min-width: 2.2rem; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.pager .pg-step { padding-inline: .8rem; }
.pager a.pg-num:hover, .pager a.pg-step:hover { border-color: var(--brand); }
.pager .pg-num[aria-current] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager .pg-gap { padding: 0 .2rem; color: var(--muted); }
.pages-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0 0 .8rem; }
.pages-bar .pager { margin: 0; margin-inline-start: auto; }
.pg-per label { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--muted); }
.pg-per select { width: auto; padding-block: .25rem; }
@media (max-width: 640px) { .pager .pg-far { display: none; } }   /* phones: current page ±1, first and last */
.danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--line); }

.report-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: .7rem; }
.report-list a { display: block; padding: 1rem 1.15rem; background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--radius); text-decoration: none; color: var(--ink); height: 100%; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s; }
.report-list a:hover { border-color: var(--brand-soft); transform: translateY(-2px); }
.report-list strong { display: block; color: var(--link); font-weight: 600; }
.report-list span { color: var(--muted); font-size: .92rem; }
.steps { padding-inline-start: 1.2rem; } .steps li { margin-bottom: .5rem; }
ul.plain { list-style: none; padding: 0; } ul.plain li { margin-bottom: .35rem; }
code.secret { display: block; font-size: 1.15rem; letter-spacing: .08em; padding: .6rem .8rem; margin: .4rem 0; user-select: all; }
code.wrap { word-break: break-all; display: block; }
.totp-qr { display: block; width: 240px; max-width: 100%; height: auto; margin: .7rem 0; padding: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); }
dl.roles { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; }
dl.roles dt { font-weight: 600; } dl.roles dd { margin: 0; color: var(--ink-2); }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding-block: .7rem; padding-inline: 2rem 0; border-bottom: 1px solid var(--line-2); position: relative; }
.checks li strong { display: block; }
.checks li::before { position: absolute; inset-inline-start: 0; top: .7rem; font-weight: 700; width: 1.4rem; text-align: center; }
.checks li.ok::before { content: "✓"; color: var(--brand); }
.checks li.bad::before { content: "!"; color: var(--accent); }

/* Arabic */
[dir=rtl] body, [dir=rtl] input, [dir=rtl] select, [dir=rtl] textarea, [dir=rtl] button { font-family: var(--font-ar); }
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3, [dir=rtl] .figures dd { letter-spacing: 0; } /* spacing breaks letter joining */
[dir=rtl] body { line-height: 1.7; }
.lang { display: inline-block; margin-top: .4rem; color: var(--side-text) !important; font-size: .9rem; }
.solo-lang { position: fixed; top: 1rem; inset-inline-end: 1rem; }
.solo-lang .lang { color: var(--brand) !important; font-weight: 600; }

/* Assistant */
.chat { display: flex; flex-direction: column; gap: .8rem; max-width: 820px; }
.msg { padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); white-space: pre-wrap; }
.msg.user { background: var(--brand-wash); border-color: transparent; align-self: flex-end; max-width: 85%; }
.msg .who { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.ask { display: flex; gap: .5rem; max-width: 820px; margin-top: 1rem; }
.ask textarea { flex: 1; min-height: 3rem; }
.suggest { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 0; }
.suggest button { font: inherit; font-size: .9rem; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: .25rem .8rem; cursor: pointer; color: var(--ink-2); }
progress.big { width: 100%; height: .6rem; }

/* Sign-in */
body.login { background:
  radial-gradient(60rem 40rem at 110% -10%, color-mix(in srgb, var(--accent-soft) 45%, transparent), transparent 60%),
  radial-gradient(50rem 36rem at -10% 110%, color-mix(in srgb, var(--brand-soft) 45%, transparent), transparent 60%),
  radial-gradient(30rem 24rem at 15% 10%, color-mix(in srgb, var(--amber-wash) 90%, transparent), transparent 70%),
  var(--canvas); }
.login-card { background: var(--paper); width: 100%; max-width: 400px; padding: 2rem 2.2rem 1.8rem; border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(74, 32, 84, .45); border: 1px solid var(--line-2); text-align: center; }
.login-card form { text-align: start; }
.login-logo { display: block; width: 190px; height: auto; margin: 0 auto .4rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login-card form + form { margin-top: .8rem; text-align: center; }
.login-card .field { margin-bottom: .9rem; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  /* Phones: a slim top bar (logo + Menu button) that stays put; the menu opens below it. */
  .side { position: sticky; top: 0; z-index: 30; height: auto; overflow: visible;
    padding: calc(.55rem + env(safe-area-inset-top)) calc(.9rem + env(safe-area-inset-right)) .55rem calc(.9rem + env(safe-area-inset-left)); }
  .side { border-inline-end: 0; border-bottom: 1px solid var(--side-line); box-shadow: 0 6px 18px -14px rgba(74, 32, 84, .5); }
  .side-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .side-top .brand { border: 0; padding: 0; margin: 0; flex-direction: row; }
  .side-top .brand small { display: none; }
  .side-top .brand-logo { width: auto; height: 46px; }
  .js .menu-toggle { display: inline-flex; align-items: center; gap: .45rem; background: var(--brand-wash); color: var(--brand);
    border: 1px solid var(--line); border-radius: 999px; padding: .45rem .95rem; min-height: 2.6rem;
    font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
  .js .side-menu { display: none; }
  .js .side.open .side-menu { display: flex; max-height: calc(100vh - 4.5rem - env(safe-area-inset-top)); overflow-y: auto;
    padding-top: .4rem; overscroll-behavior: contain; margin-top: .55rem; border-top: 1px solid var(--side-line); }
  .side ul { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; }
  .side li a { padding: .6rem .7rem; }
  .side li a[aria-current]::before { display: none; }
  .me { padding-bottom: .6rem; }
  .me-actions { display: grid; grid-template-columns: 1fr 1fr; }   /* two columns, like the menu above */
  main#main { padding: 1rem; }
  .grid { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .side, .actions, .filters, .danger-zone, .report-params, .search { display: none !important; }
  .shell { display: block; } .panel { border: 0; padding: 0; } body { background: #fff; } }

/* Tabs (Al-Ameen: sales / purchases / expenses) */
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-block-end: 1px solid var(--line); margin-block-end: 1rem; padding: 0; list-style: none; }
.tabs a { display: inline-block; padding: .5rem .9rem; text-decoration: none; color: inherit; border: 1px solid transparent; border-block-end: none; border-radius: 6px 6px 0 0; }
.tabs a { color: var(--ink-2); }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { border-color: var(--line); background: var(--paper); font-weight: 600; margin-block-end: -1px; color: var(--ink);
  box-shadow: inset 0 2px 0 var(--brand); }
.tabs .count { opacity: .6; font-size: .85em; margin-inline-start: .3rem; }
tr.parent td { font-weight: 600; }
tr.child td:first-child { padding-inline-start: 1.6rem; }

/* Overview: the year at a glance */
.year-body { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1.5rem 2.2rem; align-items: center; }
.pl-summary { width: 100%; border-collapse: collapse; }
.pl-summary th { text-align: start; font-weight: 400; color: var(--ink-2); padding: .45rem 0; }
.pl-summary td { padding: .45rem 0; font-weight: 500; }
.pl-summary tr.out td { color: var(--accent); }
.pl-summary tr.sub th, .pl-summary tr.sub td { border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.pl-summary tr.grand th, .pl-summary tr.grand td { border-top: 1.5px solid var(--ink); border-bottom: 3px double var(--ink);
  font-weight: 700; font-size: 1.15rem; color: var(--ink); padding: .6rem 0; }
.pl-summary tr.grand.neg td { color: var(--accent); }
[dir=rtl] .pl-summary td.num { text-align: left !important; }
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart text { fill: var(--muted); font: 500 11px var(--font); font-feature-settings: "tnum" 1; }
.chart .bar-sales { fill: var(--brand); }
.chart .bar-cost { fill: var(--accent-soft); }
.chart .bar-exp { fill: var(--accent); }
.chart g:hover rect { opacity: .82; }
.chart figcaption { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); margin-top: .4rem; }
.key::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-inline-end: .4rem;
  vertical-align: -.05rem; }
.key-sales::before { background: var(--brand); }
.key-cost::before { background: var(--accent-soft); }
.key-exp::before { background: var(--accent); }
.key-net::before { background: var(--brand-deep); }
.chart.map svg { width: 100%; height: auto; }
.map-bg { fill: var(--sunk); stroke: var(--line); }
.map-dot { fill: var(--brand); fill-opacity: .7; stroke: var(--paper); stroke-width: 1; }
.map-dot.has-freezer { fill: var(--brand-deep); }
a:hover > .map-dot { fill-opacity: 1; stroke: var(--ink); }
.store-map { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.store-map-frame { width: 100%; height: 320px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sunk); }
.store-map-info p { margin: 0 0 .5rem; }
.store-map-info details { margin-top: .75rem; }
.store-map-info summary { cursor: pointer; color: var(--brand); }
.loc-form { margin-top: .5rem; }
.loc-form .small { font-size: .85rem; }
@media (max-width: 700px) { .store-map { grid-template-columns: 1fr; } .store-map-frame { height: 260px; } }
@media print { .store-map-frame { display: none; } }

/* Running the factory: alerts, attendance sheet, pay slips */
ul.alerts { margin: 0; padding-inline-start: 1.2rem; } ul.alerts li { margin-bottom: .35rem; }
table.attendance select { min-width: 8.5rem; }
table.attendance td.num input { width: 5rem; text-align: end; }
table.attendance td input:not([size]) { width: 100%; min-width: 9rem; }
.pay-table th[scope=row] { text-align: start; font-weight: 500; color: var(--ink-2); }
.pay-table tr.total th, .pay-table tr.total td { border-block-start: 2px solid var(--line); }
.payslip .signatures { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; }
@media print { .no-print { display: none !important; } .payslip { max-width: none; } }
@media (max-width: 980px) { .year-body { grid-template-columns: 1fr; } }

/* Inline share bars under names in ranked tables */
svg.share { display: block; width: 100%; max-width: 220px; height: 5px; margin-top: .3rem; }
svg.share .track { fill: var(--line-2); }
svg.share .bar-sales, .chart .bar-sales { fill: var(--brand); }
svg.share .bar-cost { fill: var(--accent-soft); }
svg.share .bar-exp { fill: var(--accent); }
.chart-months { margin: .2rem 0 .4rem; }
.chart-months svg { max-height: 220px; }
.chart-months .bars-narrow { display: none; }
/* Phones: the narrow drawing at its drawn size (readable labels); many months scroll sideways, and app.js opens the
   chart at the newest month. */
@media (max-width: 600px) {
  .chart-months { overflow-x: auto; overscroll-behavior-x: contain; }
  .chart-months .bars-wide { display: none; }
  .chart-months .bars-narrow { display: block; width: auto; height: 182px; max-width: none; max-height: none; }
}
.grid.compact td:first-child { white-space: normal; }

/* Profit and loss: where the money went */
.flow { display: grid; gap: .55rem; }
.flow-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 11rem 4rem; gap: 1rem; align-items: center; }
.flow-label { color: var(--ink-2); }
.flow-bar { width: 100%; height: 14px; display: block; }
.flow-bar .track { fill: var(--line-2); }
.flow-bar .bar-sales, .flow-bar .bar-net { fill: var(--brand); }
.flow-bar .bar-net { fill: var(--brand-deep); }
.flow-bar .bar-cost { fill: var(--accent-soft); }
.flow-bar .bar-exp { fill: var(--accent); }
.flow-v { font-weight: 600; }
.flow-row:last-child .flow-label, .flow-row:last-child .flow-v { font-weight: 700; color: var(--ink); }
.flow-pct { text-align: end; font-size: .88rem; }
@media (max-width: 760px) { .flow-row { grid-template-columns: 1fr 8rem; } .flow-bar { grid-column: 1 / -1; order: 3; } .flow-pct { display: none; } }

/* Customer and supplier profiles */
.profile-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 0 1.25rem; align-items: start; }
@media (max-width: 1000px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.1rem; margin: 0; }
dl.facts dt { color: var(--muted); font-size: .9rem; }
dl.facts dd { margin: 0; }
.paid-mark { color: var(--brand); }
.paid-mark::before { content: "✓"; margin-inline-end: .35rem; font-size: .8em; }
.pager a { font-weight: 500; }
.panel.notice { border-inline-start: 4px solid var(--amber); justify-content: space-between; align-items: center; }
.panel.notice p { margin: 0; }

/* Sortable headings and quick filter */
th button.sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
th button.sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
th button.sort::after { content: "↕"; opacity: .3; font-size: .85em; }
th[aria-sort=ascending] button.sort::after { content: "↑"; opacity: .9; }
th[aria-sort=descending] button.sort::after { content: "↓"; opacity: .9; }
th[aria-sort] { color: var(--ink) !important; }
th.num button.sort { flex-direction: row-reverse; }
.quick-filter { display: flex; align-items: center; gap: .8rem; margin: 0 0 .7rem; }
.quick-filter input { max-width: 300px; flex: 1; min-height: 2.2rem; padding: .35rem .6rem; font-size: .92rem; }
/* Filter bars (server-side filters on long lists) */
.filter-bar { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end; margin: 0 0 1rem; padding: .9rem 1rem;
  background: var(--sunk); border: 1px solid var(--line-2); border-radius: var(--radius); }
.filter-bar .field { min-width: 140px; }
.filter-bar .field > span { font-size: .83rem; }
.filter-bar input, .filter-bar select { min-height: 2.25rem; padding: .35rem .55rem; }
.filter-bar .grow { flex: 1 1 220px; }
.filter-bar .reset { align-self: center; font-size: .9rem; }

a.sort-link { color: inherit; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
a.sort-link::after { content: "↕"; opacity: .3; font-size: .85em; }
th[aria-sort=ascending] a.sort-link::after { content: "↑"; opacity: .9; }
th[aria-sort=descending] a.sort-link::after { content: "↓"; opacity: .9; }
th.num a.sort-link { flex-direction: row-reverse; }

.search.filter-row { max-width: 640px; }
.search.filter-row select { flex: 0 1 auto; min-width: 0; }

/* Profile time frame */
.period-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.5rem;
  margin: 0 0 1rem; padding: .9rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  position: sticky; top: 0; z-index: 5; }
.period-bar .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.period-bar .chips a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); text-decoration: none;
  color: var(--ink-2); font-size: .9rem; background: var(--paper); }
.period-bar .chips a:hover { border-color: var(--brand); color: var(--ink); }
.period-bar .chips a[aria-current] { background: var(--brand); border-color: var(--brand); color: #fff; }
.period-bar .custom { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; max-width: 100%; }
.period-bar .custom .field { min-width: 0; flex: 1 1 8.5rem; }
.period-bar .custom input { width: 100%; }
.period-bar .custom input { min-height: 2.25rem; padding: .3rem .5rem; }
.period-bar .period-note { flex-basis: 100%; margin: 0; font-size: .86rem; }
.section-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: .92rem; }
.section-nav a { color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .15rem; }
.section-nav a:hover { color: var(--ink); border-bottom-color: var(--brand-soft); }
.delta { display: inline-block; margin-top: .25rem; font-size: .82rem; font-weight: 500; color: var(--muted); }
.delta.up { color: var(--brand); } .delta.down { color: var(--accent); }
.delta.neutral { color: var(--muted); }
.warn-text { color: var(--amber); }
.statement tr.opening td { font-weight: 600; background: var(--sunk); }
.statement tr.st-payment td, .statement tr.st-refund td { color: var(--ink-2); }
.statement tr.st-payment td:nth-child(2), .statement tr.st-refund td:nth-child(2) { padding-inline-start: 1.4rem; }
@media print {
  .period-bar, .section-nav, .filter-bar, .quick-filter, .pager, .pages-bar,header.page .actions, .quiet-link, .linkish, .chart { display: none !important; }
  .panel { break-inside: avoid-page; }
}
#overview, #products, #statement, #invoices { scroll-margin-top: 11rem; }
@media (max-width: 900px) { .period-bar { position: static; } #overview, #products, #statement, #invoices { scroll-margin-top: 1rem; } }

/* freezers */
.contract { border-top: 1px solid var(--line-2); padding: .9rem 0; }
.contract:first-of-type { border-top: 0; padding-top: 0; }
.contract h3 { margin: 0 0 .25rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.contract .files { list-style: none; padding: 0; margin: .5rem 0; }
.contract .files li { padding: .2rem 0; }
.inline-upload { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.top-months td small { display: block; color: var(--muted); }

/* ---------------------------------------------------------------- Overview: period, currency, boxes, charts */
.cur-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--paper); }
.cur-switch button { font: inherit; font-weight: 600; font-size: .9rem; border: 0; background: transparent; color: var(--ink-2);
  padding: .35rem .9rem; border-radius: 999px; cursor: pointer; }
.cur-switch button[aria-pressed="true"] { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; }
.dash-filter { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end; }
.dash-filter .field { min-width: 150px; }
@media (max-width: 600px) {   /* phones: each choice on its own full-width line, the button last */
  .dash-filter .field { flex: 1 1 100%; }
  .dash-filter select, .dash-filter input { width: 100%; }
  .dash-filter > .btn { flex: 1 1 100%; }
}
.dash-filter [hidden] { display: none; }
.period-dates { flex-basis: 100%; margin: .2rem 0 0; font-size: .95rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin: 0 0 1rem; }
/* Rows of boxes stacked on each other (Overview: totals, then stores) share one column grid so their edges line up
   (on its own, a row of two used to stretch each box across two columns). */
@media (min-width: 1100px) { .kpis:has(+ .kpis), .kpis + .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1099px) { .kpis:has(+ .kpis), .kpis + .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.2rem 1.05rem; position: relative; display: flex; flex-direction: column; gap: .3rem; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
  background: linear-gradient(var(--brand), var(--accent)); }
.kpi h2 { font-size: .9rem; font-weight: 500; color: var(--muted); margin: 0; }
.kpi h2 a { color: inherit; text-decoration: none; } .kpi h2 a:hover { color: var(--brand); text-decoration: underline; }
/* Stores row: the retail side, with each pinned store (محل البسطة first) in its own box. */
.kpis-stores .kpi { background: color-mix(in srgb, var(--brand-wash) 55%, var(--paper)); }
.kpis-stores .kpi-pinned::before { background: linear-gradient(var(--accent), #E3BC5E); }
.kpis-stores .kpi-pinned h2 { color: var(--brand); font-weight: 650; }
/* Debts row: owed to me (amber) and what I owe (magenta), today's figures whatever the period. */
.kpis-debts .kpi::before { background: linear-gradient(#E3BC5E, var(--amber)); }
.kpis-debts .kpi-debt-out::before { background: linear-gradient(var(--accent), var(--accent-soft)); }
.kpis-debts .kpi h2 a { color: var(--ink-2); font-weight: 600; }
.debt-top a { color: inherit; }
.kpi > small { font-size: .8rem; line-height: 1.45; }
.kpi.neg .p-syp, .kpi.neg .p-usd { color: var(--accent); }
/* The pair: whichever currency is selected is large, the other sits under it in small type. */
.pair { display: flex; flex-direction: column; gap: .1rem; }
/* Amounts always read left to right ($1,234.56, 1,234.56 ل.س), even inside Arabic sentences. */
.pv, .amt { font-feature-settings: "tnum" 1, "lnum" 1; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.pv { display: block; text-align: start; }
[dir=rtl] .pv { text-align: right; }
.pair .pv:first-child, body.cur-usd .pair .p-usd { order: 1; font-size: 1.65rem; font-weight: 650; line-height: 1.2; color: var(--ink); }
.pair .pv:last-child, body.cur-usd .pair .p-syp { order: 2; font-size: .95rem; font-weight: 500; color: var(--amber); }
body.cur-usd .pair .p-syp { color: var(--muted); }
.cur-label { font-size: .55em; font-weight: 500; color: var(--muted); }
.amt .a-usd, body.cur-usd .amt .a-syp { display: none; }
body.cur-usd .amt .a-usd { display: inline; }
.delta { font-size: .8rem; font-weight: 500; color: var(--muted); }
.delta.good { color: var(--brand); } .delta.bad { color: var(--accent); }
.dash-notes p { margin: 0 0 .4rem; font-size: .84rem; max-width: 95ch; }
.note-provisional { color: var(--amber); font-weight: 500; }
.note-missing { color: var(--accent); font-weight: 500; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 0 1.25rem; margin-top: .5rem; }
.chart-box .panel-head { flex-wrap: wrap; }
.chart-box .panel-head span { flex-basis: 100%; font-size: .82rem; }
.cv-usd, body.cur-usd .cv-syp { display: none; }
body.cur-usd .cv-usd { display: block; }
.dash-svg { width: 100%; height: auto; display: block; }
.dash-svg.narrow { display: none; }    /* phones get the narrow drawing: fewer, larger labels */
@media (max-width: 600px) { .dash-svg.wide { display: none; } .dash-svg.narrow { display: block; } }
.dash-svg.narrow text { font-size: 13px; }
.dash-svg .grid { stroke: var(--line-2); stroke-width: 1; }
.dash-svg .grid.zero { stroke: var(--ink-2); stroke-opacity: .45; }
.dash-svg text { fill: var(--muted); font: 500 11px var(--font); font-feature-settings: "tnum" 1; }
.dash-svg .unit { font-weight: 650; fill: var(--ink-2); }
.dash-svg .hover { fill: transparent; }
.dash-svg .slot:hover .hover { fill: color-mix(in srgb, var(--brand) 7%, transparent); }
.dash-svg .is-hidden { display: none; }
.dash-svg .line polyline { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.dash-svg .line circle { stroke: var(--paper); stroke-width: 1; }
.c-in, .key-in::before { fill: var(--brand); background: var(--brand); }
.c-out, .key-out::before { fill: var(--accent); background: var(--accent); }
.dash-svg .c-net polyline { stroke: var(--amber); } .dash-svg .c-net circle { fill: var(--amber); }
.key-net::before { background: var(--amber); }
.c-raw, .key-raw::before { fill: var(--brand); background: var(--brand); }
.c-resale, .key-resale::before { fill: var(--brand-soft); background: var(--brand-soft); }
.c-stock, .key-stock::before { fill: #E3BC5E; background: #E3BC5E; }
.c-prod, .key-prod::before { fill: var(--accent-soft); background: var(--accent-soft); }
.c-opex, .key-opex::before { fill: var(--accent); background: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin: 0 0 .5rem; }
.legend button { font: inherit; font-size: .84rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  border-radius: 999px; padding: .2rem .7rem; cursor: pointer; }
.legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.legend-hint { font-size: .76rem; }
.chart-totals { margin-top: .6rem; }
.chart-totals th { font-weight: 500; text-align: start; }
.chart-totals tr.strong th, .chart-totals tr.strong td { font-weight: 650; }
.chart-foot { font-size: .8rem; margin: .5rem 0 0; }

/* Phones (kept last so it overrides the rules above). */
@media (max-width: 520px) {
  .hide-narrow { display: none; }
  /* Key figures as a compact list: label and amount on one line, so long pound amounts fit. */
  .figures { grid-template-columns: 1fr; }
  .figures > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 1rem;
    border-inline-end: 0; border-bottom: 1px solid var(--line-2); }
  .figures > div:last-child { border-bottom: 0; }
  .figures dd, .figures.small dd { font-size: 1.2rem; margin: 0; white-space: nowrap; }
  h1 { font-size: 1.5rem; }
}

.card-sort { display: none; }   /* shown only above a table in card view (phones) */
/* Phones: wide tables as cards (app.js adds .cards and a data-label per cell). The first cell is the card's title;
   every other value sits on its own line beside its column's name; empty cells are left out. */
@media (max-width: 640px) {
  table.cards, table.cards tbody, table.cards tfoot, table.cards tr { display: block; }
  table.cards { overflow: visible; border: 0; background: none; }
  table.cards thead { display: none; }
  table.cards tr { border: 1px solid var(--line-2); border-radius: 12px; padding: .5rem .85rem .55rem; margin: 0 0 .6rem;
    background: var(--paper); box-shadow: 0 1px 2px rgba(74, 32, 84, .05); }
  table.cards tr[hidden] { display: none; }
  table.cards td, table.cards th { display: flex; justify-content: space-between; align-items: baseline; gap: .9rem;
    padding: .28rem 0; border: 0; min-width: 0; white-space: normal; text-align: end; font-weight: inherit; }
  table.cards td::before, table.cards th::before { content: attr(data-label); flex: 0 1 auto; color: var(--muted);
    font-size: .82rem; font-weight: 500; text-align: start; }
  table.cards td:not([data-label])::before, table.cards th:not([data-label])::before { content: none; }
  table.cards td > *, table.cards th > * { min-width: 0; }
  table.cards tr > :first-child { display: block; text-align: start; font-weight: 600; font-size: 1rem; padding: .1rem 0 .45rem;
    margin-bottom: .2rem; border-bottom: 1px solid var(--line-2); }
  table.cards tr > :first-child::before { content: none; }
  table.cards tr > :only-child { border-bottom: 0; margin: 0; padding: .1rem 0; }
  table.cards .cell-empty, table.cards .hide-narrow { display: none !important; }
  table.cards td.num, table.cards th.num { font-variant-numeric: tabular-nums; }
  /* A number cell is left-to-right on Arabic pages; in a card the label still goes first, at the start (right). */
  [dir=rtl] table.cards td.num, [dir=rtl] table.cards th.num { direction: rtl; unicode-bidi: normal; }
  table.cards tr.r-head { background: none; border: 0; box-shadow: none; padding: .6rem .1rem 0; }
  table.cards tr.r-total, table.cards tr.r-grand, table.cards tfoot tr { background: var(--brand-wash); border-color: var(--line); }
  table.cards tr.r-grand > :first-child, table.cards tfoot tr > :first-child { color: var(--brand); }
  table.cards tr.inactive { opacity: .7; }
  table.cards td.name-cell { min-width: 0; }
  table.cards svg.share { max-width: none; }
  .card-sort:has(+ table.cards) { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-size: .88rem; color: var(--muted); }
  .card-sort select { flex: 1 1 auto; width: auto; }

  /* A box never wider than the screen (a long account name in a dropdown pushed pages sideways). */
  #main .field { min-width: 0; max-width: 100%; }
  #main select, #main input:not([type=checkbox]):not([type=radio]), #main textarea { max-width: 100%; }
  .report-params .field { flex: 1 1 100%; } .report-params select, .report-params input { width: 100%; }
  .search.filter-row { flex-wrap: wrap; } .search.filter-row select { flex: 1 1 100%; }

  /* Fingers: links and buttons at least ~36 px tall; small labels a touch larger. */
  .quiet-link, .linkish, .legend button, .pager .pg-num, .pager .pg-step, .filters a, .tabs a {
    min-height: 2.3rem; display: inline-flex; align-items: center; justify-content: center; }
  .tag { font-size: .8rem; }
  .top-months td small, .usd-line { font-size: .8rem; }
  .panel { padding-inline: .85rem; }
}