/* Official font files, self-hosted unmodified (DP-733, SIL OFL 1.1). */
@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-Variable.ttf") format("truetype");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Approved Brand Identity v1.0 tokens (Master §177). */
:root {
    --toa-green: #0D3B2E;
    --toa-gold: #C79A2E;
    --toa-font-ar: "Cairo", system-ui, sans-serif;
    --toa-font-en: "Montserrat", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Text is never slanted. Cairo's variable file also has a slant axis (slnt -11..11), and Safari on
   iPhone and iPad can render it leaning; pinning the axis to 0 keeps every element upright in every
   browser, and the browser may not fake an italic either. */
*, *::before, *::after {
    font-variation-settings: "slnt" 0;
    font-synthesis-style: none;
}

body {
    margin: 0;
    font-family: var(--toa-font-ar);
    color: var(--toa-green);
    background: #fff;
    line-height: 1.6;
}

.site-header {
    padding: 16px;
    border-bottom: 2px solid var(--toa-gold);
}

.site-logo { height: 40px; width: auto; display: block; }

.site-main { max-width: 960px; margin: 0 auto; padding: 24px 16px; }

/* Forms (shared pattern, DP-630 onwards). */
.auth { max-width: 420px; }
.auth.request-form, .auth.confirmation { max-width: 560px; }
.form { display: grid; gap: 8px; margin: 16px 0; }
.form label { font-weight: 600; }
.form input {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid #b9c4bf;
    border-radius: 8px;
    width: 100%;
}
.form input:focus { outline: 2px solid var(--toa-gold); outline-offset: 1px; }
.password { display: flex; gap: 8px; align-items: center; }
.btn {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--toa-green);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.btn-secondary { background: #fff; color: var(--toa-green); border: 1px solid var(--toa-green); }
.link { font: inherit; background: none; border: 0; color: var(--toa-green); text-decoration: underline; cursor: pointer; }
.error { color: #9b1c1c; background: #fdecec; padding: 10px 12px; border-radius: 8px; }
.notice { background: #eef5f1; padding: 10px 12px; border-radius: 8px; }
.hint { font-size: 14px; margin: 0; }
.qr { display: block; margin: 12px 0; }
.key { font-family: var(--toa-font-en); letter-spacing: 1px; word-break: break-all; }
.codes { font-family: var(--toa-font-en); columns: 2; margin: 16px 0; padding-inline-start: 28px; }
.session-warning {
    position: fixed;
    inset-inline: 16px;
    bottom: 16px;
    max-width: 420px;
    padding: 16px;
    background: #fff;
    border: 2px solid var(--toa-gold);
    border-radius: 12px;
}

/* Admin shell and Users & Access screens (DP-767..DP-773). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid #dfe5e2; }
.admin-nav a { color: var(--toa-green); text-decoration: none; font-weight: 600; }
.admin-nav a.current { border-bottom: 2px solid var(--toa-gold); }
.nav-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.nav-group-title { font-size: 13px; color: #5b6663; }
.nav-account { display: flex; gap: 14px; align-items: center; margin-inline-start: auto; }
.nav-account form { margin: 0; }
.page-head, .detail-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.breadcrumb { font-size: 14px; margin: 0 0 4px; }
.secondary { color: #5b6663; font-size: 14px; }
.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--toa-font-en); }
.empty { color: #5b6663; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #dfe5e2; margin: 16px 0; overflow-x: auto; scrollbar-width: thin; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--toa-green); border-bottom: 2px solid transparent; min-height: 44px; display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
.tabs a.current { border-bottom-color: var(--toa-gold); font-weight: 700; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filters input, .filters select, .inline-form select, .form select { font: inherit; padding: 9px 10px; border: 1px solid #b9c4bf; border-radius: 8px; min-height: 44px; }
.filters input { flex: 1 1 220px; }
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: start; padding: 10px 8px; border-bottom: 1px solid #e6ebe8; vertical-align: top; }
table.list th { font-size: 14px; color: #5b6663; font-weight: 600; }
.row-actions { display: flex; gap: 12px; }
.row-actions form, form.inline { display: inline; margin: 0; }
.badge { display: inline-block; font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.badge.success { background: #e6f2ea; color: #14532d; }
.badge.neutral { background: #eef0ee; color: #4b5563; }
.badge.info { background: #e7eff7; color: #1f4e79; }
.badge.warning { background: #fbf0e1; color: #8a4b08; }
.pager { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.card { border: 1px solid #dfe5e2; border-radius: 12px; padding: 16px; margin: 16px 0; }
.card h2 { font-size: 19px; margin: 0 0 10px; }
.card h3 { font-size: 16px; margin: 14px 0 6px; }
h2.inline { display: inline; }
summary { cursor: pointer; min-height: 44px; }
.chips { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: #f2f4f2; border-radius: 8px; padding: 6px 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plain-list { margin: 0; padding-inline-start: 20px; }
.plain-list li { margin-bottom: 6px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.confirm { margin-top: 10px; }
.confirm form { background: #f7f8f6; border-radius: 8px; padding: 12px; margin-top: 6px; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.facts dt { color: #5b6663; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.choices { border: 1px solid #dfe5e2; border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.choices label { font-weight: 400; display: flex; gap: 8px; align-items: center; min-height: 32px; }
.choices input { width: auto; }
.once { border: 1px solid var(--toa-gold); }
.role-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.role-pick { font: inherit; border: 1px solid #b9c4bf; background: #fff; border-radius: 999px; padding: 6px 14px; min-height: 44px; cursor: pointer; color: var(--toa-green); }
.role-pick[aria-pressed="true"] { border-color: var(--toa-green); background: #eef5f1; font-weight: 700; }
.legend { font-size: 14px; color: #5b6663; }
/* The permissions matrix is the one list allowed to scroll sideways, with a fixed first column (DP-638).
   It is positioned so the hidden screen-reader labels inside it stay in its scroll area and never widen the page on a phone. */
.matrix-wrap { position: relative; overflow-x: auto; border: 1px solid #dfe5e2; border-radius: 8px; }
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 900px; width: 100%; }
table.matrix th, table.matrix td { padding: 6px 8px; border-bottom: 1px solid #eef0ee; text-align: center; }
table.matrix thead th { position: sticky; top: 0; background: #f7f8f6; font-weight: 600; white-space: nowrap; }
table.matrix th[scope="row"], table.matrix thead th:first-child { position: sticky; inset-inline-start: 0; background: #fff; text-align: start; min-width: 240px; font-weight: 400; z-index: 1; }
table.matrix thead th:first-child { background: #f7f8f6; z-index: 2; }
table.matrix tr.domain th { text-align: start; background: #f2f4f2; font-weight: 700; position: static; }
table.matrix td.yes { color: var(--toa-green); font-weight: 700; }
table.matrix .picked { background: #eef5f1; }
.key-small { display: block; font-family: var(--toa-font-en); font-size: 12px; color: #5b6663; }

.check { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.check input { width: auto; }
.form textarea, .confirm textarea { font: inherit; padding: 10px 12px; border: 1px solid #b9c4bf; border-radius: 8px; width: 100%; box-sizing: border-box; min-height: 96px; }
.form select { width: 100%; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.original { border-inline-start: 3px solid var(--toa-gold); }
.notes { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.notes li { background: #f7f8f6; border-radius: 8px; padding: 10px 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; }

/* Lists on iPhone become cards (DP-638). */
@media (max-width: 640px) {
    table.list thead { display: none; }
    table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
    table.list tr { border: 1px solid #dfe5e2; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
    table.list td { border: 0; padding: 4px 0; }
    table.list td[data-label="البريد"], table.list td[data-label="آخر دخول"], table.list td[data-label="تنتهي في"] { display: none; }
    table.list td.hide-narrow { display: none; }
    .nav-account { margin-inline-start: 0; }
}

/* Project stages and tasks (DP-805, DP-806). */
.items { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.items > li { border: 1px solid #dfe5e2; border-radius: 10px; padding: 10px 12px; }
.item-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; }
.item-title { font-weight: 600; overflow-wrap: anywhere; }
.items > li.done .item-title { color: #5b6663; }
.item-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: #5b6663; margin-top: 4px; }
.group-title { font-size: 16px; margin: 18px 0 8px; }
.form-grid { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-grid > * { min-width: 0; }
.form-grid label { display: grid; gap: 4px; }
.form-grid input, .form-grid select { font: inherit; padding: 9px 10px; border: 1px solid #b9c4bf; border-radius: 8px; min-height: 44px; width: 100%; box-sizing: border-box; }

/* Public shell and Customer area (DP-834, DP-835). */
html.lang-en body { font-family: var(--toa-font-en); }
.public-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.public-nav { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.public-nav a { color: var(--toa-green); font-weight: 600; text-decoration: none; }
.public-nav form { margin: 0; }
.lang-switch { border: 1px solid var(--toa-green); border-radius: 999px; padding: 2px 12px; }
.site-footer { display: grid; gap: 12px; padding: 24px 16px; border-top: 1px solid #dfe5e2; font-size: 14px; }
.site-footer a { color: var(--toa-green); }
.field-error { color: #9b1c1c; font-size: 14px; margin: 0; }
.form textarea { font: inherit; padding: 10px 12px; border: 1px solid #b9c4bf; border-radius: 8px; width: 100%; }
.account-nav { display: flex; gap: 8px 20px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid #dfe5e2; }
.account-nav a { color: var(--toa-green); font-weight: 600; text-decoration: none; }
.account-nav a.current { border-bottom: 2px solid var(--toa-gold); }
.legal { max-width: 70ch; }
.legal h2 { font-size: 1.15rem; margin-top: 28px; }
.hero { padding: 24px 0; }
@media (max-width: 480px) { .public-header { justify-content: center; } .btn { width: 100%; text-align: center; } }

/* Support conversation (CUS-10, ADM-29) and the Customer ticket list (CUS-08). */
.ticket-list { list-style: none; padding: 0; margin: 0; }
.ticket-list .card h2 { font-size: 17px; margin: 4px 0; }
.conversation { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.message { border: 1px solid #dfe5e2; border-radius: 12px; padding: 12px 14px; max-width: 46rem; }
.message.theirs { background: #f4f7f5; }
.message p { margin: 0 0 6px; }
.message p.text { margin: 0; }

/* ADM-31 content form (DP-848): Arabic and English side by side, stacked on narrow screens. */
.content-form fieldset, .card fieldset { border: 1px solid #dfe5e2; border-radius: 8px; padding: 12px; margin: 0; min-width: 0; }
.content-form legend, .card legend { font-weight: 700; padding: 0 6px; }
.content-form .field { display: grid; gap: 6px; }
.content-form input:not([type="checkbox"]) { font: inherit; padding: 9px 10px; border: 1px solid #b9c4bf; border-radius: 8px; width: 100%; box-sizing: border-box; min-height: 44px; }
.bilingual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bilingual legend { grid-column: 1 / -1; }
.bilingual .lang { display: grid; gap: 6px; align-content: start; min-width: 0; }
.bilingual .lang .text { white-space: pre-wrap; margin: 0; }
.content-form textarea.body { min-height: 240px; }
.list-field { display: grid; gap: 12px; }
.list-item { border-top: 1px solid #dfe5e2; padding-top: 12px; display: grid; gap: 10px; }
.list-item-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.btn-small { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .bilingual { grid-template-columns: 1fr; } }

/* ADM-34 SEO (DP-872): character counters and the search result preview. */
.counter { font-size: 13px; color: #5b6663; font-variant-numeric: tabular-nums; }
.serp { border: 1px solid #dfe5e2; border-radius: 8px; padding: 12px 14px; max-width: 600px; display: grid; gap: 2px; }
.serp .serp-url { font-size: 13px; color: #5b6663; overflow-wrap: anywhere; }
.serp .serp-title { font-size: 18px; color: #1a0dab; margin: 0; overflow-wrap: anywhere; }
.serp .serp-text { font-size: 14px; margin: 0; color: #4d5156; }
.share-card { border: 1px solid #dfe5e2; border-radius: 8px; overflow: hidden; max-width: 420px; }
.share-card img { display: block; width: 100%; height: auto; }
.share-card div { padding: 10px 12px; display: grid; gap: 2px; }
.share-card strong, .share-card span { overflow-wrap: anywhere; }

/* Public content sections (DP-846). */
.lead { font-size: 1.1rem; max-width: 65ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.home-section { padding: 24px 0; border-top: 1px solid #dfe5e2; }
.why-grid { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.why-grid h3, .about-list h3 { font-size: 1.05rem; margin: 8px 0 4px; }
.why-grid p, .about-list p { margin: 0; }
.home-about { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.founder-card { border: 1px solid #dfe5e2; border-radius: 12px; padding: 16px; }
.founder-name { font-weight: 700; font-size: 1.1rem; margin: 0 0 4px; }
.eyebrow { color: var(--toa-gold); font-weight: 700; margin: 0 0 4px; }
.about-page section { margin-top: 28px; max-width: 70ch; }
.about-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 16px; }
.legal-meta dt { color: #5b6663; }
.legal-meta dd { margin: 0; font-weight: 600; }
.legal-toc { border: 1px solid #dfe5e2; border-radius: 8px; padding: 8px 12px; margin-bottom: 16px; }
.legal-toc summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.legal .text { white-space: pre-wrap; }
.copyright { margin: 16px 0 0; }
.business-details { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; color: #4b5753; }
.about-business { margin-top: 32px; }
.preview-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 16px; background: var(--toa-gold); color: #1d1d1b; }
.preview-bar a { color: inherit; font-weight: 600; }
/* Services (PUB-04, PUB-05, Home): up to three cards a row (Master §294); one column on phones. */
.catalog-grid { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.catalog-card { border: 1px solid #dfe5e2; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.catalog-card h3 { font-size: 1.05rem; margin: 0; }
.catalog-card p { margin: 0; flex: 1; }
.catalog-card .btn { align-self: flex-start; }
.price { font-weight: 700; color: var(--toa-gold); margin: 4px 0; }
.service-section { margin-top: 28px; max-width: 70ch; }
.service-section .text { white-space: pre-wrap; }
.package-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.package-list li, .package-option { border: 1px solid #dfe5e2; border-radius: 12px; padding: 12px 14px; }
.package-choice fieldset { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; min-width: 0; }
.package-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.package { display: grid; gap: 4px; }
.package-items { color: #4b5753; }
.closing-cta { margin-top: 24px; }
.request-context { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; border: 1px solid #dfe5e2; border-radius: 8px; padding: 10px 12px; margin: 12px 0 4px; }
.request-context dd { margin: 0; font-weight: 600; }
.confirmation .reference { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border: 1px solid #dfe5e2; border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.confirmation .reference strong { font-family: var(--toa-font-en); font-size: 1.3rem; user-select: all; }
/* Products (PUB-02, PUB-03, Home): up to four cards a row, two on iPad, one on phones; a fixed identity cover
   carrying the name until the Media library exists (DP-948). */
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-cover { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 8px; background: var(--toa-green); color: #fff; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-weight: 700; font-size: 1.1rem; border-bottom: 4px solid var(--toa-gold); overflow-wrap: anywhere; }
.product-head .product-cover { max-width: 360px; font-size: 1.4rem; margin-bottom: 12px; }
.catalog-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.catalog-search input[type="search"] { flex: 1 1 220px; min-width: 0; }
.offer-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.offer-list li { border: 1px solid #dfe5e2; border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.offer-list li.selected { border-color: var(--toa-gold); box-shadow: 0 0 0 2px var(--toa-gold); }
.offer-list form { margin-top: 4px; }
.cart-lines { list-style: none; padding: 0; display: grid; gap: 12px; }
.cart-lines li.unavailable { border-color: #e5b4b4; }
.request-total { font-weight: 700; }
.history { padding-inline-start: 20px; display: grid; gap: 6px; margin: 0; }
@media (max-width: 900px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .catalog-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .home-about { grid-template-columns: 1fr; } }
@media print { .site-header, .site-footer, .legal-toc, .legal-versions, .preview-bar { display: none; } }

/* ADM-01 Dashboard (DP-899..DP-905): numbers that open their source list; one column on phones. */
.dash-section { margin: 20px 0 28px; }
.dash-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dash-card { border: 1px solid #dfe5e2; border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; min-width: 0; }
.dash-wide { margin-top: 12px; }
.dash-link { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.dash-link:hover .dash-label, .dash-link:focus-visible .dash-label { text-decoration: underline; }
.dash-count { font-family: var(--toa-font-en); font-size: 28px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-label { font-size: 15px; }
.dash-failed { font-size: 14px; color: #9b1c1c; }
@media (max-width: 480px) { .dash-grid { grid-template-columns: 1fr; } }

/* Commerce: the related records strip (DP-639) and the printable Invoice / Credit Note on A4 (DP-393, DP-974). */
.related { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 12px; font-size: 14px; }
.related > * + *::before { content: "←"; margin-inline-end: 18px; color: #8a9692; }
.lang-en .related > * + *::before { content: "→"; }
.inv { --inv-green: #0D3B2E; --inv-gold: #C79A2E; --inv-cream: #F6F3EC; --inv-ink: #7E5F17; --inv-muted: #5E6B65; --inv-line: #E3E8E5;
    position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 210mm; overflow: hidden;
    background: #fff; color: #14231D; border: 1px solid var(--inv-line); border-radius: 12px; padding: 14mm 16mm 0; font-size: 10.5pt; line-height: 1.6;
    font-family: var(--toa-font-ar); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv *, .inv *::before, .inv *::after { box-sizing: border-box; }
.inv-band { position: absolute; inset: 0 0 auto 0; height: 5mm; background: var(--inv-green); }
.inv-band::after { content: ""; position: absolute; inset: auto 0 -1.2mm 0; height: 1.2mm; background: var(--inv-gold); }
.inv .inv-en, .inv .inv-n { font-family: var(--toa-font-en), var(--toa-font-ar); font-variant-numeric: tabular-nums; }
.inv .inv-en { color: var(--inv-muted); font-size: 8pt; letter-spacing: .02em; }
.inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4mm 8mm; margin-top: 6mm; }
.inv-logo { width: 60mm; max-width: 45%; height: auto; margin: -5mm -4mm; }
.inv-title h2 { margin: 0; font-size: 20pt; color: var(--inv-green); line-height: 1.25; }
.inv-title > .inv-en { display: block; font-size: 10pt; margin-top: 1mm; }
.inv-meta { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 1mm 6mm; margin: 4mm 0 0; font-size: 9.5pt; }
.inv-meta dt { color: var(--inv-muted); }
.inv-meta dd { margin: 0; font-weight: 600; }
.inv-stamp { display: inline-block; margin-top: 2mm; color: #9b2c2c; font-weight: 700; border: 2px solid #9b2c2c; border-radius: 8px; padding: 0 10px; }
.inv-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6mm; margin-top: 8mm; }
.inv-box { background: var(--inv-cream); border-radius: 3mm; padding: 4mm 5mm; }
.inv-box h3 { margin: 0 0 1.5mm; font-size: 9pt; color: var(--inv-ink); font-weight: 700; }
.inv-box h3 .inv-en { margin-inline-start: 2mm; color: var(--inv-ink); opacity: .8; }
.inv-box p { margin: 0; font-size: 9.5pt; overflow-wrap: anywhere; }
.inv-box .inv-name { font-weight: 700; font-size: 10.5pt; color: var(--inv-green); }
.inv-table { margin-top: 8mm; overflow-x: auto; }
.inv-table table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.inv-table thead th { background: var(--inv-green); color: #fff; font-weight: 600; padding: 2.5mm 3mm; text-align: start; vertical-align: top; }
.inv-table thead th:first-child { border-start-start-radius: 2mm; border-end-start-radius: 2mm; }
.inv-table thead th:last-child { border-start-end-radius: 2mm; border-end-end-radius: 2mm; }
.inv-table thead th .inv-en { display: block; color: #C9D8D1; font-size: 7pt; }
.inv-table td { padding: 3mm; border-bottom: .3mm solid var(--inv-line); vertical-align: top; }
.inv-table td.inv-n, .inv-table th.inv-n { text-align: end; white-space: nowrap; }
.inv-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6mm 8mm; margin-top: 6mm; align-items: flex-start; }
.inv-pay { flex: 1 1 60mm; }
.inv-pay h3, .inv-qr h3 { margin: 0 0 1.5mm; font-size: 9pt; color: var(--inv-ink); }
.inv-pay dl { display: grid; grid-template-columns: auto 1fr; gap: .5mm 4mm; margin: 0; font-size: 9pt; }
.inv-pay dt { color: var(--inv-muted); }
.inv-pay dd { margin: 0; overflow-wrap: anywhere; }
.inv-pay p { margin: 2mm 0 0; font-size: 8.5pt; color: var(--inv-muted); }
.inv-totals { flex: 0 1 78mm; min-width: 0; border: .3mm solid var(--inv-line); border-radius: 3mm; overflow: hidden; }
.inv-totals div { display: flex; justify-content: space-between; gap: 4mm; padding: 2mm 4mm; font-size: 9.5pt; }
.inv-totals div + div { border-top: .3mm solid #EEF1EF; }
.inv-totals .inv-grand { background: var(--inv-green); color: #fff; font-weight: 700; font-size: 11.5pt; padding: 3mm 4mm; }
.inv-totals .inv-grand .inv-n { color: #E3C47A; }
.inv-qr { display: flex; gap: 5mm; align-items: center; margin-top: 8mm; padding: 4mm 5mm; border: .3mm dashed var(--inv-gold); border-radius: 3mm; }
.inv-qr-image { width: 30mm; height: 30mm; flex: none; }
.inv-qr-image svg { display: block; width: 100%; height: 100%; }
.inv-qr-code .qr-dark, .inv-qr-code rect, .inv-qr-code path { fill: #000; }
.inv-qr p { margin: 0; font-size: 8.5pt; color: var(--inv-muted); }
.inv-note { margin: 5mm 0 0; font-size: 8.5pt; color: var(--inv-muted); }
.inv-spacer { flex: 1; min-height: 8mm; }
.inv-foot { margin: 0 -16mm; padding: 4mm 16mm; background: var(--inv-cream); border-top: 1mm solid var(--inv-gold); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2mm 6mm; font-size: 8pt; color: var(--inv-muted); }
.inv-foot b { color: var(--inv-green); }
@media (max-width: 640px) {
    .inv { padding: 10mm 16px 0; font-size: 10pt; }
    .inv-foot { margin: 0 -16px; padding: 4mm 16px; }
    .inv-logo { margin: 0; }
}
@page inv { size: A4; margin: 0; }
@media print {
    @page { size: A4; margin: 14mm; }
    .admin-nav, .no-print, .breadcrumb, .messages, .session-warning, .account-nav { display: none !important; }
    .inv { page: inv; width: 210mm; max-width: none; min-height: 296mm; border: 0; border-radius: 0; padding: 14mm 16mm 0; margin: 0; }
    .inv-table { overflow: visible; }
    .inv-table tr, .inv-sum, .inv-qr { break-inside: avoid; }
    body { background: #fff; }
}

/* ADM-40 funnel: simple bars only (DP-893). */
.funnel { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.funnel li { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr auto; gap: 4px 12px; align-items: center; }
.funnel meter { width: 100%; height: 14px; }
.funnel li .secondary { grid-column: 2 / -1; font-size: 13px; }

/* A left-to-right value (number, IBAN, VAT number) still sits at the start of its row in a right-to-left page. */
[dir="rtl"] dd[dir="ltr"] { text-align: right; }
[dir="ltr"] dd[dir="ltr"] { text-align: left; }