/*
 * الشؤون المالية -- fi.alehsan.org.sa. Self-contained, like every section's chrome: started as a copy of
 * be.css (the association's identity), so a restyle of be cannot reflow a finance form.
 *
 * The association's identity, as SNSO took it on 2026-11-04 (EhsanERP-app #159, Ayed 2026-11-08: «do
 * as what we did on SNSO»): orange is the brand -- buttons, the active tab and menu item, focus, links;
 * the greys are the identity's cool greys; 29LT Azer for text and 29LT Kaff for headings (the
 * association holds a web licence). Green stays for status only (badge.green, flash.ok).
 */
@font-face { font-family: "29LT Azer"; src: url("/fonts/ehsan/ehsan-azer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "29LT Azer"; src: url("/fonts/ehsan/ehsan-azer-500.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "29LT Azer"; src: url("/fonts/ehsan/ehsan-azer-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "29LT Kaff"; src: url("/fonts/ehsan/ehsan-kaff-600.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
    --bg: #f5f7f7;
    --card: #ffffff;
    --line: #e6e9eb;
    --ink: #535961;
    --text: #565656;
    --muted: #6c737d;
    --brand: #cd6228;
    --brand-light: #ed8622;
    --brand-dark: #b5531f;
    --brand-deep: #a9491b;
    --brand-ink: #ffffff;
    --brand-soft: #fbede2;
    --cream: #f9f4ee;
    --font-body: "29LT Azer", "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif;
    --font-head: "29LT Kaff", "29LT Azer", "Segoe UI", Tahoma, Arial, sans-serif;
    --amber: #9a6a00;
    --amber-soft: #fbf0d6;
    --red: #a3322a;
    --red-soft: #fbe6e3;
    --blue: #2a5d93;
    --blue-soft: #e4edf8;
    --green: #1f7a4d;
    --green-soft: #e1f3e8;
    --grey-soft: #ecebe7;
    --radius: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--brand-deep); }
a:hover { color: var(--brand-dark); }
::selection { background: var(--brand-soft); color: var(--ink); }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .6rem; text-wrap: balance; font-family: var(--font-head); font-weight: 600; color: var(--ink); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8rem; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ── Shell ─────────────────────────────────────────────── */
/* White, a hairline under it, the association's mark beside the name -- SNSO's navbar. */
.topbar {
    background: #fff;
    color: var(--ink);
    padding: .65rem 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .04);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: var(--ink); text-decoration: none; }
.topbar .brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.topbar .brand img { width: 38px; height: 38px; flex: none; }
.topbar .brand .small { color: var(--muted); }
.topbar nav { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.topbar nav a, .topbar nav button {
    padding: .35rem .75rem; border-radius: 7px; font: inherit; font-family: var(--font-head); font-size: .95rem;
    background: transparent; color: var(--ink); border: 0; cursor: pointer;
}
.topbar nav a:hover, .topbar nav button:hover { background: var(--bg); color: var(--brand-deep); }
.topbar nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); }
.topbar form { margin: 0; }
.wrap { max-width: 1080px; margin: 0 auto; }
main.wrap { padding: 1.5rem 16px 3rem; }
.narrow { max-width: 520px; margin-inline: auto; }
footer.foot { color: var(--muted); font-size: .85rem; text-align: center; padding: 1.5rem 16px 2.5rem; }

