/* Defaults mirror App.xaml in the desktop program. The chosen theme overrides most of
   these from the page head, so anything themeable must be read through a variable. */
:root {
    --primary: #6366F1;
    --primary-hover: #4F46E5;
    --content-bg: #090D16;
    --sidebar-bg: #0F172A;
    --card-bg: #1E293B;
    --head-bg: #16213A;
    --text: #F8FAFC;
    --text-dim: #94A3B8;
    --border: #334155;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #60A5FA;
}

/* The light palette needs a little more separation than a tint of the page background. */
html[data-theme="light"] .card-s,
html[data-theme="light"] .kpi,
html[data-theme="light"] .tile,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .perm-group {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
}

html[data-theme="light"] .topbar {
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .navlinks a.active,
html[data-theme="light"] .badge-admin {
    color: #fff;
}

html { font-size: 15px; }

body {
    background: var(--content-bg);
    color: var(--text);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

a { color: var(--info); text-decoration: none; }
a:hover { color: var(--primary); }

/* ---------- top bar ---------- */
.topbar {
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.topbar .brand { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.topbar .brand .dot { color: var(--primary); }

/* Equal flex-basis on both sides is what actually centres the nav: each side is handed
   the same width, so the middle band lands on the centre of the screen however wide the
   site name or the user's name happens to be. */
.topbar .bar-side {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1 1 0;
    min-width: 0;
}

.topbar .bar-side.end { justify-content: flex-end; }

.navlinks { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; justify-content: center; flex: 0 1 auto; }

.navlinks a {
    color: var(--text-dim);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.navlinks a:hover { background: rgba(99, 102, 241, 0.15); color: var(--text); }
.navlinks a.active { background: var(--primary); color: #fff; }

.who { color: var(--text-dim); font-size: 0.85rem; white-space: nowrap; }

.badge-admin {
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.btn-out {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 0.28rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

.btn-out:hover { border-color: var(--danger); color: var(--danger); }

/* ---------- per-device theme picker ---------- */
.theme-pick { position: relative; }
.theme-pick > summary {
    list-style: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: .32rem .45rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    user-select: none;
}

.theme-pick > summary::-webkit-details-marker { display: none; }
.theme-pick > summary:hover { border-color: var(--primary); }

.theme-menu {
    position: absolute;
    top: calc(100% + .4rem);
    inset-inline-start: 0;
    z-index: 40;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .4rem;
    min-width: 190px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.tm-head { font-size: .72rem; color: var(--text-dim); padding: .25rem .5rem .4rem; }

.theme-menu button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    text-align: start;
    padding: .38rem .5rem;
    border-radius: 6px;
    cursor: pointer;
}

.theme-menu button:hover { background: var(--head-bg); }
.theme-menu .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid; flex: none; }
.tm-reset { color: var(--text-dim); border-top: 1px solid var(--border); border-radius: 0; margin-top: .3rem; padding-top: .5rem; }

/* ---------- shell ---------- */
main { flex: 1; padding: 1.2rem 1rem 2.5rem; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box; }

h1.page-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 1rem; }

.card-s { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }

/* ---------- KPI tiles ---------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; }
.kpi .label { color: var(--text-dim); font-size: 0.82rem; margin-bottom: 0.3rem; }
.kpi .value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

.kpi.accent .value { color: var(--primary); }
.kpi.good .value { color: var(--success); }
.kpi.warn .value { color: var(--warning); }
.kpi.bad .value { color: var(--danger); }

/* عملةٌ ثانية تحت الأولى في البطاقة نفسها: أصغر قليلاً لأنّ الأولى هي الجواب في
   أغلب الأيام، ولكن بالوزن نفسه — ليست هامشاً بل مبلغٌ آخر بعملةٍ أخرى. */
.kpi .value.sub { font-size: 1.05rem; margin-top: .15rem; }

/* ---------- مجاميع التذييل، عملةً عملة ----------
   الدينارُ والدولار لا يُجمعان في رقم. بعملةٍ واحدة يبدو سطراً واحداً كما كان. */
/* بلا align-items: الخانة الرقمية تحمل `text-align: left` و`direction: ltr`، فمحاذاةٌ
   صريحة هنا تُخرج المجموعَ عن عمود أرقامه. الأسطرُ كتلٌ ترث محاذاة خانتها. */
.cur-totals { display: flex; flex-direction: column; gap: .15rem; }
.cur-total { white-space: nowrap; }
.cur-total.usd { color: var(--info); }

/* ---------- daily bar chart ----------
   أعمدة CSS لا رسم SVG ولا مكتبة: الارتفاع نسبةٌ مئوية داخل مسارٍ ثابت الطول، فيتمدّد
   الرسم مع عرض الشاشة بلا حساب إحداثيّات — ولا يحمّل الموقع شيئاً من الخارج. */
.chart { margin-bottom: 1.2rem; }

.chart-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .9rem; }
.chart-head h2 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.chart-head .dim { font-size: .85rem; }

.bars { display: flex; align-items: flex-end; gap: .3rem; }

.bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; }

.bar-val {
    font-size: .62rem;
    color: var(--text-dim);
    height: .9rem;
    white-space: nowrap;
    direction: ltr;
}

/* المسار يحجز الارتفاع كاملاً، فتقف كل الأعمدة على خطٍّ واحد مهما اختلفت قيمها */
.bar-track { width: 100%; height: 110px; display: flex; align-items: flex-end; }

.bar {
    width: 100%;
    background: var(--primary);
    border-radius: 4px 4px 0 0;
    min-height: 3px;
    transition: opacity .15s;
}

.bar-col.none .bar { background: var(--border); min-height: 2px; }
.bar-col.today .bar { background: var(--info); }
.bar-col.today .bar-day { color: var(--info); font-weight: 700; }
.bar-col:hover .bar { opacity: .75; }

.bar-day { font-size: .68rem; color: var(--text-dim); direction: ltr; }

.chart-foot { font-size: .82rem; margin-top: .8rem; }

/* ---------- share meter (أكثر المواد مبيعاً) ---------- */
.meter { display: block; width: 100%; min-width: 70px; height: 7px; background: var(--border); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
th.w-bar, td.w-bar { width: 22%; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; }

.tile {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem;
    display: block;
    color: var(--text);
    transition: border-color .15s, transform .15s;
}

.tile:hover { border-color: var(--primary); color: var(--text); transform: translateY(-2px); }
.tile .icon { font-size: 1.6rem; }
.tile .name { font-weight: 700; margin-top: 0.4rem; }
.tile .hint { color: var(--text-dim); font-size: 0.83rem; margin-top: 0.15rem; }

/* ---------- control-panel cards ----------
   One card per area of the panel: the headline number tells the admin whether that area
   needs them before they click into it. The coloured spine is what tells the cards apart
   at a glance, so each card names its accent. */
.acards { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 1rem; }

.acard {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text);
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}

.acard::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
}

.acard.accent::before { background: var(--primary); }
.acard.good::before { background: var(--success); }
.acard.info::before { background: var(--info); }
.acard.warn::before { background: var(--warning); }
.acard.muted::before { background: var(--border); }

a.acard:hover { border-color: var(--primary); color: var(--text); transform: translateY(-2px); }

.acard .head { display: flex; align-items: center; gap: 0.6rem; }
.acard .head .ico { font-size: 1.45rem; line-height: 1; }
.acard .head .t { font-weight: 700; font-size: 1.02rem; }

.acard .head .n {
    margin-inline-start: auto;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.acard .d { color: var(--text-dim); font-size: 0.86rem; line-height: 1.65; }

.acard .facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    font-size: 0.79rem;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    padding-top: 0.55rem;
    margin-top: auto;
}

.acard .facts b { color: var(--text); font-weight: 700; }
.acard .facts .warn-txt b { color: var(--warning); }
.acard .go { font-size: 0.82rem; font-weight: 700; color: var(--info); }
a.acard:hover .go { color: var(--primary); }

/* ---------- filter bar ---------- */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filters .f label { display: block; color: var(--text-dim); font-size: 0.8rem; margin-bottom: 0.2rem; }

.filters input,
.filters select {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 0.42rem 0.7rem;
    min-width: 150px;
    font-family: inherit;
    font-size: 0.92rem;
}

.filters input:focus,
.filters select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .25);
}

.btn-p {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 1.1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.btn-p:hover { background: var(--primary-hover); }

.btn-c {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    font-family: inherit;
    display: inline-block;
}

/* ---------- quick date ranges ---------- */
.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 .8rem; }

.chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .32rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
}

