/* 📐 ن٧-أ «التبسيط» (بأمر المالك 2026-09-16) — طبقةُ عرضٍ واحدة تقرؤها الشاشات كلُّها:
   شريطُ المراحل، مجموعاتُ الوارد، الفعلُ الأساسي، بطاقاتُ الجداول على الهاتف، والشريطُ السفلي.
   لا لونَ هنا إلا من متغيّرات layout (docs/ui-style.md) — ولا مكدّسَ خطوطٍ ثانٍ (var(--nafitha-font)). */

/* ── 🪜 شريطُ المراحل (من Services\RequestStage) ── */
.stage-bar { list-style: none; display: flex; gap: .3rem; padding: 0; margin: .5rem 0; overflow-x: auto; scrollbar-width: thin; }
.stage-bar li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 1rem; border: 1px solid var(--border);
                background: var(--muted); font-size: .8rem; white-space: nowrap; color: var(--muted-fg); }
.stage-bar li .n { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--bg);
                   border: 1px solid var(--border); font-size: .72rem; font-weight: 600; }
.stage-bar li.st-done { color: var(--ok); }
.stage-bar li.st-done .n { border-color: var(--ok); color: var(--ok); }
.stage-bar li.is-current { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); font-weight: 600; }
.stage-bar li.is-current .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.stage-bar li.st-skipped { opacity: .55; text-decoration: line-through; }
.stage-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .55rem .05rem .2rem; border-radius: 1rem; font-size: .78rem;
               border: 1px solid var(--primary); background: var(--primary); color: var(--primary-fg); white-space: nowrap; }
.stage-badge .n { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 600; }
.stage-badge.st-done { background: var(--muted); color: var(--ok); border-color: var(--border); }
.stage-badge.st-done .n { background: var(--ok); }

/* ── 📥 الوارد: ثلاثُ مجموعات وفعلٌ أساسيٌّ واحد ── */
details.filters { margin: 0 0 .8rem; font-size: .85rem; }
details.filters summary { cursor: pointer; color: var(--muted-fg); list-style: none; }
details.filters summary::-webkit-details-marker { display: none; }
details.filters p { margin: .3rem 0 0; }
.group h2 { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 .5rem; }
.group-action h2 { color: var(--primary); }
.group .count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 1rem;
                background: var(--muted); border: 1px solid var(--border); font-size: .8rem; font-weight: 600; color: var(--fg); }
