/* The admin panel's only stylesheet, after the admin screen of resources/preview/index.html (docs/product/design-system.md "Admin panel": the Mini
   App's tokens and type, a fixed sidebar, tables and forms, no ornament). Served as build output by MapStaticAssets
   under the policy's style-src 'self'; no page carries an inline style. Logical properties only. */

/* Fonts, self-hosted (font-src 'self') from the Mini App's packages; licences in fonts/. */
@font-face {
    font-family: "Vazirmatn Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Vazirmatn Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display face for the brand and page titles only (03 "Typography"); Persian letters only, digits fall back. */
@font-face {
    font-family: "Lalezar";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("fonts/lalezar-arabic-400-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* 03 "Color tokens", light scheme. */
:root {
    color-scheme: light dark;
    --bg: #EEF2F7;
    --surface: #FFFFFF;
    --surface-sunken: #E3E9F1;
    --line: #D6DEEA;
    --ink: #13213A;
    --ink-muted: #5B6B85;
    --lapis: #22508F;
    --lapis-soft: #DCE6F4;
    --turquoise-soft: #D7F0EE;
    --turquoise-ink: #0A6F68;
    --pomegranate: #B83A3A;
    --pomegranate-soft: #F6E1E0;
    --saffron-soft: #F7EBD6;
    --saffron-ink: #8A5A12;
    --font-sans: "Vazirmatn Variable", Tahoma, "Segoe UI", sans-serif;
    --font-display: "Lalezar", "Vazirmatn Variable", Tahoma, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --radius: 12px;
    --side-width: 224px;
}

/* 03 "Color tokens", dark scheme; the panel follows the operating system. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0C1524;
        --surface: #13203A;
        --surface-sunken: #0F1A2E;
        --line: #243555;
        --ink: #E9EEF6;
        --ink-muted: #9AA9C2;
        --lapis: #3D6FC2;
        --lapis-soft: #1C2E50;
        --turquoise-soft: #123A3A;
        --turquoise-ink: #5ED8CC;
        --pomegranate: #EC7468;
        --pomegranate-soft: #3A1E24;
        --saffron-soft: #3A2E17;
        --saffron-ink: #F2B85C;
    }
}

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

html {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-block-size: 100vh;
    background: var(--bg);
}

/* ---------- Frame: sidebar, top bar, content ---------- */

.desk {
    display: flex;
    min-block-size: 100vh;
}

.side {
    position: sticky;
    inset-block-start: 0;
    flex: none;
    inline-size: var(--side-width);
    block-size: 100vh;
    overflow-y: auto;
    padding-block: 16px;
    background: var(--surface);
    border-inline-end: 1px solid var(--line);
}

.side .brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-inline: 20px;
    margin-block-end: 12px;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.4;
    color: var(--ink);
    text-decoration: none;
}

.side .brand small {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--ink-muted);
}

.side .grp {
    margin: 0;
    padding: 12px 20px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
}

.side nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
}

.side nav a:hover {
    background: var(--surface-sunken);
}

.side nav a.active {
    font-weight: 600;
    color: var(--lapis);
    background: var(--lapis-soft);
}

/* A sidebar section with entries of its own (the two kinds of category). The prefix names the section where the
   heading is not drawn: in the phone strip. */