.chip:hover { border-color: var(--primary); color: var(--text); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.on:hover { color: #fff; }

/* ---------- document actions (PDF / share) ----------
   Used both as a cell inside a list row and as the action bar of a details page.
   The class was already on the vouchers page with no rules behind it at all, so the
   buttons inherited nothing and collapsed into a stack of bare links on a phone. */
.doc-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .4rem .75rem;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    min-height: 36px;
    box-sizing: border-box;
}

.act:hover { border-color: var(--primary); color: var(--text); }
.act.share { background: var(--primary); border-color: var(--primary); color: #fff; }
.act.share:hover { background: var(--primary-hover); color: #fff; }
.act:disabled { opacity: .55; cursor: default; }

/* the spacer only matters once the bar is pinned, i.e. on a phone */
.bar-spacer { display: none; }

/* ---------- document page heading ---------- */
.doc-head { margin-bottom: .9rem; }
.doc-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.doc-title .page-title { margin: 0; }
.back-link { display: inline-block; color: var(--text-dim); font-size: .85rem; margin-bottom: .35rem; }
.back-link:hover { color: var(--primary); }

/* ---------- tables ---------- */
.table-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }

/* One line colour for the whole mesh, softened from the theme's border so a dense grid
   reads as a guide instead of a cage. Themes only ever set --border, so this follows them. */
table.grid { width: 100%; border-collapse: collapse; white-space: nowrap; --line: var(--border); }

@supports (color: color-mix(in srgb, red, blue)) {
    table.grid { --line: color-mix(in srgb, var(--border) 72%, transparent); }
}

table.grid th {
    background: var(--head-bg);
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
}

table.grid td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; }

/* ---------- sortable headers ---------- */
table.grid th.sort { padding: 0; }

table.grid th.sort > a {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: inherit;
    font: inherit;
    padding: 0.6rem 0.8rem;
    white-space: nowrap;
}

table.grid th.sort.num > a { justify-content: flex-end; flex-direction: row-reverse; }
table.grid th.sort > a:hover { color: var(--text); background: rgba(99, 102, 241, .12); }
table.grid th.sort .arrow { font-size: .7rem; opacity: .35; }
table.grid th.sort.on .arrow { opacity: 1; color: var(--primary); }
table.grid th.sort.on > a { color: var(--text); }

/* Vertical rules. Bordering every cell except the first of its row draws exactly one
   line between each pair, and inline-start keeps it correct in RTL. */
table.grid th + th,
table.grid td + td { border-inline-start: 1px solid var(--line); }

table.grid tbody tr:hover { background: rgba(99, 102, 241, .09); }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tfoot td { background: var(--head-bg); font-weight: 700; border-top: 1px solid var(--border); }

/* A figure and the heading above it must share one alignment. `table.grid th` outranks a
   bare `.num`, so headers kept the default start alignment while their values sat at the
   far edge of a wide column — the amount ended up nowhere near its own label. */
table.grid th.num,
table.grid td.num { text-align: left; }

.num { text-align: left; font-variant-numeric: tabular-nums; direction: ltr; }
.dim { color: var(--text-dim); }
.pos { color: var(--success); font-weight: 600; }
.neg { color: var(--danger); font-weight: 600; }
.zero { color: var(--text-dim); }

.pill { border-radius: 999px; padding: 0.12rem 0.6rem; font-size: 0.76rem; font-weight: 700; display: inline-block; }
.pill.iqd { background: rgba(239, 68, 68, .17); color: #FCA5A5; }
.pill.usd { background: rgba(16, 185, 129, .17); color: #6EE7B7; }
.pill.info { background: rgba(96, 165, 250, .17); color: #93C5FD; }

.empty { text-align: center; color: var(--text-dim); padding: 2.5rem 1rem; }

/* long free text (product names, notes) may wrap; everything else stays on one line */
td.wrap { white-space: normal; min-width: 200px; max-width: 340px; }

/* ---------- sticky table headers ----------
   ‏.table-wrap فيها ‎overflow-x: auto‎، وذلك يجعلها هي حاويةَ التمرير — فرأسٌ ‎sticky‎
   داخلها يلتصق بها هي لا بالصفحة، ولا يظهر منه أثرٌ ما دامت بلا تمريرٍ رأسيّ. فالحلّ
   إعطاؤها ارتفاعاً أقصى: عندها يُمرَّر الجدولُ داخل نفسه ويثبت رأسه فعلاً.

   وعلى الشاشات الضيّقة لا يُطبَّق: الجداول هناك تصير بطاقات و<thead> مخفيّ أصلاً،
   فلا رأس يُثبَّت — ويبقى التمرير للصفحة وحدها بلا صندوقٍ متداخل تحت الإصبع. */
@media (min-width: 821px) and (min-height: 600px) {
    .table-wrap { max-height: calc(100vh - 11rem); overflow-y: auto; }

    table.grid thead th { position: sticky; top: 0; z-index: 2; }
    table.grid tfoot td { position: sticky; bottom: 0; }
}

/* ---------- report catalog ---------- */
.group-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .7rem;
}

.g-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.g-icon.good { background: rgba(16, 185, 129, .17); }
.g-icon.info { background: rgba(96, 165, 250, .17); }
.g-icon.warn { background: rgba(245, 158, 11, .17); }
.g-icon.accent { background: rgba(99, 102, 241, .17); }
.g-icon.bad { background: rgba(239, 68, 68, .17); }

.note-box {
    background: color-mix(in srgb, var(--info) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--info) 40%, transparent);
    color: var(--text);
    border-radius: 8px;
    padding: .55rem .8rem;
    font-size: .85rem;
    margin-bottom: .9rem;
}

.ok-box {
    background: color-mix(in srgb, var(--success) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
    color: var(--text);
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .88rem;
    margin-bottom: .9rem;
}

/* ---------- control panel ---------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.hint-s { color: var(--text-dim); font-size: .78rem; margin-top: .25rem; }

.check {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    margin-bottom: .35rem;
    cursor: pointer;
}

.check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

code {
    font-family: Consolas, "Courier New", monospace;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 4px;
    padding: .1rem .35rem;
    font-size: .85em;
    direction: ltr;
    display: inline-block;
}

.row-actions { display: flex; gap: .3rem; align-items: center; flex-wrap: nowrap; }
.row-actions form { display: inline; }

.mini {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 5px;
    padding: .2rem .5rem;
    font-size: .78rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    display: inline-block;
}

.mini:hover { border-color: var(--primary); color: var(--text); }
.mini.danger:hover { border-color: var(--danger); color: var(--danger); }

.admin-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.admin-actions form { display: inline; }

/* one-time password reveal */
.secret-box {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
    border-radius: 10px;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    max-width: 520px;
}

.secret-head { font-weight: 700; font-size: .9rem; margin-bottom: .6rem; }
.secret-row { display: flex; gap: .6rem; align-items: center; margin-bottom: .3rem; font-size: .88rem; }
.secret-row .dim { min-width: 90px; }
code.big { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; padding: .25rem .6rem; }

/* ---------- permission editor ---------- */
.perm-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 .7rem;
}

.perm-group {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: .8rem;
    overflow: hidden;
}

.perm-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    background: var(--head-bg);
    border-bottom: 1px solid var(--border);
}

.perm-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: .2rem;
    padding: .6rem;
}