/* ── Blocks ───────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stack > * + * { margin-top: .75rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.stat .label { color: var(--muted); font-size: .9rem; }
.stat .value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
a.stat { display: block; text-decoration: none; border-top: 3px solid var(--brand-light); transition: border-color .15s, box-shadow .15s; }
a.stat:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(205, 98, 40, .12); }
a.stat .value { color: var(--brand-deep); }

.flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid; }
.flash.ok { background: var(--green-soft); border-color: #b7dcc6; color: var(--green); }
.flash.err { background: var(--red-soft); border-color: #efc2bd; color: var(--red); }
.flash.warn { background: var(--amber-soft); border-color: #ecd59d; color: var(--amber); }
.flash ul { margin: 0; padding-inline-start: 1.2rem; }

.badge {
    display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: var(--grey-soft); color: var(--muted); white-space: nowrap;
}
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.blue { background: var(--blue-soft); color: var(--blue); }

/* ── Forms ────────────────────────────────────────────── */
label { display: block; font-weight: 600; margin-bottom: .3rem; }
.field { margin-bottom: 1rem; }
.field .hint { color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.field .error { color: var(--red); font-size: .88rem; margin-top: .25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
input[type="tel"], input[type="file"], select, textarea {
    width: 100%; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
textarea { min-height: 5.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
    outline: 3px solid rgba(237, 134, 34, .35); outline-offset: 1px;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand-light); }
.choice { display: flex; gap: 1rem; flex-wrap: wrap; }
.choice label { font-weight: 400; display: flex; gap: .4rem; align-items: center; margin: 0; }
.check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.check input { margin-top: .35rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; }
legend { font-weight: 700; padding: 0 .4rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .6rem 1.1rem; border-radius: 8px; border: 1px solid var(--brand);
    background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-ink); }
.btn.ghost { background: transparent; color: var(--brand-deep); }
.btn.ghost:hover { background: var(--brand-soft); color: var(--brand-deep); }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.warn { background: var(--amber); border-color: var(--amber); }
.btn.small { padding: .3rem .7rem; font-size: .9rem; }
.btn.block { width: 100%; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ── Tables ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .6rem .75rem; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--cream); font-family: var(--font-head); font-weight: 600; color: var(--ink); white-space: nowrap; border-bottom: 2px solid var(--brand-light); }
tbody tr:hover td { background: #fffaf5; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: end; font-variant-numeric: tabular-nums; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }

/* ── The wizard ───────────────────────────────────────── */
ol.steps { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; gap: .3rem; flex-wrap: wrap; counter-reset: s; }
ol.steps li {
    counter-increment: s; font-size: .82rem; padding: .25rem .6rem; border-radius: 999px;
    background: var(--grey-soft); color: var(--muted);
}
ol.steps li::before { content: counter(s) ". "; }
ol.steps li.done { background: var(--brand-soft); color: var(--brand-deep); }
ol.steps li.current { background: var(--brand); color: var(--brand-ink); }
ol.steps li a { color: inherit; text-decoration: none; }

.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { padding: .35rem .8rem; border-radius: 999px; text-decoration: none; background: var(--grey-soft); color: var(--muted); font-size: .92rem; }
.tabs a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); }

.pagination { margin-top: 1rem; }

@media (max-width: 560px) {
    dl.facts { grid-template-columns: 1fr; }
    dl.facts dd { margin-bottom: .4rem; }
}

@media print {
    body { background: #fff; font-size: 12pt; }
    .topbar, .no-print, footer.foot { display: none !important; }
    main.wrap { padding: 0; max-width: none; }
    .card { border: 1px solid #999; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── fi: the pipeline strip, checks, stamps ───────────────── */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.pipeline a { display: block; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--brand-light); border-radius: var(--radius); padding: .6rem .8rem; text-decoration: none; color: var(--ink); }
.pipeline a[aria-current="page"] { border-color: var(--brand); }
.pipeline .n { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pipeline .sum { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.alertline { padding: .45rem .75rem; border-radius: 8px; margin-bottom: .4rem; border: 1px solid; font-size: .95rem; }
.alertline.critical { background: var(--red-soft); border-color: #efc2bd; color: var(--red); }
.alertline.warning { background: var(--amber-soft); border-color: #ecd59d; color: var(--amber); }
.alertline.info { background: var(--blue-soft); border-color: #c4d6ee; color: var(--blue); }
.items-row { display: grid; grid-template-columns: 130px 1fr 1fr 120px 120px 90px 90px 90px auto; gap: .4rem; align-items: end; margin-bottom: .5rem; }
.items-row .calc { font-variant-numeric: tabular-nums; padding: .6rem 0; color: var(--muted); }
@media (max-width: 900px) { .items-row { grid-template-columns: 1fr 1fr; } }