/* 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; }
.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: block; color: var(--side-text); text-decoration: none; padding: .42rem .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[aria-current] { background: var(--side-2); color: var(--brand); 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 .6rem 0; border-top: 1px solid var(--side-line); font-size: .9rem; }
.me a { color: var(--side-ink); text-decoration: none; display: block; font-weight: 600; }
.me .role { display: block; color: var(--side-dim); font-size: .82rem; }
.me .linkish { color: var(--side-text); padding: 0; margin-top: .4rem; }
/* 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; }
header.page .sub { flex-basis: 100%; order: 3; margin: 0; color: var(--muted); max-width: 72ch; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.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(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 { overflow-x: auto; }
.grid.report td { white-space: nowrap; }
.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; }
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; }
.row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-start; margin-bottom: .9rem; }
.row > .field { flex: 1 1 180px; }
.row > .field.wide { flex: 2 1 300px; }
.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; }

/* 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); }
.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; gap: 1rem; justify-content: flex-end; margin-top: .7rem; }
.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(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 - 4rem - env(safe-area-inset-top)); overflow-y: auto;
    padding-top: .4rem; overscroll-behavior: contain; }
  .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 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding-bottom: .6rem; }
  .me .linkish { margin-top: 0; }
  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; }
@media (max-width: 700px) { .store-map { grid-template-columns: 1fr; } .store-map-frame { height: 260px; } }
@media print { .store-map-frame { display: 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; }
.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: 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 0 auto; }

/* 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; gap: .6rem; align-items: flex-end; }
.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, 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; }
.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; }
.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; }
.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 .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; }
}