.perm {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    padding: .45rem .55rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s;
}

.perm:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.perm input { margin-top: .18rem; width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex: none; }
.perm-body { display: flex; flex-direction: column; }
.perm-title { font-size: .88rem; font-weight: 600; }
.perm-hint { font-size: .76rem; color: var(--text-dim); line-height: 1.35; }

.save-bar {
    display: flex;
    gap: .6rem;
    align-items: center;
    position: sticky;
    bottom: 0;
    background: var(--content-bg);
    padding: .8rem 0;
    border-top: 1px solid var(--border);
    margin-top: .6rem;
}

/* ---------- theme picker ---------- */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .7rem;
}

.theme-card {
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: .55rem;
    cursor: pointer;
    display: block;
    transition: border-color .15s, transform .15s;
}

.theme-card:hover { transform: translateY(-2px); }
.theme-card.on { border-color: var(--primary); }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }

.swatch {
    display: flex;
    align-items: center;
    gap: .3rem;
    height: 52px;
    border-radius: 7px;
    padding: 0 .55rem;
    margin-bottom: .45rem;
    border: 1px solid rgba(127, 127, 127, .25);
}

.swatch .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.swatch .bar { flex: 1; height: 20px; border-radius: 4px; }
.theme-name { font-size: .82rem; font-weight: 600; }