.side .sub-head {
    margin: 0;
    padding: 7px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.side nav a.sub {
    padding-inline-start: 36px;
}

.side nav a .sub-prefix {
    display: none;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-block-size: 56px;
    padding: 8px 24px;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
}

/* The alert bell (01 Admin panel "Alerts"): the count is lapis, the panel's colour for structure, and hides at zero. */
.bell {
    margin-inline-end: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    text-decoration: none;
    color: var(--lapis);
}

.bell .count {
    min-inline-size: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--lapis);
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.topbar .who {
    font-size: 13px;
    color: var(--ink-muted);
}

.topbar form {
    margin: 0;
}

.content {
    flex: 1;
    padding: 20px 24px 40px;
    min-inline-size: 0;
}

/* Phone and narrow windows: the sidebar becomes a strip of links above the page. */
@media (max-width: 900px) {
    .desk {
        flex-direction: column;
    }

    .side {
        position: static;
        inline-size: auto;
        block-size: auto;
        padding-block: 10px 0;
        border-inline-end: 0;
        border-block-end: 1px solid var(--line);
    }

    .side .brand {
        padding-inline: 16px;
        margin-block-end: 6px;
        font-size: 20px;
    }

    .side nav {
        display: flex;
        gap: 4px;
        padding: 0 12px 10px;
        overflow-x: auto;
    }

    .side .grp,
    .side .sub-head {
        display: none;
    }

    .side nav a .sub-prefix {
        display: inline;
    }

    .side nav a,
    .side nav a.sub {
        flex: none;
        padding: 4px 12px;
        font-size: 13px;
        border-radius: 999px;
        background: var(--surface-sunken);
    }

    .topbar {
        min-block-size: 44px;
        padding: 6px 16px;
    }

    .content {
        padding: 16px 16px 32px;
    }
}

/* ---------- Text ---------- */

h1 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.5;
}

h2 {
    margin: 28px 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

p {
    margin: 0 0 12px;
    max-inline-size: 80ch;
}

.content > p:first-of-type {
    color: var(--ink-muted);
}

a {
    color: var(--lapis);
    text-underline-offset: 3px;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--surface-sunken);
    overflow-wrap: anywhere;
}

ul {
    margin: 0 0 12px;
    padding-inline-start: 20px;
}

/* ---------- Tables (preview: 40px rows, sunken header, dividers) ---------- */

table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-block-end: 16px;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

th,
td {
    padding: 8px 12px;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--line);
}

tbody tr:last-child td {
    border-block-end: 0;
}

th {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink-muted);
    background: var(--surface-sunken);
}

tbody tr:hover td {
    background: color-mix(in srgb, var(--lapis-soft) 40%, transparent);
}

/* A wide queue scrolls inside itself instead of pushing the page sideways. */
@media (max-width: 1200px) {
    table {
        display: block;
        overflow-x: auto;
    }
}

dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 24px;
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    max-inline-size: 520px;
}

dt {
    color: var(--ink-muted);
}

dd {
    margin: 0;
}

/* ---------- Forms ---------- */

/* A form that is a page section: a narrow panel of stacked fields. */
.content > form {
    display: grid;
    gap: 4px;
    max-inline-size: 520px;
    margin-block-end: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.content > form > label:not(:first-of-type) {
    margin-block-start: 8px;
}

.content > form > button {
    justify-self: start;
    margin-block-start: 12px;
}

/* A set of checkboxes inside a form, such as the permissions of a staff group. */
fieldset.checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px 12px;
    margin: 8px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

fieldset.checks legend {
    padding-inline: 4px;
    font-size: 13px;
    font-weight: 500;
}

/* A wide form: the filters above a list, or a form holding a fieldset of checkboxes. */
.content > form.wide {
    max-inline-size: 960px;
}

.content > form.filters {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end;
    max-inline-size: none;
}

.content > form.filters > label:not(:first-of-type) {
    margin-block-start: 0;
}

.content > form.filters > button {
    margin-block-start: 0;
}

/* Decisions inside a row: each form one compact line, several forms stacked in the cell. */
td form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 6px;
    min-inline-size: 240px;
}

td form + form {
    margin-block-start: 8px;
    padding-block-start: 8px;
    border-block-start: 1px dashed var(--line);
}

td label {
    display: grid;
    gap: 2px;
    flex: 1 1 140px;
    font-size: 12px;
    color: var(--ink-muted);
}

label {
    font-size: 13px;
    font-weight: 500;
}

label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 8px;
}

input,
select,
textarea,
button {
    font: inherit;
    font-size: 13.5px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    min-block-size: 36px;
    padding: 4px 10px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

td input:not([type="checkbox"]):not([type="hidden"]),
td select {
    min-block-size: 32px;
    inline-size: 100%;
}

textarea {
    min-block-size: 80px;
    resize: vertical;
}

/* A typed amount in words under its field, written by number-fields.js: ۱۰٬۰۰۰ → «ده هزار ریال». */
.number-words {
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-muted);
}