.group-action .count { background: var(--accent); border-color: var(--accent); color: #fff; }
details.group-done summary { cursor: pointer; list-style: none; }
details.group-done summary::-webkit-details-marker { display: none; }
details.group-done summary h2 { display: inline-flex; color: var(--muted-fg); }
details.group-done summary h2::after { content: '▾'; font-size: .8rem; }
details.group-done[open] summary h2::after { content: '▴'; }
.t-wrap { overflow-x: auto; }
td.subject .title { font-weight: 600; color: var(--fg); }
td.subject .meta { font-size: .8rem; margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
td.act { white-space: nowrap; text-align: end; }
a.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 5.5rem; padding: 0 1rem; border-radius: 6px;
        background: var(--accent); color: #fff; font-weight: 500; text-decoration: none; white-space: nowrap; vertical-align: middle; }
a.btn:hover { background: var(--accent-strong); color: #fff; text-decoration: none; }
a.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
a.btn.ghost:hover { background: var(--muted); }
details.more { display: inline-block; position: relative; margin-inline-start: .3rem; vertical-align: middle; }
details.more summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted-fg); }
details.more summary::-webkit-details-marker { display: none; }
details.more > div { position: absolute; inset-inline-end: 0; top: 100%; z-index: 5; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
                     padding: .5rem .9rem; display: flex; flex-direction: column; gap: .4rem; min-width: 10rem; text-align: start; box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* ── 🧰 الإدارة: فعلٌ أساسيٌّ واحد أعلى الصفحة، والنموذجُ في طيّة «＋ إضافة» ── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.page-head h1 { margin: 0; }
details.add { margin-bottom: 1rem; }
details.add > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 1.2rem;
                        border-radius: 6px; background: var(--accent); color: #fff; font-weight: 500; }
details.add > summary::-webkit-details-marker { display: none; }
details.add > summary:hover { background: var(--accent-strong); }
details.add[open] > summary { background: var(--primary); color: var(--primary-fg); }
details.add > .card, details.add > form { margin-top: .8rem; }
details.edit summary { list-style: none; cursor: pointer; color: var(--accent); text-decoration: underline; }
details.edit summary::-webkit-details-marker { display: none; }
details.edit > form { margin-top: .5rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); min-width: 16rem; }
.role-chip { display: inline-block; padding: .1rem .55rem; border-radius: 1rem; font-size: .78rem; border: 1px solid var(--border); background: var(--muted); }
.role-chip.authority { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

/* ── 📱 الهاتف (§٤-د): الشريطُ الجانبي يختفي، شريطُ تنقّلٍ سفليٌّ ثابت، والجداولُ بطاقات ── */
:root { --bottom-nav-h: 0px; }
@media (max-width: 820px) { :root { --bottom-nav-h: 56px; } }   /* ن٧-ب: شريطُ الفعل الأساسي يرتفع فوق تبويبات الهاتف */
.mobile-nav { display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 50; background: var(--primary); color: var(--primary-fg);
              border-top: 1px solid rgba(237,235,224,.15); padding-bottom: env(safe-area-inset-bottom); }
.mobile-nav > a, .mobile-nav > details > summary { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px;
              gap: .1rem; font-size: .7rem; color: var(--primary-fg); text-decoration: none; cursor: pointer; list-style: none; border-top: 3px solid transparent; }
.mobile-nav > details > summary::-webkit-details-marker { display: none; }
.mobile-nav .i { font-size: 1.2rem; line-height: 1; }
.mobile-nav > a.active { color: #fff; border-top-color: var(--accent); }
.mobile-nav > details { flex: 1; display: flex; position: relative; }
.mobile-nav > details > div { position: absolute; bottom: 100%; inset-inline-end: 0; background: var(--bg); color: var(--fg); border: 1px solid var(--border);
              border-radius: var(--radius) var(--radius) 0 0; padding: .8rem 1rem; min-width: 14rem; box-shadow: 0 -4px 12px rgba(0,0,0,.1); }
.mobile-nav > details > div .who { font-weight: 600; }
.mobile-nav > details > div .org { color: var(--muted-fg); font-size: .85rem; }
.mobile-nav > details > div button { width: 100%; margin-top: .6rem; }

@media (max-width: 820px) {
    .shell { flex-direction: column; }
    .sidebar { display: none; }
    .content { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    main { padding: 1rem; }
    .mobile-nav { display: flex; }
    /* أهدافُ اللمس ≥ 44px */
    button, a.btn, details.add > summary { min-height: 44px; height: 44px; }
    details.more summary { width: 44px; height: 44px; }
    input, select { height: 44px; }
    .topbar { padding: .6rem 1rem; }
    /* الجداولُ الطويلة بطاقاتٌ — data-label على كل خلية */
    table.t-cards thead { display: none; }
    table.t-cards, table.t-cards tbody, table.t-cards tr, table.t-cards td { display: block; width: 100%; }
    table.t-cards tr { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem; margin-bottom: .6rem; background: var(--bg); }
    table.t-cards td { border: 0; padding: .3rem 0; display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
    table.t-cards td[data-label]::before { content: attr(data-label); color: var(--muted-fg); font-size: .78rem; flex: 0 0 auto; }
    table.t-cards td.subject { display: block; }
    table.t-cards td.act { justify-content: flex-start; padding-top: .5rem; }
    table.t-cards td.act a.btn { flex: 1; }
    table.t-cards td:empty { display: none; }
    table.t-cards tbody tr:hover td { background: transparent; }
    .stage-bar { margin-inline: -1rem; padding-inline: 1rem; }
}
@media print { .mobile-nav { display: none; } }