.pager { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.9rem; justify-content: center; color: var(--text-dim); font-size: 0.86rem; }

/* ---------- login ---------- */
.login-wrap { max-width: 380px; margin: 8vh auto; width: 100%; }
.login-wrap .card-s { padding: 1.6rem; }
.login-wrap h1 { font-size: 1.3rem; font-weight: 700; text-align: center; margin: 0 0 0.3rem; }
.login-wrap .sub { text-align: center; color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1.3rem; }

.field { margin-bottom: 0.9rem; }
.field label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.3rem; }

.field input {
    width: 100%;
    background: var(--content-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    box-sizing: border-box;
    font-family: inherit;
}

.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99, 102, 241, .25); }

/*  القوائم المنسدلة كانت بلا تنسيقٍ إطلاقاً — عنصر النظام الخام: صغيرٌ فاتحٌ على
    خلفيّةٍ داكنة، لا يشبه بقيّة الحقول ولا يكاد يُرى. وقد بلغ الأمر أن حقل الحساب
    الفرعي بدا وكأنه لا يظهر أصلاً وهو ظاهر.
    السهم مرسومٌ بـSVG مضمَّن كـdata: — السياسة تمنع أي طلبٍ لمضيفٍ خارجيّ.        */
.field select {
    width: 100%;
    background: var(--content-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 0.6rem 2rem 0.6rem 0.8rem;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b93a7' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.8rem center;
    background-size: 11px;
}

.field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99, 102, 241, .25); }