.number-words:empty {
    display: none;
}

input[type="checkbox"] {
    inline-size: 16px;
    block-size: 16px;
    accent-color: var(--lapis);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--lapis);
    outline-offset: 2px;
}

/* ---------- Buttons: lapis primary, outlined secondary, pomegranate for reject/hold/cancel (03) ---------- */

button {
    min-block-size: 36px;
    padding: 4px 16px;
    font-weight: 600;
    white-space: nowrap;
    color: #FFFFFF;
    background: var(--lapis);
    border: 1px solid var(--lapis);
    border-radius: 10px;
    cursor: pointer;
}

td button {
    min-block-size: 32px;
    padding-inline: 12px;
}

button:hover:not(:disabled) {
    filter: brightness(1.1);
}

button.secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

button.danger {
    color: var(--pomegranate);
    background: var(--surface);
    border-color: var(--line);
}

button.secondary:hover:not(:disabled),
button.danger:hover:not(:disabled) {
    filter: none;
    background: var(--surface-sunken);
}

button.small {
    min-block-size: 30px;
    padding-inline: 12px;
    font-size: 13px;
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Messages, flags, amounts ---------- */

.error {
    color: var(--pomegranate);
}

.success {
    color: var(--turquoise-ink);
}

p.error,
p.success,
ul[role="status"] {
    padding: 10px 14px;
    border-radius: 10px;
}

p.error {
    background: var(--pomegranate-soft);
}

p.success {
    background: var(--turquoise-soft);
}

ul[role="status"] {
    padding-inline-start: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
}

/* Risk flags (03 "Admin panel": flags use --pomegranate-soft). */
.chip {
    display: inline-block;
    margin: 0 0 2px;
    margin-inline-end: 4px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    color: var(--pomegranate);
    background: var(--pomegranate-soft);
    border-radius: 999px;
}

.money-in {
    color: var(--turquoise-ink);
}

.money-out {
    color: var(--pomegranate);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    list-style: none;
}

.tags li {
    padding: 0 10px;
    font-size: 12px;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

/* ---------- Sign-in, enrolment, code, refusal: one small card mid-screen ---------- */

.bare {
    display: grid;
    place-items: start center;
    min-block-size: 100vh;
    padding: 12vh 16px 32px;
}

@media (max-width: 640px) {
    .bare {
        padding-block-start: 16px;
    }
}

.auth {
    inline-size: 100%;
    max-inline-size: 380px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.auth .brand {
    margin: 0 0 16px;
    font-size: 11px;
    color: var(--ink-muted);
}

.auth .brand strong {
    margin-inline-end: 8px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
}

.auth h1 {
    margin-block-end: 6px;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
}

.auth p {
    font-size: 13px;
    color: var(--ink-muted);
}

.auth p.error {
    color: var(--pomegranate);
}

.auth form {
    display: grid;
    gap: 6px;
    margin-block-start: 12px;
}

.auth form button {
    inline-size: 100%;
    min-block-size: 40px;
    margin-block-start: 6px;
}

/* The six digits: large, centred, spaced (Latin digits in an LTR field, so the spacing breaks no joining). */
.auth input[autocomplete="one-time-code"] {
    inline-size: 100%;
    min-block-size: 46px;
    font-family: var(--font-mono);
    font-size: 22px;
    letter-spacing: 0.4em;
    text-align: center;
}

/* The Login Widget draws its own button in an iframe after its script; centre it and keep room while it loads. */
.auth .widget {
    display: flex;
    justify-content: center;
    min-block-size: 46px;
    margin-block: 16px 4px;
}

/* The QR stays dark on white in both schemes so every authenticator app reads it. */
.qr {
    inline-size: 168px;
    margin: 12px auto;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.qr svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.secret {
    text-align: center;
}

.secret code {
    display: block;
    margin-block-start: 4px;
    padding: 6px;
    font-size: 12px;
    letter-spacing: 0.06em;
    user-select: all;
}

/* The alert list (01 Admin panel "Alerts"): newest first under its Jalali day, unread rows marked with a lapis edge. */
.alerts {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.alerts li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--line);
}

.alerts li.unread {
    border-inline-start: 3px solid var(--lapis);
    background: var(--lapis-soft);
}

.alerts .kind {
    min-inline-size: 140px;
    color: var(--ink-muted);
    font-size: 13px;
}

.alerts .text {
    flex: 1;
    min-inline-size: 0;
}

.alerts .when {
    color: var(--ink-muted);
    font-size: 13px;
}

.alerts form {
    margin: 0;
}

/* ---------- Filter bar (01 "Navigation and page furniture", 03 "Admin panel") ----------
   Sticky under the page heading: one row of controls that wraps on a narrow window, then the match count and the
   active filters as removable chips. */

.bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    margin-block-end: 16px;
    padding-block: 8px;
    background: var(--bg);
}

.bar > form.filters {
    margin-block-end: 0;
}

.bar .bar-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    max-inline-size: none;
    font-size: 13px;
}

.bar .matches {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* A set filter, with its ✕: lapis, because it is structure and not a risk flag. */
.filter-chip {
    padding: 2px 10px;
    font-size: 12px;
    line-height: 20px;
    color: var(--lapis);
    background: var(--lapis-soft);
    border-radius: 999px;
    text-decoration: none;
}

.filter-chip:hover {
    text-decoration: underline;
}

.bar .clear,
.bar .export,
p.empty .clear {
    font-size: 13px;
}

.bar .export {
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    text-decoration: none;
}

/* The empty result keeps the bar above it and a way back (03). */
p.empty {
    padding: 14px 16px;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

p.empty .clear {
    margin-inline-start: 8px;
}

p.pager {
    display: flex;
    gap: 16px;
    font-size: 13px;
}

/* A label read by a screen reader only: what a chip's ✕ does. */
.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Sidebar waiting counts (01 "Navigation and page furniture", 03 "Admin panel") ----------
   A pill at the entry's end with Persian digits, hidden at zero; lapis under the queue's target time, saffron past
   three quarters of it, pomegranate past it — the same three colours as the queue age. Never an amount of money. */

.side nav a .count {
    margin-inline-start: auto;
    min-inline-size: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    background: var(--lapis);
    border-radius: 999px;
}

.side nav a .count.warm {
    color: var(--saffron-ink);
    background: var(--saffron-soft);
}

.side nav a .count.late {
    color: #FFFFFF;
    background: var(--pomegranate);
}

/* A decided row: what was decided, by whom, and when, in place of the action (01 "Filters on a queue page"). */
.decided {
    display: inline-block;
    font-size: 12px;
    color: var(--ink-muted);
}

/* The dashboard's queue age, the three colours of 03 "Queue age". */
.age-warm {
    color: var(--saffron-ink);
}

.age-late {
    color: var(--pomegranate);
    font-weight: 600;
}

/* ---------- Detail drawer (03 "Admin panel") ----------
   The record opens beside the table so the list stays on screen; on a narrow window it falls under it. The drawer
   is part of the page's address (?open=…), so it is a link and Back closes it. */

.drawer {
    position: sticky;
    inset-block-start: 96px;
    float: inline-end;
    inline-size: 340px;
    margin-inline-start: 16px;
    margin-block-end: 16px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.drawer dl {
    max-inline-size: none;
    padding: 0;
    background: none;
    border: 0;
}

.drawer .drawer-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 10px;
    font-weight: 600;
}

@media (max-width: 1200px) {
    .drawer {
        float: none;
        position: static;
        inline-size: auto;
        margin-inline-start: 0;
    }
}

/* A reported listing in the queue (01 S2 "Report"): saffron is "waiting for staff"; the reporters are named so staff can reach them. */
.reported {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--saffron-ink);
}

.reporters {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--ink-muted);
}