/*  زوجٌ في صفٍّ واحد بعمودين ثابتين — لا auto-fit.
    مع auto-fit يختفي أحدُ الحقلين فيمتدّ الثاني على العرض كلّه ويتغيّر موضعه؛
    وبعمودين ثابتين يبقى كلٌّ في عموده مهما اختفى جاره. وهي العلّة نفسها التي
    عولجت في شاشة السندات: «ما يصير شي كدام شي». */
.fpair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem .8rem;
}

@media (max-width: 640px) {
    .fpair { grid-template-columns: 1fr; }
}

/* «تذكّرني». The box comes first in source order, so RTL puts it on the right of its label. */
.check { display: flex; align-items: center; gap: .5rem; margin: -.15rem 0 1rem; }
.check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primary); cursor: pointer; }
.check label { margin: 0; font-size: .88rem; color: var(--text); cursor: pointer; user-select: none; }
.check input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.err {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #FCA5A5;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
    margin-bottom: 0.9rem;
}

.readonly-note { color: var(--text-dim); font-size: 0.78rem; text-align: center; margin-top: 1rem; }

/* ---------- طلبات البيع ---------- */
.ok-note {
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .4);
    color: var(--success);
    border-radius: 6px;
    padding: .6rem .8rem;
    font-size: .88rem;
    margin-bottom: .9rem;
}

.ord-head { display: flex; gap: .8rem; flex-wrap: wrap; }
.ord-head .field { flex: 1 1 12rem; }

.ord-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .8rem 0; }
.ord-total { margin-inline-start: auto; color: var(--text-dim); font-size: .9rem; }
.ord-total b { color: var(--text); font-size: 1.05rem; }

/* الحقول داخل الجدول تملأ خليّتها — عرضٌ ثابت يكسر التخطيط على الشاشات الضيّقة */
#lines input, #lines select {
    width: 100%;
    box-sizing: border-box;
    background: var(--content-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: .4rem .5rem;
    font-family: inherit;
    font-size: .9rem;
}

#lines input:focus, #lines select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .25);
}

.ord-stock { color: var(--text-dim); font-size: .74rem; margin-top: .2rem; }

/* ---------- صندوق قابل للكتابة والتصفية ---------- */
.combo { position: relative; }

.combo-text {
    width: 100%;
    box-sizing: border-box;
    background: var(--content-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: .45rem .6rem;
    font-family: inherit;
    font-size: .92rem;
}

.combo-text:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99, 102, 241, .25); }

.combo-list {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    top: calc(100% + 2px);
    margin: 0;
    padding: .25rem;
    list-style: none;
    max-height: 15rem;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.combo-list li {
    padding: .4rem .55rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-list li:hover, .combo-list li.on { background: var(--primary); color: #fff; }
.combo-list .combo-none { color: var(--text-dim); cursor: default; }
.combo-list .combo-none:hover { background: none; color: var(--text-dim); }

/* الأرقام تُقرأ يساراً-يميناً حتى داخل صفحة عربية */
.ord-code { direction: ltr; text-align: center; }

/* ---------- مجموعة أزرار متجاورة (نوع الدفع، العملة) ---------- */
.field-label { font-size: .85rem; color: var(--text-dim); margin-bottom: .3rem; }

.seg { display: flex; gap: .35rem; }

/* الزرّ نفسه مخفيٌّ لا محذوف: الحذف يُخرجه من ترتيب Tab ومن قارئات الشاشة */
.seg input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.seg label {
    flex: 1;
    text-align: center;
    padding: .5rem .5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--content-bg);
    color: var(--text-dim);
    cursor: pointer;
    font-size: .9rem;
    white-space: nowrap;
    user-select: none;
    transition: background .12s, color .12s, border-color .12s;
}

.seg label:hover { border-color: var(--primary); color: var(--text); }

.seg input:checked + label {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}

.seg input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }

/* خمسة خيارات لا تسع سطراً واحداً على الهاتف. flex:1 مع الالتفاف يترك آخر سطرٍ
   ممدوداً على العرض كلّه، فيُلغى ويُترك كلُّ خيارٍ بعرض نصّه. */
.seg-wrap { flex-wrap: wrap; }
.seg-wrap label { flex: 0 1 auto; padding-inline: .9rem; }

/* ---------- نموذجٌ مقسَّم إلى بطاقات (طلب السند) ----------
   بطاقةٌ لكلّ مجموعةٍ من الحقول بدل شريطٍ طويلٍ واحد: العين تجد الحقل بموضعه في
   المجموعة لا بالعدّ من الأعلى، والشاشة الصغيرة تطوي المجموعات لا الحقول. */
.fcard {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .9rem 1rem 1rem;
    margin: 0 0 .8rem;
}

.fcard-h {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-dim);
    margin: 0 0 .7rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--border);
}

/* ‏auto-fit مع حدٍّ أدنى: عمودان على الحاسبة وواحدٌ على الهاتف، بلا نقطة قطعٍ مكتوبة */
.fgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .55rem .8rem;
}

.fgrid .span2 { grid-column: 1 / -1; }

/* حقلٌ ومعه أزراره — الحقل يأخذ ما بقي والأزرار بعرض نصّها */
.withbtn { display: flex; gap: .3rem; align-items: stretch; }
.withbtn input { flex: 1 1 auto; min-width: 0; }

.btn-s {
    flex: 0 0 auto;
    background: var(--content-bg);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 .55rem;
    font-family: inherit;
    font-size: .78rem;
    white-space: nowrap;
    cursor: pointer;
}

.btn-s:hover { border-color: var(--primary); color: var(--text); }

/* حقلٌ محسوب: يُقرأ ولا يُكتب ولا يقف عنده الانتقال */
.ro {
    background: var(--content-bg) !important;
    color: var(--text-dim);
    font-weight: 700;
    cursor: default;
}

.fbar {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: .2rem;
}

.fbar .readonly-note { margin: 0; }

/* عنوان قسمٍ داخل الصفحة — «قوائم البيع» و«السندات» في «طلباتي» */
.sec-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dim);
    margin: 1.4rem 0 .6rem;
}
.ord-no { color: var(--text-dim); }

.ord-del {
    background: none;
    border: 1px solid var(--border);
    color: var(--danger);
    border-radius: 6px;
    cursor: pointer;
    padding: .3rem .5rem;
    font-family: inherit;
}

.ord-del:hover { background: rgba(239, 68, 68, .12); }

.pill { border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; white-space: nowrap; }
.pill.st-ok   { background: rgba(16, 185, 129, .15); color: var(--success); }
.pill.st-no   { background: rgba(239, 68, 68, .15);  color: var(--danger); }
.pill.st-wait { background: rgba(245, 158, 11, .15); color: var(--warning); }

footer.foot { border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.78rem; padding: 0.8rem 1rem; text-align: center; }

/* =========================================================================
   MOBILE
   The drawer, the card-style tables and the touch sizing all live here so the
   desktop rules above stay readable.
   ========================================================================= */

.desktop-only { display: inherit; }
.mobile-only { display: none; }

.nav-toggle,
.nav-close { display: none; }

/* The scrim only exists for the drawer. `[hidden]` outranks the mobile rule that
   turns it on, so JS toggling the attribute is enough to hide it. */
.nav-scrim { display: none; }
.nav-scrim[hidden] { display: none; }

@media (max-width: 820px) {

    /* ---------- top bar + drawer ---------- */
    .topbar {
        padding: .5rem .7rem;
        padding-top: calc(.5rem + env(safe-area-inset-top));
        gap: .6rem;
        /* The drawer lives inside this header, and `position: sticky + z-index`
           makes the header a stacking context — so the drawer can never paint
           above anything the header itself sits below. The whole header must
           therefore outrank the scrim, or the scrim covers the drawer and eats
           every tap on it. */
        z-index: 60;
    }

    .desktop-only { display: none !important; }
    .mobile-only { display: flex; }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex: none;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 9px;
        cursor: pointer;
        padding: 0;
    }

    /* three bars drawn from one element */
    .nav-toggle .bars,
    .nav-toggle .bars::before,
    .nav-toggle .bars::after {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--text);
        border-radius: 2px;
        position: relative;
    }

    .nav-toggle .bars::before,
    .nav-toggle .bars::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
    }

    .nav-toggle .bars::before { top: -6px; }
    .nav-toggle .bars::after { top: 6px; }

    .navlinks {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;                 /* RTL: the right edge, under the ☰ button */
        width: min(84vw, 320px);
        background: var(--sidebar-bg);
        border-inline-end: 1px solid var(--border);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;           /* the desktop centring would stack the links mid-screen */
        gap: .15rem;
        padding: .8rem .7rem calc(1rem + env(safe-area-inset-bottom));
        padding-top: calc(.8rem + env(safe-area-inset-top));
        overflow-y: auto;
        z-index: 2;
        /* Transforms are physical, never mirrored by dir="rtl": +X is right on
           screen, which is off-canvas for a drawer parked at the right edge. */
        transform: translateX(100%);
        transition: transform .22s ease;
        box-shadow: -8px 0 24px rgba(0, 0, 0, .35);
    }

    body.nav-open .navlinks { transform: translateX(0); }

    .navlinks a {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .85rem .8rem;
        font-size: 1rem;
        border-radius: 9px;
        min-height: 48px;
        box-sizing: border-box;
    }

    .navlinks a .ico { font-size: 1.1rem; width: 1.5rem; text-align: center; }

    .nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .3rem .5rem 1rem;
        border-bottom: 1px solid var(--border);
        margin-bottom: .6rem;
    }

    .nav-head .who { display: inline; font-size: .95rem; color: var(--text); }

    .nav-close {
        display: block;
        background: transparent;
        border: none;
        color: var(--text-dim);
        font-size: 1.3rem;
        line-height: 1;
        padding: .35rem .5rem;
        cursor: pointer;
    }

    .nav-logout { margin-top: auto; padding-top: 1rem; }
    .nav-logout .btn-out { width: 100%; padding: .75rem; font-size: .95rem; }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 40;                           /* below the header, above the page */
    }

    .brand { font-size: 1rem; }

    /* ---------- layout ---------- */
    main {
        padding: .9rem .7rem 2rem;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    h1.page-title { font-size: 1.15rem; }

    .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
    .kpi { padding: .7rem .8rem; }
    .kpi .value { font-size: 1.25rem; }
    .kpi .label { font-size: .76rem; }

    .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
    .tile { padding: .85rem; }

    /* ---------- filters: one full-width block ---------- */
    .filters { gap: .5rem; }
    .filters .f { flex: 1 1 100%; }

    /* التاريخان جنباً إلى جنب: أربعة حقول كلٌّ بسطر كانت تدفع النتائج خارج الشاشة */
    .filters .f.half { flex: 1 1 calc(50% - .25rem); min-width: 0; }

    /* ---------- quick date ranges ---------- */
    .chips { gap: .4rem; margin-bottom: .7rem; }

    .chip {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: .45rem .95rem;
        font-size: .88rem;
    }

    .filters input,
    .filters select {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 16px;          /* anything smaller makes iOS zoom on focus */
        padding: .6rem .7rem;
    }

    /* زرّا الإجراء يتقاسمان سطراً واحداً بعرضين متساويين بدل مقاسين مختلفين */
    .filters .f:has(button),
    .filters .f:has(.btn-c) { flex: 1 1 calc(50% - .25rem); }

    .filters .f > .btn-p,
    .filters .f > .btn-c { width: 100%; text-align: center; }

    .btn-p, .btn-c {
        padding: .65rem 1.1rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .field input { font-size: 16px; }

    /* a thumb needs more than 18px, and the label is the rest of the target */
    .check { padding: .35rem 0; }
    .check input { width: 22px; height: 22px; }
    .check label { font-size: .95rem; }

    /* ---------- tables become cards ---------- */
    table.cards { display: block; white-space: normal; }
    table.cards thead { display: none; }
    table.cards tbody, table.cards tfoot { display: block; }

    table.cards tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: .55rem;
        padding: .2rem .1rem;
        background: var(--card-bg);
    }

    table.cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: .8rem;
        border: none;
        padding: .4rem .8rem;
        font-size: .92rem;
        text-align: start;
    }

    /* the label comes from data-label on the cell, so no extra markup per row */
    table.cards td::before {
        content: attr(data-label);
        color: var(--text-dim);
        font-size: .78rem;
        font-weight: 600;
        flex: none;
    }

    table.cards td:empty { display: none; }
    table.cards td.wrap { max-width: none; }

    /* A money cell holds a bare text node, which becomes an *anonymous* flex item — CSS
       cannot select it, so the `> *` rule that used to force LTR never reached the number
       and "-74,994,750" came out as "74,994,750-". `direction` is inherited, so setting it
       on the cell does reach the anonymous item; `row-reverse` then puts the label back on
       the right where an Arabic reader expects it. */
    table.cards td.num {
        direction: ltr;
        flex-direction: row-reverse;
        text-align: start;
    }

    /* ---------- document actions ----------
       Inside a card row: one row of equal buttons across the bottom of the card, with
       no data-label — the icons say what they are and the label only stole width. */
    table.cards td.doc-actions {
        display: flex;
        gap: .5rem;
        padding: .5rem .7rem .65rem;
        border-top: 1px solid var(--border);
        margin-top: .25rem;
    }

    table.cards td.doc-actions::before { display: none; }
    table.cards td.doc-actions .act { flex: 1; min-height: 44px; font-size: .88rem; }

    /* On a details page the bar leaves the flow and pins to the bottom edge, where a
       thumb actually reaches — the buttons used to sit above the fold behind a wrapped
       title, which is what made printing and sharing feel out of reach on a phone. */
    .doc-actions.bar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 30;
        background: var(--sidebar-bg);
        border-top: 1px solid var(--border);
        padding: .55rem .7rem;
        padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
        gap: .5rem;
        flex-wrap: nowrap;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .3);
    }

    .doc-actions.bar .act { flex: 1; min-height: 48px; font-size: .9rem; padding: .4rem .5rem; }

    /* keeps the last card clear of the pinned bar */
    .bar-spacer { display: block; height: calc(70px + env(safe-area-inset-bottom)); }

    /* first cell of each card reads as its title */
    table.cards tbody td:first-child {
        border-bottom: 1px solid var(--border);
        margin-bottom: .2rem;
        padding-top: .6rem;
        font-weight: 700;
        font-size: 1rem;
    }

    table.cards tbody tr:hover { background: var(--card-bg); }

    /* ---------- أسطر طلب البيع داخل بطاقة الهاتف ----------

       الخليّة هنا flex. حقلُ الكود عنصرٌ مباشر فيها فيأخذ ما بقي من العرض، أمّا الاسم
       فداخل <div class="combo"> — وهو عنصرُ flex بلا نموّ فينكمش إلى محتواه. قِيس على
       شاشة هاتف: الكود ٣٣٣ بكسل والاسم ١٧٠، أي أنّ أهمّ حقلٍ في السطر كان أضيقَ نصفاً
       من رقمٍ من ثلاث خانات. والسطر الذي يحمل الرصيد يُنزَل تحته لا بجانبه.          */
    #lines td:has(.combo) { flex-wrap: wrap; }
    #lines td .combo { flex: 1 1 auto; min-width: 0; }
    #lines td .ord-stock { flex: 1 1 100%; text-align: start; }

    /*  ١٦ بكسل حدٌّ لا اختيار: أقلُّ منه يجعل iOS يُقرّب الصفحة عند دخول الحقل، فتخرج
        بقيّة السطر خارج الشاشة ويُضطرّ المستخدم إلى التصغير بعد كلّ خانة. */
    #lines input, #lines select { font-size: 16px; padding: .5rem .6rem; }

    table.cards tfoot tr {
        background: var(--head-bg);
        border-color: var(--primary);
    }

    table.cards tfoot td { font-weight: 700; }
    table.cards tfoot td:first-child { border-bottom: 1px solid var(--border); }

    .table-wrap:has(table.cards) {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    /* wide report tables keep scrolling, with a nudge that they can be swiped */
    .table-wrap { -webkit-overflow-scrolling: touch; }

    .table-wrap.scrollable { position: relative; }

    .table-wrap.scrollable::after {
        content: "← اسحب";
        position: absolute;
        top: .35rem;
        inset-inline-start: .45rem;
        background: var(--primary);
        color: #fff;
        font-size: .68rem;
        font-weight: 700;
        padding: .12rem .45rem;
        border-radius: 999px;
        pointer-events: none;
        opacity: .85;
    }

    /* ---------- control panel ---------- */
    .form-grid { grid-template-columns: 1fr; gap: .8rem; }
    .perm-items { grid-template-columns: 1fr; }
    .perm { padding: .6rem .55rem; }
    .perm input { width: 20px; height: 20px; }
    .check input { width: 20px; height: 20px; }
    .theme-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

    .row-actions { flex-wrap: wrap; gap: .35rem; }
    .mini { padding: .45rem .7rem; font-size: .82rem; min-height: 36px; }

    .admin-actions .btn-c { flex: 1 1 auto; text-align: center; }

    .save-bar {
        padding: .7rem 0;
        padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
    }

    .save-bar .btn-p { flex: 1; }

    .secret-row { flex-wrap: wrap; gap: .2rem .6rem; }
    .secret-row .dim { min-width: 0; flex: 1 1 100%; }
    code.big { font-size: 1.15rem; }

    .group-head { font-size: .98rem; }
    .pager { flex-wrap: wrap; }
    .pager .btn-c { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 400px) {
    html { font-size: 14px; }
    .kpis { grid-template-columns: 1fr 1fr; }
    .tiles { grid-template-columns: 1fr; }
    .theme-grid { grid-template-columns: 1fr 1fr; }
}

/* Respect a user who asks the system to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .navlinks, .tile, .theme-card { transition: none; }
}