/* ---------------------------------------------------------------
0. THEME TOKENS
This layer was written in literal colours, so the dark theme only
half arrived: the app flipped its own surfaces to #07131f while
every card this layer draws stayed white. 276 of those literals
sat in the file, against 118 hand-written dark overrides trying
to chase them.
Chasing them was the wrong shape. A surface, a line and a piece
of text each get one name here, and the name is what the rules
below use - so the theme is decided in one place instead of being
re-decided every time a card is added.
Only these three kinds are named. White that sits on gold or navy
is not a surface; it is contrast, and it stays literal.
--------------------------------------------------------------- */
#dashboard-view.rd-shell,
html.rd-shell {
--rd-surface: #ffffff;
--rd-surface-soft: #f8fafb;
--rd-line: #dce5eb;
--rd-line-soft: #eef2f6;
--rd-ink: #0d2c4a;
--rd-muted: #667786;
--rd-faint: #94a3b4;
--rd-gold-soft: var(--anfal-gold-075, #f4ecdf); /* «ذهبي» القالب: أزرق في الكحلي، ذهبي في غيره */
--rd-gold-line: var(--anfal-gold-200, #dec79d);
--rd-gold-ink: var(--anfal-gold-700, #8a6b2f);
/* شريط تجميع: عنوان قيدٍ أو مجموعة. كان رمليًا يبتلع السطر - صار
سطحًا كحليًّا باهتًا من عائلة أسطح النظام. */
--rd-journal-band: #eff4f9;
}
html[data-theme="dark"] #dashboard-view.rd-shell,
html[data-theme="dark"].rd-shell {
--rd-surface: #0d2133;
--rd-surface-soft: #10283d;
--rd-line: #274158;
--rd-line-soft: #1e3346;
--rd-ink: #edf4f8;
--rd-muted: #a8bac7;
--rd-faint: #8fa3b8;
--rd-gold-soft: color-mix(in srgb, var(--anfal-gold-500, #b89255) 18%, #0b1622);
--rd-gold-line: color-mix(in srgb, var(--anfal-gold-500, #b89255) 45%, #0b1622);
--rd-gold-ink: var(--anfal-gold-300, #e8c48f);
--rd-journal-band: #15304a;
}
@charset "UTF-8";
/* ---------------------------------------------------------------
Anfal Custody - UI Redesign Layer (bold)
---------------------------------------------------------------
SAFETY CONTRACT
Every rule is scoped to `#dashboard-view.rd-shell`.
That class is set in app.js:1091 only when `user.role !== "employee"`.
Employee sessions match nothing here - their UI is untouched.
ROLLBACK
bash ~/anfal-custody/backups/RESTORE-POINT-bold-redesign-*/RESTORE.sh
or drop the to this file from index.html.
Comments are ASCII-only on purpose: multi-byte box characters in a
stylesheet served without a charset get mangled on decode and can
swallow the rule that follows.
Created 2026-08-26
--------------------------------------------------------------- */
#dashboard-view.rd-shell {
--rd-rail: var(--anfal-gold-500); /* كان #c9a227 رقمًا خارج القالب */
--rd-divider: #dce5eb;
--rd-sb: #ffffff;
--rd-sb-ink: #5a6c7f;
--rd-sb-ink-on: #0d2c4a;
--rd-sb-hover: #f8fafb;
--rd-sb-on: #f1f4f7;
}
/* ---------------------------------------------------------------
1. SIDEBAR - navy slab becomes a light rail
The nav should recede; the work should lead.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .workspace-header {
background: var(--rd-surface);
border-inline-start: 1px solid var(--rd-line);
box-shadow: none;
}
#dashboard-view.rd-shell .workspace-welcome p {
color: var(--anfal-gold-600);
font-size: var(--fs-10);
font-weight: var(--anfal-weight-semi);
letter-spacing: .06em;
}
#dashboard-view.rd-shell .workspace-welcome h2 {
color: var(--rd-ink);
font-size: var(--fs-15);
font-weight: var(--anfal-weight-strong);
}
#dashboard-view.rd-shell .app-navigation button {
position: relative;
/* المقاس من القشرة المشتركة: نظامان لشركةٍ واحدة لا يختلفان في
ارتفاع بندٍ ولا في وزن خطّه. */
min-height: var(--ui-nav-h);
padding: var(--ui-nav-pad);
gap: var(--ui-nav-gap);
border-radius: var(--ui-nav-radius);
border-color: transparent;
background: transparent;
color: var(--anfal-slate-600);
font-size: var(--ui-nav-fs);
font-weight: var(--ui-nav-fw);
transition: background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .app-navigation button span,
#dashboard-view.rd-shell .app-navigation button small {
color: inherit;
}
#dashboard-view.rd-shell .app-navigation button:hover:not([disabled]) {
background: var(--rd-surface-soft);
color: var(--rd-ink);
}
#dashboard-view.rd-shell .app-navigation button svg {
stroke: currentColor;
opacity: .85;
}
/* Active item: tinted row plus a gold rail, not a filled block */
#dashboard-view.rd-shell .app-navigation button.is-active,
#dashboard-view.rd-shell .app-navigation button[aria-current="page"] {
background: var(--rd-surface-soft);
border-color: transparent;
color: var(--rd-ink);
font-weight: var(--anfal-weight-semi);
}
/* الشريط الجانبي على «أنا هنا» أُلغي بطلب المالك (٢٨ سبتمبر ٢٠٢٦):
الخلفية والوزن يقولان الموضع، والشريط زيادةٌ تزاحم شجرة القائمة. */
#dashboard-view.rd-shell .app-navigation button.is-active::after,
#dashboard-view.rd-shell .app-navigation button[aria-current="page"]::after { content: none; }
#dashboard-view.rd-shell .app-navigation button.is-active svg,
#dashboard-view.rd-shell .app-navigation button[aria-current="page"] svg {
opacity: 1;
}
#dashboard-view.rd-shell .nav-group-label {
color: var(--rd-faint);
font-size: var(--fs-10);
font-weight: var(--anfal-weight-semi);
letter-spacing: .08em;
}
#dashboard-view.rd-shell .workspace-header img {
filter: none;
/* شبكة أمان لكل المقاسات: عرض مفروض مع ارتفاع مقصوص كان يمدّ
الشعار بدل أن يصغّره. contain يُحيطه بفراغ ولا يشوّه نسبته. */
object-fit: contain;
}
#dashboard-view.rd-shell .workspace-user {
border-top: 1px solid var(--rd-line);
}
#dashboard-view.rd-shell .workspace-user #user-role {
color: var(--rd-muted);
font-size: var(--fs-11);
}
#dashboard-view.rd-shell .workspace-user button {
border-color: transparent;
background: transparent;
border-radius: var(--r-8);
color: var(--anfal-slate-600);
}
#dashboard-view.rd-shell .workspace-user button span {
color: inherit;
}
#dashboard-view.rd-shell .workspace-user button:hover {
background: var(--rd-surface-soft);
color: var(--rd-ink);
}
#dashboard-view.rd-shell #logout-button:hover {
background: var(--anfal-red-075);
color: var(--anfal-rejected);
}
/* ---------------------------------------------------------------
2. STAT STRIPS - separate cards become one segmented object
Applies to every summary row across the sub-pages.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .admin-kpi-grid,
#dashboard-view.rd-shell .custody-status-summary,
#dashboard-view.rd-shell .invoice-status-summary,
#dashboard-view.rd-shell .users-summary-grid {
display: flex;
gap: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--rd-line);
border-radius: var(--r-12);
background: var(--rd-surface);
box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
}
#dashboard-view.rd-shell .admin-kpi-grid > *,
#dashboard-view.rd-shell .custody-status-summary > *,
#dashboard-view.rd-shell .invoice-status-summary > *,
#dashboard-view.rd-shell .users-summary-grid > * {
position: relative;
flex: 1 1 0;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 7px;
padding: 16px 11px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: center;
transition: background .14s ease;
}
#dashboard-view.rd-shell .admin-kpi-grid > *:hover,
#dashboard-view.rd-shell .custody-status-summary > *:hover,
#dashboard-view.rd-shell .invoice-status-summary > *:hover,
#dashboard-view.rd-shell .users-summary-grid > *:hover {
background: var(--rd-surface-soft);
}
/* Hairline between segments */
#dashboard-view.rd-shell .admin-kpi-grid > * + *::before,
#dashboard-view.rd-shell .custody-status-summary > * + *::before,
#dashboard-view.rd-shell .invoice-status-summary > * + *::before,
#dashboard-view.rd-shell .users-summary-grid > * + *::before {
position: absolute;
inset-inline-end: 0;
top: 18%;
bottom: 18%;
width: 1px;
background: #dce5eb;
content: "";
}
/* Value leads, label follows */
#dashboard-view.rd-shell .admin-kpi-grid strong,
#dashboard-view.rd-shell .custody-status-summary strong,
#dashboard-view.rd-shell .invoice-status-summary strong,
#dashboard-view.rd-shell .users-summary-grid strong {
font-size: var(--fs-24);
font-weight: var(--anfal-weight-strong);
line-height: 1;
letter-spacing: -.02em;
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .admin-kpi-grid span:not(.admin-kpi-icon),
#dashboard-view.rd-shell .custody-status-summary span,
#dashboard-view.rd-shell .invoice-status-summary span,
#dashboard-view.rd-shell .users-summary-grid span {
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-medium);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .admin-kpi-grid small,
#dashboard-view.rd-shell .custody-status-summary small,
#dashboard-view.rd-shell .invoice-status-summary small,
#dashboard-view.rd-shell .users-summary-grid small {
font-size: var(--fs-10p5);
color: var(--rd-muted);
opacity: .72;
}
/* Icon sheds its tile - the glyph carries it, in gold */
#dashboard-view.rd-shell .admin-kpi-icon {
width: 30px;
height: 30px;
border-radius: 0;
background: transparent;
color: var(--anfal-gold-500);
}
#dashboard-view.rd-shell .admin-kpi-icon svg {
width: 23px;
height: 23px;
stroke-width: 1.7;
}
#dashboard-view.rd-shell .admin-kpi-grid article > div {
display: grid;
justify-items: center;
gap: 5px;
}
#dashboard-view.rd-shell .admin-kpi-grid article > div strong { order: 1; }
#dashboard-view.rd-shell .admin-kpi-grid article > div > span { order: 2; }
#dashboard-view.rd-shell .admin-kpi-grid article > div small { order: 3; }
/* The invoice summary doubles as a filter - keep it feeling pressable */
#dashboard-view.rd-shell .invoice-status-summary button {
cursor: pointer;
}
#dashboard-view.rd-shell .invoice-status-summary button.is-active {
background: var(--rd-journal-band, var(--anfal-line-quiet));
}
#dashboard-view.rd-shell .invoice-status-summary button.is-active::after {
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2.5px;
background: var(--rd-ink, #0d2c4a);
content: "";
}
@media (max-width: 1100px) {
#dashboard-view.rd-shell .admin-kpi-grid,
#dashboard-view.rd-shell .custody-status-summary,
#dashboard-view.rd-shell .invoice-status-summary,
#dashboard-view.rd-shell .users-summary-grid {
flex-wrap: wrap;
}
#dashboard-view.rd-shell .admin-kpi-grid > *,
#dashboard-view.rd-shell .custody-status-summary > *,
#dashboard-view.rd-shell .invoice-status-summary > *,
#dashboard-view.rd-shell .users-summary-grid > * {
flex-basis: 50%;
}
}
/* ---------------------------------------------------------------
3. FILTER BARS - panel becomes a single control row
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-filter-bar,
#dashboard-view.rd-shell .invoice-filter-bar,
#dashboard-view.rd-shell .statement-page-filters,
#dashboard-view.rd-shell .activity-filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 9px;
padding: 0;
border: 0;
background: transparent;
}
#dashboard-view.rd-shell .custody-filter-bar input,
#dashboard-view.rd-shell .custody-filter-bar select,
#dashboard-view.rd-shell .invoice-filter-bar input,
#dashboard-view.rd-shell .invoice-filter-bar select,
#dashboard-view.rd-shell .statement-page-filters input,
#dashboard-view.rd-shell .statement-page-filters select,
#dashboard-view.rd-shell .activity-filters input,
#dashboard-view.rd-shell .activity-filters select {
height: 34px;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface);
font-size: var(--fs-12);
transition: border-color .14s ease, box-shadow .14s ease;
}
#dashboard-view.rd-shell .custody-filter-bar input:focus,
#dashboard-view.rd-shell .custody-filter-bar select:focus,
#dashboard-view.rd-shell .invoice-filter-bar input:focus,
#dashboard-view.rd-shell .invoice-filter-bar select:focus,
#dashboard-view.rd-shell .statement-page-filters input:focus,
#dashboard-view.rd-shell .statement-page-filters select:focus,
#dashboard-view.rd-shell .activity-filters input:focus,
#dashboard-view.rd-shell .activity-filters select:focus {
outline: none;
border-color: var(--anfal-gold-500);
box-shadow: 0 0 0 3px rgba(184, 146, 85, .1);
}
#dashboard-view.rd-shell .custody-filter-bar label,
#dashboard-view.rd-shell .invoice-filter-bar label {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
}
/* ---------------------------------------------------------------
4. TABLES
--------------------------------------------------------------- */
#dashboard-view.rd-shell .workspace-panel table thead th {
padding: 11px 14px;
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
background: var(--rd-surface-soft);
border-bottom: 1px solid var(--rd-line);
white-space: nowrap;
}
#dashboard-view.rd-shell .workspace-panel table tbody tr {
transition: background .1s ease;
}
#dashboard-view.rd-shell .workspace-panel table tbody tr:hover {
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .workspace-panel table tbody td {
padding: 11px 14px;
font-size: var(--fs-12);
vertical-align: middle;
}
#dashboard-view.rd-shell .workspace-panel table td strong,
#dashboard-view.rd-shell .workspace-panel table th strong {
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------
5. STATUS BADGES - bordered pills
State reads by shape and label, not fill alone.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .status-badge,
#dashboard-view.rd-shell .invoice-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border: 1px solid currentColor;
border-radius: var(--r-20);
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
}
/* ---------------------------------------------------------------
6. SETTINGS TABS
--------------------------------------------------------------- */
#dashboard-view.rd-shell .settings-tabs {
gap: 2px;
padding: 6px;
border-radius: var(--r-12);
}
#dashboard-view.rd-shell .settings-tabs button {
position: relative;
min-height: 38px;
border-radius: var(--r-8);
font-size: var(--fs-12);
font-weight: var(--anfal-weight-medium);
transition: background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .settings-tabs button:hover {
background: var(--rd-surface-soft);
color: var(--rd-ink);
}
#dashboard-view.rd-shell .settings-tabs button.is-active,
#dashboard-view.rd-shell .settings-tabs button[aria-selected="true"] {
background: var(--rd-surface-soft);
border-color: transparent;
color: var(--rd-ink);
font-weight: var(--anfal-weight-semi);
}
#dashboard-view.rd-shell .settings-tabs button.is-active::after,
#dashboard-view.rd-shell .settings-tabs button[aria-selected="true"]::after {
position: absolute;
inset-inline: 10px;
bottom: 3px;
height: 2.5px;
border-radius: var(--r-3);
background: var(--anfal-gold-500);
content: "";
}
/* ---------------------------------------------------------------
7. INVOICE STATUS TABS
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoice-status-tabs button {
position: relative;
border-radius: var(--r-8);
font-size: var(--fs-12);
transition: background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .invoice-status-tabs button.is-active {
background: var(--rd-surface-soft);
color: var(--rd-ink);
font-weight: var(--anfal-weight-semi);
}
/* ---------------------------------------------------------------
8. CARDS AND PANELS
--------------------------------------------------------------- */
#dashboard-view.rd-shell .admin-dashboard-card,
#dashboard-view.rd-shell .workspace-panel {
border-radius: var(--r-12);
box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
transition: box-shadow .18s ease;
}
#dashboard-view.rd-shell .admin-dashboard-card:hover {
box-shadow: 0 6px 20px rgba(16, 42, 67, .075);
}
/* ---------------------------------------------------------------
9. PAGE TOOLBAR
--------------------------------------------------------------- */
#dashboard-view.rd-shell .page-toolbar h1 {
font-size: var(--fs-21);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.02em;
color: var(--rd-ink);
}
#dashboard-view.rd-shell .page-toolbar p {
margin-top: 4px;
font-size: var(--fs-11p5);
color: var(--rd-muted);
}
/* ---------------------------------------------------------------
10. FOCUS
--------------------------------------------------------------- */
#dashboard-view.rd-shell button:focus-visible,
#dashboard-view.rd-shell a:focus-visible,
#dashboard-view.rd-shell input:focus-visible,
#dashboard-view.rd-shell select:focus-visible {
outline: 2px solid var(--anfal-gold-500);
outline-offset: 2px;
}
/* ---------------------------------------------------------------
11. DARK THEME
The sidebar returns to a dark surface; the rail stays gold.
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .workspace-header {
background: var(--anfal-dark-900);
border-inline-start-color: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .app-navigation button {
color: var(--anfal-steel);
}
html[data-theme="dark"] #dashboard-view.rd-shell .app-navigation button:hover:not([disabled]) {
background: rgba(255, 255, 255, .05);
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .app-navigation button.is-active,
html[data-theme="dark"] #dashboard-view.rd-shell .app-navigation button[aria-current="page"] {
background: rgba(255, 255, 255, .08);
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .workspace-welcome h2 {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .workspace-user button {
color: var(--anfal-steel);
}
html[data-theme="dark"] #dashboard-view.rd-shell .admin-kpi-grid,
html[data-theme="dark"] #dashboard-view.rd-shell .custody-status-summary,
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-status-summary,
html[data-theme="dark"] #dashboard-view.rd-shell .users-summary-grid {
background: var(--anfal-dark-800);
border-color: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .admin-kpi-grid strong,
html[data-theme="dark"] #dashboard-view.rd-shell .custody-status-summary strong,
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-status-summary strong,
html[data-theme="dark"] #dashboard-view.rd-shell .users-summary-grid strong {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .workspace-panel table thead th {
background: var(--anfal-dark-900);
border-bottom-color: var(--anfal-dark-600);
color: var(--anfal-steel);
}
html[data-theme="dark"] #dashboard-view.rd-shell .workspace-panel table tbody tr:hover {
background: rgba(255, 255, 255, .03);
}
html[data-theme="dark"] #dashboard-view.rd-shell .page-toolbar h1 {
color: var(--anfal-line-cool);
}
/* ---------------------------------------------------------------
12. REDUCED MOTION
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
#dashboard-view.rd-shell * {
transition-duration: .01ms !important;
}
}
/* ---------------------------------------------------------------
13. TYPEFACE - IBM Plex Sans Arabic, self-hosted
Self-hosted rather than CDN: this app is a PWA with a service
worker, and a font that only resolves online is a font that
disappears offline. Tahoma stays in the stack as the fallback
every target platform already has.
--------------------------------------------------------------- */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight: 400;font-display:swap;src:url("fonts/ipsa-400-ar.woff2") format("woff2");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:"IBM Plex Sans Arabic";font-style:normal;font-weight: 400;font-display:swap;src:url("fonts/ipsa-400-lat.woff2") format("woff2");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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight: 500;font-display:swap;src:url("fonts/ipsa-500-ar.woff2") format("woff2");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:"IBM Plex Sans Arabic";font-style:normal;font-weight: 500;font-display:swap;src:url("fonts/ipsa-500-lat.woff2") format("woff2");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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight: 600;font-display:swap;src:url("fonts/ipsa-600-ar.woff2") format("woff2");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:"IBM Plex Sans Arabic";font-style:normal;font-weight: 600;font-display:swap;src:url("fonts/ipsa-600-lat.woff2") format("woff2");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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight: 700;font-display:swap;src:url("fonts/ipsa-700-ar.woff2") format("woff2");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:"IBM Plex Sans Arabic";font-style:normal;font-weight: 700;font-display:swap;src:url("fonts/ipsa-700-lat.woff2") format("woff2");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}
/* الخطّ على الصفحة كلّها لا على لوحة العمل وحدها: النوافذ والقوائم تقع
خارج #dashboard-view، فكانت تُكتب بـTahoma - ويراه من يفتح ملفه الشخصي
خطًّا آخر. ويُفرض على عناصر النموذج لأنها لا ترث الخطّ من أبيها. */
html, body,
#dashboard-view.rd-shell,
input, select, button, textarea, option {
font-family: "IBM Plex Sans Arabic", Tahoma, "Segoe UI", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---------------------------------------------------------------
14. SIDEBAR - عناوين المجموعات، بخطٍّ يمتدّ منها
أُخفيت هذه العناوين يوم كُتبت الطبقة، وسببها يومها: «كل عنوان يسمّي
زرّين، والأزرار تقول ذلك بنفسها». وقد صارت القائمة أحد عشر بندًا في
خمس عائلات (٢١ سبتمبر ٢٠٢٦)، فزال السبب وعادت.
والخط لا يزيّن: يقول «هنا تبدأ عائلة أخرى» قبل أن يُقرأ حرف. وهو
أوضح من نصٍّ باهت وحده على قائمةٍ طويلة، وأهدأ من صناديق تُطوى.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .nav-group-label {
display: flex;
align-items: center;
gap: 8px;
padding: 13px 10px 5px;
}
#dashboard-view.rd-shell .nav-group-label::after {
content: "";
flex: 1;
height: 1px;
background: var(--rd-line, #e4e6ea);
}
/* أول عنوان لا يحتاج فراغًا فوقه: تحته «الرئيسية» مباشرة. */
#dashboard-view.rd-shell .nav-group-label:first-of-type { padding-top: 9px; }
#dashboard-view.rd-shell .app-navigation { gap: 2px; }
#dashboard-view.rd-shell .app-navigation button {
gap: 11px;
min-height: 42px;
padding: 0 12px;
}
#dashboard-view.rd-shell .app-navigation button svg {
width: 17px;
height: 17px;
color: var(--anfal-gold-500);
stroke-width: 1.8;
opacity: 1;
}
#dashboard-view.rd-shell .app-navigation button:hover:not([disabled]) svg,
#dashboard-view.rd-shell .app-navigation button.is-active svg,
#dashboard-view.rd-shell .app-navigation button[aria-current="page"] svg {
color: var(--anfal-gold-600);
}
#dashboard-view.rd-shell .app-navigation button[disabled] svg { opacity: .45; }
#dashboard-view.rd-shell .app-navigation button small {
margin-inline-start: auto;
padding: 1px 6px;
border-radius: var(--r-9);
background: var(--rd-surface-soft);
color: var(--rd-faint);
font-size: var(--fs-9);
font-weight: var(--anfal-weight-semi);
}
#dashboard-view.rd-shell .nav-badge {
margin-inline-start: auto;
padding: 1px 6px;
border-radius: var(--r-9);
background: var(--anfal-rejected);
color: #fff;
font-size: var(--fs-9p5);
font-weight: var(--anfal-weight-strong);
}
/* ---------------------------------------------------------------
15. TOP BAR
Title at the reading edge; date, bell, profile opposite.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .page-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: 10px 20px;
border: 1px solid var(--rd-line);
border-radius: var(--r-12);
background: var(--rd-surface);
box-shadow: 0 1px 2px rgba(13, 44, 74, .04);
}
#dashboard-view.rd-shell .rd-topbar-meta {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
#dashboard-view.rd-shell .rd-when {
display: flex;
align-items: center;
gap: 7px;
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-medium);
color: var(--rd-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .rd-when svg {
fill: none;
stroke: var(--anfal-slate-400);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
order: 3;
}
#dashboard-view.rd-shell .rd-when-sep { color: #dce5eb; }
#dashboard-view.rd-shell .rd-icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface);
color: var(--rd-muted);
cursor: pointer;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .rd-icon-btn:hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
}
#dashboard-view.rd-shell .rd-icon-btn svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#dashboard-view.rd-shell .rd-bell-count {
position: absolute;
top: -5px;
inset-inline-start: -5px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border: 1.5px solid #fff;
border-radius: var(--r-9);
background: var(--anfal-rejected);
color: #fff;
font-size: var(--fs-9);
font-weight: var(--anfal-weight-strong);
line-height: 13px;
text-align: center;
}
#dashboard-view.rd-shell .toolbar-profile.rd-profile {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
margin: 0;
padding: 0 12px;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface);
color: var(--rd-ink);
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
transition: border-color .14s ease, background .14s ease;
}
#dashboard-view.rd-shell .toolbar-profile.rd-profile:hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .toolbar-profile.rd-profile svg {
width: 15px;
height: 15px;
fill: none;
stroke: var(--anfal-gold-500);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 760px) {
#dashboard-view.rd-shell .rd-when-date { display: none; }
#dashboard-view.rd-shell .toolbar-profile.rd-profile span { display: none; }
#dashboard-view.rd-shell .toolbar-profile.rd-profile { width: 34px; padding: 0; justify-content: center; }
}
/* ---------------------------------------------------------------
16. QUICK ACTIONS - icon plus label
--------------------------------------------------------------- */
#dashboard-view.rd-shell .admin-quick-actions button.rd-act {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-start;
text-align: start;
transition: border-color .14s ease, background .14s ease;
}
#dashboard-view.rd-shell .admin-quick-actions button.rd-act:hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .rd-act-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 auto;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface);
color: var(--anfal-gold-500);
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
#dashboard-view.rd-shell .admin-quick-actions button.rd-act:hover .rd-act-icon {
border-color: var(--anfal-gold-500);
background: var(--anfal-gold-500);
color: #fff;
}
#dashboard-view.rd-shell .rd-act-icon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---------------------------------------------------------------
17. DONUTS - thinner ring, quieter centre
A thick conic ring reads as a solid disc at these sizes; thinning
it puts the centre number back in charge.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-donut,
#dashboard-view.rd-shell #admin-role-donut,
#dashboard-view.rd-shell .users-summary-donut {
box-shadow: none;
}
#dashboard-view.rd-shell .employee-donut::after,
#dashboard-view.rd-shell #admin-role-donut::after,
#dashboard-view.rd-shell .users-summary-donut::after {
inset: 27%;
box-shadow: none;
}
#dashboard-view.rd-shell .employee-donut-center > strong,
#dashboard-view.rd-shell #admin-role-center {
font-size: var(--fs-21);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .employee-donut-center > span {
font-size: var(--fs-10);
color: var(--rd-faint);
}
#dashboard-view.rd-shell #admin-role-legend li,
#dashboard-view.rd-shell #admin-role-legend > div {
font-size: var(--fs-11p5);
color: var(--rd-muted);
}
#dashboard-view.rd-shell #admin-role-legend strong,
#dashboard-view.rd-shell #admin-role-legend b {
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------
18. TYPE SCALE
--------------------------------------------------------------- */
#dashboard-view.rd-shell .admin-dashboard-card h3,
#dashboard-view.rd-shell .workspace-panel h2 {
font-size: var(--fs-14);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.01em;
color: var(--rd-ink);
}
#dashboard-view.rd-shell .admin-dashboard-card h3 + p,
#dashboard-view.rd-shell .workspace-panel h2 + p {
font-size: var(--fs-11p5);
color: var(--rd-muted);
}
/* ---------------------------------------------------------------
19. DARK THEME for the additions above
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .page-toolbar {
background: var(--anfal-dark-800);
border-color: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-icon-btn,
html[data-theme="dark"] #dashboard-view.rd-shell .toolbar-profile.rd-profile,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-act-icon {
background: var(--anfal-dark-900);
border-color: var(--anfal-dark-600);
color: var(--anfal-steel);
}
html[data-theme="dark"] #dashboard-view.rd-shell .toolbar-profile.rd-profile { color: var(--anfal-line-cool); }
html[data-theme="dark"] #dashboard-view.rd-shell .rd-bell-count { border-color: var(--anfal-dark-800); }
html[data-theme="dark"] #dashboard-view.rd-shell .app-navigation button small {
background: rgba(255,255,255,.06);
color: var(--anfal-steel);
}
html[data-theme="dark"] #dashboard-view.rd-shell .admin-dashboard-card h3,
html[data-theme="dark"] #dashboard-view.rd-shell .workspace-panel h2 { color: var(--anfal-line-cool); }
/* ---------------------------------------------------------------
20. TOP BAR - profile becomes an icon
The label said what the icon already says.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .toolbar-profile.rd-profile {
width: 34px;
padding: 0;
justify-content: center;
gap: 0;
}
#dashboard-view.rd-shell .toolbar-profile.rd-profile span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
#dashboard-view.rd-shell .toolbar-profile.rd-profile svg {
width: 16px;
height: 16px;
}
/* The sidebar entry is redundant once the top bar carries it */
#dashboard-view.rd-shell .workspace-user .profile-button { display: none; }
/* ---------------------------------------------------------------
21. PROFILE DIALOG
Three ideas, in order: who you are, what we hold, what you can
change. The old sheet gave all three the same weight and three
different shapes.
--------------------------------------------------------------- */
html.rd-shell .profile-dialog {
max-width: 520px;
padding: 0;
border-radius: var(--r-18);
overflow: hidden;
}
/* -- heading -- */
html.rd-shell .profile-heading {
align-items: flex-start;
padding: 20px 22px 16px;
border-bottom: 1px solid var(--rd-line-soft);
}
html.rd-shell .profile-heading h2 {
font-size: var(--fs-17);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.01em;
color: var(--rd-ink);
}
html.rd-shell .profile-heading p {
margin-top: 3px;
font-size: var(--fs-11p5);
color: var(--rd-muted);
}
html.rd-shell #profile-close {
width: 30px;
height: 30px;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-muted);
font-size: var(--fs-15);
line-height: 1;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
html.rd-shell #profile-close:hover {
border-color: var(--anfal-rejected);
background: var(--anfal-red-075);
color: var(--anfal-rejected);
}
/* -- identity block: avatar and name are one object -- */
html.rd-shell .profile-summary {
display: block;
padding: 20px 22px 0;
}
html.rd-shell .rd-identity {
display: flex;
align-items: center;
gap: 13px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rd-line-soft);
}
html.rd-shell .profile-avatar {
width: 52px;
height: 52px;
flex: 0 0 auto;
margin: 0;
border: 1px solid var(--anfal-gold-150);
border-radius: 50%;
background: var(--rd-gold-soft);
display: grid;
place-items: center;
}
html.rd-shell #profile-initials {
color: var(--anfal-gold-700);
font-size: var(--fs-17);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.01em;
}
html.rd-shell .rd-identity-text { min-width: 0; }
html.rd-shell .rd-identity-name {
font-size: var(--fs-16);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.01em;
color: var(--rd-ink);
line-height: 1.3;
}
html.rd-shell .rd-identity-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 5px;
flex-wrap: wrap;
}
html.rd-shell .rd-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
border: 1px solid var(--anfal-gold-150);
border-radius: var(--r-20);
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-semi);
}
html.rd-shell .rd-chip-live {
border-color: #cbe7d9;
background: var(--anfal-green-050);
color: var(--anfal-approved);
}
html.rd-shell .rd-chip i {
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
/* -- detail list: label leads, value answers -- */
html.rd-shell .profile-summary dl {
display: block;
margin: 0;
padding: 4px 0 16px;
border-bottom: 1px solid var(--rd-line-soft);
}
html.rd-shell .profile-summary dl > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 9px 0;
}
html.rd-shell .profile-summary dl > div + div {
border-top: 1px solid var(--anfal-surface-cool);
}
html.rd-shell .profile-summary dt {
flex: 0 0 auto;
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-medium);
color: var(--rd-muted);
}
html.rd-shell .profile-summary dd {
margin: 0;
min-width: 0;
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
text-align: end;
overflow-wrap: anywhere;
}
/* Latin values keep their own direction without flipping the row */
html.rd-shell #profile-summary-email,
html.rd-shell #profile-summary-phone {
direction: ltr;
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
}
/* The identity block already shows these two */
html.rd-shell .profile-summary dl > div.rd-dup { display: none; }
html.rd-shell #profile-edit {
width: 100%;
min-height: 40px;
margin-top: 16px;
border-radius: var(--r-10);
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
}
/* -- settings rows: one pattern for all three -- */
html.rd-shell .profile-divider { display: none; }
html.rd-shell .rd-settings {
padding: 6px 22px 20px;
}
html.rd-shell .rd-settings-label {
padding: 14px 0 8px;
font-size: var(--fs-10);
font-weight: var(--anfal-weight-semi);
letter-spacing: .08em;
color: var(--rd-faint);
}
html.rd-shell .rd-row {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 1px solid var(--anfal-line-quiet);
border-radius: var(--r-11);
background: var(--rd-surface);
transition: border-color .14s ease;
}
html.rd-shell .rd-row + .rd-row { margin-top: 8px; }
html.rd-shell .rd-row:hover { border-color: var(--rd-line); }
html.rd-shell .rd-row-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: var(--r-9);
background: var(--rd-gold-soft);
color: var(--anfal-gold-500);
}
html.rd-shell .rd-row-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
html.rd-shell .rd-row-body { flex: 1; min-width: 0; }
html.rd-shell .rd-row-title {
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
line-height: 1.35;
}
html.rd-shell .rd-row-desc {
margin-top: 2px;
font-size: var(--fs-11);
color: var(--rd-muted);
line-height: 1.45;
}
/* the dialog's own sections adopt the row shape */
html.rd-shell .profile-notifications,
html.rd-shell .profile-password-launch {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
margin-top: 8px;
border: 1px solid var(--anfal-line-quiet);
border-radius: var(--r-11);
background: var(--rd-surface);
}
html.rd-shell .profile-notifications h3,
html.rd-shell .profile-password-launch h3 {
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
line-height: 1.35;
}
html.rd-shell .profile-notifications p,
html.rd-shell .profile-password-launch p {
margin-top: 2px;
font-size: var(--fs-11);
color: var(--rd-muted);
line-height: 1.45;
}
/* every control in a row is the same size */
html.rd-shell .rd-row .secondary-button,
html.rd-shell .profile-notifications .secondary-button,
html.rd-shell .profile-password-launch .secondary-button {
flex: 0 0 auto;
min-height: 32px;
padding: 0 13px;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-ink);
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
transition: border-color .14s ease, background .14s ease;
}
html.rd-shell .rd-row .secondary-button:hover,
html.rd-shell .profile-notifications .secondary-button:hover,
html.rd-shell .profile-password-launch .secondary-button:hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
}
/* زر «إلغاء الإشعارات» ورث width:100% من الورقة الأساسية (styles.css)،
وزر كلمة المرور لم يرثه - فبَدا صفٌّ سليمًا والآخر ملخبطًا. الزر بعرضه
وحده، والنصّ يأخذ ما بقي بدل أن ينضغط إلى كلمةٍ في كل سطر. */
html.rd-shell .profile-notifications .secondary-button,
html.rd-shell .profile-password-launch .secondary-button {
width: auto;
}
html.rd-shell .profile-notifications > .rd-row-body,
html.rd-shell .profile-password-launch > .rd-row-body {
flex: 1 1 auto;
min-width: 0;
}
html.rd-shell .profile-notifications > .rd-row-body > h3,
html.rd-shell .profile-notifications > .rd-row-body > p {
margin-inline: 0;
text-wrap: pretty;
}
/* the theme switch sits inside a row like any other control */
html.rd-shell .profile-theme-control {
display: contents;
}
html.rd-shell .rd-row .switch-control > span:not(.rd-row-title):not(.rd-row-desc) {
font-size: var(--fs-12p5);
}
/* -- inline forms -- */
html.rd-shell #profile-email-form,
html.rd-shell #profile-password-form {
padding: 0 22px 20px;
}
html.rd-shell .profile-form-heading h3 {
font-size: var(--fs-13p5);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
}
html.rd-shell :is(#profile-email-form, #profile-password-form) label {
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
}
html.rd-shell :is(#profile-email-form, #profile-password-form) input[type="text"],
html.rd-shell :is(#profile-email-form, #profile-password-form) input[type="email"],
html.rd-shell :is(#profile-email-form, #profile-password-form) input[type="password"] {
min-height: 38px;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface-soft);
font-size: var(--fs-12p5);
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
html.rd-shell :is(#profile-email-form, #profile-password-form) input:focus {
outline: none;
border-color: var(--anfal-gold-500);
background: var(--rd-surface);
box-shadow: 0 0 0 3px rgba(184, 146, 85, .1);
}
html.rd-shell :is(#profile-email-form, #profile-password-form) .primary-button {
min-height: 40px;
border-radius: var(--r-10);
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
}
/* ---------------------------------------------------------------
22. PROFILE DIALOG - dark theme
--------------------------------------------------------------- */
html.rd-shell[data-theme="dark"] .profile-heading,
html.rd-shell[data-theme="dark"] .rd-identity,
html.rd-shell[data-theme="dark"] .profile-summary dl {
border-color: var(--anfal-dark-600);
}
html.rd-shell[data-theme="dark"] .profile-summary dl > div + div {
border-top-color: var(--anfal-dark-700);
}
html.rd-shell[data-theme="dark"] .profile-heading h2,
html.rd-shell[data-theme="dark"] .rd-identity-name,
html.rd-shell[data-theme="dark"] .profile-summary dd,
html.rd-shell[data-theme="dark"] .rd-row-title,
html.rd-shell[data-theme="dark"] .profile-notifications h3,
html.rd-shell[data-theme="dark"] .profile-password-launch h3 {
color: var(--anfal-line-cool);
}
html.rd-shell[data-theme="dark"] .rd-row,
html.rd-shell[data-theme="dark"] .profile-notifications,
html.rd-shell[data-theme="dark"] .profile-password-launch {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
}
html.rd-shell[data-theme="dark"] .rd-row .secondary-button,
html.rd-shell[data-theme="dark"] .profile-notifications .secondary-button,
html.rd-shell[data-theme="dark"] .profile-password-launch .secondary-button,
html.rd-shell[data-theme="dark"] #profile-close {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
color: var(--anfal-line-cool);
}
html.rd-shell[data-theme="dark"] .profile-avatar {
border-color: #3a2f18;
background: #241c0c;
}
html.rd-shell[data-theme="dark"] .rd-row-icon {
background: #241c0c;
}
html.rd-shell[data-theme="dark"] :is(#profile-email-form, #profile-password-form) input {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
color: var(--anfal-line-cool);
}
/* ---------------------------------------------------------------
23. FIXES
--------------------------------------------------------------- */
/* -- 23a. KPI strip: the first divider was on the wrong edge.
The page is RTL, so inline-start is the RIGHT side - the edge a
segment shares with the one before it. Anchoring to inline-end
drew each divider against the NEXT segment instead, leaving the
first boundary bare and doubling nothing at the last. -- */
#dashboard-view.rd-shell .admin-kpi-grid > * + *::before,
#dashboard-view.rd-shell .custody-status-summary > * + *::before,
#dashboard-view.rd-shell .invoice-status-summary > * + *::before,
#dashboard-view.rd-shell .users-summary-grid > * + *::before {
inset-inline-end: auto;
inset-inline-start: 0;
}
/* -- 23b. Top bar: the profile control inherited a taller
min-height, so it stood 42px beside a 34px bell. -- */
#dashboard-view.rd-shell .toolbar-profile.rd-profile {
min-height: 34px;
max-height: 34px;
line-height: 1;
}
/* -- 23c. Donuts: inset is the ring's thickness, so raising it
made the ring fatter, not thinner. 13% reads as a ring; the
number in the middle stays the thing being read. -- */
#dashboard-view.rd-shell .employee-donut::after,
#dashboard-view.rd-shell #admin-role-donut::after,
#dashboard-view.rd-shell .users-summary-donut::after {
inset: 13%;
}
/* -- 23d. The finance card's header action -- */
#dashboard-view.rd-shell .admin-finance-summary > header > button {
display: none;
}
/* -- 23e. Cards in a row share a height -- */
#dashboard-view.rd-shell .admin-dashboard-grid,
#dashboard-view.rd-shell .admin-support-column {
align-items: stretch;
}
#dashboard-view.rd-shell .admin-dashboard-grid > .admin-dashboard-card,
#dashboard-view.rd-shell .admin-support-column > .admin-dashboard-card {
height: 100%;
}
/* the donut card has less content, so it centres what it has */
#dashboard-view.rd-shell .admin-role-summary {
display: flex;
flex-direction: column;
}
#dashboard-view.rd-shell .admin-role-summary > *:last-child {
margin-top: auto;
}
/* -- 23f. Card headings carry an icon, like the action tiles -- */
#dashboard-view.rd-shell .rd-card-icon {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 auto;
margin-inline-end: 9px;
border-radius: var(--r-8);
background: var(--rd-gold-soft);
color: var(--anfal-gold-500);
vertical-align: middle;
}
#dashboard-view.rd-shell .rd-card-icon svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#dashboard-view.rd-shell .admin-dashboard-card > header > div:first-child,
#dashboard-view.rd-shell .admin-dashboard-card > header {
align-items: center;
}
#dashboard-view.rd-shell .rd-head-row {
display: flex;
align-items: center;
}
/* -- 23g. Activity marks read by type -- */
#dashboard-view.rd-shell .admin-activity-mark {
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--anfal-slate-400);
box-shadow: 0 0 0 3px rgba(148, 163, 180, .14);
}
#dashboard-view.rd-shell .admin-activity-mark.rd-m-gold {
background: var(--anfal-gold-500);
box-shadow: 0 0 0 3px rgba(184, 146, 85, .16);
}
#dashboard-view.rd-shell .admin-activity-mark.rd-m-green {
background: var(--anfal-approved);
box-shadow: 0 0 0 3px rgba(37, 132, 90, .16);
}
#dashboard-view.rd-shell .admin-activity-mark.rd-m-blue {
background: var(--anfal-info);
box-shadow: 0 0 0 3px rgba(52, 116, 154, .16);
}
#dashboard-view.rd-shell .admin-activity-mark.rd-m-navy {
background: var(--anfal-navy-900);
box-shadow: 0 0 0 3px rgba(13, 44, 74, .14);
}
#dashboard-view.rd-shell .admin-activity-mark.rd-m-red {
background: var(--anfal-rejected);
box-shadow: 0 0 0 3px rgba(181, 59, 53, .16);
}
#dashboard-view.rd-shell .admin-activity-list article {
align-items: center;
gap: 11px;
padding: 10px 0;
}
#dashboard-view.rd-shell .admin-activity-list article + article {
border-top: 1px solid var(--anfal-surface-cool);
}
#dashboard-view.rd-shell .admin-activity-list strong {
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
}
#dashboard-view.rd-shell .admin-activity-list p {
margin-top: 1px;
font-size: var(--fs-11);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .admin-activity-list time {
font-size: var(--fs-10p5);
color: var(--rd-faint);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* -- 23h. System status reads as rows, not a bare list -- */
#dashboard-view.rd-shell .admin-system-status dl {
display: block;
margin: 0;
}
#dashboard-view.rd-shell .admin-system-status dl > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
}
#dashboard-view.rd-shell .admin-system-status dl > div + div {
border-top: 1px solid var(--anfal-surface-cool);
}
#dashboard-view.rd-shell .admin-system-status dt {
font-size: var(--fs-11p5);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .admin-system-status dd {
margin: 0;
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------
24. FIXES - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-card-icon {
background: #241c0c;
}
html[data-theme="dark"] #dashboard-view.rd-shell .admin-activity-list article + article,
html[data-theme="dark"] #dashboard-view.rd-shell .admin-system-status dl > div + div {
border-top-color: var(--anfal-dark-700);
}
html[data-theme="dark"] #dashboard-view.rd-shell .admin-activity-list strong,
html[data-theme="dark"] #dashboard-view.rd-shell .admin-system-status dd {
color: var(--anfal-line-cool);
}
/* ---------------------------------------------------------------
25. SUMMARY STRIP - the rest of the sub-pages
One shape for "what am I looking at" everywhere it can be
answered from real data. Two pages are deliberately absent:
the notification centre serves one item at a time, so there is
no set to summarise, and settings holds configuration, not
figures.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .statement-page-kpis,
#dashboard-view.rd-shell .rd-strip {
display: flex;
gap: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--rd-line);
border-radius: var(--r-12);
background: var(--rd-surface);
box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
}
#dashboard-view.rd-shell .statement-page-kpis > *,
#dashboard-view.rd-shell .rd-strip > * {
position: relative;
flex: 1 1 0;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 7px;
padding: 16px 11px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: center;
transition: background .14s ease;
}
#dashboard-view.rd-shell .statement-page-kpis > *:hover,
#dashboard-view.rd-shell .rd-strip > *:hover {
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .statement-page-kpis > * + *::before,
#dashboard-view.rd-shell .rd-strip > * + *::before {
position: absolute;
inset-inline-start: 0;
top: 18%;
bottom: 18%;
width: 1px;
background: #dce5eb;
content: "";
}
#dashboard-view.rd-shell .statement-page-kpis strong,
#dashboard-view.rd-shell .rd-strip strong {
order: 2;
font-size: var(--fs-22);
font-weight: var(--anfal-weight-strong);
line-height: 1;
letter-spacing: -.02em;
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .statement-page-kpis span,
#dashboard-view.rd-shell .rd-strip > * > span {
order: 3;
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-medium);
color: var(--rd-muted);
}
/* the statement icons keep their meaning, lose their tile */
#dashboard-view.rd-shell .statement-kpi-icon,
#dashboard-view.rd-shell .rd-strip-icon {
order: 1;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 0;
background: transparent;
color: var(--anfal-gold-500);
}
#dashboard-view.rd-shell .statement-kpi-icon svg,
#dashboard-view.rd-shell .rd-strip-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* money in and money out keep their semantic colours */
#dashboard-view.rd-shell .statement-kpi-icon.credit-icon { color: var(--anfal-approved); }
#dashboard-view.rd-shell .statement-kpi-icon.debit-icon { color: var(--anfal-rejected); }
#dashboard-view.rd-shell .statement-kpi-icon.closing-icon { color: var(--rd-ink); }
/* a strip that summarises only what is on screen says so */
#dashboard-view.rd-shell .rd-strip-scope {
margin: 0 0 7px;
font-size: var(--fs-10);
font-weight: var(--anfal-weight-semi);
letter-spacing: .06em;
color: var(--rd-faint);
}
@media (max-width: 1100px) {
#dashboard-view.rd-shell .statement-page-kpis,
#dashboard-view.rd-shell .rd-strip { flex-wrap: wrap; }
#dashboard-view.rd-shell .statement-page-kpis > *,
#dashboard-view.rd-shell .rd-strip > * { flex-basis: 50%; }
}
/* ---------------------------------------------------------------
26. SUMMARY STRIP - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .statement-page-kpis,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-strip {
background: var(--anfal-dark-800);
border-color: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .statement-page-kpis > *:hover,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-strip > *:hover {
background: rgba(255, 255, 255, .03);
}
html[data-theme="dark"] #dashboard-view.rd-shell .statement-page-kpis > * + *::before,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-strip > * + *::before {
background: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .statement-page-kpis strong,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-strip strong {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .statement-kpi-icon.closing-icon {
color: var(--anfal-steel);
}
/* ---------------------------------------------------------------
27. STRIP CELLS - one stacking order everywhere
Icon, then figure, then label - the dashboard's order, now
shared by every strip regardless of the source markup order.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-status-summary > * > .rd-strip-icon,
#dashboard-view.rd-shell .invoice-status-summary > * > .rd-strip-icon,
#dashboard-view.rd-shell .users-summary-grid > * > .rd-strip-icon {
order: 1;
}
#dashboard-view.rd-shell .custody-status-summary > * > strong,
#dashboard-view.rd-shell .invoice-status-summary > * > strong,
#dashboard-view.rd-shell .users-summary-grid > * > strong {
order: 2;
}
#dashboard-view.rd-shell .custody-status-summary > * > span,
#dashboard-view.rd-shell .invoice-status-summary > * > span,
#dashboard-view.rd-shell .users-summary-grid > * > span {
order: 3;
}
#dashboard-view.rd-shell .custody-status-summary .rd-strip-icon,
#dashboard-view.rd-shell .invoice-status-summary .rd-strip-icon,
#dashboard-view.rd-shell .users-summary-grid .rd-strip-icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
color: var(--anfal-gold-500);
}
#dashboard-view.rd-shell .custody-status-summary .rd-strip-icon svg,
#dashboard-view.rd-shell .invoice-status-summary .rd-strip-icon svg,
#dashboard-view.rd-shell .users-summary-grid .rd-strip-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* the invoice strip doubles as a filter, so the selected tab
keeps its gold cast on the icon too */
#dashboard-view.rd-shell .invoice-status-summary button.is-active .rd-strip-icon {
color: var(--anfal-gold-700);
}
/* ---------------------------------------------------------------
28. CUSTODY PAGE - the summary follows the controls
It describes the employee cards underneath it, so it belongs
next to them rather than above the filters that produce them.
The container is a grid, so this is ordering only - the DOM is
untouched and the tab sequence still runs controls first.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-browser > .custody-filter-bar { order: 1; }
#dashboard-view.rd-shell .custody-browser > .custody-funding-action { order: 2; }
#dashboard-view.rd-shell .custody-browser > .custody-status-summary { order: 3; }
/* ---------------------------------------------------------------
29. SIDEBAR FOOT
The role already reads under the company mark, so the second
copy goes. Sign-out is the one destructive control down there
and now looks like it.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .workspace-user #user-role { display: none; }
#dashboard-view.rd-shell #logout-button {
gap: 11px;
width: 100%;
min-height: 42px;
padding: 0 12px;
border: 1px solid var(--anfal-red-200);
border-radius: var(--r-8);
background: #fdf6f5;
color: var(--anfal-rejected);
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
#dashboard-view.rd-shell #logout-button span { color: inherit; }
#dashboard-view.rd-shell #logout-button svg {
width: 17px;
height: 17px;
color: var(--anfal-rejected);
stroke: currentColor;
stroke-width: 1.8;
opacity: 1;
}
#dashboard-view.rd-shell #logout-button:hover {
border-color: #f3b5aa;
background: var(--anfal-red-075);
color: var(--anfal-red-700);
}
#dashboard-view.rd-shell #logout-button:hover svg { color: var(--anfal-red-700); }
/* ---------------------------------------------------------------
30. SECTION 27-29 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell #logout-button {
border-color: #40201e;
background: #1c1211;
color: var(--anfal-red-150);
}
html[data-theme="dark"] #dashboard-view.rd-shell #logout-button svg { color: var(--anfal-red-150); }
html[data-theme="dark"] #dashboard-view.rd-shell #logout-button:hover {
border-color: #6b3229;
background: #241615;
color: var(--anfal-red-250);
}
html[data-theme="dark"] #dashboard-view.rd-shell #logout-button:hover svg { color: var(--anfal-red-250); }
/* ---------------------------------------------------------------
31. SYSTEM BAR AND PAGE HEAD
The bar carries what follows you everywhere - the date you are
working in, and your own controls. The page's own name and its
primary action step out onto their own line, which also gives
that action somewhere to sit opposite the title.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .page-toolbar {
justify-content: space-between;
min-height: 52px;
padding: 8px 18px;
}
/* date leads at the reading edge */
#dashboard-view.rd-shell .page-toolbar > .rd-when {
margin-inline-end: auto;
}
/* المسافة تحت الترويسة 18 لا 14: صفحةٌ أول صندوقها كتلةٌ عادية يضمّ
هامشُها البالغ 18 هامشَ الترويسة فتبدو 18، وصفحةٌ أول صندوقها في شبكة
تمنع الضمّ فتبقى 14 - فاختلفت الشاشات بأربعة بكسلات بلا سبب. توحيدها
عند 18 يستوي عليه النوعان بلا رقمٍ يُضاف لأحدهما. */
/* حين لا تجد الترويسة صندوقًا تسكنه تبقى فوق المحتوى، ومسافتها حينئذٍ
أقصر بتسعة عشر بكسلًا من مسافتها داخل الصندوق - فتختلف الشاشتان لعينٍ
تنتقل بينهما. تُعوَّض هنا، فتستوي المسافة أيًّا كان موضعها. */
#dashboard-view.rd-shell .rd-pagehead:not(.rd-pagehead-inset) { margin-top: 37px; }
#dashboard-view.rd-shell .rd-pagehead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin: 18px 0 18px;
padding: 0 2px;
}
#dashboard-view.rd-shell .rd-pagehead-text {
min-width: 0;
}
#dashboard-view.rd-shell .rd-pagehead h1 {
font-size: var(--fs-22);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.02em;
color: var(--rd-ink);
line-height: 1.25;
}
#dashboard-view.rd-shell .rd-pagehead p {
margin-top: 4px;
font-size: var(--fs-12);
color: var(--rd-muted);
line-height: 1.5;
}
#dashboard-view.rd-shell .rd-pagehead-action {
display: flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
}
#dashboard-view.rd-shell .rd-pagehead-button {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
margin: 0;
padding: 0 18px;
border: 0;
border-radius: var(--r-10);
background: var(--anfal-navy-900);
color: #fff;
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
box-shadow: 0 2px 8px rgba(13, 44, 74, .16);
transition: background .14s ease, box-shadow .14s ease;
}
#dashboard-view.rd-shell .rd-pagehead-button:hover {
background: var(--anfal-navy-800);
box-shadow: 0 4px 12px rgba(13, 44, 74, .22);
}
/* the emptied containers should not leave a gap behind */
#dashboard-view.rd-shell .custody-funding-action:empty { display: none; }
@media (max-width: 700px) {
#dashboard-view.rd-shell .rd-pagehead {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
#dashboard-view.rd-shell .rd-pagehead-button { justify-content: center; }
}
/* ---------------------------------------------------------------
32. SECTION 31 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-pagehead h1 {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-pagehead-button {
background: var(--anfal-navy-800);
}
/* ترتيب القسم: الرقم أولًا، ثم اسمه، ثم شرحه. طبقةُ الملخّص ترفع الشرح
إلى الأعلى لأنها بُنيت لبطاقةٍ أيقونتها أولًا، وهذا قسمٌ بلا أيقونة -
فيُعاد الترتيب صراحةً لا اعتمادًا على ترتيب الكتابة. */
#dashboard-view.rd-shell #vat-cards > * > strong { order: 1; }
#dashboard-view.rd-shell #vat-cards > * > span { order: 2; }
#dashboard-view.rd-shell #vat-cards > * > small { order: 3; }
/* ===== الجوّال: شريطٌ واحد =====
أيقونة التطبيق المربّعة عند حافة القراءة، والمسح أيقونةٌ مع أخواتها،
والشعار العريض وصندوقه يختفيان. حدُّه الجوّال وحده - الحاسوب كما هو. */
@media (max-width: 760px) {
#dashboard-view.rd-shell .workspace-header { display: none; }
#dashboard-view.rd-shell .rd-brand {
width: 28px;
height: 28px;
flex: 0 0 auto;
border-radius: var(--r-8);
object-fit: contain;
background: #fff;
}
#dashboard-view.rd-shell .page-toolbar {
gap: 10px;
margin-inline: 0;
padding: max(8px, env(safe-area-inset-top)) 12px 8px;
border-radius: 0;
}
/* زرُّ المسح يفقد كلمته ويصير أيقونةً بمقاس الجرس والسمة. */
#dashboard-view.rd-shell .rd-topbar-qr {
width: var(--ui-icon-btn, 34px);
min-width: 0;
min-height: var(--ui-icon-btn, 34px);
padding: 0;
gap: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: transparent;
color: var(--anfal-slate-600);
}
#dashboard-view.rd-shell .rd-topbar-qr span { display: none; }
#dashboard-view.rd-shell .rd-topbar-qr svg { width: 18px; height: 18px; }
/* والدائرة تكفي: الاسم يُقرأ داخل القائمة حين تُفتح، ومكانه في شريطٍ
ضيّق أثمن من أن يُنفق على ما يُعرف بحرفين. */
#dashboard-view.rd-shell .rd-account-name { display: none; }
#dashboard-view.rd-shell .rd-account-btn { padding: 4px 7px; gap: 5px; }
/* التاريخ يبقى والساعة، ويفسح ما ضاق. */
#dashboard-view.rd-shell .rd-when { font-size: var(--fs-10); gap: 5px; }
#dashboard-view.rd-shell .rd-when-hijri { display: none; }
}
/* ===== شريط النظام ثابتٌ في أعلى الشاشة =====
يحمل التاريخ والإشعارات والسمة والحساب - أشياءً لا تخصّ صفحةً بعينها،
فلا تنزل مع صفحة. والقائمة الجانبية ملتصقة معه، كما في «قوى». */
#dashboard-view.rd-shell{
/* بلا فراغٍ فوق الشريط: كان للصفحة حشوٌ علويّ يزول عند التمرير، فيبدو
الشريط متحرّكًا قليلًا ثم يثبت. فصار ملاصقًا للحافة من أول لحظة. */
padding-top: 0;
}
#dashboard-view.rd-shell .page-toolbar{
position: sticky;
top: 0;
z-index: 40;
border-radius: var(--ui-topbar-radius);
gap: var(--ui-topbar-gap);
/* يمتدّ إلى الحافة البعيدة ويقف عند القائمة الجانبية: شريطٌ كامل
بلا هامش، كما في «قوى». */
margin-inline: -32px -20px;
padding: var(--ui-topbar-pad);
background: var(--rd-surface);
border-bottom: 1px solid var(--rd-line);
}
/* والقائمة الجانبية تبدأ من أعلى الشاشة وتنزل إلى أسفلها: فيصير الشكل
«لامًا» - شريطٌ فوق، وعمودٌ إلى جانبه. */
#dashboard-view.rd-shell .workspace-header{
inset: 0 0 0 auto;
border-radius: 0;
border-block: 0;
padding-top: 18px;
}
/* الاسم انتقل إلى الشريط، فلا يُكرَّر في رأس القائمة. */
#dashboard-view.rd-shell .workspace-welcome h2{ display: none; }
/* ولا تُمسّ القائمة الجانبية: هي `fixed` منذ البدء (design-system.css،
«Desktop right sidebar») و`.dashboard` يترك لها حشوًا بعرضها. بدّلتُها
إلى `sticky` ظنًّا أنّها تتحرّك مع التمرير، فسقطت من موضعها فوق
المحتوى. والقياس قبل التغيير كان يكفي. */
/* زاوية الهوية: اسمٌ وأيقونة وسهم. */
#dashboard-view.rd-shell .rd-account{ position: relative; }
#dashboard-view.rd-shell .rd-account-btn{
display: inline-flex; align-items: center; gap: 8px;
padding: var(--ui-account-pad); border: 1px solid var(--rd-line); border-radius: 999px;
background: var(--rd-surface); color: var(--rd-ink);
font: inherit; font-size: var(--ui-account-fs); font-weight: var(--ui-account-fw); cursor: pointer;
}
#dashboard-view.rd-shell .rd-account-btn:hover,
#dashboard-view.rd-shell .rd-account-btn.is-open{
border-color: var(--anfal-gold-500);
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .rd-account-ava{
display: inline-flex; align-items: center; justify-content: center;
width: var(--ui-account-ava); height: var(--ui-account-ava); border-radius: 50%;
background: var(--anfal-gold-100); color: var(--anfal-gold-800);
font-size: var(--fs-10p5); font-weight: var(--anfal-weight-strong);
}
#dashboard-view.rd-shell .rd-account-name{
max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#dashboard-view.rd-shell .rd-account-caret{
width: 6px; height: 6px;
border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor;
transform: rotate(-45deg); transition: transform .18s ease; opacity: .7;
}
#dashboard-view.rd-shell .rd-account-btn.is-open .rd-account-caret{ transform: rotate(135deg); }
/* القائمة تنفتح إلى داخل الصفحة لا إلى خارجها.
كانت مربوطة ببداية الشريط (يمينه في العربية) فتنمو يسارًا — وزرّ
الحساب في أقصى يسار الشريط أصلًا، فتخرج ٢٨px خارج حافّة النافذة
وتُقصّ. قِيس ذلك: القائمة من -28 إلى 204 والنافذة تبدأ من صفر.
فتُربط بنهايته فتنمو إلى الداخل. (٥ أكتوبر ٢٠٢٦؛ عولج نظيره في
تطبيق الجوّال من قبل، وبقي سطح المكتب.) */
#dashboard-view.rd-shell .rd-account-menu{
position: absolute; inset-inline-start: auto; inset-inline-end: 0; top: calc(100% + 7px); z-index: 50;
min-width: var(--ui-account-menu-w); display: flex; flex-direction: column; padding: 6px;
border: 1px solid var(--rd-line); border-radius: var(--r-12);
background: var(--rd-surface); box-shadow: 0 12px 32px rgba(16, 42, 67, .14);
}
#dashboard-view.rd-shell .rd-account-head{
padding: 8px 10px 10px; margin-bottom: 5px; border-bottom: 1px solid var(--rd-line);
}
#dashboard-view.rd-shell .rd-account-head b{ display: block; font-size: var(--fs-13); }
#dashboard-view.rd-shell .rd-account-head small{ color: var(--rd-muted); font-size: var(--fs-11); }
#dashboard-view.rd-shell .rd-account-menu button{
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 8px 10px; border: 0; border-radius: var(--r-8);
background: transparent; color: var(--anfal-slate-600);
font: inherit; font-size: var(--fs-12p5); text-align: start; cursor: pointer;
}
#dashboard-view.rd-shell .rd-account-menu button svg{ width: 16px; height: 16px; flex: 0 0 auto; }
#dashboard-view.rd-shell .rd-account-menu button small{
margin-inline-start: auto; color: var(--rd-faint); font-size: var(--fs-10);
}
#dashboard-view.rd-shell .rd-account-menu button:hover:not(:disabled){
background: var(--rd-surface-soft); color: var(--rd-ink);
}
#dashboard-view.rd-shell .rd-account-menu button:disabled{ opacity: .55; cursor: default; }
/* الخروج آخرها وبلونه: فعلٌ يُنهي الجلسة فلا يُخلط بما قبله. */
#dashboard-view.rd-shell .rd-account-menu .is-danger{
margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--rd-line);
border-radius: 0 0 var(--r-8) var(--r-8); color: var(--anfal-rejected);
}
#dashboard-view.rd-shell .rd-account-menu .is-danger:hover{
background: var(--anfal-red-075); color: var(--anfal-rejected);
}
/* ===== القائمة في الوضع الليلي =====
حبر البنود `--anfal-slate-600` مقيسٌ لسطحٍ فاتح، وعلى الكحلي يبهت.
وأحمر الخروج `#b53b35` على #0d2133 تباينُه دون الثلاثة، فيُستعمل
أحمر الوضع الليلي نفسه المستعمل في الأفعال التي لا رجعة فيها.
وخلفية المرور حمراءُ فاتحة تصير لطخةً مضيئة، فتُستبدل بظلٍّ شفّاف. */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-account-menu button{ color: var(--rd-muted); }
html[data-theme="dark"] #dashboard-view.rd-shell .rd-account-menu button:hover:not(:disabled){ color: var(--rd-ink); }
html[data-theme="dark"] #dashboard-view.rd-shell .rd-account-menu .is-danger{ color: var(--anfal-red-250); }
html[data-theme="dark"] #dashboard-view.rd-shell .rd-account-menu .is-danger:hover{
background: rgba(255, 143, 133, .12); color: var(--anfal-red-250);
}
/* الأزرار التي انتقلت أفعالها إلى قائمة الحساب: تبقى في الصفحة لأن
بنود القائمة تنقر عليها، وتُخفى عن العين. */
#dashboard-view.rd-shell #toolbar-profile,
#dashboard-view.rd-shell #logout-button,
#dashboard-view.rd-shell #profile-button{ display: none; }
#dashboard-view.rd-shell .workspace-user > #user-role,
#dashboard-view.rd-shell .workspace-user > #profile-button,
#dashboard-view.rd-shell .workspace-user > #logout-button{ display: none; }
#dashboard-view.rd-shell .workspace-user:not(:has(> *:not([style*="display: none"]))){ border-top: 0; }
/* الترويسة تكسو ما تتبنّاه بهيئة زر، وهذا ليس زرًّا بل حاملُ مربّعات
الفترة. فتُنزع عنه الكسوة ويبقى موضعه. والانتقاء هنا بنفس قوّة انتقاء
الكسوة ومن بعده في الترتيب - وإلا كُتبت قاعدةٌ لا تفوز. */
#dashboard-view.rd-shell #vat-period.rd-pagehead-button,
#dashboard-view.rd-shell #vat-period.rd-pagehead-button:hover,
html[data-theme="dark"] #dashboard-view.rd-shell #vat-period.rd-pagehead-button,
html[data-theme="dark"] #dashboard-view.rd-shell #vat-period.rd-pagehead-button:hover {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: inherit;
min-height: 0;
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-pagehead-button:hover {
background: var(--anfal-navy-700);
}
/* ---------------------------------------------------------------
33. PAGE HEAD INSIDE THE CARD
The name of the page leads the card it opens, with the page's
primary action opposite it. The card's own heading said the same
thing a second time, so it goes.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-pagehead-inset {
margin: 0 0 16px;
padding: 0 0 15px;
border-bottom: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell .rd-pagehead-inset h1 {
font-size: var(--fs-19);
}
/* the duplicated headings */
#dashboard-view.rd-shell .invoices-panel > .panel-heading,
#dashboard-view.rd-shell .accountant-home > .accountant-heading {
display: none;
}
/* ---------------------------------------------------------------
34. CUSTODY PAGE - the controls become one card
Invoices already opened with a card; custody opened with loose
rows. Same shape now: name and action, then the figures, then
the search that filters what follows.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-browser {
display: grid;
gap: 14px;
padding: 18px;
border: 1px solid var(--rd-line);
border-radius: var(--r-12);
background: var(--rd-surface);
box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
}
/* صفحة حسابات المنشأة: نفس بطاقة صفحة العهد شكلًا، بصنفٍ خاص بها. كانت
تستعير .custody-browser فيتبعها شكلُها - واستعارتُه كسرت منطق الطبقة
الذي يبحث عنه بعينه، فانتقل رأس صفحة العهدة إلى حاوية مخفية. */
#dashboard-view.rd-shell .org-cards-shell > .form-error:empty { display: none; }
#dashboard-view.rd-shell .org-panel {
display: grid;
gap: 14px;
padding: 18px;
border: 1px solid var(--rd-line);
border-radius: var(--r-12);
background: var(--rd-surface);
box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
}
#dashboard-view.rd-shell .org-panel > .rd-pagehead { order: 0; }
#dashboard-view.rd-shell .custody-browser > .rd-pagehead { order: 0; }
#dashboard-view.rd-shell .custody-browser > .custody-status-summary { order: 1; }
#dashboard-view.rd-shell .custody-browser > .custody-filter-bar { order: 2; }
#dashboard-view.rd-shell .custody-browser > .custody-funding-action { order: 3; }
/* the strip is nested inside a card now, so it drops its own
shadow and keeps only the dividing rule */
#dashboard-view.rd-shell .custody-browser > .custody-status-summary {
box-shadow: none;
}
/* ---------------------------------------------------------------
35. INVOICES PAGE - same nesting
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoices-panel > .rd-pagehead { order: -1; }
#dashboard-view.rd-shell .invoice-browser > .invoice-status-summary {
box-shadow: none;
}
/* ---------------------------------------------------------------
36. SECTIONS 33-35 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-pagehead-inset {
border-bottom-color: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .custody-browser {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
/* ---------------------------------------------------------------
37. PAGE HEAD - our own heading
The app owns #page-title and rewrites it on every navigation, so
the head mirrors its text rather than borrowing the node. The
original stays in the bar, hidden, still doing its job.
--------------------------------------------------------------- */
/* يُخفى بما **فيه** لا بموضعه.
كان `div:first-child` - ثمّ أُضيفت أيقونةُ التطبيق أوّلَ الشريط على
الجوّال، فلم يَعُد صندوقُ العنوان أوّلَ أبنائه، فظهر العنوان مرّتين:
في الشريط وفي الترويسة تحته. والموضع هشٌّ، والمحتوى ثابت. */
#dashboard-view.rd-shell .page-toolbar > div:first-child,
#dashboard-view.rd-shell .page-toolbar > div:has(> #page-title) {
display: none;
}
#dashboard-view.rd-shell .rd-pagehead .rd-title {
margin: 0;
font-size: var(--fs-22);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.02em;
color: var(--rd-ink);
line-height: 1.25;
}
#dashboard-view.rd-shell .rd-pagehead .rd-sub {
margin: 4px 0 0;
font-size: var(--fs-12);
color: var(--rd-muted);
line-height: 1.5;
}
#dashboard-view.rd-shell .rd-pagehead-inset .rd-title {
font-size: var(--fs-19);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-pagehead .rd-title {
color: var(--anfal-line-cool);
}
/* ---------------------------------------------------------------
38. EMPLOYEE CUSTODY CARDS
The donut is retired: it could not draw a negative balance, and a
negative balance is the figure that needs catching. The number
leads, the sources read as a signed list, and red now means one
thing only - money owed the other way.
--------------------------------------------------------------- */
#dashboard-view.rd-shell {
/* one template, shared by the header row and every card */
--rd-custody-cols: minmax(190px, 1.25fr) minmax(140px, .85fr) minmax(230px, 1.5fr) auto;
}
#dashboard-view.rd-shell .employee-custody-card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 17px 18px 15px;
border: 1px solid var(--rd-line);
border-radius: var(--r-14);
background: var(--rd-surface);
box-shadow: none;
transition: border-color .16s ease, box-shadow .16s ease;
}
#dashboard-view.rd-shell .employee-custody-card:hover {
border-color: var(--anfal-gold-500);
box-shadow: 0 6px 20px rgba(16, 42, 67, .07);
}
/* -- identity -- */
#dashboard-view.rd-shell .employee-custody-card > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 0 14px;
border-bottom: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell .employee-custody-card h4 {
margin: 0;
font-size: var(--fs-14p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
line-height: 1.35;
}
#dashboard-view.rd-shell .employee-custody-card header p {
margin: 1px 0 0;
font-size: var(--fs-11);
color: var(--rd-faint);
}
#dashboard-view.rd-shell .no-custody-badge {
flex: 0 0 auto;
padding: 3px 9px;
border: 1px solid var(--rd-line);
border-radius: var(--r-20);
background: var(--rd-surface-soft);
color: var(--rd-muted);
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
}
/* -- the balance, no longer a ring -- */
#dashboard-view.rd-shell .employee-donut-block {
display: block;
gap: 0;
padding: 15px 0 0;
}
/* كان `static`، وطبقة تلميحات المصادر داخله `position: absolute`
بـ `inset: 0` - فلم تجد سلفًا مُموضعًا فانفلتت إلى الصفحة كلها
(1905×1082) ودوائرها 909px تلتقط المؤشر فوق صفوف موظفين آخرين
وتعرض تلميح غيرهم فوق صفّك. `relative` يعيدها إلى حدود الخانة.
ولا يحرّك شيئًا آخر: `.employee-donut-center` هنا `static` أصلاً. */
#dashboard-view.rd-shell .employee-donut {
position: relative;
width: auto;
aspect-ratio: auto;
background: none !important;
border-radius: 0;
box-shadow: none;
}
#dashboard-view.rd-shell .employee-donut::after { display: none; }
#dashboard-view.rd-shell .employee-donut-center {
position: static;
inset: auto;
display: block;
text-align: start;
}
/* الابن المباشر وحده: العنوان «ما بحوزته». وقاعدةٌ بلا «>» تلتقط كل span
داخل المركز - فأخفت شقّي سطر التفصيل (عهدة/بطاقة) بـdisplay:none على
الشاشات الضيّقة، ورقمٌ يختفي بلا سبب أسوأ من رقمٍ لم يُبنَ. */
#dashboard-view.rd-shell .employee-donut-center > span {
display: block;
margin: 0 0 5px;
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-semi);
letter-spacing: .06em;
color: var(--rd-faint);
}
#dashboard-view.rd-shell .employee-donut-center > strong {
font-size: var(--fs-25);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.02em;
line-height: 1;
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .employee-donut-center > strong.is-negative { color: var(--anfal-rejected); }
#dashboard-view.rd-shell .employee-donut-center .currency-unit {
margin-inline-start: 6px;
font-size: var(--fs-12);
font-weight: var(--anfal-weight-medium);
color: var(--rd-faint);
}
/* -- proportion bar: positive sources only, in source order -- */
#dashboard-view.rd-shell .rd-srcbar {
display: flex;
gap: 2px;
height: 7px;
margin-top: 14px;
border-radius: var(--r-4);
overflow: hidden;
background: var(--anfal-line-quiet);
}
#dashboard-view.rd-shell .rd-srcbar i { display: block; height: 100%; min-width: 3px; }
#dashboard-view.rd-shell .rd-seg-0 { background: var(--anfal-approved); }
#dashboard-view.rd-shell .rd-seg-1 { background: var(--anfal-gold-500); }
#dashboard-view.rd-shell .rd-seg-2 { background: var(--anfal-navy-800); }
/* -- sources -- */
#dashboard-view.rd-shell .employee-custody-stats {
display: grid;
gap: 0;
margin: 13px 0 0;
}
#dashboard-view.rd-shell .employee-custody-stats > div {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 0;
border-bottom: 1px solid var(--rd-line-soft);
font-size: var(--fs-12);
}
#dashboard-view.rd-shell .employee-custody-stats > div:last-child { border-bottom: 0; }
#dashboard-view.rd-shell .employee-custody-stats dt {
flex: 1;
padding: 0;
color: var(--rd-muted);
font-size: var(--fs-12);
}
#dashboard-view.rd-shell .employee-custody-stats dt::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-inline-end: 8px;
border-radius: var(--r-2p5);
vertical-align: middle;
background: var(--anfal-line-soft);
}
#dashboard-view.rd-shell .source-cash dt::before { background: var(--anfal-approved); }
#dashboard-view.rd-shell .source-company-card dt::before { background: var(--anfal-gold-500); }
#dashboard-view.rd-shell .source-personal-account dt::before { background: var(--anfal-navy-800); }
#dashboard-view.rd-shell .employee-custody-stats dd {
margin: 0;
font-size: var(--fs-12);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .employee-custody-stats dd.rd-neg { color: var(--anfal-rejected); }
#dashboard-view.rd-shell .employee-custody-stats dd.rd-zero {
color: var(--rd-faint);
font-weight: var(--anfal-weight-medium);
}
/* -- money awaiting a decision is not a balance -- */
#dashboard-view.rd-shell .employee-custody-stats > .pending {
margin-top: 11px;
padding: 9px 11px;
border: 1px solid var(--rd-line-soft);
border-radius: var(--r-9);
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .pending dt::before { display: none; }
#dashboard-view.rd-shell .employee-custody-stats > .pending.rd-pending-live {
border-color: #f0dfc0;
background: var(--anfal-gold-075);
}
#dashboard-view.rd-shell .pending.rd-pending-live dt { color: var(--anfal-amber-700); }
#dashboard-view.rd-shell .pending.rd-pending-live dd { color: var(--anfal-pending); font-weight: var(--anfal-weight-strong); }
/* -- actions -- */
#dashboard-view.rd-shell .rd-card-acts {
display: flex;
gap: 8px;
margin-top: 15px;
padding-top: 13px;
border-top: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell .rd-card-acts > button {
flex: 1;
min-width: 0;
width: auto;
min-height: 36px;
margin: 0;
border-radius: var(--r-9);
font-size: var(--fs-12);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .rd-card-acts .employee-statement-button {
border: 1px solid var(--rd-line);
background: transparent;
color: var(--rd-muted);
}
#dashboard-view.rd-shell .rd-card-acts .employee-statement-button:hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
}
/* -- nothing to show: say it once and offer the way in -- */
#dashboard-view.rd-shell .employee-custody-card.rd-empty .employee-donut-block,
#dashboard-view.rd-shell .employee-custody-card.rd-empty .employee-custody-stats,
#dashboard-view.rd-shell .employee-custody-card.rd-empty .rd-srcbar {
display: none;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > header {
border-bottom: 0;
padding-bottom: 0;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty .rd-card-acts {
margin-top: 13px;
padding-top: 13px;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty .rd-card-acts > button {
flex: 0 0 auto;
padding: 0 15px;
}
/* ---------------------------------------------------------------
39. WIDE SCREENS - the cards line up as rows
Sixteen employees compared by balance want columns, not a column
of cards. The same markup, laid out along one axis instead.
--------------------------------------------------------------- */
@media (min-width: 1000px) {
/* النمط الجدولي صار اختيارًا لا حتمًا: يُطلب بـdata-roster-mode="row"
وهو الافتراضي. وبلا السمة - لو تعطّلت الشيفرة - تعود البطاقات،
وهي عرضٌ صحيح لا شاشة مكسورة. */
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-custody-head {
display: grid;
grid-template-columns: var(--rd-custody-cols);
gap: 16px;
align-items: center;
padding: 11px 18px;
border: 1px solid var(--rd-line);
border-bottom: 0;
border-radius: 12px 12px 0 0;
background: var(--rd-surface-soft);
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-grid {
display: block;
border: 1px solid var(--rd-line);
border-top: 0;
border-radius: 0 0 12px 12px;
background: var(--rd-surface);
overflow: hidden;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card {
display: grid;
grid-template-columns: var(--rd-custody-cols);
gap: 16px;
align-items: center;
padding: 13px 18px;
border: 0;
border-bottom: 1px solid var(--rd-line-soft);
border-radius: 0;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card:last-child { border-bottom: 0; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card:hover {
border-color: transparent;
border-bottom-color: var(--rd-line-soft);
background: var(--rd-surface-soft);
box-shadow: none;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card > header {
padding: 0;
border-bottom: 0;
justify-content: flex-start;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-block { padding: 0; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center > strong { font-size: var(--fs-17); }
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-srcbar { margin-top: 8px; height: 5px; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats { margin: 0; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats > div {
padding: 3px 0;
border-bottom: 0;
font-size: var(--fs-11p5);
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats > .pending {
margin-top: 5px;
padding: 5px 9px;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-card-acts {
margin: 0;
padding: 0;
border-top: 0;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-card-acts > button {
flex: 0 0 auto;
min-height: 31px;
padding: 0 12px;
font-size: var(--fs-11p5);
}
/* an empty row keeps the columns, it just has nothing to fill them */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card.rd-empty {
grid-template-columns: var(--rd-custody-cols);
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card.rd-empty > header { padding: 0; }
}
@media (max-width: 999px) {
#dashboard-view.rd-shell .rd-custody-head { display: none; }
}
/* ---------------------------------------------------------------
40. SECTIONS 38-39 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-card {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-card > header,
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-stats > div,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-card-acts {
border-color: var(--anfal-dark-700);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-card h4,
html[data-theme="dark"] #dashboard-view.rd-shell .employee-donut-center > strong,
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-stats dd {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .no-custody-badge,
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-stats > .pending {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-srcbar { background: var(--anfal-dark-700); }
html[data-theme="dark"] #dashboard-view.rd-shell .rd-card-acts .employee-statement-button {
border-color: var(--anfal-dark-600);
color: var(--anfal-steel);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-stats > .pending.rd-pending-live {
border-color: #463617;
background: #231a0b;
}
@media (min-width: 1000px) {
html[data-theme="dark"] #dashboard-view.rd-shell .rd-custody-head {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-grid {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-custody-card:hover {
background: rgba(255, 255, 255, .03);
}
}
/* ---------------------------------------------------------------
41. CUSTODY ROWS - corrections
--------------------------------------------------------------- */
/* The actions track was declared `auto`, which the fr columns then
starved to zero - the buttons rendered outside their own cell.
Giving it a floor keeps the row honest at every width. */
#dashboard-view.rd-shell {
--rd-custody-cols: minmax(175px, 1.1fr) minmax(125px, .7fr) minmax(195px, 1.3fr) minmax(180px, max-content);
}
/* Nothing pending is not a fact worth a row of its own. It appears
only when there is money actually waiting on a decision. */
#dashboard-view.rd-shell .employee-custody-stats > .pending:not(.rd-pending-live) {
display: none;
}
@media (min-width: 1000px) {
#dashboard-view.rd-shell .rd-card-acts {
justify-content: flex-end;
}
#dashboard-view.rd-shell .rd-card-acts > button {
flex: 0 0 auto;
}
}
/* ---------------------------------------------------------------
42. CUSTODY ROWS - the header was still spanning the row
The card's original rule puts its header on `grid-column: 1 / -1`,
which made sense when the card stacked. Laid out as a row it ate
every track and pushed the other three cells one column along,
leaving the last one empty. On wide screens the header is just
the first cell.
--------------------------------------------------------------- */
@media (min-width: 1000px) {
#dashboard-view.rd-shell .employee-custody-card > header {
grid-column: auto;
min-width: 0;
}
/* In a row the labels compete with their figures for a narrow
track: the figure never wraps, the label gives way first. */
#dashboard-view.rd-shell .employee-custody-stats > div {
min-width: 0;
}
#dashboard-view.rd-shell .employee-custody-stats dt {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#dashboard-view.rd-shell .employee-custody-stats dd {
flex: 0 0 auto;
white-space: nowrap;
}
#dashboard-view.rd-shell .employee-custody-card > .employee-donut-block,
#dashboard-view.rd-shell .employee-custody-card > .employee-custody-stats {
min-width: 0;
}
#dashboard-view.rd-shell .employee-donut-center > strong {
white-space: nowrap;
}
/* an empty row has no figures, so its name simply runs on */
#dashboard-view.rd-shell .employee-custody-card.rd-empty > header {
grid-column: 1 / 4;
}
}
/* ---------------------------------------------------------------
43. CUSTODY ROWS - column balance
The source labels are the longest strings in the row and were
being clipped, so the track that holds three of them gets the
room. The balance needs only its digits.
--------------------------------------------------------------- */
#dashboard-view.rd-shell {
--rd-custody-cols: minmax(160px, 1fr) minmax(115px, .6fr) minmax(255px, 1.75fr) minmax(170px, max-content);
}
@media (min-width: 1000px) {
#dashboard-view.rd-shell .employee-custody-stats dt {
font-size: var(--fs-11);
}
#dashboard-view.rd-shell .employee-custody-stats dt::before {
margin-inline-end: 6px;
}
#dashboard-view.rd-shell .employee-custody-stats dd {
font-size: var(--fs-11p5);
padding-inline-start: 6px;
}
}
/* ---------------------------------------------------------------
44. CUSTODY - the real table
The previous pass laid the cards out as rows but kept all three
sources stacked inside one cell, which defeats the point: a table
earns its keep when each figure has its own column and the eye can
run down it. The source list now flattens into the row grid, one
column per source, named once in the header.
--------------------------------------------------------------- */
@media (min-width: 1100px) {
#dashboard-view.rd-shell[data-roster-mode="row"] {
--rd-custody-cols:
minmax(150px, 1.2fr) /* employee */
minmax(105px, .8fr) /* balance */
minmax(88px, .62fr) /* cash */
minmax(88px, .62fr) /* card */
minmax(88px, .62fr) /* personal */
minmax(80px, .55fr) /* pending */
minmax(150px, max-content);
}
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-custody-head,
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card {
grid-template-columns: var(--rd-custody-cols);
gap: 12px;
}
/* the list dissolves so its rows become cells of the row above */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats {
display: contents;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats > div {
display: block;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
text-align: start;
}
/* the header names each column, so the rows need not repeat it */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats dt {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats dd {
display: block;
padding: 0;
font-size: var(--fs-12);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
}
/* a column that is empty still has to hold its place, or every
row below drifts out of line */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats > .pending:not(.rd-pending-live) {
display: block;
visibility: hidden;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .pending.rd-pending-live dd {
display: inline-block;
padding: 2px 8px;
border-radius: var(--r-20);
border: 1px solid #f0dfc0;
background: var(--anfal-gold-075);
color: var(--anfal-pending);
font-weight: var(--anfal-weight-strong);
font-size: var(--fs-11);
}
/* headers align to their figures */
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-custody-head > span:last-child { text-align: start; }
/* an empty row spans the figure columns with its single message */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card.rd-empty > header {
grid-column: 1 / 7;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card.rd-empty .employee-custody-stats {
display: none;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center > strong { font-size: var(--fs-15p5); }
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-srcbar { height: 4px; margin-top: 7px; }
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-card-acts > button {
min-height: 29px;
padding: 0 11px;
font-size: var(--fs-11);
}
}
/* between the stacked card and the full table there is not enough
room for seven columns, so the cards stay stacked */
@media (min-width: 1000px) and (max-width: 1099px) {
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-custody-head { display: none; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 15px;
border: 0;
background: none;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card {
display: flex;
flex-direction: column;
border: 1px solid var(--rd-line);
border-radius: var(--r-14);
padding: 17px 18px 15px;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card > header {
grid-column: auto;
padding-bottom: 14px;
border-bottom: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-stats { display: grid; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center > span:not(.roster-col-value) { display: block; }
}
/* ---------------------------------------------------------------
45. SECTION 44 - dark theme
--------------------------------------------------------------- */
@media (min-width: 1100px) {
html[data-theme="dark"] #dashboard-view.rd-shell .pending.rd-pending-live dd {
border-color: #463617;
background: #231a0b;
}
}
/* ---------------------------------------------------------------
46. CUSTODY TABLE - place every cell by name
Auto-placement was leaving the name and the balance fighting over
the first track, because the card's original rule still asks the
header to span the row. Naming each column removes the argument:
the row reads the same whatever order the markup arrives in.
--------------------------------------------------------------- */
@media (min-width: 1100px) {
#dashboard-view.rd-shell .employee-custody-card > header {
grid-column: 1 / 2;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-card > .employee-donut-block {
grid-column: 2 / 3;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-stats > .source-cash {
grid-column: 3 / 4;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-stats > .source-company-card {
grid-column: 4 / 5;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-stats > .source-personal-account {
grid-column: 5 / 6;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-stats > .pending {
grid-column: 6 / 7;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-card > .rd-card-acts {
grid-column: 7 / 8;
grid-row: 1;
justify-content: flex-start;
}
/* a row with no custody keeps only its name and the way in */
#dashboard-view.rd-shell .employee-custody-card.rd-empty > header {
grid-column: 1 / 7;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .rd-card-acts {
grid-column: 7 / 8;
}
}
/* ---------------------------------------------------------------
47. TASK BADGE ON THE DETAILS BUTTON
The app hangs a pending-task count off this button. Once the
button shrank to table size the badge sat over its own edge, so
it becomes part of the label instead of an overlay.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-card-acts .employee-details-button {
position: relative;
gap: 7px;
}
/* ---------------------------------------------------------------
48. CUSTODY TABLE - four columns
Employee, balance, when it last moved, and the way in. The source
breakdown moves to the detail view, which already carries it
along with every funding entry and its proof - so nothing is lost
from the record, only from the first glance.
The currency is named once in the header instead of trailing every
figure in every row.
--------------------------------------------------------------- */
@media (min-width: 1100px) {
#dashboard-view.rd-shell {
--rd-custody-cols:
minmax(200px, 1.6fr) /* employee */
minmax(140px, 1fr) /* balance */
minmax(140px, 1fr) /* last moved */
minmax(200px, max-content);
}
/* the breakdown belongs to the detail view now */
#dashboard-view.rd-shell .employee-custody-card > .employee-custody-stats {
display: none;
}
#dashboard-view.rd-shell .employee-custody-card > .employee-last-movement {
grid-column: 3 / 4;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-card > .rd-card-acts {
grid-column: 4 / 5;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > header {
grid-column: 1 / 4;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .rd-card-acts {
grid-column: 4 / 5;
}
/* the header names the unit, so the figures drop it */
#dashboard-view.rd-shell .employee-donut-center .currency-unit {
display: none;
}
#dashboard-view.rd-shell .employee-donut-center > strong {
font-size: var(--fs-16);
}
}
/* ---------------------------------------------------------------
49. LAST MOVEMENT
A timestamp is context, not a headline: it sits in the quiet
register, and reads as absent rather than as zero when there has
been no movement at all.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-last-movement {
display: block;
font-size: var(--fs-11p5);
color: var(--rd-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#dashboard-view.rd-shell .employee-last-movement.is-none {
color: var(--rd-faint);
font-style: normal;
}
/* on a card it needs its own label, since no header names it */
@media (max-width: 1099px) {
#dashboard-view.rd-shell .employee-last-movement {
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell .employee-last-movement::before {
content: "آخر تحديث";
margin-inline-end: 8px;
color: var(--rd-faint);
font-weight: var(--anfal-weight-semi);
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty .employee-last-movement {
display: none;
}
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-last-movement {
color: var(--anfal-steel);
}
@media (max-width: 1099px) {
html[data-theme="dark"] #dashboard-view.rd-shell .employee-last-movement {
border-top-color: var(--anfal-dark-700);
}
}
/* ---------------------------------------------------------------
50. CUSTODY TABLE - five columns, one roster
Suspended staff used to sit in a separate block underneath with
less information. A status column brings everyone into the same
list, which is also the only way to compare them.
--------------------------------------------------------------- */
@media (min-width: 1100px) {
#dashboard-view.rd-shell {
--rd-custody-cols:
minmax(190px, 1.5fr) /* employee */
minmax(120px, .9fr) /* balance */
minmax(130px, .95fr) /* last moved */
minmax(90px, .6fr) /* status */
minmax(150px, max-content);
}
#dashboard-view.rd-shell .employee-custody-card > .employee-status-cell {
grid-column: 4 / 5;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-card > .rd-card-acts {
grid-column: 5 / 6;
grid-row: 1;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > header {
grid-column: 1 / 2;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .rd-card-acts {
grid-column: 5 / 6;
}
/* the figure holds one line - the header already carries the unit */
#dashboard-view.rd-shell .employee-donut-center > strong {
display: block;
font-size: var(--fs-15);
line-height: 1.2;
white-space: nowrap;
}
/* العنوان يُخفى، لا سطر المبلغ - وهو span أيضًا منذ أن لُفّ الرقم
وأيقونته في سطر واحد. القاعدة كما كانت كانت تُخفي الرقم نفسه. */
#dashboard-view.rd-shell .employee-donut-center > span:not(.roster-col-value) { display: none; }
}
/* ---------------------------------------------------------------
51. STATUS
Two states, told by shape and word rather than colour alone.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-status-cell {
display: inline-flex;
align-items: center;
gap: 6px;
justify-self: start;
padding: 3px 10px;
border: 1px solid transparent;
border-radius: var(--r-20);
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
}
#dashboard-view.rd-shell .employee-status-cell::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
#dashboard-view.rd-shell .employee-status-cell.is-live {
border-color: #cbe7d9;
background: var(--anfal-green-050);
color: var(--anfal-approved);
}
#dashboard-view.rd-shell .employee-status-cell.is-suspended {
border-color: var(--anfal-red-200);
background: var(--anfal-red-075);
color: var(--anfal-rejected);
}
@media (max-width: 1099px) {
#dashboard-view.rd-shell .employee-status-cell {
align-self: flex-start;
margin-top: 11px;
}
}
/* ---------------------------------------------------------------
52. NO BALANCE
An account that was never funded says so where the figure would
be, in the same quiet register as an absent movement - not as a
zero, which reads as a real amount.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-donut-block.is-no-balance .employee-donut-center > strong,
#dashboard-view.rd-shell .employee-donut-block.is-no-balance .employee-donut-center .currency-unit,
#dashboard-view.rd-shell .employee-donut-block.is-no-balance .employee-donut-center > span {
display: none;
}
#dashboard-view.rd-shell .employee-donut-block.is-no-balance .employee-donut-center::after {
content: "لا يوجد رصيد";
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-medium);
color: var(--rd-faint);
white-space: nowrap;
}
#dashboard-view.rd-shell .employee-donut-block.is-no-balance .rd-srcbar { display: none; }
/* ---------------------------------------------------------------
53. ONE ACTION PER ROW
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-card-acts .employee-details-button {
flex: 0 0 auto;
min-width: 130px;
justify-content: center;
}
/* ---------------------------------------------------------------
54. THE DETAIL VIEW BECOMES A DIALOG
It carried the right content but arrived as a whole new page, so
it read as navigation rather than as opening something. Centred,
scrolling inside itself, over a dimmed page, it reads as what it
is: a closer look at one row.
The backdrop is the ring of the box-shadow rather than a separate
element, so the app keeps sole control of when this is shown -
nothing here has to guess at open and closed state.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary:not([hidden]) {
position: fixed;
top: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
z-index: 220;
width: min(720px, 92vw);
max-height: 86vh;
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: 0 22px 22px;
border: 1px solid var(--rd-line);
border-radius: var(--r-18);
background: var(--rd-surface);
box-shadow:
0 0 0 100vmax rgba(7, 26, 44, .48),
0 24px 64px rgba(7, 26, 44, .28);
}
/* the heading stays put while the history scrolls under it */
#dashboard-view.rd-shell .employee-detail-summary:not([hidden]) .employee-detail-heading {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin: 0 -22px 16px;
padding: 18px 22px 15px;
border-bottom: 1px solid var(--rd-line-soft);
background: var(--rd-surface);
}
#dashboard-view.rd-shell .employee-detail-summary h3 {
font-size: var(--fs-16);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
}
#dashboard-view.rd-shell .employee-detail-summary .employee-detail-heading p {
margin-top: 3px;
font-size: var(--fs-11p5);
color: var(--rd-muted);
}
/* the app's own back control now reads as a close */
#dashboard-view.rd-shell .detail-home-button {
flex: 0 0 auto;
min-height: 32px;
padding: 0 13px;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-muted);
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .detail-home-button:hover {
border-color: var(--anfal-rejected);
background: var(--anfal-red-075);
color: var(--anfal-rejected);
}
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history h4 {
font-size: var(--fs-13p5);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
}
/* the page behind stops scrolling with the dialog on top of it */
#dashboard-view.rd-shell:has(.employee-detail-summary:not([hidden])) .workspace-content {
overflow: hidden;
}
/* ---------------------------------------------------------------
55. SECTIONS 50-54 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .employee-status-cell.is-live {
border-color: #16452f;
background: #0a2419;
color: #4cbf8b;
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-status-cell.is-suspended {
border-color: #4a201d;
background: #241110;
color: var(--anfal-red-150);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-summary:not([hidden]),
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-summary:not([hidden]) .employee-detail-heading {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-summary:not([hidden]) {
box-shadow:
0 0 0 100vmax rgba(0, 0, 0, .62),
0 24px 64px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-summary h3 { color: var(--anfal-line-cool); }
html[data-theme="dark"] #dashboard-view.rd-shell .detail-home-button {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
color: var(--anfal-steel);
}
/* ---------------------------------------------------------------
56. DIALOG CENTRING - direction-neutral
The first attempt pinned the dialog with inset-inline-start and
then pulled it back by half its width. In a right-to-left page
the logical start is the right edge while the transform still
moves along the physical x-axis, so the two fought and the panel
ended up off-screen. Auto margins inside a full inset centre it
the same way in either direction, with no transform at all.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary:not([hidden]) {
inset: 0;
top: auto;
inset-inline-start: auto;
margin: auto;
transform: none;
width: min(720px, 92vw);
height: fit-content;
max-height: 86vh;
}
/* ---------------------------------------------------------------
57. DIALOG CENTRING - finish the job
The previous pass set `inset: 0` and then immediately cleared two
of the four edges back to `auto`, which is exactly what auto
margins need in order NOT to centre. All four edges stay pinned;
the margins do the rest.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary:not([hidden]) {
inset: 0;
margin: auto;
transform: none;
width: min(720px, 92vw);
height: fit-content;
max-height: 86vh;
overflow-x: hidden;
}
/* ---------------------------------------------------------------
58. PROOF LINKS
The stored filename is a URL-encoded Arabic name - one unbroken
token hundreds of characters long. Left alone it forces the whole
dialog to scroll sideways, so it wraps and, past two lines, gives
up gracefully.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary a,
#dashboard-view.rd-shell #detail-movements-list a {
display: block;
max-width: 100%;
overflow: hidden;
overflow-wrap: anywhere;
word-break: break-word;
font-size: var(--fs-11p5);
line-height: 1.45;
color: var(--anfal-navy-700);
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#dashboard-view.rd-shell #detail-movements-list > * {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
#dashboard-view.rd-shell .employee-detail-summary .employee-detail-content,
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history {
min-width: 0;
max-width: 100%;
}
/* ---------------------------------------------------------------
59. PROOF CONTROL
A document mark, not a filename. The stored name is URL-encoded
and unreadable; the file itself carries it.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-proof-button.rd-proof {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
flex: 0 0 auto;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface);
color: var(--anfal-rejected);
font-size: 0;
line-height: 0;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
transition: border-color .14s ease, background .14s ease;
}
#dashboard-view.rd-shell .custody-proof-button.rd-proof:hover {
border-color: var(--anfal-rejected);
background: var(--anfal-red-075);
}
#dashboard-view.rd-shell .custody-proof-button.rd-proof svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#dashboard-view.rd-shell .custody-funding-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 13px;
border: 1px solid var(--rd-line-soft);
border-radius: var(--r-10);
background: var(--rd-surface);
}
#dashboard-view.rd-shell .custody-funding-item + .custody-funding-item {
margin-top: 8px;
}
#dashboard-view.rd-shell .custody-funding-item-main {
min-width: 0;
flex: 1;
}
#dashboard-view.rd-shell .custody-funding-item-main strong {
display: block;
font-size: var(--fs-13p5);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .custody-funding-item-main span {
display: block;
margin-top: 2px;
font-size: var(--fs-11);
color: var(--rd-muted);
}
/* ---------------------------------------------------------------
60. THE DIALOG'S OWN CONTROLS
One way out, in the corner, and no second errand: the statement
has its own page and does not belong in a panel about one row.
لكن «تسجيل إرجاع عهدة» ليس له صفحة أخرى: هو مدخله الوحيد في النظام
كلّه. إخفاء الصفّ كلّه أخفاه معه، فصار إرجاع العهدة متعذّرًا من
الواجهة - والخادم يقبله. فيُخفى الكشف وحده بالاسم، ويبقى الإرجاع.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary .employee-statement-button,
#dashboard-view.rd-shell .employee-detail-summary #detail-statement-button {
display: none;
}
#dashboard-view.rd-shell .employee-detail-summary .employee-detail-actions {
display: flex;
gap: 8px;
padding: 0 18px 14px;
}
#dashboard-view.rd-shell .detail-home-button.rd-close {
position: relative;
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
min-height: 0;
padding: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-muted);
font-size: 0;
line-height: 0;
}
#dashboard-view.rd-shell .detail-home-button.rd-close::before {
content: "\00d7";
font-size: var(--fs-17);
line-height: 1;
font-weight: var(--anfal-weight-regular);
}
#dashboard-view.rd-shell .detail-home-button.rd-close:hover {
border-color: var(--anfal-rejected);
background: var(--anfal-red-075);
color: var(--anfal-rejected);
}
/* ---------------------------------------------------------------
61. SECTIONS 59-60 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .custody-funding-item {
border-color: var(--anfal-dark-700);
background: var(--anfal-dark-900);
}
html[data-theme="dark"] #dashboard-view.rd-shell .custody-funding-item-main strong {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .custody-proof-button.rd-proof,
html[data-theme="dark"] #dashboard-view.rd-shell .detail-home-button.rd-close {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
/* ---------------------------------------------------------------
62. AN ACCOUNT THAT WAS NEVER OPENED
"No balance" suggests an account holding nothing. There is no
account at all, so it says that instead.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-donut-block.is-no-balance .employee-donut-center::after {
content: "لا يوجد عهدة";
}
/* ---------------------------------------------------------------
63. COLUMN ALIGNMENT
The name is the only column that reads as text and stays at the
reading edge. Everything after it is a value being compared down
a column, so heading and figure share one centre line - a heading
that sits over open space beside its own numbers is the thing
that made the table look loose.
--------------------------------------------------------------- */
@media (min-width: 1100px) {
#dashboard-view.rd-shell .rd-custody-head > span:nth-child(n+2) {
text-align: center;
}
/* balance */
#dashboard-view.rd-shell .employee-custody-card > .employee-donut-block {
text-align: center;
}
#dashboard-view.rd-shell .employee-donut-center {
text-align: center;
}
/* last movement */
#dashboard-view.rd-shell .employee-custody-card > .employee-last-movement {
text-align: center;
}
/* status */
#dashboard-view.rd-shell .employee-custody-card > .employee-status-cell {
justify-self: center;
}
/* details */
#dashboard-view.rd-shell .employee-custody-card > .rd-card-acts {
justify-content: center;
}
/* the row for an employee with no custody keeps the same centres */
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .employee-donut-block {
text-align: center;
}
}
/* ---------------------------------------------------------------
64. AN EMPTY ROW STILL HAS COLUMNS
Collapsing the balance block was right when this was a stacked
card - there was nothing to show, so the card shrank. In a table
the column has to stay: that is where "no custody" is said, and a
row that drops a cell pulls every heading out of line with the
figures beneath it.
--------------------------------------------------------------- */
@media (min-width: 1100px) {
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .employee-donut-block {
display: block;
text-align: center;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty .employee-donut-center {
display: block;
text-align: center;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .employee-last-movement {
display: block;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .employee-last-movement::before {
content: none;
}
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .employee-status-cell {
display: inline-flex;
justify-self: center;
margin: 0;
}
}
/* ---------------------------------------------------------------
65. THE SOURCE BAR RETIRES
It belonged to the first design, where each row carried its own
breakdown of cash, company card and personal account. The table
moved that breakdown into the detail dialog, and the bar was left
behind with nothing to show - three pixels wide, under every
balance, meaning nothing to anyone.
Hidden rather than deleted: the element is built by the layer's
own code, and a display rule is the one place a reader will look
for why it is not there.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-srcbar {
display: none;
}
/* ---------------------------------------------------------------
66. THE DETAIL DIALOG - a fixed frame with a scrolling list
It grew taller with every funding entry until it hit the viewport,
so the same dialog was a different shape for every employee. Now
the frame is one size: the name, the balance and the breakdown
hold still, and only the history moves under them.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary:not([hidden]) {
display: flex;
flex-direction: column;
height: min(620px, 88vh);
max-height: 88vh;
overflow: hidden;
padding: 0;
}
/* -- the name and the way out -- */
#dashboard-view.rd-shell .employee-detail-summary:not([hidden]) .employee-detail-heading {
position: static;
flex: 0 0 auto;
margin: 0;
padding: 17px 20px 14px;
border-bottom: 1px solid var(--rd-line-soft);
}
/* -- balance and breakdown: one calm block, no ring -- */
#dashboard-view.rd-shell .employee-detail-summary .employee-detail-content {
display: block;
flex: 0 0 auto;
margin: 0;
padding: 16px 20px 18px;
border-bottom: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell #detail-employee-donut {
position: static;
width: auto;
aspect-ratio: auto;
margin: 0 0 14px;
padding: 0;
background: none !important;
border-radius: 0;
box-shadow: none;
}
#dashboard-view.rd-shell #detail-employee-donut::after { display: none; }
#dashboard-view.rd-shell #detail-employee-donut > svg { display: none; }
#dashboard-view.rd-shell #detail-employee-donut .employee-donut-center {
position: static;
inset: auto;
display: block;
text-align: start;
}
#dashboard-view.rd-shell #detail-employee-donut .employee-donut-center > span {
display: block;
margin-bottom: 5px;
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-semi);
letter-spacing: .06em;
color: var(--rd-faint);
}
#dashboard-view.rd-shell #detail-employee-donut .employee-donut-center > strong {
font-size: var(--fs-27);
font-weight: var(--anfal-weight-strong);
line-height: 1;
letter-spacing: -.02em;
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell #detail-employee-donut .currency-unit {
display: inline;
margin-inline-start: 7px;
font-size: var(--fs-13);
font-weight: var(--anfal-weight-medium);
color: var(--rd-faint);
}
/* the breakdown reads as a list, each source on its own line */
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats {
display: grid;
gap: 0;
margin: 0;
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats > div {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--anfal-surface-cool);
font-size: var(--fs-12p5);
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats > div:last-child {
border-bottom: 0;
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats dt {
flex: 1;
min-width: 0;
padding: 0;
color: var(--rd-muted);
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats dt::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-inline-end: 9px;
border-radius: var(--r-2p5);
vertical-align: middle;
background: var(--anfal-line-soft);
}
#dashboard-view.rd-shell .employee-detail-content .source-cash dt::before { background: var(--anfal-approved); }
#dashboard-view.rd-shell .employee-detail-content .source-company-card dt::before { background: var(--anfal-gold-500); }
#dashboard-view.rd-shell .employee-detail-content .source-personal-account dt::before { background: var(--anfal-navy-800); }
#dashboard-view.rd-shell .employee-detail-content .pending dt::before { background: var(--anfal-pending); }
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats dd {
margin: 0;
flex: 0 0 auto;
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* -- the history: its heading holds, its list scrolls -- */
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
margin: 0;
padding: 0;
border-top: 0;
}
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history > header {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 15px 20px 12px;
}
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history p {
margin-top: 3px;
font-size: var(--fs-11);
color: var(--rd-muted);
}
#dashboard-view.rd-shell #detail-funding-count {
flex: 0 0 auto;
padding: 3px 10px;
border: 1px solid var(--anfal-gold-150);
border-radius: var(--r-20);
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
}
#dashboard-view.rd-shell #detail-movements-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 2px 20px 18px;
}
/* ---------------------------------------------------------------
67. FUNDING ROW - the edit control joins the row
Codex added a way to correct how a funding was paid. It sits with
the proof, at the end of the row it belongs to.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-funding-item {
gap: 10px;
}
#dashboard-view.rd-shell .custody-funding-item .employee-detail-action,
#dashboard-view.rd-shell .custody-funding-item button:not(.custody-proof-button) {
flex: 0 0 auto;
min-height: 30px;
padding: 0 11px;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-muted);
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
white-space: nowrap;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .custody-funding-item button:not(.custody-proof-button):hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
}
/* ---------------------------------------------------------------
68. SECTIONS 66-67 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-summary .employee-detail-content,
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-summary .employee-detail-heading {
border-color: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-content .employee-custody-stats > div {
border-bottom-color: var(--anfal-dark-700);
}
html[data-theme="dark"] #dashboard-view.rd-shell #detail-employee-donut .employee-donut-center > strong,
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-content .employee-custody-stats dd {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell #detail-funding-count {
border-color: #3a2f18;
background: #241c0c;
}
html[data-theme="dark"] #dashboard-view.rd-shell .custody-funding-item button:not(.custody-proof-button) {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
color: var(--anfal-steel);
}
/* ---------------------------------------------------------------
69. CLOSE CONTROL - centred by geometry
The × character sits above the centre of its own box and carries
side bearings, so no amount of padding puts it in the middle of a
square. Two drawn lines have no such opinion.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .detail-home-button.rd-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
min-height: 30px;
padding: 0;
line-height: 0;
font-size: 0;
}
#dashboard-view.rd-shell .detail-home-button.rd-close::before {
content: none;
}
#dashboard-view.rd-shell .detail-home-button.rd-close svg {
display: block;
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
/* ---------------------------------------------------------------
70. THE DIALOG IS NOT A TABLE ROW
`.employee-custody-stats` names two different things: the source
list inside a table row, and the same list inside the detail
dialog. The wide-screen rules dissolved that list into the row
grid and hid its labels, which is right in a table with headings
and wrong in a dialog that has none - the labels were the only
thing saying which figure was which.
Scoped by ancestor rather than by class, so each keeps its own
behaviour.
--------------------------------------------------------------- */
@media (min-width: 1100px) {
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats {
display: grid !important;
grid-template-columns: 1fr;
gap: 0;
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats > div {
display: flex !important;
grid-column: auto !important;
grid-row: auto !important;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--anfal-surface-cool);
background: none;
text-align: start;
visibility: visible;
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats > div:last-child {
border-bottom: 0;
}
/* the labels come back - nothing else names these figures here */
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats dt {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
flex: 1;
min-width: 0;
font-size: var(--fs-12p5);
color: var(--rd-muted);
white-space: normal;
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats dd {
display: block;
flex: 0 0 auto;
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
white-space: nowrap;
}
#dashboard-view.rd-shell .employee-detail-content .pending dd {
display: inline-block;
padding: 0;
border: 0;
background: none;
color: var(--anfal-pending);
font-size: var(--fs-12p5);
}
}
html[data-theme="dark"] #dashboard-view.rd-shell .employee-detail-content .employee-custody-stats dd {
color: var(--anfal-line-cool);
}
/* ---------------------------------------------------------------
71. THE SUMMARY BLOCK - balance beside its breakdown
Stacked, the balance and its parts read as two unrelated lists.
Side by side they read as what they are: one total on the reading
edge, and the accounts it came from answering it.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary .employee-detail-content {
display: grid;
grid-template-columns: minmax(150px, .85fr) minmax(220px, 1.15fr);
align-items: center;
gap: 18px;
padding: 15px 20px 15px;
}
#dashboard-view.rd-shell #detail-employee-donut {
margin: 0;
padding-inline-end: 18px;
border-inline-end: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell #detail-employee-donut .employee-donut-center > strong {
font-size: var(--fs-24);
}
@media (max-width: 560px) {
#dashboard-view.rd-shell .employee-detail-summary .employee-detail-content {
grid-template-columns: 1fr;
gap: 14px;
}
#dashboard-view.rd-shell #detail-employee-donut {
padding-inline-end: 0;
padding-bottom: 14px;
border-inline-end: 0;
border-bottom: 1px solid var(--rd-line-soft);
}
}
/* ---------------------------------------------------------------
72. SOURCE ROWS - a mark for each kind of money
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats > div {
padding: 6px 0;
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats dt {
display: flex;
align-items: center;
gap: 9px;
font-size: var(--fs-12);
}
/* the plain dot gives way to the icon */
#dashboard-view.rd-shell .employee-detail-content .rd-src-row dt::before {
display: none;
}
#dashboard-view.rd-shell .rd-src-icon {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex: 0 0 auto;
border-radius: var(--r-8);
background: var(--rd-surface-soft);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .rd-src-icon svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
#dashboard-view.rd-shell .source-cash .rd-src-icon {
background: var(--anfal-green-050);
color: var(--anfal-approved);
}
#dashboard-view.rd-shell .source-company-card .rd-src-icon {
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
}
#dashboard-view.rd-shell .source-personal-account .rd-src-icon {
background: var(--anfal-line-quiet);
color: var(--anfal-navy-700);
}
#dashboard-view.rd-shell .pending .rd-src-icon {
background: var(--anfal-gold-075);
color: var(--anfal-pending);
}
/* ---------------------------------------------------------------
73. CLOSING THE GAP
Three paddings stacked between the summary and the history and
the two blocks drifted apart. One separating rule is enough.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history > header {
padding: 13px 20px 10px;
}
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history h4 {
font-size: var(--fs-13);
}
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history p {
margin-top: 2px;
}
/* ---------------------------------------------------------------
74. SECTIONS 71-73 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell #detail-employee-donut {
border-inline-end-color: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-src-icon {
background: rgba(255, 255, 255, .05);
color: var(--anfal-steel);
}
html[data-theme="dark"] #dashboard-view.rd-shell .source-cash .rd-src-icon {
background: #0a2419;
color: #4cbf8b;
}
html[data-theme="dark"] #dashboard-view.rd-shell .source-company-card .rd-src-icon {
background: #241c0c;
color: var(--anfal-gold-400);
}
html[data-theme="dark"] #dashboard-view.rd-shell .source-personal-account .rd-src-icon {
background: #0d1e2a;
color: var(--anfal-slate-400);
}
html[data-theme="dark"] #dashboard-view.rd-shell .pending .rd-src-icon {
background: #231a0b;
color: var(--anfal-amber-400);
}
@media (max-width: 560px) {
html[data-theme="dark"] #dashboard-view.rd-shell #detail-employee-donut {
border-bottom-color: var(--anfal-dark-600);
}
}
/* ---------------------------------------------------------------
75. TIGHTER SUMMARY, HISTORY HIGHER
The balance, its breakdown and the history each carried their own
padding, and three of them in a row pushed the list down the
dialog. One rule separates them now and the rest closes up.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary .employee-detail-content {
gap: 14px;
padding: 12px 20px;
}
#dashboard-view.rd-shell #detail-employee-donut {
padding-inline-end: 14px;
}
#dashboard-view.rd-shell .employee-detail-content .employee-custody-stats > div {
padding: 4px 0;
}
#dashboard-view.rd-shell .employee-detail-summary .custody-funding-history > header {
padding: 11px 20px 9px;
}
/* ---------------------------------------------------------------
76. THE DIALOG STAYS OVER ITS OWN PAGE
Opening the detail used to swap the whole view, so the table you
came from vanished and a different page sat behind the panel.
The view switch is gone from the app; this keeps the page you
opened it from on screen underneath.
--------------------------------------------------------------- */
#dashboard-view.rd-shell:has(.employee-detail-summary:not([hidden])) #accountant-home[hidden] {
display: block;
}
/* whatever the detail panel is nested in must not clip a fixed child */
#dashboard-view.rd-shell .invoices-panel:has(.employee-detail-summary:not([hidden])) {
overflow: visible;
}
/* ---------------------------------------------------------------
77. THE DIALOG'S CONTAINER HAS TO BE OPEN TOO
The detail panel is a child of the invoices panel, which the app
hides while you are on the custody page. Its own hidden flag was
cleared, but a hidden parent draws nothing regardless.
`display: contents` opens the container without giving it a box:
it contributes no card, no padding and no place in the flow, and
the fixed dialog inside it paints over the page you came from.
--------------------------------------------------------------- */
#dashboard-view.rd-shell:has(.employee-detail-summary:not([hidden])) #invoices-panel[hidden] {
display: contents;
}
/* the container is open only for the dialog - nothing else in it
should appear over the custody table */
#dashboard-view.rd-shell:has(.employee-detail-summary:not([hidden])) #invoices-panel[hidden] > *:not(.employee-detail-summary) {
display: none;
}
/* ---------------------------------------------------------------
78. OUT-SHOUTING AN !important
The base stylesheet carries `[hidden] { display: none !important }`.
Specificity does not beat `!important`, so the container stayed
shut however precisely it was addressed - the one case where
answering in kind is the honest fix rather than a shortcut.
It applies to exactly one element, only while the dialog is open.
--------------------------------------------------------------- */
#dashboard-view.rd-shell:has(.employee-detail-summary:not([hidden])) #invoices-panel[hidden] {
display: contents !important;
}
#dashboard-view.rd-shell:has(.employee-detail-summary:not([hidden])) #invoices-panel[hidden] > *:not(.employee-detail-summary) {
display: none !important;
}
/* ---------------------------------------------------------------
79. EVERY DIALOG SCROLLS
All nine overlays share one shape: a fixed backdrop holding a
single section. Each of those sections was capped at 860px with
`overflow: hidden`, which is not a cap but a cut - on a laptop
screen, or with a long list inside, the rest of the dialog was
not merely off-view, it was unreachable. There was no scrollbar
because the element was told never to make one.
Two changes fix all of them: measure the cap against the viewport
instead of a guess in pixels, and let the overflow scroll.
--------------------------------------------------------------- */
html.rd-shell .profile-dialog,
html.rd-shell .statement-dialog,
html.rd-shell .approval-dialog,
html.rd-shell .notification-dialog,
html.rd-shell .push-consent-dialog,
html.rd-shell .page-count-dialog,
html.rd-shell .pwa-install-dialog,
html.rd-shell .referral-dialog,
html.rd-shell .admin-more-sheet {
max-height: min(88vh, 860px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* the backdrop itself never scrolls - only the panel on it does */
html.rd-shell .profile-overlay,
html.rd-shell .statement-overlay,
html.rd-shell .approval-overlay,
html.rd-shell .notification-overlay,
html.rd-shell .push-consent-overlay,
html.rd-shell .page-count-overlay,
html.rd-shell .pwa-install-overlay,
html.rd-shell .referral-overlay,
html.rd-shell .admin-more-overlay {
overflow: hidden;
overscroll-behavior: contain;
}
/* a scrolling panel needs a visible edge to its scrollbar */
html.rd-shell .profile-dialog::-webkit-scrollbar,
html.rd-shell .statement-dialog::-webkit-scrollbar,
html.rd-shell .approval-dialog::-webkit-scrollbar,
html.rd-shell .notification-dialog::-webkit-scrollbar,
html.rd-shell .push-consent-dialog::-webkit-scrollbar,
html.rd-shell .page-count-dialog::-webkit-scrollbar,
html.rd-shell .pwa-install-dialog::-webkit-scrollbar,
html.rd-shell .referral-dialog::-webkit-scrollbar,
html.rd-shell .admin-more-sheet::-webkit-scrollbar,
#dashboard-view.rd-shell #detail-movements-list::-webkit-scrollbar {
width: 10px;
}
html.rd-shell .profile-dialog::-webkit-scrollbar-thumb,
html.rd-shell .statement-dialog::-webkit-scrollbar-thumb,
html.rd-shell .approval-dialog::-webkit-scrollbar-thumb,
html.rd-shell .notification-dialog::-webkit-scrollbar-thumb,
html.rd-shell .push-consent-dialog::-webkit-scrollbar-thumb,
html.rd-shell .page-count-dialog::-webkit-scrollbar-thumb,
html.rd-shell .pwa-install-dialog::-webkit-scrollbar-thumb,
html.rd-shell .referral-dialog::-webkit-scrollbar-thumb,
html.rd-shell .admin-more-sheet::-webkit-scrollbar-thumb,
#dashboard-view.rd-shell #detail-movements-list::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: var(--r-6);
background-clip: padding-box;
background-color: var(--anfal-line-soft);
}
html.rd-shell .profile-dialog::-webkit-scrollbar-thumb:hover,
html.rd-shell .statement-dialog::-webkit-scrollbar-thumb:hover,
html.rd-shell .notification-dialog::-webkit-scrollbar-thumb:hover,
#dashboard-view.rd-shell #detail-movements-list::-webkit-scrollbar-thumb:hover {
background-color: var(--anfal-slate-400);
}
/* the title stays put in the dialogs whose heading we can name */
html.rd-shell .profile-dialog > .profile-heading {
position: sticky;
top: 0;
z-index: 3;
background: var(--rd-surface);
}
html[data-theme="dark"].rd-shell .profile-dialog > .profile-heading {
background: var(--anfal-dark-800);
}
html[data-theme="dark"].rd-shell .profile-dialog::-webkit-scrollbar-thumb,
html[data-theme="dark"] #dashboard-view.rd-shell #detail-movements-list::-webkit-scrollbar-thumb {
background-color: #2a3d52;
}
/* ---------------------------------------------------------------
80. DIALOG TITLE MARKS
The same gold tile the cards and the action tiles use, so a
dialog reads as part of the system it opened from rather than
as something that arrived from elsewhere.
--------------------------------------------------------------- */
html.rd-shell .rd-dialog-title {
display: flex;
align-items: center;
gap: 10px;
}
html.rd-shell .rd-dialog-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: 0 0 auto;
border-radius: var(--r-9);
background: var(--rd-gold-soft);
color: var(--anfal-gold-500);
}
html.rd-shell .rd-dialog-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* the two that carry a warning keep the system's warning colour */
html.rd-shell .approval-dialog .rd-dialog-icon,
html.rd-shell .page-count-dialog .rd-dialog-icon {
background: var(--anfal-gold-075);
color: var(--anfal-pending);
}
html.rd-shell .push-consent-dialog .rd-dialog-icon,
html.rd-shell .notification-dialog .rd-dialog-icon {
background: var(--anfal-line-quiet);
color: var(--anfal-navy-700);
}
html[data-theme="dark"].rd-shell .rd-dialog-icon {
background: #241c0c;
}
html[data-theme="dark"].rd-shell .approval-dialog .rd-dialog-icon,
html[data-theme="dark"].rd-shell .page-count-dialog .rd-dialog-icon {
background: #231a0b;
color: var(--anfal-amber-400);
}
html[data-theme="dark"].rd-shell .push-consent-dialog .rd-dialog-icon,
html[data-theme="dark"].rd-shell .notification-dialog .rd-dialog-icon {
background: #0d1e2a;
color: var(--anfal-slate-400);
}
/* ---------------------------------------------------------------
81. DIALOG SCROLLING - for every session, not only admins
The rest of this file is scoped away from employee sessions on
purpose. This block is not, and the distinction matters: it does
not change how anything looks. It restores reach.
`overflow: hidden` on a capped panel does not hide the overflow -
it forbids the scrollbar that would reach it. On a short screen
the buttons at the foot of a dialog could not be pressed by any
means. That is not a styling preference to keep behind a flag; it
is a control the user cannot operate.
Checked before widening: no dialog holds an absolutely positioned
child that relies on escaping its box - the only ones present are
visually-hidden inputs. Native select and date pickers paint in
the browser's own layer and are not clipped by an ancestor.
--------------------------------------------------------------- */
.profile-dialog,
.statement-dialog,
.approval-dialog,
.notification-dialog,
.push-consent-dialog,
.page-count-dialog,
.pwa-install-dialog,
.referral-dialog,
.admin-more-sheet {
max-height: min(88vh, 860px);
overflow-y: auto;
overscroll-behavior: contain;
}
.profile-overlay,
.statement-overlay,
.approval-overlay,
.notification-overlay,
.push-consent-overlay,
.page-count-overlay,
.pwa-install-overlay,
.referral-overlay,
.admin-more-overlay {
overscroll-behavior: contain;
}
/* ---------------------------------------------------------------
82. THE ADD-USER FORM BECOMES A DIALOG
Pinned to all four edges, the form was not a panel on the page -
it was a second page. Given a width and centred, it becomes what
the other dialogs already are, with the same dimmed ground behind
it drawn by the shadow ring.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .user-form-modal {
inset: 0;
margin: auto;
width: min(520px, 92vw);
height: fit-content;
max-height: min(88vh, 780px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 22px 22px;
border: 1px solid var(--rd-line);
border-radius: var(--r-18);
background: var(--rd-surface);
box-shadow:
0 0 0 100vmax rgba(7, 26, 44, .48),
0 24px 64px rgba(7, 26, 44, .28);
}
/* -- the heading holds while the fields scroll -- */
#dashboard-view.rd-shell .rd-userform-head {
position: sticky;
top: 0;
z-index: 3;
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 -22px 18px;
padding: 18px 22px 15px;
border-bottom: 1px solid var(--rd-line-soft);
background: var(--rd-surface);
}
#dashboard-view.rd-shell .rd-userform-head h2 {
font-size: var(--fs-16);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
line-height: 1.35;
}
#dashboard-view.rd-shell .rd-userform-head p {
margin-top: 3px;
font-size: var(--fs-11p5);
color: var(--rd-muted);
line-height: 1.5;
}
/* the placeholder avatar has nothing to say once the title does */
#dashboard-view.rd-shell .user-avatar-placeholder.rd-retired {
display: none;
}
/* the close control sits in the heading's corner */
#dashboard-view.rd-shell .user-form-modal .modal-close-button.rd-close {
position: absolute;
top: 18px;
inset-inline-end: 20px;
z-index: 4;
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
min-height: 30px;
padding: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-muted);
font-size: 0;
line-height: 0;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .user-form-modal .modal-close-button.rd-close:hover {
border-color: var(--anfal-rejected);
background: var(--anfal-red-075);
color: var(--anfal-rejected);
}
#dashboard-view.rd-shell .user-form-modal .modal-close-button.rd-close svg {
display: block;
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
#dashboard-view.rd-shell .rd-userform-head { padding-inline-end: 60px; }
/* -- the fields -- */
#dashboard-view.rd-shell .user-form-modal label {
display: block;
margin-bottom: 5px;
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .user-form-modal input,
#dashboard-view.rd-shell .user-form-modal select {
width: 100%;
min-height: 40px;
margin-bottom: 14px;
padding: 0 12px;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface-soft);
font-size: var(--fs-12p5);
color: var(--rd-ink);
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
#dashboard-view.rd-shell .user-form-modal input:focus,
#dashboard-view.rd-shell .user-form-modal select:focus {
outline: none;
border-color: var(--anfal-gold-500);
background: var(--rd-surface);
box-shadow: 0 0 0 3px rgba(184, 146, 85, .1);
}
#dashboard-view.rd-shell .user-form-modal .password-field {
display: flex;
gap: 8px;
align-items: flex-start;
}
#dashboard-view.rd-shell .user-form-modal .password-field input {
flex: 1;
min-width: 0;
}
#dashboard-view.rd-shell .user-form-modal .field-help {
display: block;
margin: -8px 0 16px;
font-size: var(--fs-10p5);
color: var(--rd-faint);
}
#dashboard-view.rd-shell .user-form-modal .primary-button {
width: 100%;
min-height: 42px;
margin-top: 4px;
border-radius: var(--r-10);
font-size: var(--fs-13);
font-weight: var(--anfal-weight-semi);
}
/* ---------------------------------------------------------------
83. SECTION 82 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .user-form-modal,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-userform-head {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
html[data-theme="dark"] #dashboard-view.rd-shell .user-form-modal {
box-shadow:
0 0 0 100vmax rgba(0, 0, 0, .62),
0 24px 64px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-userform-head h2 {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .user-form-modal input,
html[data-theme="dark"] #dashboard-view.rd-shell .user-form-modal select,
html[data-theme="dark"] #dashboard-view.rd-shell .user-form-modal .modal-close-button.rd-close {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
color: var(--anfal-line-cool);
}
/* ---------------------------------------------------------------
84. THE FORM ALREADY HAD A BACKDROP
`.user-form-modal::before` paints the dimmed ground and sits at
`z-index: -1` - behind the form, in front of the page. That works
only while the form creates no stacking context of its own.
Adding `overflow-y: auto` created one. The pseudo-element's -1
then counted from inside the form rather than from the page, so
it painted over the form's own white background and under the
fields: a dark panel with white inputs floating on it.
The fix is to stop competing. The form's backdrop stays; the
shadow ring I had added on top of it goes.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .user-form-modal {
isolation: auto;
box-shadow: 0 24px 64px rgba(7, 26, 44, .28);
}
/* the backdrop belongs to the page behind, not to the panel */
#dashboard-view.rd-shell .user-form-modal::before {
z-index: auto;
inset: -100vmax;
}
/* with the pseudo-element back behind it, the panel paints its own
surface again */
#dashboard-view.rd-shell .user-form-modal {
position: fixed;
z-index: 65;
background: var(--rd-surface);
}
html[data-theme="dark"] #dashboard-view.rd-shell .user-form-modal {
background: var(--anfal-dark-800);
}
/* ---------------------------------------------------------------
85. THE BACKDROP MOVES OUTSIDE THE PANEL
Correcting the previous note: `overflow` was never the cause. The
form carries `position: fixed` with `z-index: 65`, and that pair
is what opens a stacking context. Inside one, the pseudo-element's
`z-index: -1` no longer means "behind the panel, over the page" -
it means "over the panel's own background, under its fields".
It never showed because the form used to cover the whole screen,
so its backdrop and its surface were the same rectangle. Giving
the form a width exposed the flaw that was always there.
A shadow ring is painted outside the border box entirely, so no
stacking context can trap it.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .user-form-modal::before {
display: none !important;
}
#dashboard-view.rd-shell .user-form-modal {
box-shadow:
0 0 0 100vmax rgba(8, 26, 39, .68),
0 24px 64px rgba(7, 26, 44, .3) !important;
}
html[data-theme="dark"] #dashboard-view.rd-shell .user-form-modal {
box-shadow:
0 0 0 100vmax rgba(0, 0, 0, .68),
0 24px 64px rgba(0, 0, 0, .5) !important;
}
/* ---------------------------------------------------------------
86. THE CLOSE CONTROL HOLDS ITS CORNER
It was positioned against the panel, and the panel scrolls, so it
rode the content up and off the top - the one control that must
never be out of reach. It now sits inside the sticky heading, so
it holds its place by belonging there rather than by being pinned
against something that moves.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-userform-head {
position: sticky;
top: 0;
z-index: 5;
align-items: center;
padding-inline-end: 22px;
}
#dashboard-view.rd-shell .rd-userform-head > div {
flex: 1;
min-width: 0;
}
#dashboard-view.rd-shell .user-form-modal .modal-close-button.rd-close {
position: static;
flex: 0 0 auto;
inset: auto;
margin: 0;
}
/* ---------------------------------------------------------------
87. THE PASSWORD TOGGLE MATCHES ITS FIELD
The input measures 46px with its border and padding; the toggle
was left at its own intrinsic 54. Two controls sharing a line and
not a height read as a mistake even when nothing is broken.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .user-form-modal .password-field {
align-items: flex-start;
margin-bottom: 14px;
}
#dashboard-view.rd-shell .user-form-modal .password-field input {
margin-bottom: 0;
}
#dashboard-view.rd-shell .user-form-modal .password-toggle {
display: grid;
place-items: center;
width: 46px;
height: 46px;
min-height: 46px;
flex: 0 0 auto;
margin: 0;
padding: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface-soft);
color: var(--rd-muted);
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .user-form-modal .password-toggle:hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
}
#dashboard-view.rd-shell .user-form-modal .password-toggle svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
html[data-theme="dark"] #dashboard-view.rd-shell .user-form-modal .password-toggle {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
color: var(--anfal-steel);
}
/* ---------------------------------------------------------------
88. TWO CARDS, TWO JOBS
The first card answers "where am I and how are things" - the page
name, its one action, and the figures. The second is the list
itself. The search and the status filter change what the list
shows and nothing above it, so they belong to the second card,
sitting at its head where a filter is looked for.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-browser {
gap: 16px;
}
#dashboard-view.rd-shell .custody-browser > .custody-status-summary {
order: 1;
}
/* the bar becomes the top of the list card */
#dashboard-view.rd-shell .custody-filter-bar.rd-filters-joined {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px;
margin: 16px 0 0;
padding: 14px 18px;
border: 1px solid var(--rd-line);
border-bottom: 0;
border-radius: 12px 12px 0 0;
background: var(--rd-surface);
}
@media (min-width: 1100px) {
/* the head no longer starts the card, so it stops rounding */
#dashboard-view.rd-shell .rd-custody-head {
border-radius: 0;
border-top: 1px solid var(--rd-line);
}
}
/* below the table breakpoint the list has no head of its own, so
the bar closes onto the cards underneath it */
@media (max-width: 1099px) {
#dashboard-view.rd-shell .custody-filter-bar.rd-filters-joined {
border-bottom: 1px solid var(--rd-line);
border-radius: var(--r-12);
margin-bottom: 14px;
}
}
/* ---------------------------------------------------------------
89. SECTION 88 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .custody-filter-bar.rd-filters-joined {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
@media (min-width: 1100px) {
html[data-theme="dark"] #dashboard-view.rd-shell .rd-custody-head {
border-top-color: var(--anfal-dark-600);
}
}
/* ---------------------------------------------------------------
90. THE TABLE SITS INSIDE THE CARD
Before, the table's own border was the card's border - the same
line doing both jobs, so the list read as the card rather than as
something the card holds. The card now draws its own wall, and
the filter and the table both stand in from it by the same
margin, which is what makes the nesting legible.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-list-card {
margin-top: 16px;
}
/* أول بطاقة في الصفحة لا تحتاج فاصلًا فوقها: الصفحة نفسها تبدأ على بُعد
من الشريط، فهامشها الخاص يُضاف إليه فيبتعد صندوقُها عن بقية الشاشات. */
#dashboard-view.rd-shell .admin-control-page > .rd-list-card:first-child,
#dashboard-view.rd-shell .admin-control-page > .rd-list-card:nth-child(2) {
margin-top: 0;
}
#dashboard-view.rd-shell .rd-list-card {
padding: 18px;
border: 1px solid var(--rd-line);
border-radius: var(--r-14);
background: var(--rd-surface);
box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
}
/* the filter loses its own card - it is inside one now */
#dashboard-view.rd-shell .custody-filter-bar.rd-filters-joined {
margin: 0 0 14px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
/* the table becomes a panel within, with its own quiet edge */
#dashboard-view.rd-shell .rd-list-inner {
border: 1px solid var(--anfal-line-quiet);
border-radius: var(--r-11);
overflow: hidden;
/* حشوةٌ تفصل ما بالداخل عن خطّ الإطار. كانت صفرًا، فكان كل ما يُوضع
هنا يلتصق بالخط ببكسلٍ واحد - فيُقرأ الخطّ حدًّا للمحتوى لا حدًّا
للإطار. والستّة هي نفسها المسافة بين البطاقات، فالصفحة إيقاعٌ واحد.
(قرار المالك، ٢١ سبتمبر ٢٠٢٦، بعد أن عاينها حيّة.) */
padding: 6px;
}
@media (min-width: 1100px) {
#dashboard-view.rd-shell .rd-list-inner > .rd-custody-head {
margin: 0;
border: 0;
border-bottom: 1px solid var(--anfal-line-quiet);
border-radius: 0;
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .rd-list-inner > .employee-custody-grid {
border: 0;
border-radius: 0;
background: transparent;
}
#dashboard-view.rd-shell .rd-list-inner > .employee-custody-grid > .employee-custody-card:last-child {
border-bottom: 0;
}
}
/* stacked cards need no inner frame of their own */
@media (max-width: 1099px) {
#dashboard-view.rd-shell .rd-list-inner {
border: 0;
border-radius: 0;
overflow: visible;
}
#dashboard-view.rd-shell .rd-list-inner > .employee-custody-grid {
border: 0;
background: transparent;
}
}
/* ---------------------------------------------------------------
91. SECTION 90 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-card {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner {
border-color: var(--anfal-dark-600);
}
@media (min-width: 1100px) {
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner > .rd-custody-head {
border-bottom-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
}
}
/* ---------------------------------------------------------------
92. THE TWO-CARD PATTERN ON EVERY LIST PAGE
The card and its inner panel are already defined for custody;
these rules settle what each page puts inside them.
--------------------------------------------------------------- */
/* -- controls sitting at the head of a list card -- */
#dashboard-view.rd-shell .rd-list-card > .rd-filters-joined {
margin: 0 0 12px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
#dashboard-view.rd-shell .rd-list-card > .rd-filters-joined:last-of-type {
margin-bottom: 14px;
}
/* -- INVOICES -- */
#dashboard-view.rd-shell .invoice-browser {
display: block;
}
#dashboard-view.rd-shell .invoice-browser > .invoice-status-summary {
margin: 0;
}
#dashboard-view.rd-shell .rd-list-card > .invoice-status-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-bottom: 12px;
border-bottom: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell .rd-list-inner > .invoice-table-head {
padding: 11px 14px;
border-bottom: 1px solid var(--anfal-line-quiet);
background: var(--rd-surface-soft);
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .rd-list-inner > #invoice-list {
margin: 0;
border: 0;
background: transparent;
}
/* -- ACTIVITY LOG -- */
#dashboard-view.rd-shell .rd-list-card > .activity-filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px;
}
#dashboard-view.rd-shell .rd-list-inner > .activity-records {
padding: 0;
border: 0;
background: transparent;
}
#dashboard-view.rd-shell .rd-list-inner > .activity-records > article {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-bottom: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell .rd-list-inner > .activity-records > article:last-child {
border-bottom: 0;
}
#dashboard-view.rd-shell .rd-list-inner > .activity-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 14px;
border-top: 1px solid var(--anfal-line-quiet);
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .rd-list-inner > .activity-pagination button {
min-height: 30px;
padding: 0 12px;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-muted);
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .rd-list-inner > .activity-pagination button:hover:not(:disabled) {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
}
#dashboard-view.rd-shell .rd-list-inner > .activity-pagination button:disabled {
opacity: .45;
cursor: not-allowed;
}
#dashboard-view.rd-shell #activity-page-label {
font-size: var(--fs-11p5);
color: var(--rd-muted);
font-variant-numeric: tabular-nums;
}
/* -- STATEMENTS: the result nests inside the page's own card -- */
#dashboard-view.rd-shell .rd-inset-panel:not([hidden]) {
margin-top: 16px;
padding: 0;
border: 1px solid var(--anfal-line-quiet);
border-radius: var(--r-11);
overflow: hidden;
}
#dashboard-view.rd-shell .rd-inset-panel .statement-page-kpis {
border: 0;
border-bottom: 1px solid var(--anfal-line-quiet);
border-radius: 0;
box-shadow: none;
}
#dashboard-view.rd-shell .rd-inset-panel .statement-page-table-wrap {
padding: 14px;
}
#dashboard-view.rd-shell .rd-inset-panel h3 {
margin-bottom: 10px;
font-size: var(--fs-13);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
}
/* ---------------------------------------------------------------
93. SECTION 92 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-card > .invoice-status-tabs {
border-bottom-color: var(--anfal-dark-700);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner > .invoice-table-head,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner > .activity-pagination {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-900);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner > .activity-records > article {
border-bottom-color: var(--anfal-dark-700);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner > .activity-pagination button {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
color: var(--anfal-steel);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-inset-panel:not([hidden]),
html[data-theme="dark"] #dashboard-view.rd-shell .rd-inset-panel .statement-page-kpis {
border-color: var(--anfal-dark-600);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-inset-panel h3 {
color: var(--anfal-line-cool);
}
/* ---------------------------------------------------------------
94. INVOICES - the strip is the only filter
The tab row said the same four things the strip says, with the
same counts, driving the same list. Two controls for one job
leaves the reader checking whether they disagree.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoice-status-tabs.rd-retired {
display: none;
}
#dashboard-view.rd-shell .rd-strip-all .rd-strip-icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
color: var(--anfal-gold-500);
}
#dashboard-view.rd-shell .rd-strip-all .rd-strip-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---------------------------------------------------------------
95. INVOICES - the summary card stands apart from the list card
It was reading as one long panel; custody already separates the
two and this page now matches it.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoice-browser {
display: block;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
#dashboard-view.rd-shell .invoice-browser > .invoice-status-summary {
margin: 0;
}
#dashboard-view.rd-shell .invoices-panel > .rd-list-card {
margin-top: 16px;
}
/* the panel that holds them both stops drawing a card of its own,
so the two cards inside it read as two */
#dashboard-view.rd-shell .invoices-panel {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
/* ---------------------------------------------------------------
96. INVOICES - the name belongs in the card it describes
The page title sat above the summary card while custody kept its
title inside. The two pages now hold the same shape: name and
action at the top of the first card, the figures beneath them.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoice-browser {
display: block;
margin: 0;
padding: 18px;
border: 1px solid var(--rd-line);
border-radius: var(--r-14);
background: var(--rd-surface);
box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
}
/* nested in a card now, the strip drops its own frame and keeps
only the rules that divide its cells */
#dashboard-view.rd-shell .invoice-browser > .invoice-status-summary {
margin: 0;
border: 1px solid var(--anfal-line-quiet);
border-radius: var(--r-11);
box-shadow: none;
}
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-browser {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-browser > .invoice-status-summary {
border-color: var(--anfal-dark-600);
}
/* ---------------------------------------------------------------
97. AN EMPTY ERROR LINE STILL TOOK UP A LINE
The invoices page keeps a permanent error paragraph between its
two cards, holding 22px of height whether or not it has anything
to say - which is why the gap there measured 40px against custody's
18px. It collapses when empty and reappears the moment the app
writes into it.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoices-panel > .form-error:empty,
#dashboard-view.rd-shell .rd-list-card ~ .form-error:empty,
#dashboard-view.rd-shell .accountant-home > .form-error:empty {
display: none;
}
/* the two cards now sit the same distance apart on every page */
#dashboard-view.rd-shell .invoices-panel > .rd-list-card,
#dashboard-view.rd-shell .accountant-home > .rd-list-card,
#dashboard-view.rd-shell #activity-log-page > .rd-list-card {
margin-top: 18px;
}
#dashboard-view.rd-shell .invoice-browser,
#dashboard-view.rd-shell .custody-browser {
margin-bottom: 0;
}
/* ---------------------------------------------------------------
98. THE ACTIVITY PAGE GETS ITS SUMMARY CARD
Custody and invoices open with a card holding the page name and
its figures; the activity log had the same two things loose on the
background. Same shape now, and the distance to the list card is
the same 18px on all three.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-summary-card {
padding: 18px;
border: 1px solid var(--rd-line);
border-radius: var(--r-14);
background: var(--rd-surface);
box-shadow: 0 8px 24px rgba(16, 42, 67, .045);
}
#dashboard-view.rd-shell .rd-summary-card > .control-page-heading {
margin: 0 0 14px;
padding: 0;
border: 0;
background: transparent;
}
#dashboard-view.rd-shell .rd-summary-card > .rd-strip-scope {
margin: 0 0 8px;
}
#dashboard-view.rd-shell .rd-summary-card > .rd-strip {
margin: 0;
border: 1px solid var(--anfal-line-quiet);
border-radius: var(--r-11);
box-shadow: none;
}
#dashboard-view.rd-shell #activity-log-page > .rd-list-card {
margin-top: 18px;
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-summary-card {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-summary-card > .rd-strip {
border-color: var(--anfal-dark-600);
}
/* ---------------------------------------------------------------
99. DO NOT PAY THE GAP TWICE
The activity page is a grid that already spaces its children by
18px. Adding the same margin on top of that produced 36 - the two
cards sat twice as far apart as on every other page, from two
rules that were each individually right.
Where the container spaces its own children, the card adds
nothing; where it does not, the margin supplies it.
--------------------------------------------------------------- */
#dashboard-view.rd-shell #activity-log-page > .rd-list-card,
#dashboard-view.rd-shell #activity-log-page > .rd-summary-card {
margin-top: 0;
}
/* ---------------------------------------------------------------
100. INVOICES - the head and the rows share one column template
They were declared separately and drifted: 277/245/149/149/160
against 265/235/143/143/153. Every column was out by up to 21px,
which reads as a table that will not sit still. One variable, both
places - they cannot disagree again.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-list-inner {
--rd-invoice-cols:
minmax(180px, 1.55fr) /* employee / invoice no. */
minmax(150px, 1.35fr) /* supplier and method */
minmax(110px, .85fr) /* invoice date */
minmax(105px, .85fr) /* amount */
minmax(120px, .9fr) /* status */
92px; /* action */
}
#dashboard-view.rd-shell .rd-list-inner > .invoice-table-head,
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary {
display: grid;
grid-template-columns: var(--rd-invoice-cols);
align-items: center;
gap: 12px;
padding: 11px 14px;
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary {
border-bottom: 1px solid var(--rd-line-soft);
cursor: pointer;
transition: background .12s ease;
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row:last-child > summary {
border-bottom: 0;
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary:hover {
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row[open] > summary {
background: var(--rd-surface-soft);
border-bottom-color: var(--rd-line);
}
/* ---------------------------------------------------------------
101. A ROW THAT OPENS SHOULD LOOK LIKE ONE
These rows expand, and nothing said so - no marker, no affordance,
nothing but a cursor that changes if you happen to hover. The
chevron is drawn on the row and turns when it opens.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoice-table-row > summary {
position: relative;
list-style: none;
}
#dashboard-view.rd-shell .invoice-table-row > summary::-webkit-details-marker {
display: none;
}
#dashboard-view.rd-shell .invoice-table-row > summary::after {
content: "";
position: absolute;
inset-inline-start: 4px;
top: 50%;
width: 8px;
height: 8px;
margin-top: -5px;
border-inline-start: 1.6px solid var(--anfal-slate-400);
border-bottom: 1.6px solid var(--anfal-slate-400);
transform: rotate(45deg);
transition: transform .16s ease, border-color .16s ease;
}
#dashboard-view.rd-shell .invoice-table-row[open] > summary::after {
margin-top: -1px;
transform: rotate(-135deg);
border-color: var(--anfal-gold-500);
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary {
padding-inline-start: 22px;
}
/* the panel that opens sits in from the row it belongs to */
#dashboard-view.rd-shell .invoice-row-expanded {
padding: 14px 18px 16px;
border-bottom: 1px solid var(--rd-line-soft);
background: #fbfcfd;
}
/* ---------------------------------------------------------------
102. THE UNIT IS NAMED ONCE
Every amount carried "ر.س" beside it, in a column whose heading
can say it instead - the same change the custody table already
made.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoice-table-amount {
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#dashboard-view.rd-shell .rd-list-inner > .invoice-table-head > * {
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
white-space: nowrap;
}
/* ---------------------------------------------------------------
103. SECTIONS 100-102 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary {
border-bottom-color: var(--anfal-dark-700);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary:hover,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner .invoice-table-row[open] > summary {
background: rgba(255, 255, 255, .03);
}
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-row-expanded {
border-bottom-color: var(--anfal-dark-700);
background: var(--anfal-dark-900);
}
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-table-amount {
color: var(--anfal-line-cool);
}
/* ---------------------------------------------------------------
104. THE CHEVRON'S SPACE BELONGS TO BOTH ROWS
Making room for the disclosure arrow on the row and not on the
heading narrowed one content box by 22px, so the shared column
template resolved to different widths in each. The heading is
indented by the same amount: it has no arrow, but it has to stand
in the same place.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-list-inner > .invoice-table-head {
padding-inline-start: 22px;
}
/* ---------------------------------------------------------------
105. THE GROUP WRAPPER WAS INSETTING THE ROWS
Between the heading and the rows sits `.invoice-group`, carrying
16px of padding and a border of its own. The heading began at
x=40 and every row at x=57, so the shared column template resolved
against two different widths - the columns could not line up no
matter how carefully they were declared.
Inside a table the group is not a card; it is just a container.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-list-inner .invoice-group {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#dashboard-view.rd-shell .rd-list-inner #invoice-list {
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
/* a group heading, where one exists, spans the row above its rows */
#dashboard-view.rd-shell .rd-list-inner .invoice-group > h3,
#dashboard-view.rd-shell .rd-list-inner .invoice-group > header {
margin: 0;
padding: 10px 22px;
border-bottom: 1px solid var(--rd-line-soft);
background: var(--rd-surface-soft);
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-strong);
color: var(--rd-muted);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner .invoice-group > h3,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-list-inner .invoice-group > header {
border-bottom-color: var(--anfal-dark-700);
background: var(--anfal-dark-900);
}
/* ---------------------------------------------------------------
106. PAGING CONTROLS
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--rd-line-soft);
flex-wrap: wrap;
}
#dashboard-view.rd-shell .rd-pager-info {
font-size: var(--fs-11p5);
color: var(--rd-muted);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .rd-pager-nav {
display: flex;
align-items: center;
gap: 8px;
}
#dashboard-view.rd-shell .rd-pager-label {
min-width: 96px;
text-align: center;
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .rd-pager-btn {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-muted);
cursor: pointer;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .rd-pager-btn:hover:not(:disabled) {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--anfal-gold-700);
}
#dashboard-view.rd-shell .rd-pager-btn:disabled {
opacity: .4;
cursor: not-allowed;
}
#dashboard-view.rd-shell .rd-pager-btn svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---------------------------------------------------------------
107. THE CHEVRON MOVES TO THE ACTION END
It sat against the employee's name, where it read as part of the
name rather than as a control. Beside the action it reads as what
it is: the other thing you can do to this row.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary {
padding-inline: 14px 22px;
}
#dashboard-view.rd-shell .rd-list-inner > .invoice-table-head {
padding-inline: 14px 22px;
}
#dashboard-view.rd-shell .invoice-table-row > summary::after {
inset-inline-start: auto;
inset-inline-end: 6px;
}
/* ---------------------------------------------------------------
108. STATUS BADGES OF ONE SIZE
The same words measured 158px in one row and 104 in another, so a
column of identical states looked like a column of different ones.
One width, centred, and the column reads down.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary > .status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 150px;
min-height: 26px;
margin: 0 auto;
padding: 3px 10px;
border-radius: var(--r-20);
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-semi);
line-height: 1.3;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------------------------------------------------------------
109. THE ACTION BUTTON
It was a filled navy block the size of the cell. As one control
among many in a scanning table it steps back to an outline, and
fills only under the pointer.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-list-inner .invoice-review-toggle {
width: 100%;
white-space: nowrap;
}
/* ---------------------------------------------------------------
110. SECTIONS 106-109 - dark theme
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-pager {
border-top-color: var(--anfal-dark-700);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-pager-label {
color: var(--anfal-line-cool);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-pager-btn {
border-color: var(--anfal-dark-600);
background: var(--anfal-dark-800);
color: var(--anfal-steel);
}
/* ---------------------------------------------------------------
16b. RD-BTN - the quick-action button, generalized
The panel in "إجراءات سريعة" is the button the owner picked:
a light surface with a hairline border, an icon in its own
square, and gold arriving only on hover. Every solid-navy
button elsewhere is replaced by this same class rather than
restyled one at a time, so they cannot drift apart later.
Scoped exactly like the rest of the layer.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-btn,
html.rd-shell .rd-btn {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-height: 34px;
padding: 0 12px;
border: 1px solid var(--anfal-border, var(--rd-line));
border-radius: var(--r-10);
background: var(--rd-surface);
color: var(--anfal-navy-900, #0d2c4a);
font: inherit;
font-size: var(--fs-12);
font-weight: var(--anfal-weight-bold);
line-height: 1;
text-align: start;
cursor: pointer;
box-shadow: none;
transition: border-color .14s ease, background .14s ease;
}
#dashboard-view.rd-shell .rd-btn:hover,
html.rd-shell .rd-btn:hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .rd-btn[disabled],
html.rd-shell .rd-btn[disabled] {
opacity: .55;
cursor: default;
}
#dashboard-view.rd-shell .rd-btn[disabled]:hover,
html.rd-shell .rd-btn[disabled]:hover {
border-color: var(--anfal-border, var(--rd-line));
background: var(--rd-surface);
}
/* Buttons that were full-width blocks stay full-width blocks.
The look changes; the layout does not. */
#dashboard-view.rd-shell .rd-btn.rd-btn-wide,
html.rd-shell .rd-btn.rd-btn-wide {
display: flex;
justify-content: center;
}
#dashboard-view.rd-shell .rd-btn > .rd-btn-icon,
html.rd-shell .rd-btn > .rd-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: 0 0 auto;
border: 1px solid var(--anfal-border, var(--rd-line));
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--anfal-gold-500);
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
#dashboard-view.rd-shell .rd-btn:hover > .rd-btn-icon,
html.rd-shell .rd-btn:hover > .rd-btn-icon {
border-color: var(--anfal-gold-500);
background: var(--anfal-gold-500);
color: #fff;
}
#dashboard-view.rd-shell .rd-btn[disabled]:hover > .rd-btn-icon,
html.rd-shell .rd-btn[disabled]:hover > .rd-btn-icon {
border-color: var(--anfal-border, var(--rd-line));
background: var(--rd-surface);
color: var(--anfal-gold-500);
}
#dashboard-view.rd-shell .rd-btn > .rd-btn-icon > svg,
html.rd-shell .rd-btn > .rd-btn-icon > svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Dark theme: the app recolours .admin-quick-actions button by name
in design-system.css, so .rd-btn has to be named the same way. */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-btn,
html[data-theme="dark"].rd-shell .rd-btn,
html[data-theme="dark"] #dashboard-view.rd-shell .rd-btn > .rd-btn-icon,
html[data-theme="dark"].rd-shell .rd-btn > .rd-btn-icon {
background: #10283d;
border-color: var(--anfal-border-strong, #2f5488);
color: var(--anfal-ink, var(--anfal-line-quiet));
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-btn > .rd-btn-icon,
html[data-theme="dark"].rd-shell .rd-btn > .rd-btn-icon {
color: var(--anfal-gold-500);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-btn:hover,
html[data-theme="dark"].rd-shell .rd-btn:hover {
border-color: var(--anfal-gold-500);
background: #332b20;
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-btn:hover > .rd-btn-icon,
html[data-theme="dark"].rd-shell .rd-btn:hover > .rd-btn-icon {
background: var(--anfal-gold-500);
color: #10283d;
}
/* ---------------------------------------------------------------
65. EMPTY ROW HEIGHT
.rd-empty gets a 13px margin and 13px padding above its action
cell. That was right for the stacked card, where the button
needed separating from the name once the balance block was gone.
In the row layout it separates nothing and only makes the row
17px taller than every other row, so the matrix stops lining up.
Measured: 82px against 65px.
--------------------------------------------------------------- */
@media (min-width: 1100px) {
#dashboard-view.rd-shell .employee-custody-card.rd-empty > .rd-card-acts {
margin-top: 0;
padding-top: 0;
}
}
/* ---------------------------------------------------------------
67. THE REVIEW CONTROL JOINS THE BUTTON FAMILY
Section 109 gave this its own outline-then-fill look, and the row
carried a separate chevron at its far end - two marks for one
action, sitting apart. The control becomes a .rd-btn and the
chevron moves into its icon square, so the button says both what
it does and which way the row will go.
Section 109 keeps only what places the cell.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .invoice-table-row > summary::after {
content: none;
}
#dashboard-view.rd-shell .invoice-review-toggle > .rd-btn-icon > svg {
transition: transform .16s ease;
}
#dashboard-view.rd-shell .invoice-table-row[open] .invoice-review-toggle > .rd-btn-icon > svg {
transform: rotate(180deg);
}
/* ---------------------------------------------------------------
68. THE USERS PAGE BECOMES A TABLE
The page already had the two boxes every other page has - the
tools above, the list below. The list was the odd one: five
role-titled sections, each a grid of tall cards, so sixteen
accounts ran past two screens and no two people could be compared
without scrolling between headings.
Same accounts, one table, read across: who, what role, what
state, and the way in. The role stops being a section heading and
becomes a column - which is what lets it be compared at all.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-users-table {
display: block;
grid-column: 1 / -1;
width: 100%;
border: 1px solid var(--anfal-border, var(--rd-line));
border-radius: var(--r-12);
overflow: hidden;
background: var(--rd-surface);
}
#dashboard-view.rd-shell .rd-users-head,
#dashboard-view.rd-shell .rd-users-table .user-compact-item {
display: grid;
grid-template-columns: minmax(200px, 2fr) minmax(130px, 1fr) minmax(110px, .9fr) 132px;
align-items: center;
gap: 14px;
}
#dashboard-view.rd-shell .rd-users-head {
padding: 10px 16px;
border-bottom: 1px solid var(--anfal-border, var(--rd-line));
background: var(--rd-surface-soft);
color: var(--rd-muted);
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-strong);
}
#dashboard-view.rd-shell .rd-users-head > span:nth-child(n+2) {
text-align: center;
}
/* the card loses the frame it needed when it stood alone */
#dashboard-view.rd-shell .rd-users-table .user-compact-item {
min-height: 56px;
margin: 0;
padding: 9px 16px;
border: 0;
border-bottom: 1px solid var(--rd-line-soft);
border-radius: 0;
background: transparent;
align-content: center;
}
#dashboard-view.rd-shell .rd-users-table .user-compact-item:last-child {
border-bottom: 0;
}
#dashboard-view.rd-shell .rd-users-table .user-compact-item:hover {
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .rd-users-table .user-compact-identity {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
#dashboard-view.rd-shell .rd-users-table .user-avatar {
width: 32px;
height: 32px;
flex: 0 0 auto;
font-size: var(--fs-11p5);
}
#dashboard-view.rd-shell .rd-users-table .user-compact-item h4 {
margin: 0;
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#dashboard-view.rd-shell .rd-users-table .user-compact-item p {
margin: 2px 0 0;
font-size: var(--fs-11);
color: var(--rd-faint);
}
#dashboard-view.rd-shell .rd-users-table .user-compact-item > .status-badge {
justify-self: center;
min-height: 24px;
padding: 3px 11px;
font-size: var(--fs-10p5);
white-space: nowrap;
}
/* -- the role column: an icon that carries the colour -- */
#dashboard-view.rd-shell .rd-user-role {
display: inline-flex;
align-items: center;
justify-self: center;
gap: 7px;
min-height: 26px;
padding: 0 11px 0 8px;
border: 1px solid var(--rd-role-line, var(--rd-line));
border-radius: var(--r-999);
background: var(--rd-role-soft, var(--anfal-surface-mist));
color: var(--rd-role-ink, #2f5488);
font-size: var(--fs-11);
font-weight: var(--anfal-weight-strong);
white-space: nowrap;
}
#dashboard-view.rd-shell .rd-user-role-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rd-role-ink, #2f5488);
}
#dashboard-view.rd-shell .rd-user-role-icon svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
#dashboard-view.rd-shell .rd-user-role[data-role="super"] {
--rd-role-ink: #8a5a2f;
--rd-role-soft: #fdf3e7;
--rd-role-line: #e8cfae;
}
#dashboard-view.rd-shell .rd-user-role[data-role="accountant"] {
--rd-role-ink: #1f6b52;
--rd-role-soft: #eaf5f0;
--rd-role-line: #bcdccf;
}
#dashboard-view.rd-shell .rd-user-role[data-role="manager"] {
--rd-role-ink: #2b5183;
--rd-role-soft: #eef3fb;
--rd-role-line: #c4d5ec;
}
#dashboard-view.rd-shell .rd-user-role[data-role="reviewer"] {
--rd-role-ink: #7a5aa6;
--rd-role-soft: #f4eefb;
--rd-role-line: #d9c9ee;
}
#dashboard-view.rd-shell .rd-user-role[data-role="employee"] {
--rd-role-ink: #46586a;
--rd-role-soft: #f2f5f8;
--rd-role-line: #d9e2ea;
}
#dashboard-view.rd-shell .rd-users-table .manage-user-button {
justify-self: center;
width: auto;
}
/* the old sections are emptied, not deleted - the app owns them */
#dashboard-view.rd-shell #users-body > .users-status-group {
display: none;
}
@media (max-width: 900px) {
#dashboard-view.rd-shell .rd-users-head {
display: none;
}
#dashboard-view.rd-shell .rd-users-table .user-compact-item {
grid-template-columns: 1fr auto;
row-gap: 9px;
}
#dashboard-view.rd-shell .rd-users-table .user-compact-identity {
grid-column: 1 / -1;
}
#dashboard-view.rd-shell .rd-user-role {
justify-self: start;
}
#dashboard-view.rd-shell .rd-users-table .manage-user-button {
width: auto;
}
}
/* ---------------------------------------------------------------
69. MANAGING ONE ACCOUNT IS A DIALOG, NOT A PAGE
Choosing an account replaced the whole list with one editable
card, so editing read as having navigated somewhere - and getting
back meant finding a link at the top. The same card, centred over
a dimmed page, reads as what it is: something opened over the
list, closed when you are done.
Same shape as the custody detail dialog in section 54, and for
the same reason. The app's own "return" control is the close -
nothing here re-implements leaving.
--------------------------------------------------------------- */
#dashboard-view.rd-shell #permissions-panel.rd-managing {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 220;
width: min(760px, 92vw);
max-height: 86vh;
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: 0 22px 22px;
border: 1px solid var(--rd-line);
border-radius: var(--r-18);
background: var(--rd-surface);
box-shadow:
0 0 0 100vmax rgba(7, 26, 44, .48),
0 24px 64px rgba(7, 26, 44, .28);
}
#dashboard-view.rd-shell #permissions-panel.rd-managing > .panel-heading {
display: none;
}
#dashboard-view.rd-shell #permissions-panel.rd-managing .permission-user-card {
border: 0;
padding: 0;
background: transparent;
}
/* ---------------------------------------------------------------
70. THE MANAGE DIALOG'S OWN FURNITURE
Four things the dialog inherited from when it was a page:
a full-width "return to the list" bar where a close belongs, a
status badge stretched into an oval by the heading's flex, and a
device row whose two actions sat at opposite ends of the line
with the device name between them.
The close is the same control and the same handler - only the
way it reads changes, as in section 14.
--------------------------------------------------------------- */
#dashboard-view.rd-shell #permissions-panel.rd-managing .view-back-button {
position: absolute;
top: 18px;
inset-inline-end: 20px;
z-index: 4;
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
min-height: 30px;
width: 30px;
margin: 0;
padding: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-muted);
font-size: 0;
line-height: 0;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell #permissions-panel.rd-managing .view-back-button:hover {
border-color: var(--anfal-rejected);
background: var(--anfal-red-075);
color: var(--anfal-rejected);
}
#dashboard-view.rd-shell #permissions-panel.rd-managing .view-back-button svg {
display: block;
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
/* the card now starts the dialog, so it carries the top padding */
#dashboard-view.rd-shell #permissions-panel.rd-managing .permission-user-card {
padding-top: 20px;
}
/* the badge stops being stretched by the heading's flex */
#dashboard-view.rd-shell #permissions-panel.rd-managing .permission-user-heading {
align-items: center;
padding-inline-end: 44px;
}
#dashboard-view.rd-shell #permissions-panel.rd-managing .permission-user-heading > .status-badge {
align-self: center;
flex: 0 0 auto;
width: auto;
height: auto;
min-height: 26px;
padding: 3px 12px;
border-radius: var(--r-20);
font-size: var(--fs-11);
white-space: nowrap;
}
/* -- one device, one line: name, then its two actions together -- */
#dashboard-view.rd-shell #permissions-panel.rd-managing .user-push-devices > div {
justify-content: flex-start;
gap: 8px;
flex-wrap: wrap;
padding: 9px 12px;
margin-bottom: 8px;
border: 1px solid var(--anfal-border, var(--rd-line));
border-radius: var(--r-10);
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell #permissions-panel.rd-managing .user-push-devices > div > span {
flex: 1 1 160px;
min-width: 0;
}
#dashboard-view.rd-shell #permissions-panel.rd-managing .user-push-devices > div > .rd-btn {
flex: 0 0 auto;
}
/* nothing registered yet is a state, not an error - it gets the
same inset the device rows get, so the section keeps its shape */
#dashboard-view.rd-shell #permissions-panel.rd-managing .user-push-devices > p {
margin: 0;
padding: 13px;
border: 1px dashed var(--anfal-border, var(--rd-line));
border-radius: var(--r-10);
background: var(--rd-surface-soft);
color: var(--rd-muted);
font-size: var(--fs-11p5);
text-align: center;
}
/* ---------------------------------------------------------------
71. THE USERS PAGE OPENS LIKE THE OTHERS
Custody and invoices open with one card: the page's name, its
action, then the figures. This page opened with two panels side
by side instead - "add a user" on one side, a donut of account
states on the other - so the page's own name floated above them
both and the five role counts sat inside the left-hand panel.
Same pieces, one card, in the order the other pages use. The
panels stay in the document because the app owns them; they are
emptied of what moved and then stood down.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-users-headcard {
grid-column: 1 / -1;
display: grid;
gap: 16px;
padding: 17px 20px 19px;
border: 1px solid var(--anfal-border, var(--rd-line));
border-radius: var(--r-16);
background: var(--rd-surface);
box-shadow: var(--anfal-shadow-card, 0 8px 24px rgba(16, 42, 67, .043));
}
#dashboard-view.rd-shell .rd-users-headcard > .rd-pagehead {
margin: 0;
padding: 0 0 15px;
border-bottom: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell .rd-users-headcard > #users-summary-grid {
margin: 0;
}
/* what moved out leaves nothing worth a panel behind */
#dashboard-view.rd-shell #users-status-summary {
display: none;
}
#dashboard-view.rd-shell #employee-tool {
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
#dashboard-view.rd-shell #employee-tool > h3,
#dashboard-view.rd-shell #employee-tool > p:not(.account-created-result) {
display: none;
}
/* ---------------------------------------------------------------
72. FINDING ONE ACCOUNT AMONG SIXTEEN
The table made the accounts comparable; it did not make one of
them findable. Custody and invoices both open their list with a
search and its filters, so this list gets the same bar in the
same place.
It filters rows already on the page - it asks the server for
nothing and counts nothing the table does not already show.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-users-filter {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
margin: 0 0 14px;
}
#dashboard-view.rd-shell .rd-users-filter input,
#dashboard-view.rd-shell .rd-users-filter select {
width: 100%;
min-height: 38px;
padding: 0 12px;
border: 1px solid var(--anfal-border, var(--rd-line));
border-radius: var(--r-10);
background: var(--rd-surface);
color: var(--rd-ink);
font: inherit;
font-size: var(--fs-12);
}
#dashboard-view.rd-shell .rd-users-filter input:focus,
#dashboard-view.rd-shell .rd-users-filter select:focus {
outline: none;
border-color: var(--anfal-gold-500);
}
#dashboard-view.rd-shell #permissions-panel.rd-managing .rd-users-filter {
display: none;
}
#dashboard-view.rd-shell .rd-users-table .user-compact-item[hidden] {
display: none;
}
#dashboard-view.rd-shell .rd-users-empty {
margin: 0;
padding: 26px;
color: var(--rd-muted);
font-size: var(--fs-12);
text-align: center;
}
@media (max-width: 900px) {
#dashboard-view.rd-shell .rd-users-filter {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------
73. ONE WIDTH FOR THE ROLES
The chips were sized by their own text, so a column of roles was
a column of five different widths - the eye reads that as five
different kinds of thing before it reads a word. One width, taken
from the longest label, and the column reads down.
The action button goes the other way: it is one repeated control,
so it takes the width of what is in it rather than the width of
the cell it happens to sit in.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-users-table .rd-user-role {
min-width: 112px;
justify-content: flex-start;
}
/* ---------------------------------------------------------------
74. THE USERS PAGE KEEPS THE HOUSE SPACING
Custody sets 18px between the head card and the list card. This
page was adding its own 20px below #admin-tools and another 20px
above the panel, so the same two boxes sat 40px apart and the
page read as if it belonged to a different system.
--------------------------------------------------------------- */
#dashboard-view.rd-shell #admin-tools.rd-users-tools {
display: block;
margin-bottom: 18px;
/* .admin-grid يحدّ العرض بـ1280 - قاعدة كُتبت يوم كانت الصفحة بطاقتين
متجاورتين. صارت بطاقة واحدة (display:block أعلاه) وبقي السقف، فبدت
البطاقة العلوية موسّطة وأضيق مما تحتها بـ317 بكسل. */
max-width: none;
}
#dashboard-view.rd-shell #admin-tools.rd-users-tools > #employee-tool {
min-height: 0;
}
#dashboard-view.rd-shell #permissions-panel {
margin-top: 0;
}
/* ---------------------------------------------------------------
75. A SUSPENDED ACCOUNT READS AS ONE
Amber is the colour this system uses for "waiting" - an invoice
in review, a settlement due. A suspended account is not waiting
for anything, so it takes the colour of a stop. Scoped to this
table: the same class means "pending review" on the invoices
page, and that one is genuinely amber.
The states also take one width, for the reason the roles did:
a column of different widths reads as different kinds of thing.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-users-table .user-compact-item > .status-badge {
min-width: 76px;
justify-content: center;
}
#dashboard-view.rd-shell .rd-users-table .user-compact-item > .status-badge.status-pending {
border-color: var(--anfal-red-200);
background: var(--anfal-red-075);
color: var(--anfal-rejected);
}
/* the pager sits under the table it pages, inside the same box */
#dashboard-view.rd-shell #users-body > .rd-pager,
#dashboard-view.rd-shell .employee-custody-grid ~ .rd-pager {
margin-top: 14px;
}
/* ---------------------------------------------------------------
76. EVERY FILTER BAR FILLS ITS BOX
These bars were flex rows of content-sized controls, so each one
ended wherever its last field happened to end: on custody, 396px
of controls sitting in a 1079px bar, with the rest of the row
empty. The users bar was built as a grid that spans its box, the
owner picked that, and this is the same behaviour for the rest.
The fields share the row instead of merely starting it, and the
search keeps the larger share - it takes typing, the others take
a choice. A submit is not a field, so it stays its own size.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-filter-bar > label,
#dashboard-view.rd-shell .invoice-filter-bar > label,
#dashboard-view.rd-shell .statement-page-filters > label,
#dashboard-view.rd-shell .activity-filters > label {
flex: 1 1 150px;
min-width: 0;
}
#dashboard-view.rd-shell .invoice-filter-bar > label.invoice-search,
#dashboard-view.rd-shell .custody-filter-bar > label:first-child {
flex: 1.6 1 220px;
}
#dashboard-view.rd-shell .custody-filter-bar > label input,
#dashboard-view.rd-shell .custody-filter-bar > label select,
#dashboard-view.rd-shell .invoice-filter-bar > label input,
#dashboard-view.rd-shell .invoice-filter-bar > label select,
#dashboard-view.rd-shell .statement-page-filters > label input,
#dashboard-view.rd-shell .statement-page-filters > label select,
#dashboard-view.rd-shell .activity-filters > label input,
#dashboard-view.rd-shell .activity-filters > label select {
width: 100%;
min-width: 0;
}
#dashboard-view.rd-shell .activity-filters > button,
#dashboard-view.rd-shell .statement-page-filters > button {
flex: 0 0 auto;
}
/* ---------------------------------------------------------------
77. THE HIJRI DATE AND THE THEME CONTROL
The Hijri date is the one most people here actually date things
by, so it sits with the Gregorian rather than replacing it -
quieter, because it is the second reading of the same instant,
not a second fact.
The theme control is a button in the bar rather than a new
setting: the app already owns the switch, in the profile dialog.
This one flips that switch, so the choice is still saved and
still logged by the app - see section 2h.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .rd-when-hijri {
color: var(--rd-faint);
font-size: var(--fs-11);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .rd-when-hijri::before {
margin: 0 5px;
color: var(--anfal-line-soft);
content: "·";
}
@media (max-width: 900px) {
#dashboard-view.rd-shell .rd-when-hijri { display: none; }
}
/* ---------------------------------------------------------------
78. THE COLOURED MARKS FOLLOW THE THEME TOO
Section 0 named the surfaces, the lines and the text, and those
now flip on their own. Three things it deliberately did not name
were still lit for a white page:
- the role chips, five pastel pairs chosen against white
- the suspended badge, a light red on a dark table
- the initials disc, navy letters on the app's dark gold
Each keeps its hue - the hue is what identifies the role - and
trades places: the pale fill becomes the deep one and the deep
ink becomes the light one, so a manager is still blue and an
accountant still green at a glance.
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-user-role[data-role="super"] {
--rd-role-ink: #e8c48f;
--rd-role-soft: #332b20;
--rd-role-line: #5c4a2e;
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-user-role[data-role="accountant"] {
--rd-role-ink: #8fd9bb;
--rd-role-soft: #12332a;
--rd-role-line: #2c5d4a;
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-user-role[data-role="manager"] {
--rd-role-ink: #a9c8f0;
--rd-role-soft: #16273d;
--rd-role-line: #2f4d75;
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-user-role[data-role="reviewer"] {
--rd-role-ink: #cbb0e8;
--rd-role-soft: #241d33;
--rd-role-line: #4a3d66;
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-user-role[data-role="employee"] {
--rd-role-ink: #b3c2d0;
--rd-role-soft: #18242f;
--rd-role-line: #33475a;
}
/* a stop still reads as a stop */
html[data-theme="dark"] #dashboard-view.rd-shell .rd-users-table .user-compact-item > .status-badge.status-pending {
border-color: #6b3b38;
background: #3d2324;
color: #f3b5aa;
}
/* the app darkens this disc but leaves the letters navy on it */
html[data-theme="dark"] #dashboard-view.rd-shell .user-avatar {
color: var(--anfal-gold-200);
}
/* the close on the manage dialog is a stop too */
html[data-theme="dark"] #dashboard-view.rd-shell #permissions-panel.rd-managing .view-back-button:hover {
border-color: #6b3b38;
background: #3d2324;
color: #f3b5aa;
}
/* ---------------------------------------------------------------
79. THE ONE CARD THE APP STILL PAINTS WHITE
.statement-page-card sets #fff in the app's own stylesheet, and
the app has no dark rule for it - so the statements page kept one
white sheet in the middle of a dark screen. Overridden here
rather than there, like everything else in this layer.
--------------------------------------------------------------- */
html[data-theme="dark"] #dashboard-view.rd-shell .statement-page-card {
border-color: var(--rd-line);
background: var(--rd-surface);
box-shadow: none;
}
/* ---------------------------------------------------------------
80. THE EMPLOYEE'S TWO WAYS IN
This panel is the whole reason an employee opens the system: it
is where a receipt becomes an invoice. It arrived as a solid navy
block beside a dashed grey one - two different visual languages
for one choice, and neither of them ours.
Both become tiles in the house language. They stay large, because
these are thumb targets on a phone in a shop, not table controls.
What separates them is not weight but state: the camera tile
wears the filled gold square the others only take on hover, so
the recommended way in is already lit. Removing the navy did not
cost the distinction - it just stopped shouting it.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .capture-actions {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#dashboard-view.rd-shell .camera-action,
#dashboard-view.rd-shell .file-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 128px;
padding: 18px 16px;
border: 1px solid var(--rd-line);
border-radius: var(--r-13);
background: var(--rd-surface);
color: var(--rd-ink);
box-shadow: none;
transition: border-color .14s ease, background .14s ease;
}
#dashboard-view.rd-shell .camera-action:hover,
#dashboard-view.rd-shell .file-action:hover {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .camera-action strong,
#dashboard-view.rd-shell .file-action strong {
font-size: var(--fs-13p5);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
}
#dashboard-view.rd-shell .camera-action span,
#dashboard-view.rd-shell .file-action span {
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-regular);
line-height: 1.5;
color: var(--rd-muted);
}
#dashboard-view.rd-shell .rd-capture-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 auto;
border: 1px solid var(--rd-line);
border-radius: var(--r-12);
background: var(--rd-surface);
color: var(--anfal-gold-500);
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
#dashboard-view.rd-shell .rd-capture-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* the recommended way in is already lit */
#dashboard-view.rd-shell .camera-action .rd-capture-icon {
border-color: var(--anfal-gold-500);
background: var(--anfal-gold-500);
color: #fff;
}
#dashboard-view.rd-shell .file-action:hover .rd-capture-icon {
border-color: var(--anfal-gold-500);
background: var(--anfal-gold-500);
color: #fff;
}
#dashboard-view.rd-shell .upload-hint {
margin: 12px 0 0;
font-size: var(--fs-11);
color: var(--rd-faint);
}
@media (max-width: 620px) {
#dashboard-view.rd-shell .capture-actions {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------
81. THE EMPLOYEE'S BALANCE STOPS BEING A DISC
The ring drew one source at a hundred per cent, which is a solid
disc: it carried no split, and a disc cannot draw a negative at
all - and a negative balance is exactly the figure the person
holding the custody needs to see. The figure leads instead, and
the sources become the signed list the admin cards already use.
The ring is hidden rather than removed: it carries the aria
label the app wrote, and the centre keeps the real number.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .summary-content {
grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr);
gap: clamp(20px, 4vw, 48px);
align-items: start;
}
#dashboard-view.rd-shell .summary-donut {
width: auto;
height: auto;
min-height: 0;
aspect-ratio: auto;
border-radius: var(--r-14);
padding: 20px 16px;
border: 1px solid var(--rd-line);
background: var(--rd-surface-soft) !important;
box-shadow: none;
}
#dashboard-view.rd-shell .summary-donut::after,
#dashboard-view.rd-shell .summary-donut .donut-hit-areas {
display: none;
}
#dashboard-view.rd-shell .summary-center {
position: static;
display: grid;
justify-items: center;
gap: 6px;
transform: none;
inset: auto;
}
#dashboard-view.rd-shell .summary-center > span {
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .summary-center strong {
font-size: var(--fs-26);
font-weight: var(--anfal-weight-strong);
letter-spacing: -.02em;
line-height: 1.1;
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .summary-center .currency-unit {
margin-inline-start: 5px;
font-size: var(--fs-12);
font-weight: var(--anfal-weight-medium);
color: var(--rd-faint);
}
#dashboard-view.rd-shell .summary-details {
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: row;
gap: 0;
}
#dashboard-view.rd-shell .summary-details article {
grid-template-columns: auto 1fr auto;
grid-template-rows: auto;
align-content: center;
min-height: 0;
align-items: center;
gap: 11px;
margin: 0;
padding: 11px 2px;
border: 0;
border-bottom: 1px solid var(--rd-line-soft);
border-radius: 0;
background: transparent;
box-shadow: none;
}
#dashboard-view.rd-shell .summary-details article:last-child {
border-bottom: 0;
}
/* the coloured dot said two rows differ, not what either one is */
#dashboard-view.rd-shell .summary-details i {
display: none;
}
#dashboard-view.rd-shell .summary-details span {
font-size: var(--fs-12p5);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .summary-details strong {
font-size: var(--fs-13);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#dashboard-view.rd-shell .summary-details .rd-src-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 auto;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface);
color: var(--anfal-gold-500);
}
#dashboard-view.rd-shell .summary-details .rd-src-icon svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 760px) {
#dashboard-view.rd-shell .summary-content {
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------------
82. THE PHONE IS THE REAL SCREEN
Nine employees in ten open this on a phone, and on a phone the
page spent 301 of 812 pixels before it said anything: a logo
block, a welcome line, a full-width sign-out, our own bar, then
a two-line notice. The camera - the entire reason the app is
open - sat at 471px, past the fold.
Nothing is removed here, only re-ranked. The identity line keeps
the name; sign-out already has two other routes on this screen
(the "المزيد" sheet and the profile dialog), both checked before
this rule was written, so the copy at the top is the third and
the one worth the space it was taking.
--------------------------------------------------------------- */
@media (max-width: 760px) {
html.rd-shell .workspace-header {
gap: 10px;
padding: 9px 14px;
}
html.rd-shell .workspace-header img {
/* styles.css يفرض width:145px، وقصّ الارتفاع هنا كان يمدّ الشعار
عرضًا ويضغطه رأسيًا (نسبة 3.92 بدل 2.91 الأصلية).
العمود الأول 1fr فيضغط أي عرض تلقائي إلى ما دون ما تحتاجه
الصورة، لذلك يُعطى العرض صراحةً بنسبة الشعار عند ارتفاع 30px.
object-fit: contain يبقى شبكة أمان: لو رفع مدير النظام شعارًا
بنسبة أخرى، يُحاط بفراغ ولا يُمدّ. */
height: 30px;
width: 87px;
max-width: 40vw;
justify-self: start;
object-fit: contain;
}
html.rd-shell .workspace-welcome p {
display: none;
}
html.rd-shell .workspace-welcome h2 {
font-size: var(--fs-13);
font-weight: var(--anfal-weight-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* sign-out lives in "المزيد" and in the profile dialog */
html.rd-shell .workspace-user {
display: none;
}
/* the notice becomes one line with its action on the same line */
#dashboard-view.rd-shell .push-reminder-banner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 0;
padding: 8px 12px;
text-align: start;
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
}
#dashboard-view.rd-shell .push-reminder-banner > span {
flex: 1 1 auto;
min-width: 0;
}
#dashboard-view.rd-shell .push-reminder-banner .rd-btn {
flex: 0 0 auto;
}
#dashboard-view.rd-shell .page-toolbar {
padding-top: 6px;
padding-bottom: 6px;
}
/* ---- the two ways in, ranked ----
The camera stays a tall tile: it is the thumb target. Uploading
from the gallery is the fallback, so it becomes a single row -
still a full-width target, but it stops claiming equal weight
and gives the height back to the screen. */
#dashboard-view.rd-shell .camera-action {
min-height: 132px;
}
#dashboard-view.rd-shell .file-action {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: center;
align-content: center;
column-gap: 12px;
row-gap: 2px;
min-height: 62px;
padding: 12px 14px;
text-align: start;
}
#dashboard-view.rd-shell .file-action .rd-capture-icon {
grid-column: 1;
grid-row: 1 / 3;
width: 36px;
height: 36px;
}
#dashboard-view.rd-shell .file-action strong {
grid-column: 2;
grid-row: 1;
font-size: var(--fs-12p5);
text-align: start;
}
#dashboard-view.rd-shell .file-action span {
grid-column: 2;
grid-row: 2;
text-align: start;
}
}
/* ---------------------------------------------------------------
83. THE PANEL HEADING STOPS INTRODUCING ITSELF
"إضافة فاتورة", then two lines explaining what adding an invoice
is, then a chip on a row of its own: 100px of preamble above the
button the person came to press. The title and the page limit
share one line, and the sentence - true, but read once and never
again - steps down to a single quiet line.
--------------------------------------------------------------- */
@media (max-width: 760px) {
#dashboard-view.rd-shell .invoice-create-panel > .panel-heading {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 4px 10px;
margin-bottom: 12px;
padding-bottom: 10px;
}
#dashboard-view.rd-shell .invoice-create-panel > .panel-heading > div {
grid-column: 1;
min-width: 0;
}
#dashboard-view.rd-shell .invoice-create-panel > .panel-heading h3 {
font-size: var(--fs-15);
}
#dashboard-view.rd-shell .invoice-create-panel > .panel-heading p {
margin-top: 2px;
font-size: var(--fs-11);
line-height: 1.45;
color: var(--rd-faint);
}
#dashboard-view.rd-shell .invoice-create-panel > .panel-heading > span {
grid-column: 2;
grid-row: 1;
align-self: center;
margin: 0;
white-space: nowrap;
}
#dashboard-view.rd-shell .invoice-create-panel {
padding: 14px;
}
}
/* ---------------------------------------------------------------
84. AN INVOICE ROW IS NOT A TABLE ON A PHONE
The row is six columns wide by variable. On a 375px phone those
column minimums are a floor the page cannot go under: the head
and every group stretched to 853px and the whole document scrolled
sideways, carrying the amount, the status and the way in off the
edge of the screen.
The fix is the variable, not a fight with it. Section 104 put both
the head and the row on one `--rd-invoice-cols` precisely so they
could never disagree; redefining it here keeps that promise and
turns both into two columns at once.
The pieces then take the order they are actually read: which
invoice, from whom, the date against the amount, the state against
the way in. Nothing is dropped - the app's own narrow rule hides
the status badge, and the status is half of why this page is open.
--------------------------------------------------------------- */
@media (max-width: 760px) {
#dashboard-view.rd-shell .rd-list-inner {
--rd-invoice-cols: 1fr auto;
}
#dashboard-view.rd-shell .rd-list-inner > .invoice-table-head,
#dashboard-view.rd-shell .invoice-table-head {
display: none;
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary {
align-items: center;
gap: 8px 10px;
min-height: 0;
padding: 13px 14px;
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary > span:not(.status-badge):not(.invoice-review-toggle):not(.invoice-accounting-status) {
grid-column: 1 / -1;
gap: 3px;
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary > time {
grid-column: 1;
font-size: var(--fs-11);
color: var(--rd-faint);
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary > .invoice-table-amount {
grid-column: 2;
justify-self: end;
font-size: var(--fs-15);
font-weight: var(--anfal-weight-strong);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary > .status-badge {
display: inline-flex;
grid-column: 1;
justify-self: start;
width: auto;
max-width: none;
margin: 0;
}
#dashboard-view.rd-shell .rd-list-inner .invoice-table-row > summary > .invoice-review-toggle {
grid-column: 2;
justify-self: end;
width: auto;
}
/* the expanded half follows the same one-column reading */
#dashboard-view.rd-shell .invoice-row-expanded {
grid-template-columns: 1fr;
gap: 12px;
padding: 14px;
}
#dashboard-view.rd-shell .invoice-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
}
/* ---------------------------------------------------------------
85. CONTROLS THAT HAVE NOTHING TO CHOOSE BETWEEN
Moving the filter bar into the list card showed an employee a
"filter by employee" select. It is not a leak - the app leaves it
with the single option "جميع الموظفين" and never fills in the
other names, which was checked before writing this - but a control
with one choice is a control that costs a tap and gives nothing.
Search, status and date all still do work here, so they stay.
--------------------------------------------------------------- */
#dashboard-view.rd-shell.rd-own .invoice-filter-bar > label:has(#invoice-employee-filter) {
display: none;
}
#dashboard-view.rd-shell.rd-own #invoice-employee-filter {
display: none;
}
/* ---------------------------------------------------------------
86. SIGN-OUT COMES BACK - AS AN ICON, NOT A BLOCK
Section 82 hid the header's sign-out on phones because the
"المزيد" sheet carried a second copy. That was true for an admin
and false for an employee: the sheet's items are permission-gated,
every one of them is hidden for an employee, and the profile
dialog has no sign-out at all. The measured result was an employee
who could not leave the app.
It returns, but at the size the space allows: the same button, the
same handler, collapsed to the 34px icon the bar already uses.
The label stays in the DOM for anyone reading by voice.
--------------------------------------------------------------- */
@media (max-width: 760px) {
#dashboard-view.rd-shell .workspace-header {
grid-template-columns: auto 1fr auto;
align-items: center;
}
#dashboard-view.rd-shell .workspace-user {
grid-column: 3;
grid-row: 1;
display: flex;
align-items: center;
flex: 0 0 auto;
width: auto;
margin: 0;
}
#dashboard-view.rd-shell .workspace-user button#logout-button {
flex: 0 0 auto;
}
#dashboard-view.rd-shell .workspace-user button#logout-button {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
min-height: 34px;
margin: 0;
padding: 0;
border: 1px solid var(--rd-line);
border-radius: var(--r-9);
background: var(--rd-surface);
color: var(--anfal-rejected);
font-size: 0;
line-height: 0;
}
#dashboard-view.rd-shell .workspace-user button#logout-button svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
}
/* ---- the bottom bar joins the palette ---- */
#dashboard-view.rd-shell .mobile-bottom-nav {
border-top: 1px solid var(--rd-line);
background: var(--rd-surface);
box-shadow: 0 -6px 20px rgba(16, 42, 67, .06);
}
#dashboard-view.rd-shell .mobile-bottom-nav button {
background: transparent;
color: var(--rd-muted);
}
#dashboard-view.rd-shell .mobile-bottom-nav button svg {
stroke: currentColor;
}
#dashboard-view.rd-shell .mobile-bottom-nav button.is-active,
#dashboard-view.rd-shell .mobile-bottom-nav button[aria-current="page"] {
background: var(--rd-gold-soft);
color: var(--rd-gold-ink);
}
/* ---- one door to the profile, not two ----
For an employee the "المزيد" sheet has nothing left to show, so
the app sends the tap straight to the profile dialog - which is
what the icon in the top bar already does. Scoped to .rd-own:
for an admin that sheet still carries notifications, the
activity log and settings, and removing it would remove them. */
#dashboard-view.rd-shell.rd-own .mobile-bottom-nav [data-nav="more"] {
display: none;
}
/* ---- the theme switch is in the bar now ----
Two controls for one setting is how they end up disagreeing;
the bar's one is always in reach, this one needed three taps. */
#dashboard-view.rd-shell .profile-theme-control,
html.rd-shell .profile-theme-control {
display: none;
}
}
/* ---------------------------------------------------------------
87. THE PROFILE DIALOG ON A PHONE
715px of dialog on an 812px screen, ending at 763 - seventeen
pixels *under* the bottom bar, which starts at 746. It read as a
page that had failed to fit rather than something opened over one.
Now it reserves the bar's height and centres in what is left, so
the space above it and the space below it match.
Inside, three things were spending height without earning it: a
dark-mode row that the top bar already carries, and two settings
cards that wrapped into a column - icon, then title, then
description, then button, each on its own line. As rows they say
the same thing in half the space.
--------------------------------------------------------------- */
@media (max-width: 760px) {
html.rd-shell #profile-overlay {
padding-top: 0;
padding-bottom: 66px;
}
html.rd-shell #profile-overlay .profile-dialog {
max-height: calc(100vh - 162px);
max-height: calc(100dvh - 162px);
margin: 0;
}
html.rd-shell #profile-overlay .profile-heading {
padding-bottom: 11px;
margin-bottom: 13px;
}
html.rd-shell #profile-overlay .rd-identity {
gap: 10px;
}
html.rd-shell #profile-overlay .profile-avatar {
width: 44px;
height: 44px;
font-size: var(--fs-14);
}
html.rd-shell #profile-overlay .profile-summary dl > div {
min-height: 0;
padding: 9px 0;
}
/* the switch is in the top bar - one setting, one control */
html.rd-shell #profile-overlay .rd-theme-row {
display: none;
}
html.rd-shell #profile-overlay .profile-password-launch,
html.rd-shell #profile-overlay .profile-notifications {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
column-gap: 11px;
row-gap: 9px;
padding: 12px;
}
html.rd-shell #profile-overlay .profile-password-launch > .rd-row-icon,
html.rd-shell #profile-overlay .profile-notifications > .rd-row-icon {
grid-column: 1;
grid-row: 1 / 3;
}
html.rd-shell #profile-overlay .profile-password-launch > .rd-row-body,
html.rd-shell #profile-overlay .profile-notifications > .rd-row-body {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
html.rd-shell #profile-overlay .profile-password-launch > button,
html.rd-shell #profile-overlay .profile-notifications > button {
grid-column: 2;
grid-row: 2;
justify-self: start;
margin: 0;
}
}
/* ---------------------------------------------------------------
88. THE BOTTOM BAR: TILES, CENTRED, AND THE WAY OUT WITH THEM
The bar was five fixed columns. An employee sees four of them, so
the row sat off to one side with an empty column beside it - the
layout was counting places, not buttons. Flex and centring count
buttons, so the bar stays balanced whatever a role can reach.
Each destination becomes a tile in the house language, and
sign-out joins them at the end - red, because it is the one
control here that ends the session rather than moving between
pages, and it should never be mistaken for a fifth destination.
The app's own `env(safe-area-inset-bottom)` padding is kept: on an
installed iPhone that is what holds the bar above the home bar.
--------------------------------------------------------------- */
@media (max-width: 760px) {
#dashboard-view.rd-shell .mobile-bottom-nav {
display: flex;
justify-content: center;
align-items: stretch;
gap: 6px;
padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
}
#dashboard-view.rd-shell .mobile-bottom-nav button {
flex: 0 1 74px;
min-width: 0;
min-height: 50px;
gap: 4px;
padding: 7px 4px;
border: 1px solid var(--rd-line);
border-radius: var(--r-11);
background: var(--rd-surface-soft);
color: var(--rd-muted);
font-size: var(--fs-9p5);
font-weight: var(--anfal-weight-semi);
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .mobile-bottom-nav button svg {
width: 19px;
height: 19px;
stroke: currentColor;
}
#dashboard-view.rd-shell .mobile-bottom-nav button.is-active,
#dashboard-view.rd-shell .mobile-bottom-nav button[aria-current="page"] {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--rd-gold-ink);
}
/* the way out, not a destination */
#dashboard-view.rd-shell .mobile-bottom-nav button#logout-button.rd-nav-logout {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: auto;
height: auto;
flex: 0 1 74px;
margin: 0;
padding: 7px 4px;
border: 1px solid var(--anfal-red-200);
border-radius: var(--r-11);
background: var(--anfal-red-075);
color: var(--anfal-rejected);
font-size: var(--fs-9p5);
font-weight: var(--anfal-weight-strong);
line-height: 1.3;
}
#dashboard-view.rd-shell .mobile-bottom-nav button#logout-button.rd-nav-logout svg {
width: 19px;
height: 19px;
stroke: currentColor;
}
/* it left the header, so the header closes the gap it held */
#dashboard-view.rd-shell .workspace-header:not(:has(#logout-button)) {
grid-template-columns: auto 1fr;
}
}
html[data-theme="dark"] #dashboard-view.rd-shell .mobile-bottom-nav button#logout-button.rd-nav-logout {
border-color: #6b3b38;
background: #3d2324;
color: #f3b5aa;
}
/* ---------------------------------------------------------------
89. "مراجعة الآن" JOINS THE FAMILY
Six navy blocks on the manager's home. They are marks inside
rows that are themselves buttons, so they are not controls in
their own right - they are the row saying what it will do.
They take the resting look of the family, and the gold arrives
when the pointer is on the row rather than on the mark, because
the row is the thing you press.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .operation-row em {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border: 1px solid var(--rd-line);
border-radius: var(--r-999);
background: var(--rd-surface);
color: var(--rd-ink);
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-strong);
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
#dashboard-view.rd-shell .operation-row:hover em,
#dashboard-view.rd-shell .operation-row:focus-visible em {
border-color: var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--rd-gold-ink);
}
/* =============================================================
14. المصروف بدون فاتورة، الصرف، والسندات
كل قاعدة هنا مربوطة بـ.rd-shell مثل بقية الطبقة، وتأخذ
ألوانها من توكنات القسم 0 حتى يصل الوضع الداكن وحده بدل
ملاحقته بقواعد مكررة. الأزرار ليست هنا: كل زر جديد يدخل
عائلة .rd-btn من جدول RD_BTNS في redesign.js.
============================================================= */
/* اختيار نوع المستند: بطاقتان بعرض متساوٍ، والمختارة تتحول ذهبية */
#dashboard-view.rd-shell .proof-type-choice {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
border: 0; margin: 0 0 16px; padding: 0;
}
#dashboard-view.rd-shell .proof-type-choice legend {
font-size: var(--fs-12); font-weight: var(--anfal-weight-semi); color: var(--rd-muted);
padding: 0; margin-bottom: 8px; grid-column: 1 / -1;
}
#dashboard-view.rd-shell .proof-type-option {
display: flex; align-items: flex-start; gap: 9px; margin: 0;
padding: 12px; border: 1px solid var(--rd-line); border-radius: var(--r-12);
background: var(--rd-surface); cursor: pointer; transition: border-color .15s, background .15s;
}
#dashboard-view.rd-shell .proof-type-option:hover { border-color: var(--rd-gold-line); }
/* أيقونة نوع المستند تأخذ حبر الطبقة، فتتبع الوضع الداكن معها. */
#dashboard-view.rd-shell .proof-type-icon { stroke: var(--rd-muted); }
#dashboard-view.rd-shell .proof-type-option.is-selected .proof-type-icon { stroke: var(--anfal-navy-900, var(--rd-ink)); }
#dashboard-view.rd-shell .proof-type-option.is-selected { border-color: var(--rd-gold-line); }
#dashboard-view.rd-shell .proof-type-option span { display: flex; flex-direction: column; gap: 2px; }
#dashboard-view.rd-shell .proof-type-option b { font-size: var(--fs-13); font-weight: var(--anfal-weight-semi); color: var(--rd-ink); }
#dashboard-view.rd-shell .proof-type-option small { font-size: var(--fs-11); color: var(--rd-muted); line-height: 1.5; }
#dashboard-view.rd-shell .proof-type-option:has(input:checked) {
border-color: var(--rd-gold-line); background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .proof-type-option:has(input:checked) b { color: var(--rd-gold-ink); }
/* التنبيه الضريبي: لون التحذير معنى وليس سطحًا، فيبقى صريحًا */
#dashboard-view.rd-shell .no-invoice-banner,
#dashboard-view.rd-shell .no-invoice-tax-note {
margin: 0 0 14px; padding: 11px 13px; border-radius: var(--r-10);
background: var(--anfal-red-050); border: 1px solid var(--anfal-red-200); color: var(--anfal-red-700);
font-size: var(--fs-12); line-height: 1.6;
}
html[data-theme="dark"] #dashboard-view.rd-shell .no-invoice-banner,
html[data-theme="dark"] #dashboard-view.rd-shell .no-invoice-tax-note {
background: #35201d; border-color: #6b3229; color: #f3b5aa;
}
#dashboard-view.rd-shell .no-invoice-org-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* المرفق المساعد: نفس شكل حقل مستند المدير حتى لا يبدو غريبًا */
#dashboard-view.rd-shell .no-invoice-proof-field {
display: flex; flex-direction: column; gap: 6px; margin: 14px 0;
padding: 13px; border: 1px dashed var(--rd-line); border-radius: var(--r-12);
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .no-invoice-proof-field > span { font-size: var(--fs-13); font-weight: var(--anfal-weight-semi); color: var(--rd-ink); }
#dashboard-view.rd-shell .no-invoice-proof-field > small { font-size: var(--fs-11); color: var(--rd-muted); }
#dashboard-view.rd-shell .no-invoice-proof-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#dashboard-view.rd-shell .no-invoice-proof-name,
html.rd-shell .no-invoice-proof-name {
margin: 6px 0 0; font-size: var(--fs-12); color: var(--rd-gold-ink); font-weight: var(--anfal-weight-semi);
}
#dashboard-view.rd-shell .is-required,
html.rd-shell .is-required { color: var(--anfal-red-700); font-weight: var(--anfal-weight-semi); }
html[data-theme="dark"] #dashboard-view.rd-shell .is-required,
html[data-theme="dark"].rd-shell .is-required { color: #f3b5aa; }
/* الإقرار: يقرؤه الموظف قبل الإرسال، فيأخذ إطارًا ذهبيًا يوقف العين */
#dashboard-view.rd-shell .declaration-control {
display: flex; align-items: flex-start; gap: 10px; margin: 16px 0;
padding: 13px; border: 1px solid var(--rd-gold-line); border-radius: var(--r-12);
background: var(--rd-gold-soft); cursor: pointer;
}
#dashboard-view.rd-shell .declaration-control input { margin-top: 3px; flex: 0 0 auto; }
#dashboard-view.rd-shell .declaration-control span { font-size: var(--fs-12); line-height: 1.7; color: var(--rd-gold-ink); font-weight: var(--anfal-weight-medium); }
/* الشارات: الحالة والنوع والصرف في صف واحد */
#dashboard-view.rd-shell .invoice-badge-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#dashboard-view.rd-shell .invoice-compact-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#dashboard-view.rd-shell .proof-badge,
#dashboard-view.rd-shell .disbursement-badge {
display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-999);
font-size: var(--fs-11); font-weight: var(--anfal-weight-semi); white-space: nowrap;
border: 1px solid var(--rd-line); background: var(--rd-surface-soft); color: var(--rd-muted);
}
#dashboard-view.rd-shell .proof-badge.proof-none {
border-color: var(--rd-gold-line); background: var(--rd-gold-soft); color: var(--rd-gold-ink);
}
#dashboard-view.rd-shell .disbursement-badge.disbursement-awaiting_reimbursement {
border-color: var(--rd-gold-line); background: var(--rd-gold-soft); color: var(--rd-gold-ink);
}
#dashboard-view.rd-shell .disbursement-badge.disbursement-disbursed,
#dashboard-view.rd-shell .disbursement-badge.disbursement-custody_settled {
border-color: #9fe1cb; background: var(--anfal-green-050); color: var(--anfal-green-700);
}
html[data-theme="dark"] #dashboard-view.rd-shell .disbursement-badge.disbursement-disbursed,
html[data-theme="dark"] #dashboard-view.rd-shell .disbursement-badge.disbursement-custody_settled {
border-color: var(--anfal-green-700); background: #16302a; color: #8fd9bb;
}
/* سبب الإرجاع: أول ما يراه الموظف حين يفتح مصروفه */
#dashboard-view.rd-shell .expense-return-callout {
margin: 0 0 14px; padding: 13px; border-radius: var(--r-12);
border: 1px solid var(--rd-gold-line); background: var(--rd-gold-soft);
display: flex; flex-direction: column; gap: 4px;
}
#dashboard-view.rd-shell .expense-return-callout h5 { margin: 0; font-size: var(--fs-11); font-weight: var(--anfal-weight-semi); color: var(--rd-muted); }
#dashboard-view.rd-shell .expense-return-callout strong { font-size: var(--fs-14); color: var(--rd-gold-ink); }
#dashboard-view.rd-shell .expense-return-callout p { margin: 0; font-size: var(--fs-12); line-height: 1.7; color: var(--rd-ink); }
#dashboard-view.rd-shell .expense-return-callout small { font-size: var(--fs-11); color: var(--rd-muted); }
#dashboard-view.rd-shell .expense-return-callout.is-final {
border-color: var(--anfal-red-200); background: var(--anfal-red-050);
}
#dashboard-view.rd-shell .expense-return-callout.is-final strong { color: var(--anfal-red-700); }
html[data-theme="dark"] #dashboard-view.rd-shell .expense-return-callout.is-final {
border-color: #6b3229; background: #35201d;
}
html[data-theme="dark"] #dashboard-view.rd-shell .expense-return-callout.is-final strong { color: #f3b5aa; }
/* نوافذ الإجراءات الجديدة تستعمل هيكل نافذة الإحالة، وتحتاج هذين فقط */
html.rd-shell .disbursement-summary {
margin: 0 0 14px; padding: 11px 13px; border-radius: var(--r-10);
background: var(--rd-surface-soft); border: 1px solid var(--rd-line);
font-size: var(--fs-13); font-weight: var(--anfal-weight-semi); color: var(--rd-ink);
}
html.rd-shell .timeline-diff {
display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
margin: 6px 0 0; font-size: var(--fs-11p5); line-height: 1.7;
}
html.rd-shell .timeline-diff dt { color: var(--rd-faint); white-space: nowrap; }
html.rd-shell .timeline-diff dd { margin: 0; color: var(--rd-muted); overflow-wrap: anywhere; }
/* مسار المصروف صار يضمّ سجلّين: حركات الموظف وقرارات الإحالة. الخط
الذهبي على الحافة يفصل الطبقتين، والشارة ترقّم الجولة - فالذهاب إلى
المدير والعودة منه دورة، وتكرارها هو ما كان يضيع على المحاسب. */
html.rd-shell #timeline-list article.is-referral {
border-inline-start: 2px solid var(--rd-gold-ink); padding-inline-start: 10px;
}
html.rd-shell .timeline-round {
font-size: var(--fs-11); font-weight: var(--anfal-weight-semi); color: var(--rd-gold-ink); white-space: nowrap;
}
#dashboard-view.rd-shell .operation-row em.operation-rounds {
display: block; margin-top: 2px; font-style: normal;
font-size: var(--fs-11); font-weight: var(--anfal-weight-semi); color: var(--rd-gold-ink);
}
@media (max-width: 640px) {
#dashboard-view.rd-shell .proof-type-choice,
#dashboard-view.rd-shell .no-invoice-org-fields { grid-template-columns: 1fr; }
}
/* --- عناصر الاختيار داخل مكوّنات المصروف ---
مدخلات النموذج كلها مشدودة إلى مقاس لمس 50px، فورث زر الاختيار
ومربع الإقرار ذلك المقاس وظهرا دائرة ومستطيلًا ضخمين بأزرق
المتصفح الافتراضي. هذه العناصر ليست حقول إدخال تُملأ، بل علامات
حالة، فتُرسم بمقاسها وبذهب الهوية. اللون الذهبي هنا تباين لا
سطح، فيبقى صريحًا كما في .rd-btn. */
#dashboard-view.rd-shell .proof-type-option input[type="radio"],
#dashboard-view.rd-shell .declaration-control input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 20px; height: 20px;
min-width: 20px; min-height: 20px;
max-width: 20px; max-height: 20px;
flex: 0 0 20px;
margin: 1px 0 0; padding: 0;
border: 1.5px solid var(--rd-line);
background: var(--rd-surface);
position: relative;
cursor: pointer;
transition: border-color .15s, background .15s;
}
#dashboard-view.rd-shell .proof-type-option input[type="radio"] { border-radius: 50%; }
#dashboard-view.rd-shell .declaration-control input[type="checkbox"] { border-radius: var(--r-6); }
#dashboard-view.rd-shell .proof-type-option input[type="radio"]:checked,
#dashboard-view.rd-shell .declaration-control input[type="checkbox"]:checked {
border-color: var(--anfal-gold-500);
background: var(--anfal-gold-500);
}
#dashboard-view.rd-shell .proof-type-option input[type="radio"]:checked::after {
content: ""; position: absolute;
top: 5px; right: 5px; bottom: 5px; left: 5px;
border-radius: 50%; background: #fff;
}
#dashboard-view.rd-shell .declaration-control input[type="checkbox"]:checked::after {
content: ""; position: absolute; left: 6px; top: 2.5px;
width: 5px; height: 10px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
#dashboard-view.rd-shell .proof-type-option input[type="radio"]:focus-visible,
#dashboard-view.rd-shell .declaration-control input[type="checkbox"]:focus-visible {
outline: 2px solid var(--anfal-gold-500); outline-offset: 2px;
}
/* الحالة المختارة تُوسَم بصف من JS أيضًا، لا بـ:has وحده -
iOS أقدم من 15.4 لا يعرف :has، وبدونه لا يرى الموظف أي فرق
بين البطاقتين على جهازه. */
#dashboard-view.rd-shell .proof-type-option.is-selected {
border-color: var(--rd-gold-line);
background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .proof-type-option.is-selected b { color: var(--rd-gold-ink); }
/* --- حقول التاريخ على iOS ---
Safari يعطي input[type=date] مقاسًا داخليًا خاصًا به ولا يحترم
العرض ما لم يُلغَ مظهره الأصلي، فكان الحقل يخرج خارج البطاقة
ومحاذيًا لليسار. */
/* محصورة في نموذج المصروف. تعميمها على كل حقول التاريخ كان يمطّ
فلتر «تصفية حسب التاريخ» في قائمة الفواتير فيخرج عن تناسق جاره. */
#dashboard-view.rd-shell #invoice-form input[type="date"] {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
text-align: center;
}
/* الحاوية الداخلية للقيمة في WebKit لا تتمدد وحدها */
#dashboard-view.rd-shell #invoice-form input[type="date"]::-webkit-date-and-time-value {
text-align: center;
margin: 0;
width: 100%;
}
#dashboard-view.rd-shell #invoice-form input[type="date"]::-webkit-calendar-picker-indicator {
margin: 0;
}
/* فلتر التاريخ يطابق «تصفية حسب الحالة» بجانبه.
قاعدة الفلاتر تضبط height:34px، لكن مقاس اللمس العام
(min-height:50px) يتغلب عليها، فيخرج الحقل أطول من جاره. */
#dashboard-view.rd-shell .invoice-filter-bar input[type="date"],
#dashboard-view.rd-shell .invoice-filter-bar input,
#dashboard-view.rd-shell .invoice-filter-bar select {
-webkit-appearance: none;
appearance: none;
min-height: 34px;
height: 34px;
padding: 0 10px;
box-sizing: border-box;
}
#dashboard-view.rd-shell .invoice-filter-bar label {
flex: 1 1 150px;
min-width: 0;
}
#dashboard-view.rd-shell .invoice-filter-bar input[type="date"] {
width: 100%;
text-align: start;
}
/* مدى التاريخ: الملصق يبقى عمودًا كبقية الفلاتر، والحقلان صفٌّ داخله
بعرض متساوٍ وفاصل بينهما - فلا يطول الشريط ولا يختل محاذاته. */
/* خانة الفترة تحمل حقلين لا حقلًا، فتأخذ نصيبًا أوسع من جيرانها. */
#dashboard-view.rd-shell .invoice-filter-bar > label.invoice-date-range {
flex: 1.5 1 230px;
}
/* الشكل بالمحدِّد لا بالصنف: القائمة تُبنى من جديد مع كل تحديث، وطبقة
التصميم تزيّنها بعدها بلحظة - فكان اللون الكحلي القديم يظهر في ما بينهما
عند كل انتقال بين التبويبات. */
#dashboard-view.rd-shell :is(.invoice-review-toggle, .referral-history-inline, .expense-timeline-button, .invoice-decision-actions > button) {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-height: 34px;
padding: 0 12px;
border: 1px solid var(--anfal-border, var(--rd-line));
border-radius: var(--r-10);
background: var(--rd-surface);
color: var(--anfal-navy-900, #0d2c4a);
font: inherit;
font-size: var(--fs-12);
font-weight: var(--anfal-weight-bold);
line-height: 1;
text-align: start;
cursor: pointer;
}
#dashboard-view.rd-shell .invoice-review-toggle { justify-content: center; }
/* القرار الحسّاس يقوله لونه قبل أن يُقرأ نصه: الأحمر لما لا رجعة فيه،
والكهرماني لما يُصحَّح لاحقًا. والحدّ يلوّن عند المرور وحده، فلا يصير
الصف لوحة ألوان. */
/* النافذة تسكن خارج #dashboard-view، فلها محدِّدها - والدرجتان نفسهما. */
html.rd-shell .task-detail-foot > .is-irreversible { color: var(--anfal-danger-ink); }
html.rd-shell .task-detail-foot > .is-irreversible:hover { border-color: var(--anfal-red-150); background: var(--anfal-red-050); }
html.rd-shell .task-detail-foot > .is-caution { color: var(--anfal-caution-ink); }
html.rd-shell .task-detail-foot > .is-caution:hover { border-color: var(--anfal-amber-300); background: var(--anfal-amber-050); }
html[data-theme="dark"].rd-shell .task-detail-foot > .is-irreversible { color: var(--anfal-red-200); }
html[data-theme="dark"].rd-shell .task-detail-foot > .is-caution { color: var(--anfal-amber-200); }
#dashboard-view.rd-shell .invoice-decision-actions > .is-irreversible { color: var(--anfal-danger-ink); }
#dashboard-view.rd-shell .invoice-decision-actions > .is-irreversible:hover { border-color: var(--anfal-red-150); background: var(--anfal-red-050); }
#dashboard-view.rd-shell .invoice-decision-actions > .is-irreversible .rd-btn-icon { color: var(--anfal-danger-ink); }
#dashboard-view.rd-shell .invoice-decision-actions > .is-caution { color: var(--anfal-caution-ink); }
#dashboard-view.rd-shell .invoice-decision-actions > .is-caution:hover { border-color: var(--anfal-amber-300); background: var(--anfal-amber-050); }
#dashboard-view.rd-shell .invoice-decision-actions > .is-caution .rd-btn-icon { color: var(--anfal-caution-ink); }
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-decision-actions > .is-irreversible { color: var(--anfal-red-200); }
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-decision-actions > .is-caution { color: var(--anfal-amber-200); }
/* الموظف لا يصفّي بالموظف - كلها فواتيره. والقاعدة القائمة تخفيها في
وضع rd-own؛ هذه تخفيها أيضًا حين يخفيها التطبيق بنفسه. */
#dashboard-view.rd-shell .invoice-filter-bar > label[hidden],
#dashboard-view.rd-shell .invoice-status-summary > button[hidden] { display: none; }
#dashboard-view.rd-shell .invoice-date-fields {
display: flex;
min-width: 0;
align-items: center;
gap: 6px;
}
#dashboard-view.rd-shell .invoice-date-fields input[type="date"] {
flex: 1 1 0;
min-width: 0;
width: auto;
padding: 0 6px;
}
#dashboard-view.rd-shell .invoice-date-sep {
flex: 0 0 auto;
color: var(--rd-muted, var(--anfal-muted));
font-size: var(--fs-12);
}
/* --- زر الخطوة الأخيرة للموظف ---
«إرسال الفاتورة للمحاسب» و«إرسال المصروف للمحاسب» هما آخر ما يفعله
الموظف، وكانا يبدوان كأي زر آخر في العائلة البيضاء. يأخذان هنا
الكحلي --forest نفسه الذي يحمله زر الدخول وترويسة السند - وهو لون
الالتزام في هذا النظام - مع ارتفاع أكبر وعرض كامل، فيقرأان كخطوة
نهائية لا كإجراء عابر. تبقى البنية بنية .rd-btn نفسها. */
#dashboard-view.rd-shell #invoice-submit,
#dashboard-view.rd-shell #no-invoice-submit {
justify-content: center;
width: 100%;
min-height: 48px;
padding: 0 16px;
border-color: var(--anfal-navy-ink);
background: var(--anfal-navy-ink);
color: #fff;
font-size: var(--fs-14);
text-align: center;
}
#dashboard-view.rd-shell #invoice-submit:hover,
#dashboard-view.rd-shell #no-invoice-submit:hover {
border-color: #173a5e;
background: #173a5e;
}
/* مربع الأيقونة يقلب تباينه ليقرأ فوق الكحلي */
#dashboard-view.rd-shell #invoice-submit > .rd-btn-icon,
#dashboard-view.rd-shell #no-invoice-submit > .rd-btn-icon,
#dashboard-view.rd-shell #invoice-submit:hover > .rd-btn-icon,
#dashboard-view.rd-shell #no-invoice-submit:hover > .rd-btn-icon {
border-color: rgba(255, 255, 255, .35);
background: rgba(255, 255, 255, .12);
color: var(--anfal-gold-200);
}
#dashboard-view.rd-shell #invoice-submit:disabled,
#dashboard-view.rd-shell #no-invoice-submit:disabled {
opacity: .6;
cursor: wait;
}
/* الوضع الداكن: سطح البطاقة #0d2133 والكحلي var(--anfal-navy-ink) متقاربان جدًا،
فيختفي الزر تقريبًا. الذهب هو ما يقرأ فوق الداكن في هذه الهوية،
فينقلب الزر إليه بنص كحلي - نفس درجة التمييز، بتباين صحيح. */
html[data-theme="dark"] #dashboard-view.rd-shell #invoice-submit,
html[data-theme="dark"] #dashboard-view.rd-shell #no-invoice-submit {
border-color: var(--anfal-gold-500);
background: var(--anfal-gold-500);
color: var(--anfal-navy-ink);
}
html[data-theme="dark"] #dashboard-view.rd-shell #invoice-submit:hover,
html[data-theme="dark"] #dashboard-view.rd-shell #no-invoice-submit:hover {
border-color: var(--anfal-gold-400);
background: var(--anfal-gold-400);
}
html[data-theme="dark"] #dashboard-view.rd-shell #invoice-submit > .rd-btn-icon,
html[data-theme="dark"] #dashboard-view.rd-shell #no-invoice-submit > .rd-btn-icon,
html[data-theme="dark"] #dashboard-view.rd-shell #invoice-submit:hover > .rd-btn-icon,
html[data-theme="dark"] #dashboard-view.rd-shell #no-invoice-submit:hover > .rd-btn-icon {
border-color: rgba(16, 42, 67, .35);
background: rgba(16, 42, 67, .14);
color: var(--anfal-navy-ink);
}
/* --- ما يحتاج تعديل الموظف ---
المصروف المُعاد كان يضيع بين تسعة مصروفات أخرى بلا تمييز. هذا
البانر يرفعه إلى أعلى القائمة بسببه وبزر يفتح التصحيح مباشرة. */
#dashboard-view.rd-shell .employee-todo {
margin: 0 0 14px;
padding: 13px;
border: 1px solid var(--rd-gold-line);
border-radius: var(--r-12);
background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .employee-todo h4 {
margin: 0 0 10px;
font-size: var(--fs-13);
font-weight: var(--anfal-weight-strong);
color: var(--rd-gold-ink);
}
#dashboard-view.rd-shell .employee-todo article {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px;
border: 1px solid var(--rd-gold-line);
border-radius: var(--r-10);
background: var(--rd-surface);
}
#dashboard-view.rd-shell .employee-todo article + article { margin-top: 8px; }
#dashboard-view.rd-shell .employee-todo article > div {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 170px;
}
#dashboard-view.rd-shell .employee-todo strong { font-size: var(--fs-13); color: var(--rd-ink); }
#dashboard-view.rd-shell .employee-todo span { font-size: var(--fs-12); font-weight: var(--anfal-weight-semi); color: var(--rd-gold-ink); }
#dashboard-view.rd-shell .employee-todo small { font-size: var(--fs-11); color: var(--rd-muted); line-height: 1.6; }
/* شريط سبب الإرجاع فوق النموذج، فيقرأ الموظف المطلوب قبل أن يعدّل */
#dashboard-view.rd-shell .correction-strip {
margin: 0 0 16px;
padding: 13px;
border: 1px solid var(--rd-gold-line);
border-radius: var(--r-12);
background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .correction-strip strong {
display: block;
font-size: var(--fs-12);
color: var(--rd-muted);
font-weight: var(--anfal-weight-semi);
}
#dashboard-view.rd-shell .correction-reason {
margin: 4px 0 0;
font-size: var(--fs-15);
font-weight: var(--anfal-weight-strong);
color: var(--rd-gold-ink);
}
#dashboard-view.rd-shell .correction-note {
margin: 4px 0 0;
font-size: var(--fs-12);
line-height: 1.7;
color: var(--rd-ink);
}
#dashboard-view.rd-shell .correction-todo {
margin: 8px 0 0;
padding-top: 8px;
border-top: 1px solid var(--rd-gold-line);
font-size: var(--fs-12);
font-weight: var(--anfal-weight-semi);
color: var(--rd-ink);
}
/* --- صورة الفاتورة المُعادة ---
الاسم والرقم وحدهما لا يعرّفان الموظف بأي مصروف قُصد. الصورة
والمبلغ والتاريخ هي ما يقطع الشك، فتأخذ الصورة مكانها أول الصف. */
#dashboard-view.rd-shell .employee-todo .todo-thumb {
flex: 0 0 58px;
width: 58px;
height: 58px;
min-height: 58px;
padding: 0;
overflow: hidden;
border: 1px solid var(--rd-line);
border-radius: var(--r-10);
background: var(--rd-surface-soft);
cursor: pointer;
display: grid;
place-items: center;
font-size: var(--fs-10);
font-weight: var(--anfal-weight-semi);
color: var(--rd-faint);
line-height: 1.3;
text-align: center;
}
#dashboard-view.rd-shell .employee-todo .todo-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#dashboard-view.rd-shell .employee-todo .todo-thumb.is-pdf {
background: var(--rd-gold-soft);
border-color: var(--rd-gold-line);
color: var(--rd-gold-ink);
font-size: var(--fs-12);
}
#dashboard-view.rd-shell .employee-todo .todo-thumb.is-empty {
cursor: default;
border-style: dashed;
}
#dashboard-view.rd-shell .employee-todo .todo-facts {
font-size: var(--fs-12);
font-weight: var(--anfal-weight-strong);
color: var(--rd-ink);
}
/* الصورة الحالية بجانب سبب الإرجاع، بنفس مصغّرة «فواتيري» */
#dashboard-view.rd-shell .correction-head {
display: flex;
align-items: flex-start;
gap: 11px;
}
#dashboard-view.rd-shell .correction-copy {
min-width: 0;
flex: 1 1 auto;
}
#dashboard-view.rd-shell .correction-strip .todo-thumb {
flex: 0 0 58px;
width: 58px;
height: 58px;
min-height: 58px;
padding: 0;
overflow: hidden;
border: 1px solid var(--rd-gold-line);
border-radius: var(--r-10);
background: var(--rd-surface);
cursor: pointer;
display: grid;
place-items: center;
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
color: var(--rd-gold-ink);
}
#dashboard-view.rd-shell .correction-strip .todo-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- الصف المفتوح للمراجعة ---
عند فتح «مراجعة» كان الصندوق بنفس لون بقية الصفوف، فلا يعرف المراجع
أي فاتورة يعاين. يأخذ المفتوح درجة البيج الذهبية نفسها التي تحملها
البطاقة المختارة في النموذج، فيبقى داخل الهوية لا لونًا غريبًا. */
#dashboard-view.rd-shell .invoice-table-row[open] {
/* البيج وحده فوق سطح أبيض فرقه ضعيف على شاشة الجوال، فيحتار المراجع
أفتح الصف أم لا. ثلاث إشارات مجتمعة تقطع الشك: درجة أعمق، وشريط
ذهبي سميك على حافة البداية، وظل خفيف يرفع الصف عن جيرانه. */
border-color: var(--anfal-gold-500);
border-inline-start: 4px solid var(--anfal-gold-500);
background: #f0dfc0;
box-shadow: 0 3px 14px rgba(184, 146, 85, .28);
}
html[data-theme="dark"] #dashboard-view.rd-shell .invoice-table-row[open] {
border-color: var(--anfal-gold-500);
background: #43361f;
box-shadow: 0 3px 14px rgba(0, 0, 0, .45);
}
#dashboard-view.rd-shell .invoice-table-row[open] > summary {
border-bottom: 1px solid var(--anfal-gold-500);
}
/* التفاصيل نفسها تبقى على سطح فاتح ليقرأ محتواها بوضوح فوق البيج */
#dashboard-view.rd-shell .invoice-table-row[open] .invoice-row-expanded {
border-radius: var(--r-10);
background: var(--rd-surface);
}
/* شارة الفاتورة المصحَّحة */
/* «معدّلة» بالأحمر: هي تنبيه للمراجع أن هذه الفاتورة سبق أن أُرجعت.
نفس درجات التحذير المستعملة في النظام، لا لون جديد. */
#dashboard-view.rd-shell .corrected-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border: 1px solid var(--anfal-red-200);
border-radius: var(--r-999);
background: var(--anfal-red-050);
color: var(--anfal-red-700);
font-size: var(--fs-11);
font-weight: var(--anfal-weight-strong);
white-space: nowrap;
}
html[data-theme="dark"] #dashboard-view.rd-shell .corrected-badge {
border-color: #6b3229;
background: #35201d;
color: #f3b5aa;
}
/* ---------------------------------------------------------------
91. متى تحرّكت هذه الفاتورة؟
الصف كان يعرض تاريخ الفاتورة - التاريخ المطبوع على الورقة - فتبدو
فاتورة وصلت قبل ساعة وكأنها من الشهر الماضي. وسؤال الموظف الحقيقي
«رجعها متين» لم يكن له جواب إلا بفتح سجل الأحداث.
السطر نسبي لأن السؤال نسبي، والوقت الدقيق في title لمن أراده.
واللون الذهبي لا يزيّن: يقول إن هذه انتظرت أكثر من ثلاثة أيام.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .operation-row small.operation-when {
color: var(--rd-faint);
font-size: var(--fs-11);
}
#dashboard-view.rd-shell .operation-row small.operation-when.is-stale {
color: var(--rd-gold-ink);
font-weight: var(--anfal-weight-semi);
}
#dashboard-view.rd-shell .invoice-timeline {
margin: 3px 0 0;
color: var(--rd-faint);
font-size: var(--fs-11p5);
}
#dashboard-view.rd-shell .invoice-timeline.is-stale {
color: var(--rd-gold-ink);
font-weight: var(--anfal-weight-semi);
}
/* ---------------------------------------------------------------
زر العرض داخل شريط البحث
الزر انتقل من الترويسة إلى صف الفلاتر، فيأخذ ارتفاع الحقل نفسه
(34px) بدل ارتفاع أزرار الترويسة، ويبقى من عائلة .rd-btn.
و[hidden] يسبق display العائلة: زر PDF مخفيّ حتى يظهر كشف.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .statement-page-filters > button.rd-btn { height: 42px; min-height: 42px; }
#dashboard-view.rd-shell .rd-btn[hidden],
html.rd-shell .rd-btn[hidden] { display: none; }
#dashboard-view.rd-shell .statement-page-actions:empty { display: none; }
/* فترة الفواتير تُقرأ «من … إلى …»، فتحتاج نصيبًا أوسع قليلًا. */
#dashboard-view.rd-shell .invoice-filter-bar > label.invoice-date-range { flex: 1.7 1 270px; }
#dashboard-view.rd-shell .invoice-date-sep { font-weight: var(--anfal-weight-strong); white-space: nowrap; }
/* زر «عرض الكشف» يبقى في صف الفلاتر لا تحته: الصف لا يلتف على الشاشات
الواسعة، والحقول تتقاسم ما تبقى بعد الزر. تحت 640px تُكدَّس كالمعتاد. */
@media (min-width: 640px) {
#dashboard-view.rd-shell .statement-page-filters { flex-wrap: nowrap; }
#dashboard-view.rd-shell .statement-page-filters > label { flex: 1 1 0; }
#dashboard-view.rd-shell .statement-page-filters > button { flex: 0 0 auto; align-self: flex-end; }
}
/* الخط الرأسي بلون الحدود نفسه في النمطين. */
#dashboard-view.rd-shell .statement-page-table-wrap th + th,
#dashboard-view.rd-shell .statement-page-table-wrap td + td { border-inline-start: 1px solid var(--rd-line); }
/* أربع خانات بدل ثلاث: «الموظف» يبقى أوسع قليلًا لأنه أسماء، والتواريخ
والنوع تتقاسم الباقي. الزر لا يتغير مكانه ولا مقاسه. */
@media (min-width: 640px) {
#dashboard-view.rd-shell .statement-page-filters > label:first-child { flex: 1.3 1 0; }
}
#dashboard-view.rd-shell .statement-empty-cell { color: var(--rd-faint); text-align: center !important; }
#dashboard-view.rd-shell .statement-page-table-wrap tr.is-total td { background: var(--rd-gold-soft); color: var(--rd-gold-ink); font-weight: var(--anfal-weight-bold); }
#dashboard-view.rd-shell .statement-page-kpis-scoped { grid-template-columns: repeat(2, 1fr); }
/* ---------------------------------------------------------------
92. THE CORRECTED FUNDING ROW
الصف صار يحمل أربعة أزرار بدل اثنين: الإثبات، وتعديل البيانات،
وتصحيح المبلغ، وإلغاء الإضافة. فيلتفّ بدل أن ينضغط، والمبلغ
والوصف يبقيان سطرًا كاملًا فوقها على الشاشات الضيقة.
والمبلغ الملغى يُشطب: العين تعرف قبل أن تقرأ «أُلغيت».
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-funding-item { flex-wrap: wrap; }
#dashboard-view.rd-shell .custody-funding-item-main { flex: 1 1 180px; }
#dashboard-view.rd-shell .custody-funding-item-main strong.is-reversed {
text-decoration: line-through;
color: var(--rd-muted);
}
/* ---------------------------------------------------------------
94. حركات العهدة - صندوق واحد بدل اثنين
الداخل والخارج يفترقان باللون قبل أن يُقرأ النوع: العين تفرز
الاتجاه في لمحة، ثم تقرأ التفصيل إن أرادت. والإشارة مكتوبة أيضًا،
فاللون وحده لا يكفي لمن لا يميّزه.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .custody-funding-item-main strong.is-credit { color: var(--anfal-approved); }
#dashboard-view.rd-shell .custody-funding-item-main strong.is-debit { color: var(--anfal-rejected); }
/* نفس لوني الدائن والمدين في كشف الحساب - البيانات واحدة فلا يختلف لونها
بين شاشتين. وعلى الداكن يُرفع سطوعهما، وإلا غاصا في الخلفية. */
html[data-theme="dark"] #dashboard-view.rd-shell .custody-funding-item-main strong.is-credit { color: #79b89a; }
html[data-theme="dark"] #dashboard-view.rd-shell .custody-funding-item-main strong.is-debit { color: var(--anfal-red-150); }
/* ---------------------------------------------------------------
95. ترويسة الحركات: المُرشِّح والعدد على سطر واحد
الصندوق يجمع عشرات الحركات، فالمُرشِّح يسكن ترويسته لا فوقها.
والعدد بجانبه يقول كم يُعرض من كم.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .movements-header-tools {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
#dashboard-view.rd-shell #detail-movements-filter {
min-height: 28px;
padding: 0 8px;
border: 1px solid var(--rd-line);
border-radius: var(--r-8);
background: var(--rd-surface);
color: var(--rd-ink);
font-size: var(--fs-11);
font-weight: var(--anfal-weight-semi);
}
/* ---------------------------------------------------------------
96. الصندوق يتنفّس
القسم 66 ثبّت ارتفاع النافذة عند 620px حين كان تحتها قائمة إضافات
قصيرة. وقد صارت تحتها حركات العهدة كلها - عشرات الأسطر - فلم يبقَ
للقائمة إلا 257px، ستة أسطر من سبعة وخمسين.
الرأس والرصيد لا يتغيران، فكل بكسل يُضاف يذهب للقائمة وحدها.
والحدّ يبقى نسبة من الشاشة، فلا تفيض على جهاز صغير.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .employee-detail-summary:not([hidden]) {
height: min(780px, 88vh);
}
/* ---------------------------------------------------------------
97. تحذير التكرار في نافذة الاعتماد
يقف بين الحقول وزر الاعتماد: يُقرأ قبل الضغط لا بعده. ولونه تنبيه
لا خطأ - النظام لا يمنع شيئًا، يقول ما يعرفه ويترك الحكم لصاحبه.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .approval-duplicate-note,
html.rd-shell .approval-duplicate-note {
margin: 4px 0 2px;
padding: 10px 12px;
border: 1px solid var(--rd-gold-line);
border-radius: var(--r-10);
background: var(--rd-gold-soft);
color: var(--rd-gold-ink);
}
html.rd-shell .approval-duplicate-note strong { display: block; font-size: var(--fs-12p5); font-weight: var(--anfal-weight-strong); }
html.rd-shell .approval-duplicate-note p {
margin: 5px 0 0;
font-size: var(--fs-11p5);
font-variant-numeric: tabular-nums;
}
html.rd-shell .approval-duplicate-note small { display: block; margin-top: 7px; font-size: var(--fs-10p5); opacity: .85; }
/* ---------------------------------------------------------------
98. تحذير التكرار عند الموظف، وشاشة المقارنة
الموظف يرى ما وجدناه قبل أن يرسل، ثم يقرّر. والزر الأول «قارن
الصورتين» لا «أرسل»: نريده أن ينظر قبل أن يمضي.
والصورتان جنبًا إلى جنب على الحاسب، وفوق بعضهما على الجوال - لا
عرض يكفي صورتين متجاورتين في يد.
--------------------------------------------------------------- */
html.rd-shell .duplicate-warn-list {
display: grid;
gap: 6px;
margin: 2px 0 4px;
padding: 10px 12px;
border: 1px solid var(--rd-gold-line);
border-radius: var(--r-10);
background: var(--rd-gold-soft);
}
html.rd-shell .duplicate-warn-list p {
margin: 0;
font-size: var(--fs-11p5);
color: var(--rd-gold-ink);
font-variant-numeric: tabular-nums;
}
html.rd-shell .compare-dialog { width: min(1000px, 95vw); }
html.rd-shell .compare-pair {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 720px) {
html.rd-shell .compare-pair { grid-template-columns: 1fr 1fr; }
}
html.rd-shell .compare-pair figure {
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
html.rd-shell .compare-pair figcaption {
font-size: var(--fs-11p5);
font-weight: var(--anfal-weight-semi);
color: var(--rd-muted);
}
html.rd-shell .compare-pair img {
width: 100%;
max-height: 58vh;
object-fit: contain;
border: 1px solid var(--rd-line);
border-radius: var(--r-10);
background: var(--rd-surface-soft);
}
/* ---------------------------------------------------------------
99. المقارنة على الجوال - الصورتان في مرمى بصر واحد
الموظف على جواله دائمًا، والنافذة هناك سقفها 88dvh. صورتان بـ58vh
لكلٍّ منهما تعنيان 116vh: يرى واحدة ويمرّر للأخرى - وهذا يُبطل معنى
المقارنة، فالسؤال «الورقة نفسها أم ورقتان؟» لا يُجاب بالذاكرة.
ما حول الصورتين 240px ثابتة (حشو وترويسة وتسميتان وفجوات وتلميح
وزر)، والسقف 88dvh. فأصغر جهاز شائع - آيفون SE بارتفاع 667 - يترك
للصورة 26vh. اختيرت 26 لتسع على المقاسات كلها لا على الأوسع منها،
ومن أراد التفصيل ضغط الصورة فامتدت.
--------------------------------------------------------------- */
@media (max-width: 719px) {
html.rd-shell .compare-pair img { max-height: 26vh; }
html.rd-shell .compare-pair img.is-zoomed { max-height: none; }
html.rd-shell .compare-pair figcaption { font-size: var(--fs-11); }
}
html.rd-shell .compare-pair img { cursor: zoom-in; }
html.rd-shell .compare-pair img.is-zoomed { cursor: zoom-out; }
html.rd-shell .compare-hint {
margin: 0;
font-size: var(--fs-11);
color: var(--rd-faint);
text-align: center;
}
/* ---------------------------------------------------------------
100. حالة النسخ الاحتياطي في سطر
من يفتح الصفحة يسأل «هل أنا محميّ الآن؟» قبل أن يقرأ الصفوف.
والتأخّر يُقال بلون التنبيه لا الخطأ: النسخة لم تفشل، تأخّرت -
والفرق يهمّ من يقرأ.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .backup-freshness {
display: grid;
gap: 6px;
margin: 0 0 14px;
padding: 12px 14px;
border: 1px solid var(--rd-line-soft);
border-radius: var(--r-12);
background: var(--rd-surface-soft);
}
#dashboard-view.rd-shell .backup-freshness.is-warning {
border-color: var(--rd-gold-line);
background: var(--rd-gold-soft);
}
#dashboard-view.rd-shell .backup-freshness p {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 0;
font-size: var(--fs-12);
color: var(--rd-muted);
}
#dashboard-view.rd-shell .backup-freshness p strong {
color: var(--rd-ink);
font-weight: var(--anfal-weight-strong);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell .backup-freshness p.is-stale strong { color: var(--anfal-rejected); }
#dashboard-view.rd-shell .backup-freshness small {
margin-top: 4px;
font-size: var(--fs-11);
color: var(--rd-gold-ink);
}
#dashboard-view.rd-shell .backup-provider {
display: inline-block;
margin-inline-start: 8px;
padding: 1px 8px;
border: 1px solid var(--rd-line);
border-radius: var(--r-999);
font-size: var(--fs-10p5);
color: var(--rd-muted);
}
/* =============================================================
شاشتا دفترة: أزرارهما تحمل .primary-button/.secondary-button،
وقاعدتهما في الورقة الأساسية تمدّ الزر عرض البطاقة كلها. هنا
يعود الزر إلى مقاس عائلة .rd-btn، ويقف صفّ الإجراءات صفًّا.
============================================================= */
#dashboard-view.rd-shell #daftra-journals-page .rd-btn:not(.rd-btn-wide),
#dashboard-view.rd-shell #daftra-accounts-page .rd-btn:not(.rd-btn-wide) {
width: auto;
margin-top: 0;
min-height: 34px;
}
#dashboard-view.rd-shell #daftra-journals-page .control-page-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
#dashboard-view.rd-shell #daftra-journals-page .control-page-heading,
#dashboard-view.rd-shell #daftra-accounts-page .control-page-heading {
display: flex;
justify-content: flex-end;
}
/* =============================================================
اختيار الفاتورة في القيد: مربّع المتصفّح الأزرق كان أغرب شيء في
الصفحة. هنا مربّع من ألوان الطبقة، والصف المختار يقول ذلك بنفسه
- خلفية ذهبية شاحبة وشريط على حافّته - لا بعلامة صغيرة وحدها.
============================================================= */
#dashboard-view.rd-shell .daftra-pick {
appearance: none;
width: 20px;
height: 20px;
margin: 0;
/* الورقة الأساسية تعطي كل input ارتفاع 54 وحشوة 16، و«الشاشة غير
الموظّف» تفرض min-height فوقهما - فكان المربّع 34×42 لا 20×20. */
min-height: 20px;
padding: 0;
flex: 0 0 auto;
border: 1.5px solid var(--rd-line);
border-radius: var(--r-6);
background: var(--rd-surface);
cursor: pointer;
transition: border-color .14s ease, background .14s ease;
}
#dashboard-view.rd-shell .daftra-pick:hover { border-color: var(--anfal-gold-500); }
#dashboard-view.rd-shell .daftra-pick:checked {
border-color: var(--anfal-gold-500);
background: var(--anfal-gold-500) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat;
}
#dashboard-view.rd-shell .daftra-pick:focus-visible { outline: 2px solid var(--anfal-gold-500); outline-offset: 2px; }
/* تاريخ القيد يُعرض ولا يُدخَل: نصٌّ نكتبه بصيغتنا، لا حقل تاريخ يرسمه
المتصفّح بلغته. */
#dashboard-view.rd-shell .journal-date-readout { display: flex; flex-direction: column; gap: 4px; }
#dashboard-view.rd-shell .journal-date-label { font-size: var(--fs-13); color: var(--rd-ink-soft, var(--anfal-slate-600)); }
#dashboard-view.rd-shell .journal-date-value {
font-size: var(--fs-20);
font-weight: var(--anfal-weight-strong);
letter-spacing: .02em;
color: var(--rd-ink, #18324b);
font-variant-numeric: tabular-nums;
}
/* عنوان مجموعة التاريخ: القيد الواحد لفواتير يومٍ واحد، فالمجموعة هي
وحدة القيد لا الصف. وشريطها هو شريط القيد نفسه في «تم الرفع» - وحدةٌ
واحدة في شاشة واحدة، فلونها واحد: حدٌّ كحليّ فوق سطحٍ كحليّ باهت.
كان ذهبيًّا هنا وفي الجدول الآخر رمليًّا، فبدا الجدولان غريبين. */
#dashboard-view.rd-shell tr.daftra-date-head > td {
background: var(--rd-journal-band, var(--anfal-line-quiet));
border-top: 2px solid var(--rd-ink, #0d2c4a);
color: var(--rd-ink, #18324b);
font-weight: var(--anfal-weight-strong);
padding-top: 11px;
padding-bottom: 11px;
}
#dashboard-view.rd-shell tr.daftra-date-head:first-child > td { border-top: 0; }
/* الصف المختار: علامته شريطٌ كحليّ على حافّته وسطحٌ فاتح، لا رملية. */
/* علامة الصفّ المختار: كانت للفواتير وحركات العهدة فقط، والحركات
البنكية والتحويلات أُضيفتا بعدها ولم تُضَفّا هنا — فبدا الشريط الكحلي
على بعض الصفوف دون بعض وكأنه خلل. الأنواع الأربعة الآن سواء. */
#dashboard-view.rd-shell tr.daftra-journal-row.is-picked > td,
#dashboard-view.rd-shell tr.daftra-funding-row.is-picked > td,
#dashboard-view.rd-shell tr.daftra-bank-row.is-picked > td,
#dashboard-view.rd-shell tr.daftra-transfer-row.is-picked > td { background: var(--rd-journal-band, var(--anfal-line-quiet)); }
#dashboard-view.rd-shell tr.daftra-journal-row.is-picked > td:first-child,
#dashboard-view.rd-shell tr.daftra-funding-row.is-picked > td:first-child,
#dashboard-view.rd-shell tr.daftra-bank-row.is-picked > td:first-child,
#dashboard-view.rd-shell tr.daftra-transfer-row.is-picked > td:first-child { box-shadow: none; }
/* شبكة القيود قائمة مراجعة لا ورقة Excel: الفصل أفقي فقط، وعمود المصدر
يأخذ مساحته من دون أعمدة رأسية زرقاء أو رمادية تقطع سطور الوصف. */
#dashboard-view.rd-shell #daftra-journals-table-wrap th,
#dashboard-view.rd-shell #daftra-journals-table-wrap td {
border-inline-start: 0;
border-inline-end: 0;
}
/* الحقول القصيرة بيانات للمقارنة السريعة، فتتوسط خلاياها أفقياً؛
المصدر وطرفا القيد وحدهما يبقيان بمحاذاة بداية السطر لأنهما وصفيان. */
#dashboard-view.rd-shell #daftra-journals-table-wrap th:not(:nth-child(2)):not(:nth-child(9)),
#dashboard-view.rd-shell #daftra-journals-table-wrap td:not(:nth-child(2)):not(:nth-child(9)) {
text-align: center;
}
#dashboard-view.rd-shell #daftra-journals-table-wrap th:nth-child(2),
#dashboard-view.rd-shell #daftra-journals-table-wrap td:nth-child(2),
#dashboard-view.rd-shell #daftra-journals-table-wrap th:nth-child(9),
#dashboard-view.rd-shell #daftra-journals-table-wrap td:nth-child(9) {
text-align: start;
}
#dashboard-view.rd-shell #daftra-journals-table-wrap [data-expense-account],
#dashboard-view.rd-shell #daftra-journals-table-wrap [data-cost-center] {
height: 42px;
min-height: 42px;
box-sizing: border-box;
text-align: center;
}
/* مركز التكلفة قد يكون اسمًا طويلًا في الحركة البنكية؛ يلتف داخل عموده
إلى سطرين بدل أن يزاحم المبلغ أو طرفي القيد. */
#dashboard-view.rd-shell #daftra-journals-table-wrap td:nth-child(7) {
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.4;
}
#dashboard-view.rd-shell #daftra-journals-table-wrap td:nth-child(7) select {
white-space: normal;
line-height: 1.35;
}
#dashboard-view.rd-shell .daftra-resolved { color: var(--rd-ink, #18324b); font-weight: var(--anfal-weight-strong); white-space: nowrap; }
#dashboard-view.rd-shell .daftra-missing-note { color: var(--anfal-danger-ink); font-size: var(--fs-12); }
#dashboard-view.rd-shell select.daftra-missing { border-color: var(--anfal-amber-400); background: var(--anfal-gold-050); }
/* دليل الحسابات: الرمز أرقام لاتينية تُقرأ في عمود واحد، والتوقيف نادر
فيُقال عند حدوثه لا كعمود دائم. وشريط البحث يأخذ عرض السطر. */
#dashboard-view.rd-shell .daftra-account-code {
font-variant-numeric: tabular-nums;
direction: ltr;
text-align: start;
white-space: nowrap;
color: var(--rd-muted, var(--anfal-slate-600));
}
#dashboard-view.rd-shell .daftra-account-off {
margin-inline-start: 8px;
padding: 1px 7px;
border-radius: var(--r-20);
background: var(--anfal-red-075);
color: var(--anfal-danger-ink);
font-size: var(--fs-10p5);
font-weight: var(--anfal-weight-strong);
}
#dashboard-view.rd-shell #daftra-accounts-controls {
display: flex;
align-items: center;
gap: 12px;
}
#dashboard-view.rd-shell #daftra-accounts-controls .invoice-search { flex: 1 1 auto; }
#dashboard-view.rd-shell .daftra-accounts-count {
flex: 0 0 auto;
color: var(--rd-muted, var(--anfal-slate-600));
font-size: var(--fs-12);
font-weight: var(--anfal-weight-strong);
white-space: nowrap;
}
#dashboard-view.rd-shell .activity-filters.is-start { justify-content: flex-start; }
#dashboard-view.rd-shell .activity-filters.is-start > label { max-width: 340px; }
/* زرّا الطباعة في صف القيد: صغيران متجاوران، لا يمدّان عمود الجدول. */
#dashboard-view.rd-shell .daftra-journal-package,
#dashboard-view.rd-shell .daftra-journal-sheet { width: auto; margin: 0; min-height: 30px; font-size: var(--fs-11p5); padding-inline: 11px; }
/* أدوات الحساب شبكة من عمودين: حقل ثم زر حفظه. أي عنصر ثالث يكسر
الاقتران فيزيح كل ما بعده خانة - فيقع حقل كلمة المرور في عمود
الأزرار وزرّه وحيدًا. السطر التوضيحي يمتدّ العرض ولا يأخذ خانة. */
#dashboard-view.rd-shell .permission-account-tools .role-daftra-hint {
grid-column: 1 / -1;
margin: -6px 0 2px;
color: var(--rd-muted, var(--anfal-slate-600));
}
/* =============================================================
نافذة مراجعة القيد: كانت بأنماطها الخاصة خارج الطبقة، وأزرارها
بأحجام ثلاثة. هنا تلبس ما تلبسه بقية الشاشات، وتُقرأ فاتورةً
فاتورة: سطر عنوان لكل فاتورة، وخط أغلظ يفصل بينها.
============================================================= */
html.rd-shell .daftra-journal-review { width: 100%; border-collapse: collapse; }
html.rd-shell .daftra-journal-review th {
padding: 9px 10px;
background: var(--rd-surface-2, var(--anfal-surface-cool));
color: var(--rd-muted, #526b80);
font-size: var(--fs-11);
font-weight: var(--anfal-weight-bold);
text-align: right;
white-space: nowrap;
}
html.rd-shell .daftra-journal-review td {
padding: 9px 10px;
border-bottom: 1px solid var(--rd-line, var(--anfal-line-quiet));
font-size: var(--fs-12);
vertical-align: top;
}
html.rd-shell .daftra-journal-review td small { display: block; color: var(--rd-muted, var(--anfal-slate-600)); font-size: var(--fs-10p5); }
html.rd-shell .daftra-journal-review .daftra-account-code { direction: ltr; font-variant-numeric: tabular-nums; }
html.rd-shell .daftra-journal-review .daftra-review-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
html.rd-shell .daftra-journal-review .daftra-review-role { color: var(--rd-muted, var(--anfal-slate-600)); font-size: var(--fs-11); white-space: nowrap; }
html.rd-shell .daftra-journal-review .daftra-review-center { color: var(--rd-muted, var(--anfal-slate-600)); font-size: var(--fs-10p5); }
/* الخط الأغلظ: أول سطر من كل فاتورة يحمل حدًّا علويًا يفصلها عمّا قبلها. */
html.rd-shell .daftra-journal-review .daftra-review-group td {
padding: 12px 10px 6px;
border-top: 2px solid var(--rd-ink, #0d2c4a);
border-bottom: 0;
background: var(--rd-journal-band, var(--anfal-line-quiet));
}
html.rd-shell .daftra-journal-review tr.daftra-review-group:first-child td { border-top: 0; }
html.rd-shell .daftra-journal-review .daftra-review-group strong { font-size: var(--fs-12p5); }
/* الأزرار: مقاس واحد من عائلة .rd-btn، والاعتماد أولًا - أي يمينًا. */
html.rd-shell .modal-card-actions { display: flex; flex-direction: row; gap: 10px; align-items: center; }
html.rd-shell .modal-card-actions .rd-btn { width: auto; min-height: 36px; margin: 0; }
/* النافذة كانت تمرّر نفسها كاملة، فيغيب العنوان وزر الاعتماد مع كثرة
الفواتير. الجدول وحده يتحرّك، ويبقى ما يقرّر به المحاسب في مكانه.
ورأس الجدول وصف الإجمالي يلتصقان بحافّتيه. */
html.rd-shell .daftra-journal-modal-card {
display: flex;
flex-direction: column;
overflow: hidden;
}
html.rd-shell .daftra-journal-modal-card > .statement-page-table-wrap {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
html.rd-shell .daftra-journal-review thead th { position: sticky; top: 0; z-index: 2; }
html.rd-shell .daftra-journal-review tfoot td {
position: sticky;
bottom: 0;
z-index: 2;
padding: 12px 10px;
border-top: 2px solid var(--rd-ink, #0d2c4a);
background: var(--rd-journal-band, var(--anfal-line-quiet));
font-weight: var(--anfal-weight-bold);
font-variant-numeric: tabular-nums;
}
html.rd-shell .daftra-journal-review tfoot td:first-child { text-align: end; }
/* الصف الذي منع القيد يُشار إليه، فلا يبحث عنه المحاسب في القائمة. */
#dashboard-view.rd-shell tr.daftra-journal-row.is-blocked > td {
background: var(--anfal-red-075);
box-shadow: inset 0 -1px 0 var(--anfal-red-250);
}
/* زر الاعتماد أثناء الإرسال: حلقة تدور في مربّع الأيقونة نفسه، فيُعرف
أن الطلب يمشي - كان يبدو ميتًا حتى يعود الرد من دفترة. */
html.rd-shell .rd-btn.is-sending { opacity: 1; cursor: progress; }
html.rd-shell .rd-btn.is-sending .rd-btn-icon svg { display: none; }
html.rd-shell .rd-btn.is-sending .rd-btn-icon::after {
content: "";
width: 13px;
height: 13px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: rd-spin .7s linear infinite;
}
@keyframes rd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
html.rd-shell .rd-btn.is-sending .rd-btn-icon::after { animation-duration: 2.4s; }
}
/* تنبيه لا خطأ: القيد نجح وينقصه توزيع - فلونه كهرماني لا أحمر. */
html.rd-shell #daftra-journal-modal-error.is-warning {
padding: 10px 12px;
border-radius: var(--r-8);
background: var(--anfal-gold-075);
color: var(--anfal-caution-ink);
}
/* قائمة «تم الرفع» صارت قيودًا لا فواتير: سطر القيد يحمل رقمه وأزراره،
وفواتيره تحته. نفس تجميع نافذة المراجعة، درجةً أعلى. */
/* الخانة المدموجة في حركة العهدة: أربعة أعمدة لا تخصّها (حساب المصروف،
مركز التكلفة، حساب العهدة، الضريبة) تصير خانةً واحدة تقول طرفَي قيدها.
وعنوانٌ صغير فوقها يجعلها جوابًا يُقرأ، لا فراغًا بقي من أعمدة غيرها. */
#dashboard-view.rd-shell td.daftra-funding-sides { color: var(--rd-muted, var(--anfal-slate-600)); font-size: var(--fs-11p5); }
#dashboard-view.rd-shell td.daftra-funding-sides .daftra-sides-label {
display: block;
margin-bottom: 2px;
color: var(--rd-faint, var(--anfal-slate-400));
font-size: var(--fs-10);
font-weight: var(--anfal-weight-strong);
}
#dashboard-view.rd-shell td.daftra-funding-sides b { color: var(--rd-ink, #0d2c4a); font-weight: var(--anfal-weight-strong); }
#dashboard-view.rd-shell .daftra-journal-note {
display: block;
margin-top: 4px;
color: var(--anfal-caution-ink);
}
#dashboard-view.rd-shell #daftra-journals-sent-wrap td:first-child { min-width: 240px; }
/* مخرج الموظف: يقف تحت شريط الحالة، ظاهرًا ما دام هناك ما يُلغى. */
#dashboard-view.rd-shell #invoice-capture-cancel {
width: 100%;
margin-top: 10px;
}
/* =============================================================
جدول «تم الرفع»: كان فيه عمود خامس للطباعة، فحُذف وبقيت قواعده
معلّقة على «آخر عمود» - فورثها «مركز التكلفة»: عرضٌ بقدر نصّه،
وبلا حشو، وخلية flex. فبدا الجدول مكسورًا والعمود لصيقًا بحافّته.
القواعد تُربط بأعمدتها بالترتيب لا بـ last-child، فلا يرثها غيرها
إن تغيّر عددها.
============================================================= */
#dashboard-view.rd-shell #daftra-journals-sent-wrap table { table-layout: fixed; }
#dashboard-view.rd-shell #daftra-journals-sent-wrap th:nth-child(1),
#dashboard-view.rd-shell #daftra-journals-sent-wrap td:nth-child(1) { width: auto; }
#dashboard-view.rd-shell #daftra-journals-sent-wrap th:nth-child(2),
#dashboard-view.rd-shell #daftra-journals-sent-wrap td:nth-child(2) { width: 15%; }
#dashboard-view.rd-shell #daftra-journals-sent-wrap th:nth-child(3),
#dashboard-view.rd-shell #daftra-journals-sent-wrap td:nth-child(3) {
width: 11%;
text-align: start;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* مركز التكلفة نصّ طويل يتكرّر: يُقصّ بسطرين ويُقرأ كاملًا بالمرور. */
#dashboard-view.rd-shell #daftra-journals-sent-wrap th:nth-child(4),
#dashboard-view.rd-shell #daftra-journals-sent-wrap td:nth-child(4) {
width: 26%;
color: var(--rd-muted, var(--anfal-slate-600));
font-size: var(--fs-11);
line-height: 1.45;
}
#dashboard-view.rd-shell #daftra-journals-sent-wrap td { overflow-wrap: anywhere; }
/* سطر القيد شريطُ عنوانٍ لا صفّ بيانات: بياناته يمينًا وأزراره يسارًا،
ويفصله عمّا قبله حدٌّ كحليّ. واللون رمليّ كان يبتلع السطر كلّه -
صار حبرًا على سطحٍ فاتح، كما في بقية الشاشات. */
#dashboard-view.rd-shell #daftra-journals-sent-wrap .daftra-review-group td {
padding: 11px 12px;
background: var(--rd-journal-band, var(--anfal-line-quiet));
border-top: 2px solid var(--rd-ink, #0d2c4a);
border-bottom: 0;
}
/* الأزرار بجانب رقم القيد لا في الطرف الآخر: الشريط عرضه ١٥٥٨ بكسل،
فزرٌّ في حافّته يبعد عن الشيء الذي يعمل عليه عرض الشاشة كلّها. الرقم
وسطره وأزراره عنقودٌ واحد يُقرأ بنظرة، والفراغ يقع بعدها لا بينها. */
#dashboard-view.rd-shell .daftra-journal-head-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
flex-wrap: wrap;
}
/* وللكتلة النصّية عرضٌ أدنى، وإلا بدأ الزرّان من موضعٍ مختلف في كل قيد
بحسب طول سطره - فيُقرآن مبعثرين. القرب من الرقم والاصطفاف معًا. */
#dashboard-view.rd-shell .daftra-journal-head-row > div:first-child {
display: grid;
gap: 3px;
min-width: 0;
flex: 0 0 auto;
inline-size: min(420px, 46%);
}
#dashboard-view.rd-shell .daftra-journal-head-row strong { font-size: var(--fs-13); color: var(--rd-ink, #0d2c4a); }
#dashboard-view.rd-shell .daftra-journal-head-row small { color: var(--rd-muted, var(--anfal-slate-600)); font-size: var(--fs-11); }
/* الزرّان فعلٌ واحد بوجهين: صفّ لا يلتفّ، والشكل من عائلة .rd-btn. */
#dashboard-view.rd-shell .daftra-print-actions {
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
flex: 0 0 auto;
}
#dashboard-view.rd-shell .daftra-print-actions .rd-btn { white-space: nowrap; }
@media (max-width: 760px) {
#dashboard-view.rd-shell .daftra-journal-head-row { align-items: stretch; }
#dashboard-view.rd-shell .daftra-print-actions { width: 100%; }
#dashboard-view.rd-shell .daftra-print-actions button { flex: 1 1 0; justify-content: center; }
}
/* ---------------------------------------------------------------
أنماط عرض أموال الموظفين
ثلاثة، كما في صفحة البطاقات: «مضغوط» هو الجدول وهو الافتراضي،
و«متوازن» بطاقتان في الصفّ، و«موسّع» بطاقة كاملة لكل موظف.
ولا تُكتب هنا إلا فروق النمطين الجديدين - الجدول في موضعه.
--------------------------------------------------------------- */
@media (min-width: 1000px) {
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-custody-grid,
#dashboard-view.rd-shell[data-roster-mode="full"] .employee-custody-grid {
display: grid;
gap: 14px;
background: transparent;
border: 0;
}
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-custody-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
#dashboard-view.rd-shell[data-roster-mode="full"] .employee-custody-grid {
grid-template-columns: 1fr;
}
/* ترويسة الأعمدة تخصّ الجدول وحده: عناوينُ أعمدةٍ فوق بطاقات كذبٌ بصري. */
#dashboard-view.rd-shell[data-roster-mode="split"] .rd-custody-head,
#dashboard-view.rd-shell[data-roster-mode="full"] .rd-custody-head {
display: none;
}
}
/* الشريط داخل الصندوق بجانب زرّ الإضافة، لا فوقه: نمط العرض من أدوات
القائمة لا عنوانٌ لها. */
.roster-modes { display: flex; gap: 6px; }
.custody-funding-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.roster-modes button { min-height: 30px; padding: 0 12px; border: 1px solid var(--line, #dce5eb); border-radius: var(--r-9); background: #fff; color: var(--muted, var(--anfal-slate-600)); font: inherit; font-size: var(--fs-12); font-weight: var(--anfal-weight-bold); cursor: pointer; }
.roster-modes button.is-active { border-color: var(--anfal-gold-500); color: var(--ink, #0d2c4a); }
html[data-theme="dark"] .roster-modes button { background: var(--anfal-surface); border-color: var(--anfal-border); color: var(--anfal-muted); }
html[data-theme="dark"] .roster-modes button.is-active { border-color: var(--anfal-gold-500); color: var(--anfal-ink); }
/* ---------------------------------------------------------------
تفاصيل أنماط العرض
خانتا الجدول الجديدتان تظهران في «مضغوط» وحده - هما عمودان فيه، ولا
معنى لهما في بطاقة. ودورة المال تظهر في «موسّع» وحده، حيث تتّسع
المساحة لخمسة أرقام بلا زحام.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .roster-col,
#dashboard-view.rd-shell .roster-cycle,
#dashboard-view.rd-shell .roster-total-icon { display: none; }
@media (min-width: 1000px) {
/* سبعة أعمدة لسبعة عناصر: الموظف، ما بحوزته، البطاقة، المعلّق،
آخر تحديث، الحالة، التفاصيل. */
#dashboard-view.rd-shell[data-roster-mode="row"] {
--rd-custody-cols:
minmax(135px, 1.05fr) /* الموظف */
minmax(105px, .8fr) /* ما بحوزته */
minmax(95px, .65fr) /* بطاقة المنشأة */
minmax(90px, .6fr) /* حسابه الشخصي */
minmax(80px, .55fr) /* نقدي */
minmax(100px, .7fr) /* بانتظار المراجعة */
minmax(110px, .78fr) /* آخر تحديث */
minmax(66px, .45fr) /* الحالة */
minmax(112px, max-content);
}
/* الموضع بالرقم لا بالترتيب: الطبقة تلفّ الأزرار وتنقلها بعد الرسم،
فترتيبُ العناصر في الصفحة ليس ترتيبَها في الشبكة. */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card header { grid-column: 1; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-block { grid-column: 2; }
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col-card { grid-column: 3; }
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col-personal { grid-column: 4; }
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col-cash { grid-column: 5; }
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col-pending { grid-column: 6; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-last-movement { grid-column: 7; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-status-cell { grid-column: 8; }
/* وصفّ «لا يوجد عهدة» له قواعده الخاصة، وكانت تضع أزراره في العمود
الخامس حيث «آخر تحديث» - فيتنازعان الخانة وينكسر الصفّ سطرين. */
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-card-acts,
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-details-button { grid-column: 9; }
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card.rd-empty .rd-card-acts { grid-column: 9; }
/* صفّ «لا يوجد عهدة» ترويسته تمتدّ على ستة أعمدة لتحمل الرسالة، فتزاحم
الخانتين وتدفعهما سطرًا ثانيًا. وهما بلا معنى فيه: حسابٌ بلا عهدة لا
بطاقة له ولا معلّق عليه، وقولها مرّتين حشوٌ لا خبر. */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card.rd-empty .roster-col {
display: none;
}
/* المحاذاة: اسم الموظف يبقى إلى اليمين لأنه بداية السطر، وما عداه
يتوسّط عموده - أرقامٌ متفاوتة الطول تُقارن بصريًا حين تتوسّط. */
#dashboard-view.rd-shell[data-roster-mode="row"] .rd-custody-head > span:not(:first-child),
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card > *:not(.roster-who),
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-who > *:not(header) {
text-align: center;
justify-items: center;
justify-content: center;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center { text-align: center; }
/* قاعدة التوسيط تجعل محتوى الخانة يتقلّص إلى قدر نصّه، فيقف سطر المبلغ
في وسط العمود لا يملؤه - وتنزاح الأيقونة مع كل رقمٍ يطول أو يقصر.
السطر يُمدّ إلى عرض العمود كاملًا، وداخله يتوسّط الرقم وتثبت الأيقونة. */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-custody-card .roster-col,
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-block .employee-donut-center {
justify-items: stretch;
justify-content: stretch;
}
/* المجموع داخل غلافين لا واحد: الكتلة ثم الدائرة ثم الخانة. والتمديد
يجب أن يمرّ بهما جميعًا، وإلا تقلّصت الخانة عند أوّل غلافٍ لم يُمدّ. */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-block,
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-block .employee-donut {
justify-items: stretch;
justify-content: stretch;
width: 100%;
min-width: 0;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-onhand-split { justify-content: center; }
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col {
display: grid;
gap: 2px;
align-content: center;
min-width: 0;
}
/* الخانة سطرٌ واحد: أيقونة ومبلغ. والعنوان في الترويسة فوق، فتكراره
في كل صفّ يملأ الجدول بكلماتٍ تُقرأ مرّة. وبسطرٍ واحد لكل خانة
تتساوى ارتفاعاتها فتصطفّ الأيقونات على خطٍّ واحد بلا حيلة. */
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col small,
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center > span:not(.roster-col-value) {
display: none;
}
/* الأيقونة في حافة العمود والمبلغ في وسطه: ثلاثة أعمدة داخل الخانة،
الأيقونة في الأولى والمبلغ في الوسطى وثالثةٌ فارغة تُوازنها. وبها
تصطفّ الأيقونات تحت بعضها في كل الصفوف مهما اختلفت أطوال الأرقام. */
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col-value {
display: grid;
/* minmax(0,1fr) لا 1fr: حدّ 1fr الأدنى هو محتواه، فرقمٌ طويل يوسّع
الخانة الوسطى ويدفع الأيقونة خارج حافّة العمود - وهو ما كان يجعل
الأيقونات تتراقص يمنةً ويسرة بين الصفوف. */
grid-template-columns: 1.1em minmax(0, 1fr) 1.1em;
align-items: center;
width: 100%;
gap: 3px;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col-value strong { grid-column: 2; }
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col-value svg {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col strong {
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-strong);
font-variant-numeric: tabular-nums;
color: var(--rd-ink);
}
/* سطر «عهدة كذا · بطاقة كذا» تحت المجموع صار أعمدةً قائمة بذاتها،
فبقاؤه تكرارٌ لما يقرؤه العمودان المجاوران. يبقى في النمطين الآخرين
حيث لا أعمدة. */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-onhand-split { display: none; }
/* والمجموع يُميَّز: هو الرقم الذي تُقرأ الصفحة من أجله. ويُصفّ كبقية
الخانات - أيقونة في الحافة ورقمٌ في الوسط - كي تستوي الأعمدة كلها. */
/* المجموع يُبنى كبقية الخانات: عنوانٌ ثم سطر ثلاثيّ الأعمدة. وبهذا
تتساوى ارتفاعات الخانات وتصطفّ أيقوناتها على خطٍّ واحد. */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center {
display: grid;
gap: 2px;
align-content: center;
width: 100%;
min-width: 0;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center > span:first-child {
font-size: var(--fs-10p5);
color: var(--rd-faint);
}
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-total-icon {
grid-column: 1;
width: 1.1em;
height: 1.1em;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center .roster-col-value strong {
grid-column: 2;
justify-self: center;
font-size: var(--fs-14);
color: var(--anfal-green-700);
}
/* والسالب أحمر: كان رصيدٌ بالسالب (-٤٫٣١) يُكتب أخضر لأن هذه القاعدة
أخصّ من قاعدة .is-negative العامّة - ولونٌ يقول «سليم» فوق رقمٍ ناقص
يقلب المعنى، لا يخفّفه. */
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center .roster-col-value strong.is-negative {
color: var(--anfal-red-700);
}
#dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center .roster-col-value .currency-unit {
grid-column: 3;
}
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col strong.is-none {
font-weight: var(--anfal-weight-semi);
color: var(--rd-faint);
}
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-col-pending.is-live strong {
color: var(--anfal-gold-800);
}
/* الموسّع: بطاقة بعرض الصفحة، ودورة المال تحتها في صفٍّ واحد. */
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-cycle {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-cycle small {
display: block;
font-size: var(--fs-10p5);
color: var(--rd-faint);
}
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-cycle strong {
font-size: var(--fs-14);
font-weight: var(--anfal-weight-strong);
font-variant-numeric: tabular-nums;
}
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-cycle .is-pending strong { color: var(--anfal-amber-800); }
}
html[data-theme="dark"] #dashboard-view.rd-shell .roster-col-pending.is-live strong,
html[data-theme="dark"] #dashboard-view.rd-shell .roster-cycle .is-pending strong { color: var(--anfal-amber-200); }
html[data-theme="dark"] #dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center > strong { color: #9fe1cb; }
@media (min-width: 1000px) {
#dashboard-view.rd-shell[data-roster-mode="row"] .roster-total-icon { display: block; }
}
html[data-theme="dark"] #dashboard-view.rd-shell[data-roster-mode="row"] .roster-total-icon { stroke: #8fd9bb; }
html[data-theme="dark"] #dashboard-view.rd-shell[data-roster-mode="row"] .employee-donut-center .roster-col-value strong { color: #9fe1cb; }
/* ---------------------------------------------------------------
بطاقات الموظف في النمطين «متوازن» و«موسّع»
الغلاف roster-who يختفي من التخطيط في غيرهما، فيبقى الجدول كما هو.
--------------------------------------------------------------- */
#dashboard-view.rd-shell .roster-who { display: contents; }
#dashboard-view.rd-shell .roster-bar { display: none; }
@media (min-width: 1000px) {
/* ===== متوازن: مجموعٌ كبير، ثم الأوعية أسطرًا، ثم زرٌّ بعرض الصندوق ===== */
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-custody-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 0;
padding: 15px 16px 14px;
}
/* الصفوف بالرقم لا بالتدفّق: طبقة التصميم تلفّ الزرّ وتنقله، فالترتيب
في الصفحة ليس ترتيب البطاقة - وقد صعد الزرّ فوق المبلغ. */
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-custody-card header { grid-column: 1; grid-row: 1; }
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-status-cell { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-donut-block { grid-column: 1 / -1; grid-row: 2; }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-card { grid-column: 1 / -1; grid-row: 3; }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-personal { grid-column: 1 / -1; grid-row: 4; }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-cash { grid-column: 1 / -1; grid-row: 5; }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-pending { grid-column: 1; grid-row: 6; }
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-last-movement { grid-column: 2; grid-row: 6; justify-self: end; align-self: center; }
#dashboard-view.rd-shell[data-roster-mode="split"] .rd-card-acts,
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-details-button { grid-column: 1 / -1; grid-row: 7; width: 100%; justify-content: center; margin-top: 10px; }
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-donut-block,
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-donut-block .employee-donut {
width: 100%;
min-width: 0;
justify-items: stretch;
}
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-donut-center { margin: 10px 0 6px; text-align: start; }
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-donut-center .roster-col-value strong { font-size: var(--fs-25); }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-total-icon { display: none; }
/* الوعاء سطرٌ: أيقونة ثم اسمه ثم مبلغه في الطرف. */
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col {
display: grid;
grid-template-columns: 1.15em 1fr auto;
align-items: center;
gap: 7px;
padding: 6px 0;
}
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-value,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-value { display: contents; }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col svg,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col svg {
/* الصفّ صريح: التوزيع التلقائي لا يرجع إلى عمودٍ سبقه، فالأيقونة في
العمود الأول بعد عنوانٍ في الثاني تهبط سطرًا - وهو ما كان يضاعف
ارتفاع كل وعاء. */
grid-column: 1; grid-row: 1; width: 1.15em; height: 1.15em; fill: none;
stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col small,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col small {
grid-column: 2; grid-row: 1; display: block; font-size: var(--fs-12); color: var(--rd-muted); text-align: start;
}
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col strong,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col strong {
grid-column: 3; grid-row: 1; font-size: var(--fs-13); font-variant-numeric: tabular-nums; color: var(--rd-ink);
}
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-card,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-card { color: var(--anfal-gold-750); }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-personal,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-personal { color: #26637f; }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-cash,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-cash { color: var(--anfal-green-700); }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-pending,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-pending { color: var(--rd-muted); }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-pending.is-live,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-pending.is-live,
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-pending.is-live strong,
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-pending.is-live strong { color: var(--anfal-amber-800); }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-card { border-top: 1px solid var(--rd-line-soft); padding-top: 9px; }
#dashboard-view.rd-shell[data-roster-mode="split"] .roster-col-pending,
#dashboard-view.rd-shell[data-roster-mode="split"] .employee-last-movement { border-top: 1px solid var(--rd-line-soft); margin-top: 4px; padding-top: 9px; }
/* ===== موسّع: «من هو وكم معه» يمينًا، ودورة المال يسارًا ===== */
#dashboard-view.rd-shell[data-roster-mode="full"] .employee-custody-card {
display: grid;
grid-template-columns: minmax(200px, 250px) 1fr auto;
gap: 12px 18px;
padding: 16px 18px;
}
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-who {
display: flex;
flex-direction: column;
gap: 2px;
grid-column: 1;
grid-row: 1;
padding-inline-end: 18px;
border-inline-end: 1px solid var(--rd-line-soft);
}
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-who .employee-details-button { align-self: start; margin-top: 9px; }
#dashboard-view.rd-shell[data-roster-mode="full"] .employee-donut-center { text-align: start; }
#dashboard-view.rd-shell[data-roster-mode="full"] .employee-donut-center .roster-col-value strong { font-size: var(--fs-26); }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-total-icon { display: none; }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-cycle {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 10px;
grid-column: 2;
grid-row: 1;
align-content: center;
margin: 0;
padding: 0;
border: 0;
}
#dashboard-view.rd-shell[data-roster-mode="full"] .employee-status-cell { grid-column: 3; grid-row: 1; align-self: start; }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col { grid-row: 3; padding: 0; }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-card { grid-column: 1; }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-personal { grid-column: 2; }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-cash { grid-column: 3; }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-col-pending { grid-column: 1 / 3; grid-row: 4; }
#dashboard-view.rd-shell[data-roster-mode="full"] .employee-last-movement { grid-column: 3; grid-row: 4; justify-self: end; align-self: center; }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-bar {
display: flex;
grid-column: 1 / -1;
grid-row: 2;
height: 7px;
border-radius: var(--r-99);
overflow: hidden;
background: var(--rd-line-soft);
}
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-bar.is-empty { display: none; }
#dashboard-view.rd-shell[data-roster-mode="full"] .roster-bar > span { display: block; height: 100%; transform-origin: right; animation: roster-bar-grow .7s ease-out both; }
}
@keyframes roster-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
#dashboard-view.rd-shell .roster-bar > span { animation: none; }
}
html[data-theme="dark"] #dashboard-view.rd-shell .roster-col-card { color: var(--anfal-gold-400); }
html[data-theme="dark"] #dashboard-view.rd-shell .roster-col-personal { color: #8fc2da; }
html[data-theme="dark"] #dashboard-view.rd-shell .roster-col-cash { color: #8fd9bb; }
/* زرّ الخروج أيقونة بمقاس جيرانه: النصّ يزيد عرضه ثلاثة أضعافها بلا
حاجة — والأيقونة نفسها تقول الفعل، والاسم يظهر عند المرور ولقارئ
الشاشة. ويبقى حرفُه أحمر لأنه يُنهي الجلسة. */
#dashboard-view.rd-shell #logout-button.rd-topbar-logout {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; min-height: 34px; margin: 0; padding: 0;
border: 1px solid var(--rd-line); border-radius: var(--r-9);
background: var(--rd-surface); color: var(--anfal-danger-ink); cursor: pointer;
}
#dashboard-view.rd-shell #logout-button.rd-topbar-logout:hover { border-color: var(--anfal-red-150); background: var(--anfal-red-050); }
#dashboard-view.rd-shell #logout-button.rd-topbar-logout svg {
width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
#dashboard-view.rd-shell #logout-button.rd-topbar-logout > span { display: none; }
/* =============================================================
لون الزرّ يقول عاقبته — المجموعة (أ)، اختيار المالك ٢١ سبتمبر ٢٠٢٦
الحدّ رمادي واللون في الحبر والأيقونة، ويظهر اللون كاملًا عند المرور.
والصنف مكرّر في المحدّد عمدًا (.rd-act-ok.rd-act-ok): في الطبقة قواعدُ
تلوّن الحبر بمحدّدات أعلى تحديدًا، والتكرار يرفع تحديدي فوقها بلا
!important — التي تكسب الجولة وتُفسد كل قاعدةٍ تأتي بعدها.
============================================================= */
#dashboard-view.rd-shell .rd-act-ok.rd-act-ok,
.rd-admin .rd-act-ok.rd-act-ok { color: var(--anfal-green-700); }
#dashboard-view.rd-shell .rd-act-ok.rd-act-ok:hover:not([disabled]),
.rd-admin .rd-act-ok.rd-act-ok:hover:not([disabled]) { border-color: var(--anfal-approved); background: var(--anfal-green-050); color: var(--anfal-green-700); }
#dashboard-view.rd-shell .rd-act-caution.rd-act-caution,
.rd-admin .rd-act-caution.rd-act-caution { color: var(--anfal-amber-750); }
#dashboard-view.rd-shell .rd-act-caution.rd-act-caution:hover:not([disabled]),
.rd-admin .rd-act-caution.rd-act-caution:hover:not([disabled]) { border-color: var(--anfal-amber-500); background: var(--anfal-amber-075); color: var(--anfal-amber-750); }
#dashboard-view.rd-shell .rd-act-danger.rd-act-danger,
.rd-admin .rd-act-danger.rd-act-danger { color: #6b3b38; }
#dashboard-view.rd-shell .rd-act-danger.rd-act-danger:hover:not([disabled]),
.rd-admin .rd-act-danger.rd-act-danger:hover:not([disabled]) { border-color: var(--anfal-rejected); background: var(--anfal-red-075); color: #6b3b38; }
/* الزرّ المصمت يُفرَّغ حين يحمل معنًى: كتلةٌ كحلية لا تُظهر لون العاقبة،
فيصير الحبر الأخضر على كحليٍّ لا يُقرأ. والصنف مكرّر هنا أيضًا: قواعد
الزرّ الرئيسي تملأ خلفيته بمحدّدٍ أعلى تحديدًا. */
#dashboard-view.rd-shell .rd-act-ok.rd-act-ok,
#dashboard-view.rd-shell .rd-act-caution.rd-act-caution,
#dashboard-view.rd-shell .rd-act-danger.rd-act-danger,
.rd-admin .rd-act-ok.rd-act-ok,
.rd-admin .rd-act-caution.rd-act-caution,
.rd-admin .rd-act-danger.rd-act-danger {
background: var(--rd-surface, #fff);
border: 1px solid var(--rd-line, #dce5eb);
}
html[data-theme="dark"] #dashboard-view.rd-shell .rd-act-ok.rd-act-ok { color: #9fe1cb; }
html[data-theme="dark"] #dashboard-view.rd-shell .rd-act-caution.rd-act-caution { color: var(--anfal-amber-400); }
html[data-theme="dark"] #dashboard-view.rd-shell .rd-act-danger.rd-act-danger { color: var(--anfal-red-250); }
/* ===== الزرّ وهو يعمل، والزرّ وهو يسأل =====
الدوران للأيقونة وحدها فلا يدور النصّ معها. والسؤال يحمرّ خفيفًا:
لونُ ما لا رجعة فيه نفسه، فيُقرأ قبل الضغطة الثانية. */
#dashboard-view.rd-shell .rd-busy,
.rd-admin .rd-busy { cursor: progress; }
#dashboard-view.rd-shell .rd-busy svg,
.rd-admin .rd-busy svg { animation: rd-spin .85s linear infinite; transform-origin: center; }
/* وزرٌّ بلا أيقونة تظهر له حلقةٌ تدور: الدوران يحتاج ما يدور، وبعض
الأزرار نصٌّ خالص. */
#dashboard-view.rd-shell .rd-busy:not(:has(svg))::after,
.rd-admin .rd-busy:not(:has(svg))::after {
content: ""; width: 13px; height: 13px; margin-inline-start: 7px;
border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
display: inline-block; vertical-align: -2px;
animation: rd-spin .85s linear infinite;
}
@keyframes rd-spin { to { transform: rotate(360deg); } }
#dashboard-view.rd-shell .rd-asking.rd-asking,
.rd-admin .rd-asking.rd-asking {
border-color: var(--anfal-rejected); background: var(--anfal-red-075); color: #6b3b38;
}
@media (prefers-reduced-motion: reduce) {
#dashboard-view.rd-shell .rd-busy svg, .rd-admin .rd-busy svg { animation: none; opacity: .6; }
}
/* الزرّ وقد تمّ ما طُلب منه: خلفيةٌ خضراء شاحبة لحظةً ثم يعود. */
#dashboard-view.rd-shell .rd-done.rd-done,
.rd-admin .rd-done.rd-done { border-color: var(--anfal-approved); background: var(--anfal-green-050); }
/* زرّ الأيقونة وحدها داخل طبقة التصميم. وُضعت القاعدة أولًا في
design-system.css فلم تعمل: قاعدة الطبقة `#dashboard-view.rd-shell .rd-btn`
تحمل معرّفًا فتغلب أي محدِّدٍ بصنفين مهما تأخّر ترتيبه. فموضعها هنا.
والنصّ يبقى في الشجرة — لقارئ الشاشة وللتلميح عند المرور — ويُخفى
بتصفير حجم الخطّ لا بإخفاء عنصر، لأن تأكيد الحذف يستبدل محتوى الزرّ
بنصٍّ عارٍ لا وسمَ له. ويعود مرئيًّا وقت السؤال، وإلّا سُئل المستخدم
سؤالًا لا يراه. */
#dashboard-view.rd-shell .rd-btn.is-glyph,
html.rd-shell .rd-btn.is-glyph {
font-size: 0; gap: 0; padding-inline: 10px; width: auto; min-width: 0; flex: 0 0 auto;
}
#dashboard-view.rd-shell .rd-btn.is-glyph .rd-btn-icon,
html.rd-shell .rd-btn.is-glyph .rd-btn-icon { font-size: var(--fs-14); }
/* «تأكيد داخل الزرّ» لم يعد يكبّر الزرّ: السؤال فقاعةٌ فوقه (٧ أكتوبر ٢٠٢٦). */
/* حقلٌ ملأته الذاكرة: ذهبيّ لا أحمر — ليس خطأً، هو يحتاج نظرة. والأحمر
يبقى للخطأ وحده. ويزول اللون متى لمسه المحاسب، فمعناه «لم يُراجَع». */
#dashboard-view.rd-shell .classify-field :is(input, select).is-autofilled,
html.rd-shell .classify-field :is(input, select).is-autofilled {
border-color: var(--anfal-gold-400);
background: color-mix(in srgb, var(--anfal-gold-400) 8%, #fff);
}
#dashboard-view.rd-shell .classify-autofilled-note,
html.rd-shell .classify-autofilled-note {
display: block; margin-top: 4px; font-size: var(--fs-11p5); line-height: 1.6; color: var(--anfal-gold-800);
}
html[data-theme="dark"] .classify-field :is(input, select).is-autofilled { background: #292214; }
/* ===== شريط مراحل العملية =====
العلامات في صفٍّ واحد لا تنكسر، والكلمة تحتها تنزل سطرين إن ضاق المكان.
كانت الخطوات تلتفّ فتصير صفّين، فيبدو الطريق طريقين. */
#dashboard-view.rd-shell .stage-strip,
html.rd-shell .stage-strip {
display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0;
margin: 0 0 12px; padding: 0; list-style: none;
}
#dashboard-view.rd-shell .stage-step,
html.rd-shell .stage-step {
flex: 1 1 0; min-width: 0; position: relative;
display: grid; justify-items: center; gap: 4px; text-align: center;
font-size: var(--fs-11); color: var(--rd-muted, #7d8f9b); line-height: 1.45;
}
/* ===== الخطّ الواصل =====
كان يُرسم من العلامة بعرض calc(50% - 8px)، والنسبة تُقاس على العلامة
نفسها - وهي ١٦ بكسل. فنصفها ٨، ناقص ٨ = **صفر**: خطٌّ موجودٌ بلونه
وارتفاعه ومعدوم العرض. فاختفى الطريق وبقيت النقاط.
وصار يُرسم من الخطوة، وعرضها هو المسافة بين مركزين. وارتفاعه ثابتٌ عند
منتصف العلامة (٨ بكسل من أعلى الخطوة) لا عند منتصف الخطوة، فلا ينزل
حين تنكسر الكلمة تحته سطرين - وهو ما أراده الترتيب الأول وأخطأ وسيلته. */
#dashboard-view.rd-shell .stage-step + .stage-step::before,
html.rd-shell .stage-step + .stage-step::before {
content: ""; position: absolute; top: 8px; height: 1px;
inset-inline-end: calc(50% + 11px); width: calc(100% - 22px);
background: var(--rd-line, #dce5eb);
}
#dashboard-view.rd-shell .stage-mark,
html.rd-shell .stage-mark {
position: relative;
display: inline-grid; place-items: center; width: 16px; height: 16px;
border-radius: 50%; font-size: var(--fs-9); line-height: 1;
border: 1px solid var(--rd-line, #dce5eb); color: var(--rd-muted, #7d8f9b);
}
#dashboard-view.rd-shell .stage-label,
html.rd-shell .stage-label { overflow-wrap: anywhere; }
#dashboard-view.rd-shell .stage-step.is-done .stage-mark,
html.rd-shell .stage-step.is-done .stage-mark {
background: var(--anfal-green-700); border-color: var(--anfal-green-700); color: #fff;
}
#dashboard-view.rd-shell .stage-step.is-done .stage-label,
html.rd-shell .stage-step.is-done .stage-label { color: var(--rd-ink, #17304f); }
#dashboard-view.rd-shell .stage-step.is-now .stage-mark,
html.rd-shell .stage-step.is-now .stage-mark {
background: var(--anfal-gold-400); border-color: var(--anfal-gold-400); color: #fff;
}
#dashboard-view.rd-shell .stage-step.is-now .stage-label,
html.rd-shell .stage-step.is-now .stage-label { color: var(--anfal-gold-800); font-weight: var(--anfal-weight-semi); }
#dashboard-view.rd-shell .stage-step.is-link,
html.rd-shell .stage-step.is-link { cursor: pointer; }
#dashboard-view.rd-shell .stage-step.is-link:hover .stage-label,
html.rd-shell .stage-step.is-link:hover .stage-label { text-decoration: underline; }
/* ===== السطر الجامع تحت الشريط =====
من رفع ومن اعتمد ومتى. كان في `title` الخطوة وحده - يظهر عند المرور
بالفأرة، فلا يظهر على الجوّال قط. وسطرٌ واحد هادئ لا سطرٌ تحت كل خطوة:
الشريط صفٌّ لا ينكسر، وأربعة أسماء فيه تزحمه.
ويُحاذى مع الشريط لا مع الصندوق: هو تفسيره لا جملةٌ مستقلّة. */
#dashboard-view.rd-shell .stage-trail,
html.rd-shell .stage-trail {
margin: -6px 0 12px; font-size: var(--fs-11); line-height: 1.6;
color: var(--rd-muted, #7d8f9b); text-align: center;
}
/* زرٌّ هادئ: موجودٌ حين يُحتاج، لا يزاحم القرار الرئيسي بجانبه. */
#dashboard-view.rd-shell .rd-btn.is-quiet,
html.rd-shell .rd-btn.is-quiet { opacity: .6; }
#dashboard-view.rd-shell .rd-btn.is-quiet:hover,
html.rd-shell .rd-btn.is-quiet:hover { opacity: 1; }
/* الطبقة تملك الزرّ، فقاعدةُ لونه عند المرور تسكن معها: كتبتُها في
design-system.css فغلبتها قاعدة الطبقة - نفس الدرجة، والأخيرُ في
التحميل يحسم، والطبقة تُحمَّل بعدها. */
/* ===== الزرّ الدالّ يبقى على لونه عند المرور =====
قاعدة الطبقة تُلوّن كلّ زرّ بلون التمييز عند المرور، فكان الأخضر يزرقّ
والأحمر يزرقّ - والإشارة تضيع في اللحظة التي يقرّر فيها المستخدم. */
#dashboard-view.rd-shell :is(.approve, .approve-manual, .approve-voucher, .confirm-disbursement):hover,
html.rd-shell :is(.approve, .approve-manual, .approve-voucher, .confirm-disbursement):hover {
border-color: var(--anfal-approved); background: var(--anfal-approved-soft); color: var(--anfal-success-ink);
}
#dashboard-view.rd-shell :is(.approve, .approve-manual, .approve-voucher, .confirm-disbursement):hover > .rd-btn-icon,
html.rd-shell :is(.approve, .approve-manual, .approve-voucher, .confirm-disbursement):hover > .rd-btn-icon {
background: var(--anfal-approved); color: #fff;
}
#dashboard-view.rd-shell :is(.is-irreversible, .reject, .cancel-invoice):hover,
html.rd-shell :is(.is-irreversible, .reject, .cancel-invoice):hover {
border-color: var(--anfal-rejected); background: var(--anfal-rejected-soft); color: var(--anfal-danger-ink);
}
#dashboard-view.rd-shell :is(.is-irreversible, .reject, .cancel-invoice):hover > .rd-btn-icon,
html.rd-shell :is(.is-irreversible, .reject, .cancel-invoice):hover > .rd-btn-icon {
background: var(--anfal-rejected); color: #fff;
}
#dashboard-view.rd-shell :is(.is-caution, .return-for-edit, .request-cancel, .refuse-cancel):hover,
html.rd-shell :is(.is-caution, .return-for-edit, .request-cancel, .refuse-cancel):hover {
border-color: var(--anfal-pending); background: var(--anfal-pending-soft); color: var(--anfal-caution-ink);
}
#dashboard-view.rd-shell :is(.is-caution, .return-for-edit, .request-cancel, .refuse-cancel):hover > .rd-btn-icon,
html.rd-shell :is(.is-caution, .return-for-edit, .request-cancel, .refuse-cancel):hover > .rd-btn-icon {
background: var(--anfal-pending); color: #fff;
}
/* ===== عناوين الأكورديون: بمقاس «الرئيسية» =====
العنوان الآن **وجهةٌ تُضغط** لا لافتةٌ تُقرأ، فيأخذ مقاس الوجهات ووزنها.
وكان ١٠ بكسل بتباعد حروفٍ واسع - لافتةُ قسمٍ صامتة. والسهم في آخر السطر
(يسارًا في العربية) موجَّهٌ لأسفل: يقول «تحتي مزيد». */
#dashboard-view.rd-shell .nav-group-label {
color: var(--anfal-text-strong);
font-size: var(--fs-12p5);
font-weight: var(--anfal-weight-semi);
letter-spacing: 0;
padding: 9px 12px;
gap: 11px;
border-radius: var(--r-9);
cursor: pointer;
}
/* الخطّ الفاصل كان يملأ ما بين العنوان وحافّته، فلا يبقى للسهم مكان. */
#dashboard-view.rd-shell .nav-group-label::after { content: none; }
#dashboard-view.rd-shell .nav-group-label:hover { background: var(--anfal-surface-soft); }
#dashboard-view.rd-shell .nav-group-label.is-open { background: var(--anfal-gold-100); color: var(--anfal-gold-800); }
/* في الوضع الداكن كان السطح والحبر كلاهما داكنًا (#1e2c35 على #203b4f)،
فيختفي العنوان المفتوح. يأخذ هيئة الوجهة المفتوحة نفسها: بياضٌ شفيف
وحبرٌ فاتح - كما تُقرأ «الرئيسية». */
html[data-theme="dark"] #dashboard-view.rd-shell .nav-group-label.is-open,
html[data-theme="dark"].rd-shell .nav-group-label.is-open {
background: rgba(255, 255, 255, .08);
color: var(--anfal-ink);
}
html[data-theme="dark"] #dashboard-view.rd-shell .nav-group-label:hover,
html[data-theme="dark"].rd-shell .nav-group-label:hover { background: rgba(255, 255, 255, .05); }
/* السهم: مغلقًا رأسه لأسفل («تحتي مزيد»)، مفتوحًا رأسه لأعلى («اطوِني»).
والشكل زاويةٌ مرسومة بحدَّين، فدورانها يقلب الرأس - ١٣٥ لأسفل و٣١٥
لأعلى. كنتُ كتبتُ ٤٥ فبدا الرأس يمينًا، وهي الخلبطة التي رآها المالك. */
#dashboard-view.rd-shell .nav-group-caret {
margin-inline-start: auto;
transform: rotate(315deg); /* مغلقًا: الرأس لأسفل */
}
#dashboard-view.rd-shell .nav-group-label.is-open .nav-group-caret { transform: rotate(135deg); }
/* ===== الوجهات مربوطةٌ بعنوانها =====
القائمة المفتوحة كانت تطفو تحت عنوانها بلا رابط، فتبدو قائمةً ثانية لا
محتوى الأولى. فخطٌّ رفيع ينزل من العنوان بمحاذاة أيقونته، وكل وجهةٍ
تمدّ إليه عرقًا قصيرًا - كشجرة الملفّات. */
#dashboard-view.rd-shell .nav-group-body {
position: relative;
padding-inline-start: 21px;
margin-inline-start: 12px;
}
#dashboard-view.rd-shell .nav-group-body.is-open::before {
content: "";
position: absolute; inset-block: 4px 10px; inset-inline-start: 0;
width: 1px; background: var(--anfal-border);
}
#dashboard-view.rd-shell .nav-group-body [data-nav] { position: relative; }
#dashboard-view.rd-shell .nav-group-body.is-open [data-nav]::before {
content: "";
position: absolute; inset-inline-start: -9px; top: 50%;
width: 9px; height: 1px; background: var(--anfal-border);
}
/* وشريط «أنا هنا» يظهر على العنوان أيضًا حين تكون صفحتك تحته: يُعرف موضعك
والمجموعة مطويّة. */
/* والوجهات تحته أصغر وأخفّ: تُقرأ فرعًا لا أصلًا. */
#dashboard-view.rd-shell .nav-group-body [data-nav] {
font-size: var(--fs-12);
font-weight: var(--anfal-weight-medium);
}
#dashboard-view.rd-shell .nav-group-body [data-nav].is-active { font-weight: var(--anfal-weight-semi); }
/* أيقونة «الرئيسية» كأيقونات المجموعات: هي معها في الصفّ الظاهر، فلا
تُلوَّن بأصل التمييز وحدها بينما تأخذ أخواتها حبر العنوان. */
#dashboard-view.rd-shell #home-button svg,
html.rd-shell #home-button svg {
width: 17px;
height: 17px;
stroke-width: 1.7;
color: currentColor;
opacity: 1;
}
/* «الرئيسية» حين تكون مفتوحة تأخذ زرقة القائمة نفسها التي يأخذها العنوان
المفتوح - كانت رماديًّا خفيفًا (--rd-surface-soft) فلا يُعرف أنها مختارة
إلا بالتدقيق. وفي الداكن بياضٌ شفيف، إذ ينقلب السطح ولا ينقلب الحبر معه
بنفس المقدار فتضيع النسبة. */
#dashboard-view.rd-shell #home-button.is-active,
#dashboard-view.rd-shell #home-button[aria-current="page"],
html.rd-shell #home-button.is-active {
background: var(--anfal-gold-100);
color: var(--anfal-gold-800);
}
html[data-theme="dark"] #dashboard-view.rd-shell #home-button.is-active,
html[data-theme="dark"] #dashboard-view.rd-shell #home-button[aria-current="page"],
html[data-theme="dark"].rd-shell #home-button.is-active {
background: rgba(255, 255, 255, .08);
color: var(--anfal-ink);
}
/* ===== آخر الملف عمدًا =====
قاعدةُ القائمة الأساسية تقع بعد كتلة الجوّال في هذا الملف، فكانت
تغلبها وتُبقي القائمة مفتوحةً إلى الخارج. والتساوي في قوّة الانتقاء
يحسمه الترتيب - فتُكتب هنا، بعد كلّ ما يخصّها. */
@media (max-width: 760px) {
#dashboard-view.rd-shell .rd-account-menu {
inset-inline-start: auto;
inset-inline-end: 0;
min-width: min(74vw, 260px);
}
}
/* زرّ «الأنظمة» رابطٌ لا زرّ: يُنزع خطّه ليطابق جيرانه. */
#dashboard-view.rd-shell a.rd-icon-btn { text-decoration: none; }
/* ===== التطبيق الموحّد وحده (html.in-app) — العنوان القديم لا يتأثّر =====
الخروج في قائمة الحساب أعلى الشاشة، فلا يتكرّر في الشريط السفلي.
ورئيسية الموظف بلا عنوانٍ خارج الصندوق. */
html.in-app #logout-button { display: none !important; }
html.in-app-no-head .rd-pagehead,
html.in-app-no-head .page-toolbar > div:has(> #page-title) { display: none !important; }
/* شريط الموظف داخل التطبيق: ثلاثة أزرار فقط (الإشعارات في الشريط العلوي)،
و«إضافة مصروف» أكبرها وحوله وميض: هو أكثر ما يفتحه الموظف. */
@media (max-width: 760px) {
html.in-app #dashboard-view.rd-shell[data-scope="employee"] .mobile-bottom-nav [data-nav="notifications"] { display: none !important; }
html.in-app #dashboard-view.rd-shell[data-scope="employee"] .mobile-bottom-nav { align-items: center; }
html.in-app #dashboard-view.rd-shell[data-scope="employee"] .mobile-bottom-nav [data-nav="custody"] {
flex: 0 1 104px;
min-height: 64px;
border: 2px solid var(--anfal-gold-500);
background: var(--rd-gold-soft);
color: var(--rd-gold-ink);
font-size: var(--fs-11, 11px);
font-weight: var(--anfal-weight-bold, 700);
animation: in-app-add-glow 2.2s ease-in-out infinite;
}
html.in-app #dashboard-view.rd-shell[data-scope="employee"] .mobile-bottom-nav [data-nav="custody"] svg { width: 25px; height: 25px; }
}
@keyframes in-app-add-glow {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--anfal-gold-500) 55%, transparent); }
50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--anfal-gold-500) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
html.in-app #dashboard-view.rd-shell[data-scope="employee"] .mobile-bottom-nav [data-nav="custody"] { animation: none; }
}
/* ربطٌ يدوي بفاتورة في صفّ التصنيف — داخل التطبيق الموحّد وحده. */
.link-invoice { margin: 12px 0; border: 1px dashed var(--rd-line); border-radius: 12px; padding: 10px 14px; }
.link-invoice > summary { cursor: pointer; font-weight: 600; color: var(--rd-gold-ink); }
.link-invoice-body { display: grid; gap: 10px; margin-top: 10px; }
.link-invoice-body label { display: grid; gap: 4px; font-size: 13px; }
.link-invoice-body select, .link-invoice-body input { width: 100%; }
/* الموردون — مرآة دفترة (التطبيق الموحّد وحده). بلغة تصنيف البنك: صندوقٌ أبيض،
والقائمة بطاقات classify-pick، والكشف في صندوق classify-detail. */
.suppliers-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.suppliers-head input { flex: 1 1 260px; margin: 0; }
.suppliers-head .secondary-button { width: auto; min-height: 38px; margin: 0; padding: 0 16px; }
.suppliers-head small { color: var(--rd-muted); }
.suppliers-layout { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .suppliers-layout { grid-template-columns: 1fr; } }
.suppliers-list { max-height: 74vh; overflow: auto; padding-inline-end: 2px; }
.suppliers-total { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--rd-line); border-radius: var(--r-10); background: var(--rd-surface-soft); }
.suppliers-total small { color: var(--rd-muted); font-size: var(--fs-11); }
.suppliers-total strong { font-size: var(--fs-18, 18px); font-variant-numeric: tabular-nums; }
.classify-pick.supplier-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.classify-pick.supplier-row span { grid-column: 1 / -1; margin: 0; font-size: var(--fs-13); font-weight: var(--anfal-weight-semi, 600); line-height: 1.45; }
.classify-pick.supplier-row small { grid-column: 1; grid-row: 2; margin: 0; }
.classify-pick.supplier-row b { grid-row: 2; grid-column: 2; font-size: var(--fs-13); white-space: nowrap; font-variant-numeric: tabular-nums; }
.classify-pick.supplier-row b.is-owed { color: var(--anfal-danger-ink); }
.classify-pick.supplier-row b.is-due { color: var(--anfal-green-700); }
.suppliers-detail h3 { margin: 0 0 4px; }
.supplier-filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.supplier-filters label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-13); white-space: nowrap; }
.supplier-filters input[type="date"] { width: 160px; min-height: 36px; margin: 0; }
.supplier-ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.supplier-ledger th { color: var(--rd-muted); font-weight: var(--anfal-weight-semi, 600); background: var(--rd-surface-soft); }
.supplier-ledger th, .supplier-ledger td { padding: 8px; border-bottom: 1px solid var(--rd-line); text-align: start; vertical-align: top; }
.supplier-ledger td:nth-child(n+4), .supplier-ledger td:nth-child(-n+2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.suppliers-list > * { flex: none; }
/* مشتريات المنشأة: اسم الصفحة صار في رأس صندوقها كبقية الصفحات، فعنوان
الصندوق نفسه كان يكرّره. يُخفى العنوان وتبقى أزرار الحزمة. */
#dashboard-view.rd-shell #purchases-page .purchases-panel > .rd-pagehead-inset ~ .control-page-heading > div:first-child { display: none; }
/* ===== الجوّال داخل التطبيق الموحّد (تجربة، ١٤ أكتوبر ٢٠٢٦) =====
شريط المهام اليومية خمسة أزرار، والزرّ السادس يُخفى. وتصنيف البنك عمودٌ
واحد: كانت البطاقات عمودين أعرض من الشاشة فتنقصّ من اليسار، والتبويبات
تنكسر سطرين. والحاسوب كما هو. */
html.in-app .mobile-bottom-nav .in-app-spare { display: none !important; }
@media (max-width: 760px) {
html.in-app #classify-page .classify-list { display: flex; flex-direction: column; }
html.in-app #classify-page .classify-head { flex-direction: column; align-items: stretch; gap: 8px; }
html.in-app #classify-page .classify-tabs { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.in-app #classify-page .classify-tabs::-webkit-scrollbar { display: none; }
html.in-app #classify-page .classify-tabs button { flex: none; white-space: nowrap; }
html.in-app #classify-page .classify-pick { overflow-wrap: anywhere; }
html.in-app #classify-page, html.in-app #classify-page .org-panel { min-width: 0; max-width: 100%; overflow-x: hidden; }
html.in-app #classify-page .classify-detail { scroll-margin-top: 70px; }
}
/* الجوّال (تجربة): تصنيف البنك شريطٌ أفقي من المربّعات يُسحب بالإصبع، ويُفتح
التفصيل تحته بالضغط. والصفحة كلّها لا تتجاوز عرض الشاشة: كانت شبكة 1fr
تأخذ عرضَ أطول كلمةٍ بلا مسافات (رقم المرجع في البيان) فتمتدّ يسارًا. */
@media (max-width: 760px) {
/* السبب الحقيقي للتجاوز: الصندوق الأبيض شبكةٌ عمودُها بعرض أطول ما فيه
(٥٣٥ بكسل في شاشة ٣٧٥) - فكان كل ما فيه يتجاوز الشاشة معه. */
html.in-app #classify-page .org-panel { grid-template-columns: minmax(0, 1fr); }
html.in-app #classify-page .classify-shell { grid-template-columns: minmax(0, 1fr); }
html.in-app #classify-page .classify-shell > * { min-width: 0; max-width: 100%; }
html.in-app #classify-page .classify-list {
display: flex; flex-direction: row; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; }
html.in-app #classify-page .classify-list::-webkit-scrollbar { display: none; }
html.in-app #classify-page .classify-pick { flex: 0 0 46%; min-height: 118px; min-width: 0; scroll-snap-align: start; padding: 10px 10px 9px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
html.in-app #classify-page .classify-pick > strong { font-size: 16px; }
html.in-app #classify-page .classify-pick > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
html.in-app #classify-page .classify-pick > small { font-size: 10.5px; line-height: 1.5; }
html.in-app #classify-page .classify-pick .classify-account-tag { display: none; }
html.in-app #classify-page .classify-pick .classify-account-tag.is-waiting {
display: block; margin-top: 4px; padding: 1px 6px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.in-app #classify-page .classify-list-pager { flex: 0 0 auto; align-self: center; }
/* التفصيل داخل صندوقه: لا حقل ولا نصّ يتجاوزه */
html.in-app #classify-page .classify-detail { padding: 12px; overflow: hidden; }
html.in-app #classify-page .classify-detail * { max-width: 100%; }
html.in-app #classify-page .classify-detail input,
html.in-app #classify-page .classify-detail select,
html.in-app #classify-page .classify-detail textarea { width: 100%; min-width: 0; box-sizing: border-box; }
html.in-app #classify-page .classify-known dl { grid-template-columns: auto minmax(0, 1fr); }
html.in-app #classify-page .classify-known dd { overflow-wrap: anywhere; word-break: break-word; }
html.in-app #classify-page .classify-doc { min-width: 0; max-width: 100%; overflow: hidden; scroll-margin-top: 70px; }
html.in-app #classify-page .classify-proof-sent { color: var(--anfal-green-700); font-weight: 700; font-size: 13px; }
html.in-app #classify-page .classify-proof-view { border-color: var(--anfal-green-700); color: var(--anfal-green-700); }
/* الرقم في زاوية الزرّ كتطبيقات الجوّال، لا سطرًا تحت اسمه. */
html.in-app #dashboard-view.rd-shell .mobile-bottom-nav button { position: relative; }
html.in-app #dashboard-view.rd-shell .mobile-bottom-nav button .nav-count {
position: absolute; top: 3px; inset-inline-end: 5px; min-width: 18px; height: 18px; padding: 0 5px; margin: 0;
border-radius: 9px; background: var(--anfal-danger-600, #d92d20); color: #fff;
font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
}
/* صورة تيليجرام بانتظار تحديد الحدود: شريطٌ فوق المعاينة بزرّه. */
.purchase-boundary-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--anfal-gold-400, #d9a94a); border-radius: 10px;
background: var(--anfal-gold-050, #fdf8ee); color: var(--anfal-amber-750, #7a4b06); font-weight: 600; font-size: 13px; }
.purchase-boundary-banner .primary-button { width: auto; min-height: 36px; margin: 0; padding: 0 16px; }
/* ===== «تسجيل حركة» (التطبيق الموحّد) ===== */
.manual-entry-overlay { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 16px; background: rgba(16, 42, 67, .45); }
.manual-entry-overlay[hidden] { display: none; }
.manual-entry { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 12px; padding: 18px;
border-radius: 14px; background: var(--rd-surface, #fff); box-shadow: 0 24px 60px rgba(16, 42, 67, .25); }
.manual-entry-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--rd-line); }
.manual-entry-head h2 { margin: 0; font-size: 19px; }
.manual-entry-list { display: grid; gap: 8px; }
.manual-line { border: 1px solid var(--rd-line); border-radius: 12px; background: var(--rd-surface-soft); overflow: hidden; }
.manual-line-summary { display: block; width: 100%; margin: 0; padding: 10px 12px; border: 0; background: none; text-align: start; font: inherit; font-weight: 600; cursor: pointer; }
.manual-line-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 12px 12px; }
.manual-line.is-collapsed .manual-line-grid { display: none; }
.manual-field { display: grid; gap: 4px; margin: 0; font-size: 12px; color: var(--rd-muted); }
.manual-field.is-wide { grid-column: span 2; }
.manual-field input, .manual-field select { width: 100%; min-width: 0; height: 36px; min-height: 36px; margin: 0; padding-block: 0; color: var(--rd-ink); font-size: 13px; }
.manual-proof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.manual-proof > span { width: 100%; }
.manual-proof small.is-done { color: var(--anfal-green-700); font-weight: 700; }
.manual-line-remove { justify-self: start; align-self: end; width: auto; margin: 0; }
.manual-entry-add { justify-self: start; width: auto !important; margin: 0; }
.manual-entry-totals { display: grid; gap: 6px; }
.manual-total { padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.manual-total.is-ok { background: var(--anfal-green-050, #ecfdf3); color: var(--anfal-green-700); }
.manual-total.is-off { background: var(--anfal-red-050, #fef3f2); color: var(--anfal-danger-ink); }
.manual-entry-foot { display: flex; justify-content: flex-end; }
.manual-entry-foot .rd-btn, .manual-entry-foot button { width: auto; margin: 0; }
.daftra-manual-lines { display: grid; gap: 2px; font-size: 12px; }
#manual-entry-open { width: auto; margin: 0 0 0 8px; }
@media (max-width: 760px) {
.manual-line-grid { grid-template-columns: minmax(0, 1fr); }
.manual-field.is-wide { grid-column: auto; }
}
/* رمز التصوير: نافذةٌ عائمة في الزاوية لا ستارٌ يحجب الصفحة. */
.capture-popover { position: fixed; z-index: 850; inset-block-end: 20px; inset-inline-start: 20px; width: 290px; display: grid; gap: 8px; justify-items: center;
padding: 14px; border: 1px solid var(--rd-line, #e4e6ea); border-radius: 14px; background: var(--rd-surface, #fff);
box-shadow: 0 18px 50px rgba(16, 42, 67, .28); text-align: center; }
.capture-popover header { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.capture-popover header strong { font-size: 14px; }
.capture-popover-context { width: 100%; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--rd-gold-soft, var(--rd-gold-soft)); color: var(--rd-gold-ink, var(--rd-gold-ink)); font-size: 12px; font-weight: 600; text-align: start; }
.capture-popover .bank-capture-qr { width: 190px; height: 190px; border: 6px solid #fff; }
.capture-popover small { color: var(--rd-muted); font-size: 11px; }
.capture-popover .bank-capture-code { font-size: 12px; color: var(--rd-muted); }
.capture-popover .secondary-button { width: auto; min-height: 32px; margin: 0; padding: 0 14px; font-size: 12px; }
/* الجوّال (تجربة): «ورقة تفاصيل» في سطرٍ واحد بجانب زرّي المرفق، بمربّعٍ بحجم الزرّين. */
@media (max-width: 760px) {
html.in-app #classify-page .classify-cover { display: inline-flex; align-items: center; gap: 8px; flex: none; }
html.in-app #classify-page .classify-cover label { white-space: nowrap; margin: 0; font-size: 14px; }
html.in-app #classify-page .classify-cover input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; }
}
/* زرّ الإغلاق الموحّد: مربّعٌ صغير بحدٍّ رفيع وعلامة × مرسومة، ويحمرّ عند المرور -
شكل إغلاق نافذة المستخدمين نفسه. كانت ✕ و× نصًّا تختلف أحجامها من خطٍّ لآخر. */
.house-close { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; min-height: 30px; margin: 0; padding: 0;
border: 1px solid var(--rd-line, #e4e6ea); border-radius: 8px; background: var(--rd-surface, #fff); color: var(--rd-muted, #5b6475);
font-size: 0; line-height: 0; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.house-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.house-close:hover, .house-close:focus-visible { border-color: var(--anfal-rejected, #b42318); background: var(--anfal-red-075, #fef3f2); color: var(--anfal-rejected, #b42318); }
/* «تسجيل حركة» في سطرين (المالك، ١٤ أكتوبر ٢٠٢٦):
الأول: التاريخ · الحساب · المبلغ · مدين/دائن · الضريبة
الثاني: الوصف · مركز التكلفة · المرفق · حذف (أيقونة) */
@media (min-width: 761px) {
.manual-line-grid {
grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) 110px 100px 170px 40px;
grid-template-areas:
"date account account amount side tax tax"
"desc desc desc center center proof remove";
align-items: end;
}
.manual-field.is-wide { grid-column: auto; }
.manual-line-grid .f-date { grid-area: date; }
.manual-line-grid .f-account { grid-area: account; }
.manual-line-grid .f-amount { grid-area: amount; }
.manual-line-grid .f-side { grid-area: side; }
.manual-line-grid .f-tax { grid-area: tax; }
.manual-line-grid .f-desc { grid-area: desc; }
.manual-line-grid .f-center { grid-area: center; }
.manual-line-grid .f-proof { grid-area: proof; }
.manual-line-grid .manual-line-remove { grid-area: remove; }
}
.manual-proof { gap: 6px; }
.manual-proof > span { width: 100%; }
.manual-proof small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 11px; }
/* الحذف أيقونةٌ في آخر السطر الثاني، بحجم زرّي المرفق. */
.manual-line-remove { width: 36px !important; height: 36px; min-height: 36px; padding: 0 !important; justify-content: center; font-size: 0; }
.manual-line-remove .rd-btn-icon { margin: 0; }
.manual-line-remove:hover { border-color: var(--anfal-rejected, #b42318) !important; color: var(--anfal-rejected, #b42318); }
/* المسافة بين الشريط العلوي وأول صندوق واحدةٌ في كل الصفحات: ١٨ بكسل، كصفحة
الفواتير (اختيار المالك، ١٤ أكتوبر ٢٠٢٦). القيود ودليل الحسابات كانت ٣٦ و٥٢:
رأسُ الصفحة القديم بقي فارغًا بعد نقل أزراره إلى الصندوق، فبقي هامشه. */
#dashboard-view.rd-shell .admin-control-page > .control-page-heading:not(:has(button:not([hidden]), a, h1, h2, input, select)) { display: none !important; }
#dashboard-view.rd-shell #daftra-accounts-page > .rd-list-card { margin-top: 0; }
/* ===== سندات الصرف المستقلّة (تجربة التطبيق الموحّد، ١٤ أكتوبر ٢٠٢٦) ===== */
.rd-shell .sv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rd-shell .sv-tabs { display: inline-flex; border: 1px solid var(--rd-line, #e4e6ea); border-radius: 10px; overflow: hidden; flex-wrap: wrap; }
.rd-shell .sv-tab { height: 36px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 0; background: var(--rd-surface, #fff); color: var(--rd-ink, #1d2433); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.rd-shell .sv-tab.is-on { background: var(--rd-navy, #102a43); color: #fff; }
.rd-shell .sv-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--anfal-gold-500, var(--anfal-gold-500)); color: #fff; font-size: 11px; margin-inline-start: 4px; }
.rd-shell .sv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rd-shell .sv-head h3 { margin: 0 0 4px; font-size: 18px; }
.rd-shell .sv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rd-shell .sv-status { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--rd-soft, #f3f4f6); color: var(--rd-muted, #5b6475); }
.rd-shell .sv-status.ok { background: #e7f5ee; color: #1f7a4d; } .rd-shell .sv-status.warn { background: #fdf3e2; color: var(--anfal-amber-700, #8a5a00); }
.rd-shell .sv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; margin-bottom: 12px; }
.rd-shell .sv-fact { padding: 8px 12px; border: 1px solid var(--rd-line, #e4e6ea); border-radius: 10px; background: var(--rd-soft, #f8f9fb); min-width: 0; }
.rd-shell .sv-fact small { display: block; color: var(--rd-muted, #5b6475); font-size: 11px; } .rd-shell .sv-fact b { font-size: 14px; overflow-wrap: anywhere; }
.rd-shell .sv-sigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rd-shell .sv-sig { padding: 10px; border: 1px dashed var(--rd-line, #d5d9e0); border-radius: 10px; text-align: center; display: grid; gap: 2px; }
.rd-shell .sv-sig.is-done { border-style: solid; border-color: #9fd3b8; background: #f2faf6; }
.rd-shell .sv-sig small { color: var(--rd-gold-ink, var(--rd-gold-ink)); font-weight: 700; } .rd-shell .sv-sig span { font-size: 11px; color: var(--rd-muted, #5b6475); }
.rd-shell .sv-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px 12px; }
.rd-shell .sv-form .w { grid-column: 1 / -1; }
.rd-shell .sv-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--rd-muted, #5b6475); }
.rd-shell .sv-form input:not([type=radio]), .rd-shell .sv-form select { height: 36px; min-height: 36px; border: 1px solid var(--rd-line, #d5d9e0); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--rd-ink, #1d2433); background: var(--rd-surface, #fff); }
.rd-shell .sv-method { display: flex; gap: 16px; border: 0; padding: 0; margin: 0; } .rd-shell .sv-method legend { font-size: 12px; color: var(--rd-muted, #5b6475); margin-bottom: 4px; }
.rd-shell .sv-method label { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--rd-ink, #1d2433); }
.rd-shell .sv-form [hidden] { display: none !important; }
.rd-shell .sv-form-actions { display: flex; justify-content: flex-end; }
.sv-sign-pop { width: 340px; }
.sv-sign-pop .sv-pad { width: 100%; aspect-ratio: 5 / 2; background: #fff; border: 2px dashed var(--anfal-gold-500); border-radius: 10px; touch-action: none; }
.sv-sign-pop .sv-saved-sig { width: 100%; max-height: 110px; object-fit: contain; background: #fff; border: 1px solid #e4e6ea; border-radius: 10px; }
.sv-sign-pop .sv-save { display: flex; gap: 6px; align-items: center; font-size: 13px; width: 100%; }
.sv-sign-pop .form-error:empty { display: none; }
@media (max-width: 640px) { .rd-shell .sv-sigs { grid-template-columns: 1fr; } }
/* سندات الصرف — جولة الشكل الأولى (ملاحظات المالك، ١٤ أكتوبر ٢٠٢٦):
زرّ «إنشاء سند» لا يمتدّ، واختيار السداد بطاقتان بأيقونتين لا دائرتان،
والنموذج يمينًا بعرضه الطبيعي ومعاينة السند يسارًا. */
.rd-shell .sv-top { flex-direction: row; }
.rd-shell .sv-top > #sv-new, .rd-shell .sv-form-actions > button, .rd-shell .sv-actions > button, .rd-shell .classify-make-voucher { width: auto !important; flex: none !important; align-self: auto; }
.rd-shell .classify-make-voucher { margin: 4px 0 10px; }
.rd-shell .sv-create { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
.rd-shell .sv-form h3 { margin: 0 0 2px; font-size: 17px; }
.rd-shell .sv-method { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-shell .sv-choice { position: relative; display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rd-line, #e4e6ea); border-radius: 12px; background: var(--rd-surface, #fff); cursor: pointer; transition: border-color .14s, background .14s; }
.rd-shell .sv-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rd-shell .sv-choice svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 8px; background: var(--rd-soft, #f3f4f6); fill: none; stroke: var(--rd-muted, #5b6475); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.rd-shell .sv-choice span { display: grid; gap: 1px; } .rd-shell .sv-choice b { font-size: 14px; color: var(--rd-ink, #1d2433); } .rd-shell .sv-choice small { font-size: 11px; color: var(--rd-muted, #5b6475); }
.rd-shell .sv-choice:hover { border-color: var(--anfal-gold-500, var(--anfal-gold-500)); }
.rd-shell .sv-choice.is-on { border-color: var(--rd-navy, #102a43); box-shadow: inset 0 0 0 1px var(--rd-navy, #102a43); background: color-mix(in srgb, var(--rd-navy, #102a43) 4%, var(--rd-surface, #fff)); }
.rd-shell .sv-choice.is-on svg { background: var(--rd-navy, #102a43); stroke: #fff; }
.rd-shell .sv-preview { position: sticky; top: 12px; }
.rd-shell .sv-preview-label { display: block; color: var(--rd-muted, #5b6475); font-size: 11px; margin-bottom: 6px; }
.rd-shell .sv-paper { position: relative; aspect-ratio: 210 / 148; background: #fff; color: #1d2433; border-radius: 6px; box-shadow: 0 6px 20px rgb(0 0 0 / .12); padding: 5% 7% 5% 4%; overflow: hidden; font-size: 11px; display: flex; flex-direction: column; gap: 6%; }
.rd-shell .sv-paper::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 2.4%; background: #102a43; box-shadow: -2px 0 0 var(--anfal-gold-500); }
.rd-shell .sv-paper-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid #102a43; padding-bottom: 4%; }
.rd-shell .sv-paper-brand b { display: block; font-size: 13px; } .rd-shell .sv-paper-brand small { color: var(--rd-muted); }
.rd-shell .sv-paper-tag { background: #102a43; color: #fff; border-radius: 4px; padding: 4px 12px; text-align: center; } .rd-shell .sv-paper-tag b { display: block; font-size: 13px; } .rd-shell .sv-paper-tag small { font-size: 8px; opacity: .85; }
.rd-shell .sv-paper table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rd-shell .sv-paper th, .rd-shell .sv-paper td { border: 1px solid var(--rd-gold-line); padding: 4px 6px; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-shell .sv-paper th { width: 20%; background: var(--rd-surface-soft, #f8fafc); color: var(--rd-muted); font-weight: 400; font-size: 10px; }
.rd-shell .sv-paper-amount { background: var(--rd-gold-soft); font-weight: 800; font-size: 13px; text-align: center !important; }
.rd-shell .sv-paper-sigs { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rd-shell .sv-paper-sigs span { border: 1px solid var(--rd-gold-line); border-radius: 4px; padding: 4px 0 18px; text-align: center; color: var(--anfal-gold-500); font-weight: 700; font-size: 10px; }
@media (max-width: 1100px) { .rd-shell .sv-create { grid-template-columns: minmax(0, 1fr); } .rd-shell .sv-preview { position: static; max-width: 460px; } }
/* لوح التوقيع: خياران (إلكتروني / يدوي)، والمربع المختار بالكحلي. اللوح خارج
.rd-shell (يُلحق بالجسم)، فقواعده بلا نطاقها - وأيّ checkbox كبير لم يعد فيه. */
.sv-sign-pop { width: 360px; }
.sv-sign-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.sv-sign-mode { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 0; height: auto; border: 1px solid #e4e6ea; border-radius: 10px; background: #fff; color: #1d2433; font: inherit; text-align: start; cursor: pointer; }
.sv-sign-mode svg { width: 28px; height: 28px; flex: none; padding: 5px; border-radius: 8px; background: #f3f4f6; fill: none; stroke: #5b6475; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.sv-sign-mode span { display: grid; gap: 1px; } .sv-sign-mode b { font-size: 13px; } .sv-sign-mode small { font-size: 10.5px; color: #5b6475; }
.sv-sign-mode:hover { border-color: var(--anfal-gold-500); }
.sv-sign-mode.is-on { border-color: #102a43; box-shadow: inset 0 0 0 1px #102a43; } .sv-sign-mode.is-on svg { background: #102a43; stroke: #fff; }
.sv-sign-body { width: 100%; } .sv-sign-body[hidden] { display: none; }
.sv-sign-stamp { margin: 0; padding: 14px; border: 1px dashed var(--anfal-gold-500); border-radius: 10px; text-align: center; color: #102a43; font-weight: 700; background: var(--rd-gold-soft); }
.sv-sign-stamp small { font-weight: 400; color: #5b6475; }
.sv-link { border: 0; background: none; color: #102a43; text-decoration: underline; font: inherit; font-size: 12px; cursor: pointer; padding: 4px 0; min-height: 0; height: auto; }
.sv-sign-pop [data-go] { width: 100%; }
.rd-shell .sv-sig-img { max-width: 100%; height: 44px; object-fit: contain; margin: 2px auto; display: block; }
.rd-shell .sv-sig-e { font-style: normal; font-weight: 700; color: #102a43; font-size: 12px; margin: 6px 0; }
.rd-shell .sv-cashfrom { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.rd-shell .sv-cashfrom label { flex-direction: row !important; align-items: center; gap: 6px; color: var(--rd-ink, #1d2433) !important; font-size: 13px !important; }
.rd-shell .sv-cashfrom input { width: 15px !important; height: 15px !important; min-height: 0 !important; margin: 0; accent-color: var(--rd-navy, #102a43); }
.rd-shell .classify-voucher-tag { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 6px 12px; min-height: 0; height: auto; border: 1px solid #9fd3b8; border-radius: 10px; background: #f2faf6; color: #1f7a4d; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; width: auto; }
.rd-shell .classify-voucher-tag:hover { border-color: #1f7a4d; }
.rd-shell .classify-doc-tabs { display: inline-flex; gap: 0; border: 1px solid var(--rd-line, #e4e6ea); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.rd-shell .classify-doc-tabs button { height: 32px; min-height: 32px; padding: 0 14px; border: 0; border-radius: 0; background: var(--rd-surface, #fff); color: var(--rd-ink, #1d2433); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; width: auto; }
.rd-shell .classify-doc-tabs button.is-on { background: var(--rd-navy, #102a43); color: #fff; }
.rd-shell .classify-voucher-tag { white-space: nowrap; font-size: 12px; padding: 5px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rd-shell .classify-voucher-tag b { font-size: 12px; }
.rd-shell .classify-doc-delete { margin-inline-start: 10px; height: 28px; min-height: 28px; padding: 0 10px; border: 1px solid #f1c0bb; border-radius: 8px; background: #fff; color: #b42318; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; width: auto; }
.rd-shell .classify-doc-delete:hover { background: #fef3f2; border-color: #b42318; }
.rd-shell .sv-paper-brand img { height: 34px; width: auto; display: block; }
.rd-shell .sv-method { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1300px) { .rd-shell .sv-method { grid-template-columns: 1fr; } }
.rd-shell .sv-sigs.sv-sigs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-shell .sv-paper-sigs.sv-paper-sigs-2 { grid-template-columns: repeat(2, 1fr); }
/* مدين يمينًا ودائن يسارًا في صفٍّ واحد، كعمودي القيد. */
.rd-shell .sv-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-shell .sv-form .sv-half { grid-column: span 1; }
.rd-shell .sv-form { align-items: end; } .rd-shell .sv-form .sv-half small { display: inline; }
/* البطاقات الثلاث: الأيقونة فوق، ثم الاسم، ثم شرحه (المالك، ١٤ أكتوبر ٢٠٢٦). */
.rd-shell .sv-method { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.rd-shell .sv-choice { flex-direction: column !important; align-items: center; justify-content: flex-start; text-align: center; gap: 6px; padding: 12px 8px; }
.rd-shell .sv-choice span { justify-items: center; }
.rd-shell .sv-choice svg { width: 36px; height: 36px; padding: 7px; }
.rd-shell .sv-form-actions { justify-content: flex-start; }
/* عدّاد التبويب بلون عدّادات القائمة الجانبية (أحمر هادئ)، لا الذهبي. */
.rd-shell .sv-count { background: #fdecea; color: #b42318; font-weight: 700; }
.rd-shell .sv-tab.is-on .sv-count { background: #fff; color: #b42318; }
.rd-shell .sv-form [data-line] { grid-column: span 1; }
.sv-send-pop { width: 320px; }
.sv-send-search { width: 100%; height: 36px; border: 1px solid #d5d9e0; border-radius: 10px; padding: 0 10px; font: inherit; box-sizing: border-box; }
.sv-send-list { width: 100%; max-height: 260px; overflow: auto; display: grid; gap: 6px; }
.sv-send-item { display: grid; gap: 2px; text-align: start; padding: 8px 10px; min-height: 0; height: auto; border: 1px solid #e4e6ea; border-radius: 10px; background: #fff; color: #1d2433; font: inherit; cursor: pointer; width: 100%; }
.sv-send-item:hover { border-color: var(--anfal-gold-500); } .sv-send-item b { font-size: 13px; } .sv-send-item small { font-size: 11px; color: #5b6475; }
/* عرض السند: التفاصيل وسطًا والمعاينة يسارًا. */
.rd-shell .sv-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.rd-shell .sv-view .sv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-shell .sv-preview-frame { width: 100%; height: 640px; border: 1px solid var(--rd-line, #e4e6ea); border-radius: 8px; background: #fff; }
@media (max-width: 1100px) { .rd-shell .sv-view { grid-template-columns: minmax(0, 1fr); } }
/* قائمة الإرسال: صورة واسم واضح، وتأكيد في وسط الشاشة. */
.sv-send-pop { width: 340px; }
.sv-send-item { grid-template-columns: 40px 1fr !important; display: grid !important; align-items: center; gap: 10px !important; }
.sv-send-item b { font-size: 14.5px !important; color: #102a43; }
.sv-send-av { width: 40px; height: 40px; border-radius: 50%; background: #e8ecf2 center/cover no-repeat; display: grid; place-items: center; }
.sv-send-av:not([style])::after { content: attr(data-initials); color: #5b6475; font-weight: 700; font-size: 13px; }
.sv-confirm-back { position: fixed; inset: 0; z-index: 880; background: rgb(15 23 42 / .45); display: grid; place-items: center; padding: 16px; }
.sv-confirm { width: min(360px, 100%); background: #fff; border-radius: 16px; padding: 22px 20px; text-align: center; box-shadow: 0 20px 50px rgb(0 0 0 / .25); }
.sv-confirm-photo { width: 120px; height: 150px; margin: 0 auto 12px; border-radius: 12px; background: #e8ecf2 center/cover no-repeat; display: grid; place-items: center; color: #5b6475; font-size: 32px; font-weight: 700; border: 1px solid #e4e6ea; }
.sv-confirm h3 { margin: 0 0 6px; font-size: 20px; color: #102a43; }
.sv-confirm p { margin: 0 0 16px; color: #5b6475; font-size: 14px; }
.sv-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.sv-confirm-actions button { min-width: 110px; }
/* معاينة مرفق الحركة من صفحة القيود: أيقونة تحت المصدر، ونافذة وسط الشاشة. */
.rd-shell .journal-peek { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; min-height: 0; height: auto; width: auto; border: 1px solid var(--rd-line, #e4e6ea); border-radius: 999px; background: var(--rd-surface, #fff); color: var(--rd-muted, #5b6475); font: inherit; font-size: 11px; cursor: pointer; }
.rd-shell .journal-peek svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rd-shell .journal-peek:hover { border-color: var(--anfal-gold-500, var(--anfal-gold-500)); color: var(--rd-ink, #1d2433); }
.journal-peek-back { position: fixed; inset: 0; z-index: 880; background: rgb(15 23 42 / .45); display: grid; place-items: center; padding: 16px; }
.journal-peek-card { width: min(820px, 96vw); height: min(88vh, 1000px); background: #fff; border-radius: 14px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.journal-peek-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e4e6ea; }
.journal-peek-tabs { display: flex; gap: 6px; } .journal-peek-tabs button { height: 30px; padding: 0 12px; border: 1px solid #e4e6ea; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; } .journal-peek-tabs button.is-on { background: #102a43; color: #fff; border-color: #102a43; }
.journal-peek-view { display: grid; place-items: center; background: #f4f5f7; overflow: auto; } .journal-peek-view iframe { width: 100%; height: 100%; border: 0; } .journal-peek-view img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rd-shell .journal-row-cancel { display: inline-grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; margin-top: 6px; border: 1px solid #f1c0bb; border-radius: 8px; background: #fff; color: #b42318; cursor: pointer; }
.rd-shell .journal-row-cancel svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* التبويبات مجموعتان: «المعتمدة» يمينًا، والطابور (بانتظار المستلم، الملغاة) يسارًا. */
.rd-shell .sv-tabs { border: 0; overflow: visible; display: flex; flex: 1; justify-content: space-between; gap: 12px; }
.rd-shell .sv-tabs-group { display: inline-flex; border: 1px solid var(--rd-line, #e4e6ea); border-radius: 10px; overflow: hidden; }
/* تصنيف حركات البنك: المربّعات بعد «طبّق القواعد» مباشرة، بينهما خطّ رفيع (المالك، ١٤ أكتوبر ٢٠٢٦). */
html.in-app #classify-page .classify-head { justify-content: flex-start; gap: 12px; }
html.in-app #classify-page .classify-head #classify-tabs { padding-inline-start: 12px; border-inline-start: 1px solid var(--rd-line, #e4e6ea); }
html.in-app #classify-page .classify-head #classify-count { margin-inline-start: auto; }
/* «اختر سندًا…» و«لا سندات هنا» إرشادٌ لا تحذير: كانت بلون التنبيه الكهرماني
(settings-note)، فبدت ذهبيةً تخالف الهوية الزرقاء. تصير محايدةً هادئة. */
html.in-app .rd-shell :is(#sv-detail, #sv-list, #suppliers-detail, #suppliers-list) > .settings-note {
background: var(--rd-surface-2, #f6f8fb); border: 1px dashed var(--rd-line, #d9dee6); color: var(--rd-muted, #5b6475); text-align: center;
}
/* تفاصيل السند — الاقتراح ٢ (المالك، ١٤ أكتوبر ٢٠٢٦): شريط المبلغ، سطور خفيفة، ومسار التسليم. */
.rd-shell .sv-hero { background: var(--rd-gold-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.rd-shell .sv-hero-amt { font-size: 30px; font-weight: 800; color: var(--rd-ink); text-align: right; line-height: 1.2; }
.rd-shell .sv-hero-desc { color: var(--rd-muted); font-size: 13px; margin-top: 2px; }
.rd-shell .sv-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; margin: 0 0 14px; font-size: 13.5px; }
.rd-shell .sv-kv dt { color: var(--rd-muted); } .rd-shell .sv-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rd-shell .sv-flow { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rd-line); border-radius: 12px; overflow: visible; }
.rd-shell .sv-flow .sv-sig { border: 0 !important; border-radius: 0; background: transparent !important; text-align: start; padding: 12px 14px; }
.rd-shell .sv-flow .sv-sig + .sv-flow-arrow + .sv-sig, .rd-shell .sv-flow .sv-flow-arrow + .sv-sig { border-inline-start: 1px solid var(--rd-line) !important; }
.rd-shell .sv-flow .sv-sig small { color: var(--anfal-gold-500); }
.rd-shell .sv-flow .sv-sig-img { margin: 4px 0; height: 36px; }
.rd-shell .sv-flow-arrow { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: var(--rd-surface); border: 1px solid var(--rd-line); display: grid; place-items: center; font-size: 12px; color: var(--anfal-gold-500); z-index: 1; }
.rd-shell .sv-flow .sv-sig.is-done { background: transparent !important; }
/* ===== الرئيسية — الشكل «٦» (المالك، ١٤ أكتوبر ٢٠٢٦): ألوانٌ حيّة كما في النموذج المختار ===== */
html.in-app .home-hero { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 10px; border-radius: 16px;
background: linear-gradient(90deg, #fbe5e3, #fff 75%); border: 1px solid #f2c4bf; }
html.in-app .home-hero-ic { position: relative; flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: #d6453d; color: #fff; }
html.in-app .home-hero-ic svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.in-app .home-hero-ic::after { content: ""; position: absolute; inset: -5px; border-radius: 20px; border: 2px solid #d6453d; opacity: .4; animation: homePulse 1.8s infinite; }
@keyframes homePulse { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.15); opacity: 0; } }
html.in-app .home-hero-body { flex: 1; min-width: 0; }
html.in-app .home-hero-body h3 { margin: 0; font-size: 17px; color: #1d2433; }
html.in-app .home-hero-body p { margin: 3px 0 0; color: #5b6475; font-size: 12.5px; }
html.in-app .home-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
html.in-app .home-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 0; padding: 0 12px; width: auto; border: 1px solid #e6e9ee; border-radius: 999px; background: #fff; color: #1d2433; font: inherit; font-size: 12.5px; cursor: pointer; }
html.in-app .home-chip i { width: 8px; height: 8px; border-radius: 50%; background: #e0a43a; }
html.in-app .home-chip.is-red i { background: #d6453d; } html.in-app .home-chip.is-orange i { background: #e8833a; }
html.in-app .home-chip:hover { border-color: #d6453d; }
html.in-app .home-hero-go { flex: none; height: 34px; min-height: 0; padding: 0 16px; width: auto; border: 1px solid #e6e9ee; border-radius: 10px; background: #fff; color: #1d2433; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html.in-app .home-hero-go:hover { border-color: #d6453d; color: #b42318; }
html.in-app #home-sections.home-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
html.in-app .home-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 14px; min-height: 0; height: auto; width: auto;
border: 1px solid #e6e9ee; border-radius: 16px; background: #fff; cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
html.in-app .home-app:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / .07); border-color: var(--c); }
html.in-app .home-app-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 35%, transparent); }
html.in-app .home-app-ic svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.in-app .home-app strong { font-size: 26px; color: #14263a; line-height: 1.1; margin-top: 4px; }
html.in-app .home-app strong.is-hot { color: #d6453d; }
html.in-app .home-app small { color: #5b6475; font-size: 12.5px; text-align: center; }
html[data-theme="dark"].in-app .home-hero { background: linear-gradient(90deg, #3a1d1d, #141b24 75%); border-color: #5c2a27; }
html[data-theme="dark"].in-app :is(.home-app, .home-chip, .home-hero-go) { background: #1b2230; border-color: #2a3344; color: #e5e9f0; }
html[data-theme="dark"].in-app .home-app strong, html[data-theme="dark"].in-app .home-hero-body h3 { color: #f1f4f8; }
html.in-app .home-app strong.is-text { font-size: 15px; line-height: 1.35; text-align: center; margin-top: 8px; }
/* المربع أكبر قليلًا، وتفاصيل أرقامه داخله بخطٍّ صغير؛ و«آخر العمليات» لا يظهر في الرئيسية الجديدة. */
html.in-app #home-feed { display: none !important; }
html.in-app #home-sections.home-app-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); grid-column: 1 / -1; }
html.in-app .home-app { padding: 18px 12px 14px; }
html.in-app .home-app-details { display: grid; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed #e6e9ee; width: 100%; text-align: center; }
html.in-app .home-app-details span { font-size: 10.5px; color: #8a93a3; line-height: 1.5; }
html.in-app .home-app-details span.is-hot { color: #d6453d; font-weight: 700; }
html.in-app .home-app-details .home-app-main { color: #5b6475; }
/* هوية «٦» على كل الصفحات — التطبيق الموحّد فقط */
html.in-app .t6-tile{border-radius:16px}
html.in-app .t6-ic{width:44px!important;height:44px!important;border-radius:50%!important;display:inline-grid!important;place-items:center!important;background:var(--c)!important;color:#fff!important;border:0!important;box-shadow:0 4px 10px color-mix(in srgb,var(--c) 35%,transparent);margin-inline:auto;margin-bottom:6px}
html.in-app .t6-ic svg,html.in-app svg.t6-ic{width:22px!important;height:22px!important;stroke:#fff!important;color:#fff!important}html.in-app svg.t6-ic{box-sizing:content-box;padding:11px}
html.in-app svg.t6-side{box-sizing:content-box;width:14px!important;height:14px!important;padding:6px;border-radius:50%;background:var(--c);stroke:#fff!important;color:#fff!important;flex:none}
/* هوية «٦» — الجولة الثانية (التطبيق الموحّد فقط) */
/* عناوين المجموعات: مربع ناعم بلون المجموعة */
html.in-app .t6-group>svg.nav-group-icon{box-sizing:content-box;width:16px!important;height:16px!important;padding:7px;border-radius:9px;background:color-mix(in srgb,var(--c) 16%,transparent);stroke:var(--c)!important;color:var(--c)!important;flex:none}
/* الشريط العلوي: وسوم ودوائر */
html.in-app .rd-when{border:1px solid var(--rd-line,#e4e6ea);border-radius:999px;padding:3px 12px 3px 4px;gap:8px}
html.in-app .rd-when>svg{box-sizing:content-box;width:14px!important;height:14px!important;padding:7px;border-radius:50%;background:#2f6f9f;stroke:#fff!important;color:#fff!important}
html.in-app .rd-when-sep{display:none}
html.in-app .rd-when-time{border:1px solid var(--rd-line,#e4e6ea);border-radius:999px;padding:2px 10px;font-weight:700;margin-inline-start:6px}
html.in-app .rd-icon-btn{width:36px;height:36px;border-radius:50%!important;position:relative}
html.in-app .rd-bell-count{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;border-radius:999px;background:#d6453d;color:#fff;font-size:10px;display:grid;place-items:center;border:2px solid var(--rd-surface,#fff);padding:0 3px}
html.in-app .rd-account-btn{border-radius:999px!important}
html.in-app .rd-account-ava{background:linear-gradient(135deg,#2f6f9f,#7b5bd6)!important;color:#fff!important;border-radius:50%!important}
/* رأس الصفحة: دائرة القسم */
html.in-app .rd-pagehead-text:has(>.t6-head){display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}html.in-app .rd-pagehead-text>.t6-head{grid-row:span 3;margin:0!important}
html.in-app .t6-head{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--c);flex:none;margin-inline-end:12px;box-shadow:0 4px 10px color-mix(in srgb,var(--c) 35%,transparent)}
html.in-app .t6-head>svg{width:22px;height:22px;stroke:#fff;color:#fff;fill:none}
/* وسوم الفرز: نقطة ملوّنة، والمختار يمتلئ بلون القسم */
html.in-app .classify-tabs>button{border-radius:999px}
html.in-app .classify-tabs>button::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dot,#5b6475);margin-inline-end:6px;vertical-align:middle}
html.in-app .classify-tabs>button:nth-child(2){--dot:#e8833a}html.in-app .classify-tabs>button:nth-child(3){--dot:#7b5bd6}html.in-app .classify-tabs>button:nth-child(5){--dot:#3d8bd6}html.in-app .classify-tabs>button:nth-child(6){--dot:#2fa36b}html.in-app .classify-tabs>button:nth-child(7){--dot:#d6567f}
html.in-app .classify-tabs>button.is-active{background:var(--c)!important;border-color:var(--c)!important;color:#fff!important}
html.in-app .classify-tabs>button.is-active::before{background:#fff}
/* الحالة الفارغة: دائرة خضراء بعلامة صح */
html.in-app p.empty-state::before{content:"";display:block;width:56px;height:56px;margin:0 auto 10px;border-radius:50%;background:#2fa36b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/26px no-repeat}
/* الموظفون: دائرة الأحرف، والحالة بلونها */
html.in-app .t6-who{display:flex;align-items:center;gap:10px}
html.in-app .t6-ava{width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}
html.in-app .employee-status-cell{border-radius:999px;font-weight:700;background:color-mix(in srgb,#e8833a 14%,transparent);color:#c26a1f}
html.in-app .employee-status-cell.is-live{background:color-mix(in srgb,#2fa36b 14%,transparent);color:#1f7a4d}
/* الأيقونة كانت مثبّتة بموضع مطلق في الزاوية، فلمّا كبرت دخلت في الرقم: تعود إلى مجرى المربع فوق الرقم. */
html.in-app .t6-tile{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding-top:14px!important;padding-bottom:12px!important}
html.in-app .t6-tile>svg.t6-ic,html.in-app .t6-tile svg.t6-ic{position:static!important;inset:auto!important;transform:none!important;display:block!important;margin:0 auto 6px!important;flex:none}
html.in-app .t6-tile>:has(>svg.t6-ic){height:auto!important;width:auto!important;min-height:0!important;position:static!important;inset:auto!important;display:block!important;line-height:0;margin:0 auto 4px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
html.in-app .t6-tile>strong,html.in-app .t6-tile>b{line-height:1.15!important}
/* عدّاد القائمة على زاوية الدائرة كتطبيقات الجوال، لا بجانب الاسم فيضغطه */
html.in-app nav button[data-nav]{position:relative}
html.in-app nav button[data-nav]>.nav-count{position:absolute;top:calc(50% - 21px);inset-inline-start:30px;margin:0!important;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#d6453d!important;color:#fff!important;font-size:10px;line-height:18px;text-align:center;border:2px solid var(--rd-surface,#fff);z-index:1}
/* حزم المشتريات: بطاقات بدائرة بلون القسم */
html.in-app .purchase-batch-chip{display:grid!important;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-align:start;border-radius:14px!important;border:1px solid var(--rd-line,#e4e6ea)!important;background:var(--rd-surface,#fff)!important;padding:10px 12px!important;box-shadow:none!important}
html.in-app .purchase-batch-chip::before{content:"";grid-row:span 2;width:34px;height:34px;border-radius:50%;background:#7b5bd6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6zM9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center/17px no-repeat}
html.in-app .purchase-batch-chip.is-picked,html.in-app .purchase-batch-chip.is-active,html.in-app .purchase-batch-chip[aria-pressed="true"]{border-color:#7b5bd6!important;background:color-mix(in srgb,#7b5bd6 8%,var(--rd-surface,#fff))!important;color:inherit!important}
/* عدّاد القسم يكفي في القائمة الجانبية؛ لا يتكرّر على دائرة رأس الصفحة */
html.in-app .rd-pagehead :is(.nav-count,[class*="count"],[class*="badge"]){display:none!important}
/* ===== أزرار التصميم «٦» (اختيار المالك ١٤ أكتوبر): الرئيسي من «ب» والبقية من «ج» =====
--t6-sc لون القسم المفتوح، يضعه theme6Round2 على html. التطبيق الموحّد فقط. */
html.in-app #dashboard-view.rd-shell .rd-btn{border-radius:10px;padding:0 12px 0 5px;min-height:36px;background:var(--rd-surface);border:1px solid var(--rd-line,#e4e6ea);color:var(--ink,#1d2433)}
html.in-app #dashboard-view.rd-shell .rd-btn>.rd-btn-icon{width:26px;height:26px;border:0;border-radius:50%;background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 15%,transparent);color:var(--t6-sc,#2f6f9f)}
html.in-app #dashboard-view.rd-shell .rd-btn:hover{border-color:color-mix(in srgb,var(--t6-sc,#2f6f9f) 45%,transparent);background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 5%,var(--rd-surface))}
html.in-app #dashboard-view.rd-shell .rd-btn:hover>.rd-btn-icon{background:var(--t6-sc,#2f6f9f);color:#fff;border:0}
/* الرئيسي «ب»: خلفية خفيفة من لون القسم، ودائرة ممتلئة أكبر */
html.in-app #dashboard-view.rd-shell .rd-btn.primary-button{border-radius:12px;padding:0 14px 0 6px;min-height:42px;background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 10%,var(--rd-surface));border-color:color-mix(in srgb,var(--t6-sc,#2f6f9f) 30%,transparent);color:var(--t6-sc,#2f6f9f)}
html.in-app #dashboard-view.rd-shell .rd-btn.primary-button>.rd-btn-icon{width:30px;height:30px;background:var(--t6-sc,#2f6f9f);color:#fff}
html.in-app #dashboard-view.rd-shell .rd-btn.primary-button:hover{background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 16%,var(--rd-surface))}
/* الحذف والرفض بالأحمر، والاعتماد بالأخضر — في الدائرة فقط كبقية «ج» */
html.in-app #dashboard-view.rd-shell :is(.is-irreversible,.danger-button,.rd-btn-danger).rd-btn,html.in-app #dashboard-view.rd-shell .is-irreversible .rd-btn{color:#b42318}
html.in-app #dashboard-view.rd-shell :is(.is-irreversible,.danger-button,.rd-btn-danger).rd-btn>.rd-btn-icon,html.in-app #dashboard-view.rd-shell .is-irreversible .rd-btn-icon{background:color-mix(in srgb,#d6453d 14%,transparent);color:#d6453d}
html.in-app #dashboard-view.rd-shell .rd-btn:is([aria-label*="حذف"],[title*="حذف"],[aria-label*="إلغاء"])>.rd-btn-icon{background:color-mix(in srgb,#d6453d 14%,transparent);color:#d6453d}
/* ===== الإشعارات بتصميم «٦» (المالك ١٤ أكتوبر) ===== */
html.in-app .notification-center{max-width:none!important;width:100%!important}
html.in-app .notification-center-item{background:var(--rd-surface,#fff)!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:16px!important;box-shadow:none!important;display:flex!important;align-items:center;gap:14px;padding:14px 16px!important}
html.in-app .notification-center-icon{width:44px!important;height:44px!important;border-radius:50%!important;background:var(--c,#d6567f)!important;color:#fff!important;display:grid!important;place-items:center;font-size:11px!important;font-weight:800;border:0!important;flex:none}
html.in-app .notification-center-icon svg{stroke:#fff!important;color:#fff!important}
html.in-app .notification-center-item .status-badge{background:color-mix(in srgb,var(--c,#d6567f) 14%,transparent)!important;color:var(--c,#d6567f)!important;border:0!important;border-radius:999px!important}
html.in-app .notification-center-actions button{border-radius:10px!important;font-size:12.5px!important;min-height:36px;padding:0 14px!important;font-weight:700;box-shadow:none!important}
html.in-app .notification-center-actions .primary-button{background:color-mix(in srgb,#d6567f 10%,var(--rd-surface,#fff))!important;color:#d6567f!important;border:1px solid color-mix(in srgb,#d6567f 30%,transparent)!important}
html.in-app .notification-center-actions .secondary-button{background:var(--rd-surface,#fff)!important;color:inherit!important;border:1px solid var(--rd-line,#e4e6ea)!important}
/* ===== كشوف البنوك: البطاقة بلون بنكها — الشريط يبقى رفيعًا أعلاها، ودائرة البنك تأخذ ألوانه نفسها ===== */
html.in-app .statement-account{border-radius:16px!important;border:1px solid var(--rd-line,#e4e6ea)!important;box-shadow:none!important;overflow:hidden;position:relative;padding-top:62px!important}
html.in-app .statement-account-stripe{position:absolute!important;top:0;left:0;right:0;height:4px!important;margin:0!important}
html.in-app .t6-bank{position:absolute;top:16px;inset-inline-start:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 10px rgba(20,38,58,.15)}
html.in-app .t6-bank svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.in-app .statement-account-age,html.in-app .statement-account-gap{border-radius:999px!important;border:0!important}
/* بطاقات المنشأة: دائرة البنك نفسها في زاوية التفاصيل؛ والزر الثاني في الرأس ثانويّ — رئيسيّ واحد في الصفحة */
html.in-app .org-card{position:relative}
html.in-app .org-card>.t6-bank{top:12px;inset-inline-start:auto;inset-inline-end:12px;width:30px;height:30px}
html.in-app .org-card>.t6-bank svg{width:15px;height:15px}
html.in-app #dashboard-view.rd-shell #org-open-card.rd-btn{background:var(--rd-surface);border-color:var(--rd-line,#e4e6ea);color:inherit;min-height:36px;border-radius:10px}
html.in-app #dashboard-view.rd-shell #org-open-card.rd-btn>.rd-btn-icon{width:26px;height:26px;background:color-mix(in srgb,var(--t6-sc) 15%,transparent);color:var(--t6-sc)}
/* ===== قائمة الحساب «ز» — التطبيق الموحّد (اختيار المالك ١٤ أكتوبر ٢٠٢٦) ===== */
html.in-app .rd-account-ava{overflow:hidden}
html.in-app .rd-account-ava img,html.in-app .rd-acc-ava img{width:100%;height:100%;object-fit:cover;display:block}
html.in-app .rd-account-menu.rd-acc{width:340px;max-width:calc(100vw - 24px);padding:12px;border-radius:20px;box-shadow:0 18px 40px rgba(20,38,58,.16);max-height:calc(100vh - 90px);overflow:auto}
html.in-app .rd-acc-head{display:flex;align-items:center;gap:12px;padding:4px 4px 12px}
html.in-app .rd-acc-head b{display:block;font-size:15px;margin-bottom:3px}
html.in-app .rd-acc-ava{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;background:linear-gradient(135deg,#2f6f9f,#7b5bd6)}
html.in-app .rd-acc-ava.has-photo{background:none}
html.in-app .rd-acc-role{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 10px;background:color-mix(in srgb,#2f6f9f 12%,transparent);color:#2f6f9f}
html.in-app .rd-acc-row,html.in-app .rd-acc-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer;border-radius:12px}
html.in-app .rd-acc-row{padding:9px 8px;font-size:13px;font-weight:700}
html.in-app .rd-acc-row:hover,html.in-app .rd-acc-row.is-open{background:var(--rd-surface-2,#f4f6f9)}
html.in-app .rd-acc-label{flex:1}
html.in-app .rd-acc-chev{width:8px;height:8px;border:solid var(--muted,#5b6475);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg);margin-inline-end:4px;transition:transform .2s}
html.in-app .rd-acc-row.is-open .rd-acc-chev{transform:rotate(135deg)}
html.in-app .rd-acc-ic{width:28px;height:28px;border-radius:50%;background:var(--c);display:grid;place-items:center;flex:none}
html.in-app .rd-acc-ic.is-sm{width:24px;height:24px}
html.in-app .rd-acc-ic svg{stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.in-app .rd-acc-sub{margin:2px 14px 6px 0;padding-inline-start:12px;border-inline-start:2px solid var(--rd-line,#e4e6ea);display:grid;gap:2px}
html.in-app .rd-acc-sub[hidden]{display:none}
html.in-app .rd-acc-item{padding:6px 8px;font-size:12.5px;font-weight:600}
html.in-app .rd-acc-item:hover:not(:disabled){background:var(--rd-surface-2,#f4f6f9)}
html.in-app .rd-acc-item:disabled{opacity:.5;cursor:default}
html.in-app .rd-acc-item.is-here{background:color-mix(in srgb,#2f6f9f 8%,transparent);cursor:default}
html.in-app .rd-acc-item em{margin-inline-start:auto;font-style:normal;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 9px;background:color-mix(in srgb,#2f6f9f 14%,transparent);color:#2f6f9f}
html.in-app .rd-acc-switch{cursor:pointer}
html.in-app .rd-acc-switch>span:nth-child(2){flex:1}
html.in-app .rd-acc-toggle{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:999px;background:#cfd5de;position:relative;cursor:pointer;margin:0;flex:none;transition:background .15s}
html.in-app .rd-acc-toggle::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:right .15s}
html.in-app .rd-acc-toggle:checked{background:#2fa36b}
html.in-app .rd-acc-toggle:checked::after{right:18px}
html.in-app .rd-acc-toggle:disabled{opacity:.45;cursor:default}
html.in-app .rd-acc-note{margin:0;padding:2px 8px 6px;font-size:11px;line-height:1.7;color:var(--muted,#5b6475)}
html.in-app .rd-acc-state{margin:4px 0 2px;padding:7px 9px;border-radius:10px;font-size:11.5px;font-weight:700}
html.in-app .rd-acc-state.is-pending{background:color-mix(in srgb,#e8833a 12%,transparent);color:#c26a1f}
html.in-app .rd-acc-state.is-rejected{background:color-mix(in srgb,#d6453d 10%,transparent);color:#b42318}
html.in-app .rd-acc-state.is-approved{background:color-mix(in srgb,#2fa36b 12%,transparent);color:#1f7a4d}
html.in-app .rd-acc-sep{height:1px;background:var(--rd-line,#e4e6ea);margin:6px 0}
html.in-app .rd-acc-row.is-danger{color:#b42318}
html.in-app .rd-acc-toggle{width:36px!important;height:20px!important;min-height:0!important;padding:0!important;border:0!important;box-shadow:none!important}
html.in-app .rd-account-menu.rd-acc{color:var(--ink,#1d2433)}
html.in-app .rd-acc-row,html.in-app .rd-acc-item{color:inherit!important}
/* دائرة البنك في بطاقة المنشأة كانت تغطّي اسم البنك: تجلس على حدّ البطاقة العلوي */
html.in-app .org-card{overflow:visible!important}
html.in-app .org-card>.t6-bank{top:-14px;inset-inline-end:16px;box-shadow:0 0 0 3px var(--rd-surface,#fff),0 4px 10px rgba(20,38,58,.15)}
/* ===== جولة الأزرار الأخيرة (المالك من جواله، ١٤ أكتوبر ليلًا) ===== */
/* عدّاد الشريط السفلي: على زاوية الدائرة، لا فوقها (قاعدة القائمة الجانبية كانت تصيبه) */
html.in-app #dashboard-view.rd-shell .mobile-bottom-nav button[data-nav]>.nav-count{top:2px!important;inset-inline-start:auto!important;inset-inline-end:calc(50% - 26px)!important;border:2px solid var(--rd-surface,#fff)}
/* أزرار الشريط العلوي كلها دوائر (زرّ الالتقاط كان مربّعًا) */
html.in-app #dashboard-view.rd-shell .page-toolbar button:not(.rd-account-btn):not(.toolbar-profile){border-radius:50%!important}
/* كل زرّ رئيسيّ خارج عائلة rd-btn: «ب» بلون القسم بدل الكحلي؛ والثانوي «ج» */
html.in-app #dashboard-view.rd-shell .primary-button:not(.rd-btn):not(:disabled){background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 10%,var(--rd-surface,#fff))!important;color:var(--t6-sc,#2f6f9f)!important;border:1px solid color-mix(in srgb,var(--t6-sc,#2f6f9f) 30%,transparent)!important;border-radius:12px!important;box-shadow:none!important}
html.in-app #dashboard-view.rd-shell .primary-button:not(.rd-btn):not(:disabled):hover{background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 16%,var(--rd-surface,#fff))!important}
html.in-app #dashboard-view.rd-shell .primary-button:not(.rd-btn) svg{stroke:currentColor}
html.in-app #dashboard-view.rd-shell .secondary-button:not(.rd-btn){background:var(--rd-surface,#fff)!important;color:inherit!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:10px!important;box-shadow:none!important}
/* تبويبا المستند في التصنيف: المختار بلون القسم لا كحليّ */
html.in-app .rd-shell .classify-doc-tabs,html.in-app.rd-shell .classify-doc-tabs{border-radius:999px;padding:3px;gap:3px;background:var(--rd-surface-2,#f4f6f9)}
html.in-app .classify-doc-tabs button{border-radius:999px!important;background:transparent!important;color:inherit!important}
html.in-app .classify-doc-tabs button.is-on{background:var(--rd-surface,#fff)!important;color:var(--t6-sc,#1f9aa5)!important;box-shadow:0 1px 3px rgba(20,38,58,.12);font-weight:700}
/* بطاقات حركات التصنيف بانحناء صناديق التصميم الجديد، وشريط البنك صار دائرةً بلونه */
html.in-app .classify-pick{border-radius:16px!important;padding:12px 14px!important;padding-inline-end:48px!important}
html.in-app .classify-pick::before{inset-block:auto!important;top:12px!important;inset-inline-start:auto!important;inset-inline-end:12px;width:28px!important;height:28px!important;border-radius:50%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 10 12 4l9 6M5 10v8M9 10v8M15 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E") center/14px no-repeat,var(--classify-bank-stripe,var(--classify-bank-accent,#3d8bd6))!important}
html.in-app .classify-pick.is-picked{border-color:var(--t6-sc,#1f9aa5)!important;background:color-mix(in srgb,var(--t6-sc,#1f9aa5) 7%,var(--rd-surface,#fff))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--t6-sc,#1f9aa5) 12%,transparent)!important}
/* مفتاح «إخفاء الصورة» بشكل الآيفون */
html.in-app .rd-acc-switch{position:relative}
html.in-app .rd-acc-switch .rd-acc-toggle{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;min-height:0!important;pointer-events:none}
html.in-app .rd-acc-sw{flex:none;width:44px;height:26px;border-radius:999px;background:#d1d5db;position:relative;transition:background .2s}
html.in-app .rd-acc-sw::after{content:"";position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:right .2s}
html.in-app .rd-acc-toggle:checked+.rd-acc-sw{background:#34c759}
html.in-app .rd-acc-toggle:checked+.rd-acc-sw::after{right:20px}
html.in-app .rd-acc-toggle:disabled+.rd-acc-sw{opacity:.45}
html.in-app .rd-acc-toggle:focus-visible+.rd-acc-sw{outline:2px solid #2f6f9f;outline-offset:2px}
html.in-app #dashboard-view .t6-seg>button.t6-seg-btn{flex:1 1 140px!important;width:auto!important;height:auto!important;min-height:40px!important;margin:0!important;padding:5px 12px 5px 6px!important;border-radius:12px!important;border:1px solid var(--rd-line,#e4e6ea)!important;background:var(--rd-surface,#fff)!important;color:inherit!important;box-shadow:none!important;justify-content:flex-start!important;font-size:13px!important}
html.in-app #dashboard-view .t6-seg>button.t6-seg-btn.is-on{border-color:color-mix(in srgb,var(--t6-sc,#2f6f9f) 45%,transparent)!important;background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 9%,var(--rd-surface,#fff))!important;color:var(--t6-sc,#2f6f9f)!important}
/* القوائم القصيرة أزرارًا بأيقونة (التطبيق الموحّد) */
html.in-app select.t6-seg-src{display:none!important}
html.in-app .t6-seg{display:flex!important;flex-wrap:wrap;gap:8px;width:100%}
html.in-app .t6-seg[hidden]{display:none!important}
html.in-app .t6-seg-btn{display:inline-flex!important;align-items:center;gap:8px;text-align:start;cursor:pointer;line-height:1.35;font-weight:600}
html.in-app .t6-seg-ic{width:28px!important;height:28px!important;border-radius:50%;flex:none;display:grid!important;place-items:center;background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 14%,transparent);color:var(--t6-sc,#2f6f9f)}
html.in-app .t6-seg-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.in-app .t6-seg-btn.is-on{font-weight:700}
html.in-app .t6-seg-btn.is-on .t6-seg-ic{background:var(--t6-sc,#2f6f9f);color:#fff}
html.in-app .t6-seg-btn:disabled{opacity:.5;cursor:default}
/* التاريخ بدل الساعة على الجوال (المالك ١٥ أكتوبر ٢٠٢٦: الساعة في الجوال نفسه) */
.rd-when-short{display:none}
@media (max-width:760px){
html.in-app #dashboard-view.rd-shell .rd-when-short{display:inline;font-weight:700;white-space:nowrap;padding-inline-end:6px}
html.in-app #dashboard-view.rd-shell .rd-when-time,html.in-app #dashboard-view.rd-shell .rd-when-hijri{display:none!important}
}
/* ===== نموذج الفاتورة (المالك ١٥ أكتوبر ٢٠٢٦) ===== */
html.in-app details.optional-invoice-fields{display:none!important}
html.in-app .amount-confirmation{background:var(--rd-surface-2,#f4f6f9)!important;border:1px solid var(--rd-line,#e4e6ea)!important}
html.in-app #dashboard-view.rd-shell :is(#invoice-submit,#no-invoice-submit){background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 12%,var(--rd-surface,#fff))!important;color:var(--t6-sc,#2f6f9f)!important;border:1px solid color-mix(in srgb,var(--t6-sc,#2f6f9f) 35%,transparent)!important;border-radius:14px!important;box-shadow:none!important}
html.in-app #dashboard-view.rd-shell :is(#invoice-submit,#no-invoice-submit)>.rd-btn-icon{width:32px!important;height:32px!important;border-radius:50%!important;border:0!important;background:var(--t6-sc,#2f6f9f)!important;color:#fff!important}
html.in-app #dashboard-view.rd-shell .cancel-capture-button{background:var(--rd-surface,#fff)!important;color:#b42318!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:14px!important;box-shadow:none!important}
/* خيارات الأزرار: أعلى قليلًا، والمختار وحده بلونه والبقية باهتة، ووميض خفيف عند الضغط */
html.in-app #dashboard-view .t6-seg>button.t6-seg-btn{min-height:48px!important}
html.in-app .t6-seg:has(.is-on)>.t6-seg-btn:not(.is-on){opacity:.45}
html.in-app .t6-seg-btn.t6-flash{animation:t6flash .7s ease-out}
@keyframes t6flash{0%{outline:3px solid color-mix(in srgb,var(--t6-sc,#2f6f9f) 50%,transparent);outline-offset:0}100%{outline:3px solid transparent;outline-offset:9px}}
/* المربع المختار في شريط الحالات: بلون دائرته نفسها بدل الخط الكحلي تحته (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app #dashboard-view .t6-tile:is(.is-active,.active,[aria-pressed="true"],[aria-selected="true"]){border-bottom-color:transparent!important;border-bottom-width:1px!important;
background:color-mix(in srgb,var(--c) 9%,var(--rd-surface,#fff))!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent)!important;border-radius:16px!important}
html.in-app #dashboard-view .t6-tile:is(.is-active,.active,[aria-pressed="true"],[aria-selected="true"])::after{display:none!important}
html.in-app #dashboard-view .t6-tile:is(.is-active,.active,[aria-pressed="true"],[aria-selected="true"]) > :is(small,span:not(:has(svg))){color:var(--c)!important;font-weight:700}
/* حقل التاريخ: لا يخرج عن صندوقه على الآيفون، والتاريخ في وسطه أكبر قليلًا (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app input[type="date"]{display:block;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;-webkit-appearance:none;appearance:none;text-align:center;font-size:17px;font-weight:600}
html.in-app input[type="date"]::-webkit-date-and-time-value{text-align:center}
html.in-app .house-close{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:10px!important;display:inline-grid!important;place-items:center;border:1px solid var(--rd-line,#e4e6ea)!important;background:var(--rd-surface,#fff)!important;color:var(--muted,#5b6475)!important;font-size:0!important}
html.in-app .house-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
html.in-app .house-close:hover{border-color:#b42318!important;color:#b42318!important;background:#fef3f2!important}
/* النوافذ المنبثقة خارج #dashboard-view: نفس قاعدة «ب» و«ج» للأزرار */
html.in-app :is(.referral-overlay,[role="dialog"]) .primary-button:not(.rd-btn):not(:disabled){background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 12%,var(--rd-surface,#fff))!important;color:var(--t6-sc,#2f6f9f)!important;border:1px solid color-mix(in srgb,var(--t6-sc,#2f6f9f) 35%,transparent)!important;border-radius:14px!important;box-shadow:none!important;font-weight:700}
html.in-app :is(.referral-overlay,[role="dialog"]) .secondary-button:not(.rd-btn){background:var(--rd-surface,#fff)!important;color:inherit!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:12px!important;box-shadow:none!important}
/* أزرار الخيارات شبكةً: الثالث لا يتمدّد وحده بعرض السطر (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app .t6-seg{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
html.in-app #dashboard-view .t6-seg>button.t6-seg-btn{flex:none!important;width:100%!important}
/* مسافة بين الحقل وعنوان الحقل الذي بعده: كانت الأسطر ملتصقة */
html.in-app #dashboard-view :is(input,textarea,select,.t6-seg,.field-help,.field-note)+label{margin-top:14px!important}
/* مسافة الحقول في كل النماذج (شاشة الموظف ليست داخل #dashboard-view فلم تصلها القاعدة السابقة) */
html.in-app :is(input,textarea,select,.t6-seg,.field-help,.field-note,#handover-fields)+label{margin-top:16px!important}
html.in-app :is(#no-invoice-details,#invoice-form,#withdrawal-overlay) label{margin-bottom:6px!important;display:block}
/* ===== مصروف بدون فاتورة — النموذج المختصر (التطبيق الموحّد) ===== */
html.in-app #no-invoice-details.t6-short :is(label[for="no-invoice-category"],#no-invoice-category,label[for="no-invoice-reason"],#no-invoice-reason,#no-invoice-reason + .t6-seg,#no-invoice-reason-detail-wrap,.no-invoice-proof-field,label[for="no-invoice-notes"],#no-invoice-notes,details.optional-invoice-fields,label[for="handover-phone"],#handover-phone,.no-invoice-banner){display:none!important}
html.in-app #no-invoice-details.t6-short.is-handover :is(label[for="no-invoice-location"],#no-invoice-location){display:none!important}
/* صندوق التوقيع مميّز: إطارٌ بلون القسم وخلفيةٌ خفيفة وعنوانٌ بدائرة قلم */
html.in-app .t6-sign{margin-top:18px;padding:14px;border-radius:18px;border:2px solid color-mix(in srgb,var(--t6-sc,#d6567f) 45%,transparent);background:color-mix(in srgb,var(--t6-sc,#d6567f) 6%,var(--rd-surface,#fff))}
html.in-app .t6-sign[hidden]{display:none!important}
html.in-app .t6-sign .handover-sign-label{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--t6-sc,#d6567f)}
html.in-app .t6-sign .handover-sign-label::before{content:"";width:28px;height:28px;border-radius:50%;flex:none;background:var(--t6-sc,#d6567f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16zM14 6l4 4'/%3E%3C/svg%3E") center/14px no-repeat}
html.in-app .t6-sign .handover-pad{background:#fff;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--t6-sc,#d6567f) 40%,transparent);margin-top:8px}
/* ===== إضافة مصروف — الفكرة «أ» (المالك ١٥ أكتوبر ٢٠٢٦) =====
نوع المستند مربعان جنبًا إلى جنب بدائرة ملوّنة؛ المختار بإطاره وعلامة ✓ والآخر باهت.
تحتهما زرّ تصوير كبير بدائرة، والرفع سطرٌ أصغر. */
html.in-app .proof-type-choice{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;border:0!important;padding:0!important;margin:0 0 4px!important}
html.in-app .proof-type-choice legend{grid-column:1/-1;font-size:12.5px;font-weight:700;color:var(--muted,#5b6475);margin-bottom:8px;padding:0}
html.in-app .proof-type-option{--k:#e8833a;position:relative;display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 8px 14px!important;border-radius:18px!important;border:1px solid var(--rd-line,#e4e6ea)!important;background:var(--rd-surface,#fff)!important;cursor:pointer;transition:opacity .15s,border-color .15s}
html.in-app .proof-type-option:nth-of-type(2){--k:#7b5bd6}
html.in-app .proof-type-option input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
html.in-app .proof-type-option .proof-type-icon{box-sizing:content-box;width:24px!important;height:24px!important;padding:14px;border-radius:50%;background:var(--k);stroke:#fff!important;fill:none;box-shadow:0 6px 14px color-mix(in srgb,var(--k) 30%,transparent)}
html.in-app .proof-type-option span{display:grid;gap:3px}
html.in-app .proof-type-option b{font-size:14px}
html.in-app .proof-type-option small{font-size:11px;color:var(--muted,#5b6475);line-height:1.5}
html.in-app .proof-type-option:has(input:checked){border:2px solid var(--k)!important;background:color-mix(in srgb,var(--k) 7%,var(--rd-surface,#fff))!important}
html.in-app .proof-type-option:has(input:checked)::after{content:"✓";position:absolute;top:8px;inset-inline-start:8px;width:22px;height:22px;border-radius:50%;background:var(--k);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
html.in-app .proof-type-choice:has(input:checked) .proof-type-option:not(:has(input:checked)){opacity:.5}
html.in-app .capture-actions{display:grid!important;gap:10px!important;margin-top:14px}
html.in-app .capture-actions .camera-action{display:flex!important;flex-direction:column;align-items:center;gap:4px;padding:18px 12px!important;border-radius:18px!important;border:1px solid var(--rd-line,#e4e6ea)!important;background:var(--rd-surface,#fff)!important;color:inherit!important;box-shadow:none!important}
html.in-app .capture-actions .camera-action::before{content:"";width:66px;height:66px;border-radius:50%;margin-bottom:8px;background:#e8833a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h4l2-2h6l2 2h4v12H3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/30px no-repeat;box-shadow:0 8px 18px rgb(232 131 58 / .35)}
html.in-app .capture-actions .camera-action > svg,html.in-app .capture-actions .camera-action > .rd-btn-icon{display:none!important}
html.in-app .capture-actions .camera-action strong{font-size:15px}
html.in-app .capture-actions .camera-action span{font-size:11.5px;color:var(--muted,#5b6475)}
html.in-app .capture-actions .file-action{display:grid!important;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-align:start;padding:10px 12px!important;border-radius:14px!important;border:1px solid var(--rd-line,#e4e6ea)!important;background:var(--rd-surface,#fff)!important;color:inherit!important;box-shadow:none!important}
html.in-app .capture-actions .file-action::before{content:"";grid-row:span 2;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,#e8833a 15%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8833a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 20h16'/%3E%3C/svg%3E") center/15px no-repeat}
html.in-app .capture-actions .file-action > svg,html.in-app .capture-actions .file-action > .rd-btn-icon{display:none!important}
html.in-app .capture-actions .file-action strong{font-size:13px}
html.in-app .capture-actions .file-action span{font-size:11px;color:var(--muted,#5b6475)}
html.in-app .capture-actions{grid-template-columns:1fr!important}
html.in-app .capture-actions :is(.camera-action,.file-action)::after{display:none!important;content:none!important}
html.in-app .capture-actions :is(.camera-action,.file-action) > :not(strong):not(span){display:none!important}
html.in-app .capture-actions .file-action > span{grid-column:2}
html.in-app .capture-actions .rd-capture-icon{display:none!important}
/* المربعان جنبًا إلى جنب على الجوال أيضًا، وأزرار التصوير تختفي في «بدون فاتورة» (hidden كانت تغلبها display:grid) */
html.in-app .proof-type-choice{grid-template-columns:1fr 1fr!important}
html.in-app .proof-type-option{width:auto!important;min-width:0!important;margin:0!important}
html.in-app .capture-actions[hidden],html.in-app .upload-hint[hidden]{display:none!important}
/* ===== «فواتيري» للموظف: سطرٌ مضغوط بدائرة الحالة (المالك ١٥ أكتوبر ٢٠٢٦) ===== */
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv{border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:16px!important;background:var(--rd-surface,#fff)!important;margin-bottom:10px!important;box-shadow:none!important;border-inline-start-width:1px!important}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;padding:12px!important;list-style:none}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary::-webkit-details-marker{display:none}
html.in-app .t6-inv-ic{grid-column:1!important;grid-row:1/span 3!important;width:40px;height:40px;border-radius:50%;background:var(--s);color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>span:nth-of-type(2){grid-column:2!important;grid-row:1!important;display:block}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>span:nth-of-type(2)>strong{display:none!important}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>span:nth-of-type(2)>small{font-size:14px!important;font-weight:800;color:inherit!important}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>span:nth-of-type(3){grid-column:2!important;grid-row:2!important;display:flex;gap:6px;font-size:11.5px;color:var(--muted,#5b6475)}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>span:nth-of-type(3)>strong{font-weight:400!important;font-size:11.5px!important}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>span:nth-of-type(3)>strong::after{content:" ·"}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>time{grid-column:2!important;grid-row:3!important;font-size:11px;color:var(--muted,#5b6475)}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>.invoice-table-amount{grid-column:3!important;grid-row:1/span 3!important;font-size:17px!important;font-weight:800;white-space:nowrap}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>.invoice-compact-badges{grid-column:1/span 2!important;grid-row:4!important;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>.invoice-review-toggle{grid-column:3!important;grid-row:4!important;margin-top:8px;justify-self:end}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv .status-badge{border-radius:999px!important;border:0!important;background:color-mix(in srgb,var(--s) 13%,transparent)!important;color:var(--s)!important}
html.in-app #dashboard-view:not(.is-non-employee) details.t6-inv>summary>.t6-inv-ic{grid-column:1!important;grid-row:1/span 3!important;align-self:center}
/* لا سحب لأسفل عند أعلى الصفحة: الشريط العلوي كان ينزل ويكشف فراغًا (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app,html.in-app body{overscroll-behavior-y:none}
/* مربعات الحالات على الجوال: نفس الشكل، كلها في سطرٍ واحد جنب بعض */
@media (max-width:760px){
html.in-app .t6-strip{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none!important;gap:6px!important}
html.in-app .t6-strip>.t6-tile{min-width:0!important;width:auto!important;padding:10px 2px 8px!important;gap:2px!important;border-inline:0!important}
html.in-app .t6-strip>.t6-tile svg.t6-ic,html.in-app .t6-strip>.t6-tile .t6-ic svg{width:15px!important;height:15px!important}
html.in-app .t6-strip>.t6-tile svg.t6-ic{padding:8px!important}
html.in-app .t6-strip>.t6-tile>:has(>svg.t6-ic){margin-bottom:2px!important}
html.in-app .t6-strip>.t6-tile :is(strong,b){font-size:18px!important}
html.in-app .t6-strip>.t6-tile :is(small,span:not(:has(svg))){font-size:9.5px!important;line-height:1.3!important;white-space:normal;word-break:break-word}
}
/* ===== جولة ١٥ أكتوبر (من جوال الموظف) ===== */
/* المربع المختار فوق خطوط الفصل بين المربعات */
html.in-app .t6-tile:is(.is-active,.active,[aria-pressed="true"],[aria-selected="true"]){position:relative;z-index:2}
@media (max-width:760px){
html.in-app .t6-strip>.t6-tile::before,html.in-app .t6-strip>.t6-tile::after{display:none!important}
html.in-app .t6-strip>.t6-tile:not(:is(.is-active,.active,[aria-pressed="true"],[aria-selected="true"])){border:0!important;box-shadow:none!important}
}
/* «مصروف يحتاج تعديلك»: مسافةٌ عن الصندوق فوقه، وأيقونة تنبض بالأحمر كـ«يحتاج تدخّلك» */
html.in-app #employee-todo{margin-top:14px!important;border-color:#f4c7c2!important;background:linear-gradient(270deg,#fdecea,var(--rd-surface,#fff))!important}
html.in-app #employee-todo>h4{display:flex;align-items:center;gap:10px;color:#b42318!important}
html.in-app #employee-todo>h4::before{content:"";position:relative;width:30px;height:30px;border-radius:50%;flex:none;background:#d6453d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5h.01'/%3E%3C/svg%3E") center/16px no-repeat;animation:t6redPulse 1.8s infinite}
@keyframes t6redPulse{0%{box-shadow:0 0 0 0 rgb(214 69 61 / .5)}100%{box-shadow:0 0 0 10px rgb(214 69 61 / 0)}}
/* شريط تصفية الفواتير على الجوال وحده: الحالة ومن/إلى في سطر، والبحث في السطر التالي؛ الكمبيوتر سطرٌ واحد كما كان.
(كان نصٌّ خارج التعليق هنا فأسقط القاعدة كلها — المتصفح يتجاهل ما بعد خطأ الصياغة.) */
@media (max-width:760px){
html.in-app .invoice-filter-bar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)!important;gap:8px!important}
html.in-app .invoice-filter-bar>label{grid-column:auto!important;min-width:0}
html.in-app .invoice-filter-bar>.invoice-search{grid-column:1/-1!important;order:3}
html.in-app .invoice-filter-bar>label:has(#invoice-employee-filter){grid-column:1/-1!important;order:4}
html.in-app .invoice-filter-bar>label:has(#invoice-status-filter){order:1}
html.in-app .invoice-filter-bar>.invoice-date-range{order:2}
html.in-app .invoice-date-fields{display:flex!important;align-items:center;gap:4px}
html.in-app .invoice-date-fields input[type="date"]{font-size:12px!important;min-width:0!important;padding:0 4px!important;height:40px}
}
/* وسم «بدون فاتورة / فاتورة» بشكل وسم الحالة نفسه */
html.in-app .proof-badge{display:inline-flex!important;align-items:center;border-radius:999px!important;border:0!important;padding:2px 10px!important;font-size:11px!important;font-weight:700!important;line-height:1.6;background:color-mix(in srgb,#5b6475 12%,transparent)!important;color:#5b6475!important;box-shadow:none!important}
html.in-app .proof-badge.proof-none{background:color-mix(in srgb,#4a55a2 12%,transparent)!important;color:#4a55a2!important}
/* الشريط السفلي للموظف: الأزرار كلها عادية كـ«الرئيسية»؛ المختار إطاره بلونه والبقية باهتة، ووميض «إضافة مصروف» أخفّ */
@media (max-width:760px){
html.in-app #dashboard-view.rd-shell[data-scope="employee"] .mobile-bottom-nav [data-nav="custody"]{flex:1 1 0!important;min-height:0!important;border:1px solid var(--rd-line,#e4e6ea)!important;background:var(--rd-surface,#fff)!important;color:inherit!important;font-size:inherit!important;animation:t6softGlow 2.6s ease-in-out infinite!important}
html.in-app #dashboard-view.rd-shell .mobile-bottom-nav button[data-nav]{border:1px solid var(--rd-line,#e4e6ea)!important;background:var(--rd-surface,#fff)!important;opacity:.55}
html.in-app #dashboard-view.rd-shell .mobile-bottom-nav button[data-nav]:is(.is-active,[aria-current="page"]){opacity:1;border:2px solid var(--t6-sc,#2f6f9f)!important;background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 7%,var(--rd-surface,#fff))!important}
}
@keyframes t6softGlow{0%,100%{box-shadow:0 0 0 0 rgb(74 85 162 / .22)}50%{box-shadow:0 0 0 4px rgb(74 85 162 / 0)}}
@media (max-width:760px){
html.in-app #dashboard-view.rd-shell .invoice-filter-bar>label>.sr-only{display:none!important}
html.in-app #dashboard-view.rd-shell .invoice-filter-bar>label:has(#invoice-status-filter){order:1!important}
html.in-app #dashboard-view.rd-shell .invoice-filter-bar>.invoice-date-range{order:2!important}
html.in-app #dashboard-view.rd-shell .invoice-filter-bar>.invoice-search{order:3!important;grid-column:1/-1!important}
/* «إضافة مصروف» مرّةً ونصفًا من جاريه، لا أعرض */
html.in-app #dashboard-view.rd-shell[data-scope="employee"] .mobile-bottom-nav [data-nav="custody"]{flex:1.5 1 0!important;max-width:none!important}
html.in-app #dashboard-view.rd-shell[data-scope="employee"] .mobile-bottom-nav button[data-nav]:not([data-nav="custody"]){flex:1 1 0!important}
}
/* «يحتاج تدخّلك الآن» على الجوال — «ب»: شريطٌ أحمر قصير يفتح قائمة (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app .home-m-alerts{display:none}
@media (max-width:760px){
html.in-app .home-hero{display:none!important}
html.in-app .home-m-alerts{display:block;background:var(--rd-surface,#fff);border:1px solid #f4c7c2;border-radius:18px;overflow:hidden}
html.in-app .home-m-bar{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;background:#fdecea;color:#b42318;font:inherit;font-weight:800;font-size:14px;text-align:start;cursor:pointer}
html.in-app .home-m-ic{width:32px;height:32px;border-radius:50%;background:#d6453d;display:grid;place-items:center;flex:none;animation:t6redPulse 1.8s infinite}
html.in-app .home-m-ic svg{stroke:#fff;fill:none;stroke-width:2}
html.in-app .home-m-bar b{flex:1}
html.in-app .home-m-bar em{font-style:normal;background:#d6453d;color:#fff;border-radius:999px;padding:0 9px;font-size:12px}
html.in-app .home-m-chev{width:8px;height:8px;border:solid #b42318;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg);transition:transform .2s;margin-inline:4px 2px}
html.in-app .home-m-alerts.is-open .home-m-chev{transform:rotate(135deg)}
html.in-app .home-m-list[hidden]{display:none}
html.in-app .home-m-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-top:1px solid #f0f2f5;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}
html.in-app .home-m-row.is-more{display:none}
html.in-app .home-m-list.show-all .home-m-row.is-more{display:flex}
html.in-app .home-m-rowic{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,transparent);display:grid;place-items:center;flex:none}
html.in-app .home-m-rowic svg{stroke:var(--c);fill:none;stroke-width:2}
html.in-app .home-m-txt{flex:1;min-width:0;display:grid}
html.in-app .home-m-txt b{font-size:13px}
html.in-app .home-m-txt small{font-size:11px;color:var(--muted,#5b6475);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.in-app .home-m-row em{font-style:normal;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);white-space:nowrap}
html.in-app .home-m-more{width:100%;padding:10px;border:0;border-top:1px solid #f0f2f5;background:none;font:inherit;font-size:12.5px;font-weight:700;color:#2f6f9f;cursor:pointer}
}
/* سطر «هذه فواتير الموظفين بحالاتها…» شرحٌ لا يحتاجه أحد (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app #invoice-summary-copy{display:none!important}
/* «مصروف يحتاج تعديلك» في الليلي: التدرّج من لون السطح لا من الأبيض */
html.in-app #employee-todo{background:linear-gradient(270deg,color-mix(in srgb,#d6453d 12%,var(--rd-surface,#fff)),var(--rd-surface,#fff))!important;border-color:color-mix(in srgb,#d6453d 35%,transparent)!important}
html[data-theme="dark"].in-app #employee-todo>h4{color:#f3a49c!important}
/* مربعٌ أخفاه منطق الصفحة (مثل «بانتظار المراجعة» عند الموظف) يبقى مخفيًّا رغم display المربعات */
html.in-app .t6-tile[hidden]{display:none!important}
/* فجوة فوق الشريط العلوي عند التمرير على الجوال (المالك ١٥ أكتوبر ٢٠٢٦): حشوُ body لمنطقة الساعة كان
يترك شريطًا يمرّ تحته المحتوى. الآن الشريط نفسه يغطي منطقة الساعة ويلتصق بأعلى الشاشة. */
@media (display-mode: standalone){
html.in-app body{padding-top:0!important}
}
@media (max-width:760px){
html.in-app #dashboard-view.rd-shell .page-toolbar{position:sticky!important;top:0!important;padding-top:calc(env(safe-area-inset-top) + 8px)!important;margin-top:0!important}
}
/* ===== بطاقة المنشأة في عهدة الموظف — «ب» (المالك ١٥ أكتوبر ٢٠٢٦) ===== */
html.in-app #my-card.is-compact .my-card-heading h3{font-size:15px!important;margin-bottom:8px!important}
html.in-app .my-card-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--rd-line,#e4e6ea);border-radius:16px;background:var(--rd-surface,#fff);color:inherit;font:inherit;text-align:start;cursor:pointer}
html.in-app #my-card.is-open .my-card-row{border-color:color-mix(in srgb,#2f6f9f 40%,transparent)}
html.in-app .my-card-bank{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:0 4px 10px rgb(20 38 58 / .15)}
html.in-app .my-card-bank::after{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 10 12 4l9 6M5 10v8M9 10v8M15 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E") center/contain no-repeat}
html.in-app .my-card-text{flex:1;min-width:0;display:grid;gap:3px}
html.in-app .my-card-text b{font-size:14px}
html.in-app .my-card-text small{justify-self:start;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 9px;background:color-mix(in srgb,#2fa36b 14%,transparent);color:#1f7a4d}
html[data-theme="dark"].in-app .my-card-text small{color:#7fd3a6}
html.in-app .my-card-bal{display:grid;text-align:left}
html.in-app .my-card-bal small{font-size:10.5px;color:var(--muted,#5b6475)}
html.in-app .my-card-bal b{font-size:15px;white-space:nowrap}
html.in-app .my-card-chev{width:28px;height:28px;border-radius:50%;border:1px solid var(--rd-line,#e4e6ea);flex:none;position:relative}
html.in-app .my-card-chev::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border:solid var(--muted,#5b6475);border-width:0 0 1.6px 1.6px;transform:translateY(-2px) rotate(-45deg);transition:transform .2s}
html.in-app #my-card.is-open .my-card-chev::after{transform:translateY(1px) rotate(135deg)}
html.in-app .my-card-body[hidden]{display:none!important}
html.in-app .my-card-body{display:grid;gap:10px;margin-top:10px}
html.in-app .my-card-body>p{margin:0;font-size:12px;color:var(--muted,#5b6475)}
/* وجه البطاقة «ب»: أبيض هادئ بشريط البنك أعلاه — وفي الليلي كحليّ داكن */
html.in-app #my-card .org-card-face{background:var(--rd-surface,#fff)!important;color:inherit!important;border:1px solid var(--rd-line,#e4e6ea);border-radius:16px!important;box-shadow:none!important;position:relative;overflow:hidden;padding-top:18px!important}
html.in-app #my-card .org-card-face>.org-card-stripe{position:absolute!important;top:0;left:0;right:0;bottom:auto!important;height:5px!important}
html.in-app #my-card .org-card-chip{display:none!important}
html.in-app #my-card .org-card-last4{color:#0a2a9e}
html[data-theme="dark"].in-app #my-card .org-card-face{background:#1b2840!important;border-color:#2c3a55}
html[data-theme="dark"].in-app #my-card .org-card-last4{color:#9fb6ff}
html.in-app #my-card .my-card-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
/* ===== شاشة تحديد زوايا الفاتورة بتصميم «٦» (المالك ١٥ أكتوبر ٢٠٢٦): بيضاء في النهاري، داكنة في الليلي ===== */
html.in-app .boundary-overlay{background:color-mix(in srgb,#0f1b2d 45%,transparent)!important}
html.in-app .boundary-dialog{background:var(--rd-surface,#fff)!important;color:var(--rd-ink,#1d2433)!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:22px!important;box-shadow:0 18px 40px rgb(20 38 58 / .18)!important}
html.in-app .boundary-head h2{color:var(--rd-ink,#1d2433)!important}
html.in-app .boundary-head p{color:var(--muted,#5b6475)!important}
html.in-app .boundary-count{border-radius:999px!important;border:0!important;background:color-mix(in srgb,#5b6475 12%,transparent)!important;color:#5b6475!important;font-weight:700}
html.in-app .boundary-count.is-complete{background:color-mix(in srgb,#2fa36b 14%,transparent)!important;color:#1f7a4d!important}
html[data-theme="dark"].in-app .boundary-count.is-complete{color:#7fd3a6!important}
html.in-app .boundary-canvas{background:var(--rd-surface-2,color-mix(in srgb,#5b6475 8%,var(--rd-surface,#fff)))!important;border-radius:14px}
html.in-app .boundary-tools button,html.in-app .boundary-actions .boundary-secondary{background:var(--rd-surface,#fff)!important;color:inherit!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:12px!important;box-shadow:none!important;font-weight:700}
html.in-app .boundary-actions .boundary-primary{background:color-mix(in srgb,var(--t6-sc,#2f6f9f) 12%,var(--rd-surface,#fff))!important;color:var(--t6-sc,#2f6f9f)!important;border:1px solid color-mix(in srgb,var(--t6-sc,#2f6f9f) 35%,transparent)!important;border-radius:14px!important;box-shadow:none!important;font-weight:800}
html.in-app .boundary-actions .boundary-primary:disabled{opacity:.5}
/* صندوق «إجمالي الفاتورة» يتبع الليلي، وبينه وبين طريقة الدفع مسافة */
html.in-app .amount-confirmation{background:color-mix(in srgb,#5b6475 6%,var(--rd-surface,#fff))!important;border:1px solid var(--rd-line,#e4e6ea)!important;color:inherit!important;margin-top:18px!important}
html.in-app .amount-confirmation label,html.in-app .amount-confirmation small{color:inherit!important}
html.in-app .amount-confirmation small{opacity:.7}
html.in-app #invoice-edit-amount{background:var(--rd-surface,#fff)!important;color:inherit!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:12px!important}
/* الشعار الشفاف: بلا مربعٍ أبيض ولا إطار (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app img.t6-logo,.anfal-shell img.t6-logo{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;object-fit:contain}
@media (max-width:760px){html.in-app #dashboard-view.rd-shell .workspace-header > img.t6-logo{width:34px!important;height:34px!important}}
/* ===== ملخص عهدة الموظف — «ب» بمربعات منفصلة (المالك ١٥ أكتوبر ٢٠٢٦) ===== */
html.in-app #dashboard-view[data-scope="employee"] .summary-content{display:grid!important;gap:10px!important}
html.in-app #dashboard-view[data-scope="employee"] #summary-donut{background:none!important;border:0!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;box-shadow:none!important;margin:0 auto!important}
html.in-app #dashboard-view[data-scope="employee"] #summary-donut::before,html.in-app #dashboard-view[data-scope="employee"] #summary-donut::after{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] .summary-center{position:static!important;inset:auto!important;transform:none!important;display:grid;justify-items:center;gap:2px;background:none!important;border:0!important;width:auto!important;height:auto!important}
html.in-app #dashboard-view[data-scope="employee"] .summary-center span{font-size:12.5px;color:var(--muted,#5b6475)}
html.in-app #dashboard-view[data-scope="employee"] .summary-center strong{font-size:30px!important;font-weight:800;color:var(--rd-ink,#1d2433)}
html.in-app #dashboard-view[data-scope="employee"] .t6-owed .summary-center strong{color:#2fa36b!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-owed .summary-center strong .is-negative,html.in-app #dashboard-view[data-scope="employee"] .t6-owed .summary-center strong.is-negative{color:#2fa36b!important}
html.in-app .t6-dist{display:flex;gap:3px;height:10px;border-radius:999px;overflow:hidden;margin:2px 4px 6px}
html.in-app .t6-dist i{display:block;min-width:4px}
html.in-app #dashboard-view[data-scope="employee"] .summary-details{display:grid!important;gap:8px!important;border:0!important;background:none!important;padding:0!important}
html.in-app #dashboard-view[data-scope="employee"] .summary-details>article{display:flex!important;align-items:center;gap:10px;padding:11px 12px!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:16px!important;background:var(--rd-surface,#fff)!important;margin:0!important}
html.in-app #dashboard-view[data-scope="employee"] .summary-details>article>i{width:36px!important;height:36px!important;border-radius:50%!important;display:grid!important;place-items:center;flex:none;background:var(--source-color)!important}
html.in-app #dashboard-view[data-scope="employee"] .summary-details>article>i svg{width:17px;height:17px;fill:none}
html.in-app #dashboard-view[data-scope="employee"] .summary-details>article>i svg path{stroke:#fff!important}
html.in-app #dashboard-view[data-scope="employee"] .summary-details>article>span{flex:1;min-width:0;display:grid;font-weight:700;font-size:13.5px}
html.in-app #dashboard-view[data-scope="employee"] .summary-details>article>span small{font-weight:400;font-size:11px;color:var(--muted,#5b6475)}
html.in-app #dashboard-view[data-scope="employee"] .summary-details>article>strong{font-size:15px;font-weight:800;white-space:nowrap}
html.in-app #dashboard-view[data-scope="employee"] .summary-details>article.t6-neg>strong{color:#d6453d}
/* رئيسية الموظف (المالك ١٥ أكتوبر ٢٠٢٦): البطاقة في صندوقها، وملخص العهدة في صندوقٍ منفصل تحته؛
بلا سطر الشرح، والمبلغ في صندوقٍ بحدود. */
html.in-app #dashboard-view[data-scope="employee"] #summary-grid{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;display:grid;gap:14px}
html.in-app #dashboard-view[data-scope="employee"] #my-card{background:var(--rd-surface,#fff);border:1px solid var(--rd-line,#e4e6ea);border-radius:18px;padding:14px;margin:0!important}
html.in-app #dashboard-view[data-scope="employee"] .summary-heading{background:var(--rd-surface,#fff);border:1px solid var(--rd-line,#e4e6ea);border-bottom:0;border-radius:18px 18px 0 0;padding:16px 16px 4px;margin:0!important}
html.in-app #dashboard-view[data-scope="employee"] .summary-content{background:var(--rd-surface,#fff);border:1px solid var(--rd-line,#e4e6ea);border-top:0;border-radius:0 0 18px 18px;padding:6px 14px 14px;margin-top:-14px!important}
html.in-app #dashboard-view[data-scope="employee"] #summary-heading-copy{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] #summary-donut{border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:16px!important;padding:14px 22px!important;width:100%!important;max-width:320px;background:var(--rd-surface,#fff)!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-owed #summary-donut{border-color:color-mix(in srgb,#2fa36b 35%,transparent)!important;background:color-mix(in srgb,#2fa36b 6%,var(--rd-surface,#fff))!important}
/* «جارٍ المعالجة» — «ب»: الصورة تبهت، ودائرة النسبة، والخطوات */
html.in-app .boundary-stage{position:relative}
html.in-app .t6-proc{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:14px;background:color-mix(in srgb,var(--rd-surface,#fff) 70%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:14px}
html.in-app .t6-proc-ring{--p:0;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--t6-sc,#4a55a2) calc(var(--p) * 1%),color-mix(in srgb,var(--t6-sc,#4a55a2) 14%,var(--rd-surface,#fff)) 0);transition:background .4s;position:relative}
html.in-app .t6-proc-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--rd-surface,#fff)}
html.in-app .t6-proc-ring b{position:relative;font-size:24px;color:var(--t6-sc,#4a55a2)}
html.in-app .t6-proc-steps{display:grid;gap:7px;font-size:13px;background:var(--rd-surface,#fff);border-radius:14px;padding:10px 14px;box-shadow:0 6px 18px rgb(20 38 58 / .12)}
html.in-app .t6-proc-steps>div{display:flex;align-items:center;gap:8px;color:var(--muted,#5b6475)}
html.in-app .t6-proc-steps i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;background:#cfd5de;flex:none}
html.in-app .t6-proc-steps .is-done{color:inherit}
html.in-app .t6-proc-steps .is-done i{background:#2fa36b}
html.in-app .t6-proc-steps .is-now{color:var(--t6-sc,#4a55a2);font-weight:700}
html.in-app .t6-proc-steps .is-now i{background:var(--t6-sc,#4a55a2);animation:t6procPulse 1s infinite}
@keyframes t6procPulse{50%{opacity:.35}}
/* بعد رفع الفاتورة تختفي أزرار التصوير والرفع: فاتورةٌ قيد المعالجة أصلًا (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app #invoice-form:has(#file-preview > *) .capture-actions,html.in-app #invoice-form:has(#file-preview > *) .upload-hint{display:none!important}
/* ===== خطوات الرفع بعد تصوير الفاتورة (المالك ١٥ أكتوبر ٢٠٢٦) ===== */
html.in-app #invoice-upload-status.has-steps{display:grid!important;gap:10px}
html.in-app #invoice-upload-status.has-steps .scan-progress{display:none!important}
html.in-app .t6-upsteps{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
html.in-app .t6-upsteps .t6-proc-ring{width:78px;height:78px}
html.in-app .t6-upsteps .t6-proc-ring::before{inset:9px}
html.in-app .t6-upsteps .t6-proc-ring b{font-size:16px}
html.in-app .t6-upsteps .t6-proc-steps{box-shadow:none;padding:0;background:none}
/* ===== رئيسية الموظف «ب»: الملخص فوق، والبطاقة تحته، صندوقان كبيران يُقلبان بالضغط ===== */
html.in-app #dashboard-view[data-scope="employee"] #summary-grid.t6-flip{display:flex!important;flex-direction:column;gap:0}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip .summary-heading{order:1;cursor:pointer;position:relative}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip .summary-content{order:2;cursor:pointer;margin-top:0!important;min-height:30vh;display:flex!important;flex-direction:column;justify-content:center}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip #my-card{order:3;margin-top:14px!important;cursor:pointer;min-height:26vh}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip #card-return-task{order:4;margin-top:14px}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip:not(.sum-open) .summary-details,html.in-app #dashboard-view[data-scope="employee"] .t6-flip:not(.sum-open) .t6-dist{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip:not(.sum-open) #summary-donut{max-width:none!important;flex:1;display:grid!important;place-content:center;padding:24px!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip:not(.sum-open) .summary-center strong{font-size:38px!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip:not(.sum-open) .summary-content::after{content:"اضغط للتفاصيل";display:block;text-align:center;font-size:11px;color:var(--muted,#5b6475);margin-top:8px}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.sum-open #summary-donut{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.sum-open .summary-heading::after{content:"↺ رجوع";position:absolute;top:18px;inset-inline-end:16px;font-size:12px;font-weight:700;color:var(--t6-sc,#2f6f9f)}
/* البطاقة: الوجه ظاهر دائمًا، والسطر المطويّ مخفي، والأزرار بعد الضغط */
html.in-app #dashboard-view[data-scope="employee"] .t6-flip #my-card .my-card-row{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip #my-card .my-card-body{display:grid!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip #my-card .my-card-body>p{display:none}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip #my-card:not(.card-open) .my-card-actions{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip #my-card:not(.card-open)::after{content:"اضغط للسحب أو الإبلاغ";display:block;text-align:center;font-size:11px;color:var(--muted,#5b6475);margin-top:8px}
/* رئيسية الموظف (المالك ١٥ أكتوبر ٢٠٢٦): display:flex!important كان يغلب hidden فيبقى الملخص فوق كل صفحة
ويبدو التنقل واقفًا؛ والصندوق كان يضيق لأن margin:0 auto في عمود flex يقلّصه لمحتواه؛ والصفحة بلا تمرير. */
html.in-app #dashboard-view[data-scope="employee"] #summary-grid.t6-flip[hidden]{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip .summary-content{width:100%!important;max-width:none!important;margin-inline:0!important;min-height:0!important;flex:1 1 auto}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip #my-card{min-height:0!important;flex:none}
@media (max-width:760px){
html.in-app #dashboard-view[data-scope="employee"] #summary-grid.t6-flip:not([hidden]){height:calc(100dvh - 215px);overflow:hidden}
html.in-app body:has(#dashboard-view[data-scope="employee"] #summary-grid.t6-flip:not([hidden])){overflow:hidden;overscroll-behavior:none}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.sum-open .summary-content{overflow:auto}
}
/* آيفون يتجاهل overflow على body وحده: يُقفل html أيضًا، وحاوية اللوحة نفسها */
@media (max-width:760px){
html.in-app:has(#dashboard-view[data-scope="employee"] #summary-grid.t6-flip:not([hidden])){overflow:hidden!important;height:100%;overscroll-behavior:none}
html.in-app:has(#summary-grid.t6-flip:not([hidden])) body,html.in-app:has(#summary-grid.t6-flip:not([hidden])) #dashboard-view,html.in-app:has(#summary-grid.t6-flip:not([hidden])) #dashboard-view main{overflow:hidden!important;height:100dvh;touch-action:none}
html.in-app:has(#summary-grid.t6-flip:not([hidden])) .mobile-bottom-nav,html.in-app:has(#summary-grid.t6-flip:not([hidden])) #summary-grid,html.in-app:has(#summary-grid.t6-flip:not([hidden])) .rd-topbar{touch-action:manipulation}
}
/* رئيسية الموظف «ح»: الأوعية رقائق ظاهرة تحت المبلغ، وأزرار البطاقة ظاهرة؛ لا قلب ولا تلميحات ضغط */
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-content,html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-heading,html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all #my-card{cursor:default}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-content::after,html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all #my-card::after,html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .t6-dist{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all #summary-donut{padding:14px!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-center strong{font-size:32px!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-details{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:8px}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-details>article{display:flex!important;align-items:center;gap:6px;padding:6px 8px!important;min-height:0!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:10px!important;font-size:11px!important;background:var(--rd-surface,#fff)!important;box-shadow:none!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-details>article>i{width:10px!important;height:10px!important;min-width:10px;border-radius:50%!important;background:var(--source-color,#5b6475)!important;padding:0!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-details>article>i svg,html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-details>article small{display:none!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-details>article strong{margin-inline-start:auto;font-size:11.5px!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all #my-card .my-card-actions{display:grid!important}
/* عدد صفحات الفاتورة — الشكل ١: خمسة مربعات أرقام */
html.in-app .t6-pc{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 4px}
html.in-app .t6-pc button{min-height:50px;border-radius:12px;border:1px solid var(--rd-line,#e4e6ea);background:var(--rd-surface,#fff);color:var(--muted,#5b6475);font-size:18px;font-weight:800;cursor:pointer}
html.in-app .t6-pc button.on{border:2px solid #4a55a2;color:#4a55a2;background:color-mix(in srgb,#4a55a2 9%,var(--rd-surface,#fff))}
/* أثناء العمل على فاتورة: نوع المستند لا يُبدَّل (تغييره يعني البدء من جديد بالإلغاء)، فيختفي مع أزرار التصوير */
html.in-app #invoice-form:has(#file-preview > *) #proof-type-choice{display:none!important}
/* بعد اكتمال المعالجة يصير الصندوق شريطًا: ✓ صغيرة والعنوان، بلا الدائرة والخطوات */
html.in-app #invoice-upload-status.is-done{display:flex!important;align-items:center;gap:10px;padding:10px 14px!important;min-height:0!important}
html.in-app #invoice-upload-status.is-done .t6-upsteps,html.in-app #invoice-upload-status.is-done .scan-progress,html.in-app #invoice-upload-status.is-done #invoice-upload-copy{display:none!important}
html.in-app #invoice-upload-status.is-done::before{content:"✓";width:26px;height:26px;border-radius:50%;background:#2fa36b;color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
html.in-app #invoice-upload-status.is-done #invoice-upload-title{font-size:14px}
html.in-app #invoice-page-previews + #invoice-retake{margin-top:10px}
/* بطاقة الصراف في وسط صندوقها، وأزرارها تحتها بعرضها نفسه (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app #dashboard-view[data-scope="employee"] #my-card .my-card-body{justify-items:center!important}
html.in-app #dashboard-view[data-scope="employee"] #my-card .org-card-face{width:min(100%,380px)!important;max-width:380px!important;margin-inline:auto!important}
html.in-app #dashboard-view[data-scope="employee"] #my-card .my-card-actions{width:min(100%,380px)!important;margin-inline:auto!important;grid-template-columns:1fr 1fr;gap:8px}
/* الإخفاء يبدأ لحظة الرجوع من الكاميرا: صندوق الرفع يظهر قبل أن تُضاف الصفحة إلى المعاينة */
html.in-app #invoice-form:has(#invoice-upload-status:not([hidden])) :is(#proof-type-choice,.capture-actions,.upload-hint){display:none!important}
/* صندوق المبلغ في «ح»: كان المركز مطلقًا فيخرج العنوان فوق الحدّ و«ر.س» تحته */
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all #summary-donut{display:grid!important;place-content:center;min-height:118px!important;height:auto!important}
html.in-app #dashboard-view[data-scope="employee"] .t6-flip.t6-open-all .summary-center{position:static!important;transform:none!important;inset:auto!important;display:grid!important;gap:4px;text-align:center}
/* خيارات البطاقة بالضغط: تغبيش وأزرار صغيرة بدوائر؛ يتّسع الصفّ لزرٍّ ثالث دون أن تكبر */
html.in-app .t6-card-tap{position:relative;cursor:pointer}
html.in-app .t6-card-tap>.t6-card-menu{position:absolute;inset:0;z-index:2;display:none!important;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--rd-surface,#fff) 35%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:inherit;margin:0!important;width:auto!important}
html.in-app .t6-card-tap.menu-open>.t6-card-menu{display:flex!important}
html.in-app .t6-card-opt{display:grid!important;justify-items:center;gap:6px;width:86px;padding:10px 4px!important;min-height:0!important;border-radius:14px!important;background:var(--rd-surface,#fff)!important;border:1px solid var(--rd-line,#e4e6ea)!important;box-shadow:0 6px 16px rgb(20 38 58 / .14);font-size:12px!important;font-weight:800;color:var(--rd-ink,#1d2433)!important;cursor:pointer}
html.in-app .t6-card-opt i{width:36px;height:36px;border-radius:50%;background:#2fa36b;color:#fff;display:grid;place-items:center;font-style:normal;font-size:15px}
html.in-app .t6-card-opt.is-danger{color:#b42318!important;border-color:color-mix(in srgb,#d6453d 35%,transparent)!important}
html.in-app .t6-card-opt.is-danger i{background:#d6453d}
html.in-app .t6-card-hint{margin:10px auto 0!important;width:min(100%,380px);text-align:center;font-size:12px;color:var(--muted,#5b6475);background:color-mix(in srgb,var(--muted,#5b6475) 8%,var(--rd-surface,#fff));border-radius:999px;padding:7px 10px}
html.in-app .t6-card-tap.menu-open + .t6-card-hint{visibility:hidden}
/* الوضع الليلي: الزرّ الرئيسي كان كحليًّا على كحلي ونصّه باهت فيبدو معطّلًا؛ يصير نيليًّا واضحًا بنصّ أبيض (النهاري كما هو) */
html.in-app[data-theme="dark"] .primary-button:not(:disabled){background:#5b67c7!important;border-color:#5b67c7!important;color:#fff!important}
html.in-app[data-theme="dark"] .primary-button:not(:disabled):hover{background:#6c78d6!important}
/* كل حقل تاريخ: القيمة في وسط الصندوق أفقيًا وعموديًا (سفاري كان يلصقها أعلاه) */
html.in-app input:is([type="date"],[type="month"],[type="datetime-local"]){display:flex!important;align-items:center;justify-content:center;text-align:center!important;-webkit-appearance:none;appearance:none}
html.in-app input:is([type="date"],[type="month"],[type="datetime-local"])::-webkit-date-and-time-value{margin:0 auto!important;text-align:center!important;width:100%}
html.in-app input:is([type="date"],[type="month"],[type="datetime-local"])::-webkit-datetime-edit{display:inline-flex;justify-content:center;width:100%;padding:0}
/* شريط صفحات الفاتورة (المالك ١٥ أكتوبر ٢٠٢٦): مربعات الصفحات وزرّ الخطوة التالية */
html.in-app .t6-pstrip{display:grid;gap:12px;padding:14px;border:1px solid var(--rd-line,#e4e6ea);border-radius:18px;background:var(--rd-surface,#fff);margin:10px 0}
html.in-app .t6-pstrip-tiles{display:flex;justify-content:center;gap:10px}
html.in-app .t6-pstrip-tile{display:grid;justify-items:center;gap:5px;font-size:11px;color:var(--muted,#5b6475)}
html.in-app .t6-pstrip-tile i{width:52px;height:66px;border-radius:9px;border:1.5px dashed #c5cbd6;display:grid;place-items:center;font-style:normal;font-size:20px;font-weight:800;color:#b6bdc9}
html.in-app .t6-pstrip-tile.done i{border:1.5px solid #2fa36b;background:color-mix(in srgb,#2fa36b 10%,var(--rd-surface,#fff));color:#2fa36b}
html.in-app .t6-pstrip-tile.now i{border:2px solid #4a55a2;color:#4a55a2;background:color-mix(in srgb,#4a55a2 8%,var(--rd-surface,#fff));animation:t6pPulse 1.4s ease-in-out infinite}
html.in-app .t6-pstrip-tile.bad i{border:2px solid #d6453d;color:#d6453d;background:color-mix(in srgb,#d6453d 10%,var(--rd-surface,#fff))}
html.in-app .t6-pstrip-tile:is(.done,.now,.bad) small{color:inherit;font-weight:700}
@keyframes t6pPulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,#4a55a2 18%,transparent)}}
html.in-app .t6-pstrip-msg{margin:0;text-align:center;font-weight:800;font-size:14px}
html.in-app .t6-pstrip-msg small{display:block;font-weight:400;font-size:12px;color:var(--muted,#5b6475);margin-top:3px}
html.in-app .t6-pstrip-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:16px;border:0;background:#4a55a2;color:#fff;font-weight:800;font-size:15px;cursor:pointer}
html.in-app .t6-pstrip-cta i{width:30px;height:30px;border-radius:50%;background:#fff;color:#4a55a2;display:grid;place-items:center;font-style:normal}
html.in-app .t6-pstrip-cta.is-red{background:var(--rd-surface,#fff);color:#b42318;border:1.5px solid color-mix(in srgb,#d6453d 40%,transparent)}
html.in-app .t6-pstrip-cta.is-red i{background:#d6453d;color:#fff}
/* مع الشريط: لا زرّ «الصفحة التالية» القديم، ولا صندوق «تم حفظ الصفحة» المكرّر */
html.in-app #invoice-form:has(#t6-page-strip) #invoice-next-page{display:none!important}
html.in-app #t6-page-strip + #invoice-upload-status.is-done{display:none!important}
html.in-app #invoice-form:has(#t6-page-strip) :is(#proof-type-choice,.capture-actions,.upload-hint){display:none!important}
/* ملاحظة المرسِل على مستند الشراء: سطرٌ بلون التنبيه الهادئ ليُرى قبل فتح المستند */
.purchase-sender-note{display:block;margin-top:3px;font-size:11.5px;font-weight:700;color:#9a5b12;background:color-mix(in srgb,#e8833a 12%,transparent);border-radius:8px;padding:2px 8px;white-space:normal}
/* أيقونات الشريط السفلي مفرّغة (المالك ١٥ أكتوبر ٢٠٢٦): دائرةٌ بحدٍّ ملوّن وأيقونةٌ بلونها، والمختار وحده ممتلئ؛
فلا حاجة لتبهيت البقية. يصل الأنظمة الثلاثة لأن الشريط المشترك يقرأ هذه القواعد. */
@media (max-width:760px){
html.in-app .mobile-bottom-nav button[data-nav]{opacity:1!important}
html.in-app .mobile-bottom-nav button[data-nav]:not(.is-active):not([aria-current="page"]) svg.t6-side{background:transparent!important;stroke:var(--c)!important;color:var(--c)!important;box-shadow:inset 0 0 0 1.5px var(--c)}
}
/* زرٌّ بأيقونته وحدها: الأيقونة في وسط المربع (المالك ١٥ أكتوبر ٢٠٢٦) */
html.in-app button.t6-icon-only{display:inline-grid!important;place-items:center!important;padding:0!important;gap:0!important;text-align:center!important}
html.in-app button.t6-icon-only>*{margin:0!important}
/* طلب الإرسال إلى البوت: الاسم ثم «اسمح» ثم «ارفض» في صفٍّ واحد، بارتفاع الحقل */
html.in-app .t6-choice-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:stretch;width:100%}
html.in-app .t6-choice-row>input{min-width:0;margin:0!important}
html.in-app .t6-choice{display:inline-flex!important;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 10px!important;border-radius:14px!important;font-weight:800!important;cursor:pointer;width:auto!important}
html.in-app .t6-choice>i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;color:#fff}
html.in-app .t6-choice.is-ok{background:color-mix(in srgb,#4a55a2 10%,var(--rd-surface,#fff))!important;border:1px solid color-mix(in srgb,#4a55a2 35%,transparent)!important;color:#4a55a2!important}
html.in-app .t6-choice.is-ok>i{background:#4a55a2}
html.in-app .t6-choice.is-no{background:var(--rd-surface,#fff)!important;border:1px solid color-mix(in srgb,#d6453d 40%,transparent)!important;color:#b42318!important}
html.in-app .t6-choice.is-no>i{background:#d6453d}
@media (max-width:640px){html.in-app .t6-choice-row{grid-template-columns:1fr 1fr}html.in-app .t6-choice-row>input{grid-column:1/-1}}
html.in-app .telegram-sender-row>.t6-choice-row{display:grid!important;flex:1 1 100%;flex-direction:initial}
/* زرّ الأيقونة الذي يحمل اسمه تلميحًا مخفيًّا (is-iconic، كحذف الحزمة): لم يكن «بلا نص» فلم تشمله القاعدة السابقة،
وبقيت أيقونته عند طرفه. الأيقونة في الوسط، والتلميح مطلقٌ فوقه لا يأخذ مكانًا؛ وحال التأكيد (rd-asking) نصٌّ فيُترك. */
html.in-app button.is-iconic:not(.is-glyph):not(.rd-asking){display:inline-grid!important;place-items:center!important;padding:0!important;gap:0!important}
html.in-app button.is-iconic:not(.is-glyph):not(.rd-asking)>.rd-btn-icon{margin:0!important}
/* وكذلك زرّ الرمز (is-glyph، كـ✓ «إرسال لصفّ الاعتماد»): حشوه ١٢ يمينًا و٥ يسارًا فمالت أيقونته ٣ بكسل — مقيسٌ في كروم */
html.in-app button.is-iconic.is-glyph:not(.rd-asking){display:inline-grid!important;place-items:center!important;padding:0!important;gap:0!important}
html.in-app button.is-iconic.is-glyph:not(.rd-asking)>.rd-btn-label{position:absolute!important}
html.in-app button.is-iconic.is-glyph:not(.rd-asking)>.rd-btn-icon{margin:0!important}
/* أزرار الأيقونة وحدها: الحشو الصفري ضغط الإطار على الأيقونة (المالك ١٥ أكتوبر ٢٠٢٦). مسافةٌ من الجانبين وعرضٌ أدنى
لا يقلّ عن الارتفاع، والأيقونة في الوسط — لكل زرٍّ من هذا النوع في النظام. */
html.in-app :is(button.t6-icon-only,button.is-iconic:not(.rd-asking)):not(.house-close):not(.rd-icon-btn):not(.page-toolbar *):not(.mobile-bottom-nav *){padding:0 12px!important;min-width:46px!important;min-height:40px}
/* اختياران فقط: جنبًا إلى جنب بعرضٍ متساوٍ بدل سطرين (المالك ١٥ أكتوبر ٢٠٢٦، «نوع الإثبات») */
html.in-app .t6-seg:has(> .t6-seg-btn:nth-child(2):last-child){display:grid!important;grid-template-columns:1fr 1fr}
html.in-app .t6-seg:has(> .t6-seg-btn:nth-child(2):last-child)>.t6-seg-btn{width:auto!important;min-width:0}
/* جدول الفواتير للمحاسب والمدير (المالك ١٥ أكتوبر ٢٠٢٦):
١) دائرة الحالة التي تسبق الصفّ أُضيفت لقائمة الموظف، وفي الجدول صارت عمودًا زائدًا أزاح كل خليّةٍ عن رأسها
(اسم الموظف تحت «المورد»). في الجدول تُخفى، والحالة تقولها شارتها. */
html.in-app #dashboard-view.is-non-employee details.t6-inv>summary>.t6-inv-ic{display:none!important}
/* ٢) الشارات بشكل الهوية: كبسولةٌ بلون حالتها الخفيف بلا إطار ولا ذهبي */
html.in-app #dashboard-view.is-non-employee details.t6-inv .status-badge{border-radius:999px!important;border:0!important;background:color-mix(in srgb,var(--s) 13%,transparent)!important;color:var(--s)!important;font-weight:700!important;box-shadow:none!important}
html.in-app .proof-badge{background:color-mix(in srgb,#2f6f9f 12%,transparent)!important;color:#2f6f9f!important}
/* ٣) «مراجعة»: الكلمة في أوّل الزرّ والسهم في آخره، لا متلاصقين في وسطه */
html.in-app #dashboard-view.rd-shell .invoice-review-toggle{justify-content:space-between!important;padding-inline:14px 8px!important}
/* «التفاصيل» كانت تخرج من صندوقها: عرض الزرّ مثبّتٌ أضيق من الكلمة والسهم معًا — يتّسع لهما */
html.in-app #dashboard-view.rd-shell .invoice-review-toggle{width:max-content!important;min-width:max-content!important;max-width:none!important;white-space:nowrap!important;overflow:visible;gap:8px!important}
/* مستندات المشتريات (المالك ١٥ أكتوبر ٢٠٢٦): اسم الملف كان بخطّ الأرقام الكبيرة (٢٠ و٣١ بكسل) فيتكسّر أسطرًا،
ويتكرّر في القائمة وفي صدر المستند وفوق المعاينة. في القائمة سطران صغيران، وفي الصدر يُترك لرأس المعاينة. */
html.in-app .classify-pick strong{font-size:13px!important;line-height:1.45!important;font-weight:700!important;overflow-wrap:anywhere;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.in-app .purchases-shell .classify-known>strong{display:none!important}
html.in-app .classify-doc-head strong{font-size:13px!important;overflow-wrap:anywhere}
/* ===== شريط مراحل المستند «أ» (المالك ١٥ أكتوبر ٢٠٢٦) =====
دائرةٌ بلون كل خطوة وأيقونتها: المنتهية ممتلئة، والحالية ممتلئة بهالة، والقادمة مفرّغة.
والوصلة إلى كل خطوةٍ بلغها المستند تمتلئ أخضر. */
html.in-app .stage-strip{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:0!important;padding:4px 0 2px!important;margin:6px 0 10px!important;list-style:none!important;background:none!important;border:0!important}
html.in-app .stage-strip>.stage-step{--k:#2f6f9f;position:relative;flex:1 1 0;display:grid!important;justify-items:center;gap:6px;text-align:center;background:none!important;border:0!important;padding:0!important;min-width:0}
html.in-app .stage-strip>.stage-step:nth-child(1){--k:#2fa36b}html.in-app .stage-strip>.stage-step:nth-child(2){--k:#2f6f9f}html.in-app .stage-strip>.stage-step:nth-child(3){--k:#e8833a}html.in-app .stage-strip>.stage-step:nth-child(4){--k:#7b5bd6}
html.in-app .stage-strip>.stage-step:not(:first-child)::before{content:"";position:absolute;top:18px;inset-inline-end:calc(50% + 22px);width:calc(100% - 44px);height:3px;border-radius:3px;background:#e3e6ee}
html.in-app .stage-strip>.stage-step:is(.is-done,.is-now):not(:first-child)::before{background:#2fa36b}
html.in-app .stage-strip .stage-mark{position:relative;z-index:1;width:38px!important;height:38px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:var(--rd-surface,#fff)!important;border:1.5px solid var(--k)!important;color:var(--k)!important;font-size:0!important;margin:0!important}
html.in-app .stage-strip .stage-mark svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.in-app .stage-strip .is-done .stage-mark{background:var(--k)!important;color:#fff!important}
html.in-app .stage-strip .is-now .stage-mark{background:var(--k)!important;color:#fff!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--k) 18%,transparent)}
html.in-app .stage-strip .stage-label{font-size:11.5px!important;font-weight:700!important;color:var(--muted,#5b6475)!important;line-height:1.35;max-width:100%;overflow-wrap:anywhere}
html.in-app .stage-strip .is-done .stage-label{color:inherit!important}
html.in-app .stage-strip .is-now .stage-label{color:var(--k)!important}
html.in-app .stage-strip .is-link{cursor:pointer}
/* اسم الملف في قائمة المستندات أصغر، فيبقى داخل صندوقه */
html.in-app .classify-pick strong{font-size:11.5px!important;line-height:1.4!important;word-break:break-all}
html.in-app .classify-pick{min-width:0;overflow:hidden}
html.in-app .stage-strip>.stage-step:not(:first-child)::before{background:#e3e6ee!important;top:18px!important;inset-inline-end:calc(50% + 22px)!important;inset-inline-start:auto!important;width:calc(100% - 44px)!important;height:3px!important}
html.in-app .stage-strip>.stage-step:is(.is-done,.is-now):not(:first-child)::before{background:#2fa36b!important}
/* ===== سلفي (المالك ١٦ أكتوبر ٢٠٢٦): نافذة الموظف — تحت نافذة الإحالة (880) وفوق صناديق الصفحة ===== */
.rd-adv-dim{position:fixed;inset:0;z-index:870;background:rgb(15 27 45 / .35)}
.rd-adv{position:fixed;z-index:875;inset:auto 0 0 0;max-height:90vh;overflow:auto;background:var(--rd-surface,#fff);color:var(--rd-ink,#1d2433);border-radius:22px 22px 0 0;padding:12px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgb(0 0 0 / .18)}
@media (min-width:761px){.rd-adv{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:420px;border-radius:22px;max-height:85vh}}
.rd-adv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.rd-adv-head b{font-size:16px}
.rd-adv-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--rd-line,#e4e6ea);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.rd-adv-x svg{stroke:currentColor;stroke-width:2;fill:none}
.rd-adv-body{display:grid;gap:9px}
.rd-adv-note{margin:6px 0;text-align:center;color:var(--rd-muted,#5b6475);font-size:13px}
.rd-adv-tot{display:flex;justify-content:space-between;align-items:center;background:color-mix(in srgb,#c95a7c 8%,transparent);border:1px solid color-mix(in srgb,#c95a7c 30%,transparent);border-radius:13px;padding:10px 12px;font-size:13px}
.rd-adv-tot b{font-size:17px;color:#c95a7c}
.rd-adv-card{border:1px solid var(--rd-line,#e4e6ea);border-radius:14px;padding:10px 12px;display:grid;gap:6px}
.rd-adv-ch{display:flex;align-items:center;justify-content:space-between;gap:8px}.rd-adv-ch b{font-size:14px}
.rd-adv-tag{font-size:11px;border-radius:999px;padding:2px 9px;font-weight:700;background:color-mix(in srgb,#e8833a 14%,transparent);color:#b5651d}
.rd-adv-card.is-posted .rd-adv-tag{background:color-mix(in srgb,#2fa36b 14%,transparent);color:#2fa36b}
.rd-adv-card.is-rejected .rd-adv-tag{background:color-mix(in srgb,#d6453d 14%,transparent);color:#d6453d}
.rd-adv-why{color:var(--rd-muted,#5b6475);font-size:12px}.rd-adv-why.is-no{color:#d6453d}
.rd-adv-steps{display:grid;gap:0}
.rd-adv-st{display:flex;align-items:center;gap:8px;font-size:12.5px;position:relative;padding-bottom:10px;color:#9aa3b2}
.rd-adv-st:last-child{padding-bottom:0}
.rd-adv-st:not(:last-child)::before{content:"";position:absolute;inset-inline-start:10px;top:21px;bottom:0;width:1.5px;background:var(--rd-line,#e4e6ea)}
.rd-adv-st i{width:21px;height:21px;border-radius:50%;background:#c5cbd6;color:#fff;display:grid;place-items:center;font-style:normal;font-size:10.5px;flex:none;z-index:1}
.rd-adv-st.is-d{color:inherit}.rd-adv-st.is-d i{background:#2fa36b}
.rd-adv-st.is-n{color:inherit;font-weight:700}.rd-adv-st.is-n i{background:#e8833a}
.rd-adv-go{min-height:48px;border-radius:14px;font:inherit;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;background:color-mix(in srgb,#c95a7c 10%,transparent);border:1px solid color-mix(in srgb,#c95a7c 40%,transparent);color:#c95a7c}
.rd-adv-go i{width:26px;height:26px;border-radius:50%;background:#c95a7c;color:#fff;display:grid;place-items:center;font-style:normal}
.rd-adv-go:disabled{opacity:.5}
.rd-adv-f{display:grid;gap:4px;font-size:12px;color:var(--rd-muted,#5b6475)}
.rd-adv-in{min-height:46px;border:1px solid var(--rd-line,#e4e6ea);border-radius:12px;padding:0 12px;font:inherit;font-size:15px;color:var(--rd-ink,#1d2433);background:transparent}
.rd-adv-in.is-big{font-size:22px;font-weight:800;text-align:center}
.rd-adv-sig{height:120px;border:1.5px dashed #c5cbd6;border-radius:12px;background:#fff;overflow:hidden;display:grid;place-items:center}
.rd-adv-sig canvas{width:100%;height:100%;display:block;touch-action:none}
.rd-adv-sig img{max-width:100%;max-height:110px}.rd-adv-sig.is-saved{border-style:solid}
.rd-adv-link{justify-self:start;background:none;border:0;padding:2px 0;font:inherit;font-size:12px;font-weight:700;color:#c95a7c;cursor:pointer}
.rd-adv-err{margin:0;color:#d6453d;font-size:12.5px;min-height:0}.rd-adv-err:empty{display:none}
.rd-adv-back{min-height:44px;border-radius:14px;border:1px solid var(--rd-line,#e4e6ea);background:transparent;font:inherit;font-weight:700;color:inherit;cursor:pointer}
/* وضع الإعدادات المركّز (المالك ١٦ أكتوبر ٢٠٢٦): القسم وحده، بلا قائمة الشغل ولا تبويبات الأقسام، و✕ يرجع. */
html.settings-focus .workspace-header,html.settings-focus .mobile-bottom-nav,html.settings-focus .settings-tabs{display:none!important}
.rd-setfocus{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--rd-line,#e4e6ea);border-radius:14px;background:var(--rd-surface,#fff);font-size:13px}
.rd-setfocus a{color:#7b5bd6;font-weight:700;text-decoration:none}
.rd-setfocus-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rd-line,#e4e6ea);color:inherit!important;font-size:15px}
.rd-acc-tag{font-size:11px;font-weight:800;color:#7b5bd6;padding:4px 10px 0}
/* نوافذ قائمة الحساب (المالك ١٦ أكتوبر ٢٠٢٦): فوق الصفحة وخلفها ضباب — تحت نافذة الإحالة (880) */
.rd-pop-dim{position:fixed;inset:0;z-index:870;background:rgb(15 27 45 / .28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rd-pop{position:fixed;z-index:875;top:50%;left:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 32px));max-height:85vh;overflow:auto;background:var(--rd-surface,#fff);color:var(--rd-ink,#1d2433);border-radius:20px;padding:14px 16px 18px;box-shadow:0 20px 50px rgb(15 27 45 / .3)}
.rd-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.rd-pop-head b{font-size:16px}
.rd-pop-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--rd-line,#e4e6ea);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}.rd-pop-x svg{stroke:currentColor;stroke-width:2;fill:none}
.rd-pop-body{display:grid;gap:10px}
.rd-pop-f{display:grid;gap:4px;font-size:12px;color:var(--rd-muted,#5b6475)}
.rd-pop-f input{min-height:46px;border:1px solid var(--rd-line,#e4e6ea);border-radius:12px;padding:0 12px;font:inherit;font-size:15px;color:var(--rd-ink,#1d2433);background:transparent}
.rd-pop-msg{margin:0;font-size:13px}.rd-pop-msg:empty{display:none}.rd-pop-msg.is-err{color:#d6453d}.rd-pop-msg.is-ok{color:#2fa36b;font-weight:700;font-size:15px}.rd-pop-msg.is-hint{color:var(--rd-muted,#5b6475);font-size:12px}
.rd-pop-go{min-height:46px;border-radius:13px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;background:color-mix(in srgb,#2f6f9f 10%,transparent);border:1px solid color-mix(in srgb,#2f6f9f 40%,transparent);color:#2f6f9f}
/* «ملفي الشخصي» (١٧ أكتوبر ٢٠٢٦) */
.rd-prof-top{display:grid;justify-items:center;gap:8px;text-align:center;margin:-2px 0 2px}
.rd-prof-ava{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,#2f6f9f 12%,transparent);color:#2f6f9f;font-size:26px;font-weight:800}
.rd-prof-ava img{width:100%;height:100%;object-fit:cover}
.rd-prof-top b{font-size:17px}
.rd-prof-box{border:1px solid var(--rd-line,#e4e6ea);border-radius:14px;padding:2px 12px}
.rd-prof-row{display:flex;align-items:center;gap:8px;min-height:46px;border-bottom:1px solid var(--rd-line,#eef0f3);font-size:13.5px}
.rd-prof-row:last-child{border-bottom:0}
.rd-prof-row>span{flex:none;min-width:80px;color:var(--rd-muted,#5b6475)}
.rd-prof-row>b{flex:1;min-width:0;text-align:end;overflow-wrap:anywhere;font-weight:700}
.rd-prof-row input{flex:1;min-width:0;height:36px;box-sizing:border-box;border:1px solid var(--rd-line,#e4e6ea);border-radius:10px;padding:0 10px;font:inherit;color:inherit;background:transparent}
.rd-prof-pen{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--rd-line,#e4e6ea);background:transparent;color:#2f6f9f;display:grid;place-items:center;cursor:pointer}
.rd-prof-pen svg{stroke:currentColor;fill:none}
.rd-prof-save{flex:none;height:36px;padding:0 14px;border-radius:10px;border:1px solid color-mix(in srgb,#2f6f9f 40%,transparent);background:color-mix(in srgb,#2f6f9f 10%,transparent);color:#2f6f9f;font:inherit;font-weight:800;cursor:pointer}
.rd-prof-save:disabled{opacity:.5}
.rd-prof-note{flex:none;font-size:11.5px;font-weight:700;color:#2fa36b}
.rd-prof-note.is-err{color:#d6453d;flex:1 1 100%;margin:-6px 0 6px}
.rd-prof-src{margin:-4px 2px 0;font-size:11.5px;color:var(--rd-muted,#5b6475)}
.rd-pop .num{direction:ltr;unicode-bidi:isolate}
.rd-account-menu .is-danger{border-top:0!important;border-radius:12px!important}
.rd-pop .rd-prof-pen{width:32px!important;height:32px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:50%!important}
.rd-pop .rd-prof-save{width:auto!important;min-height:0!important}
.rd-pop{overflow-x:hidden}
.rd-prof-row{min-width:0}
.rd-prof-row>span{min-width:0!important;flex:0 0 auto}
.rd-prof-row input{width:auto!important;min-width:0!important;flex:1 1 0!important;max-width:none!important}
.rd-prof-row>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-pop .rd-prof-note{color:#2fa36b!important}
.rd-pop .rd-prof-note.is-err{color:#d6453d!important;white-space:normal}
.rd-pop-go.is-off{background:transparent;border-color:color-mix(in srgb,#d6453d 40%,transparent);color:#d6453d}.rd-pop-go:disabled{opacity:.5}
.rd-pop-pw{position:relative;display:block}.rd-pop-pw input{width:100%;padding-inline-start:46px}
.rd-pop-eye{position:absolute;inset-inline-start:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;color:var(--rd-muted,#5b6475);display:grid;place-items:center;cursor:pointer}.rd-pop-eye svg{stroke:currentColor;stroke-width:1.8;fill:none}
/* لا ذهبي (قاعدة المالك): حلقة التركيز في نوافذ القائمة بلون الحقل لا بذهبي design-system العام */
.rd-pop :is(input,button):focus-visible{outline:none}.rd-pop input:focus{border-color:#2f6f9f;box-shadow:0 0 0 3px color-mix(in srgb,#2f6f9f 18%,transparent)}
/* مدير النظام: صفّ الأنظمة فوق تبويبات الأقسام (المرحلة ١، ١٦ أكتوبر ٢٠٢٦) */
#settings-page .settings-groups{margin-bottom:8px}
#settings-page .settings-groups button{font-weight:800}
.settings-ext-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.settings-ext-item{display:grid;gap:6px;border:1px solid var(--rd-line,#e4e6ea);border-inline-start:4px solid #1f9aa5;border-radius:14px;padding:14px;background:var(--rd-surface,#fff);color:inherit;text-decoration:none}
.settings-ext-item b{font-size:14px}.settings-ext-item span{font-size:12px;color:var(--rd-muted,#5b6475)}
/* المهام ومستندات الطباعة (المالك ١٦ أكتوبر ٢٠٢٦) */
.rd-task-strip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}#home-alert+.rd-task-strip{margin-top:-6px}.rd-task-strip:empty{display:none}
.rd-task-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--k,#e8833a) 45%,transparent);background:color-mix(in srgb,var(--k,#e8833a) 10%,var(--rd-surface,#fff));color:var(--k,#c2621a);border-radius:999px;padding:6px 14px 6px 6px;font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.rd-task-pill i{min-width:26px;height:26px;border-radius:50%;background:var(--k,#e8833a);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px}
.rd-task-pill.is-others{--k:#2f6f9f}
.rd-task-row{display:grid;gap:4px;border:1px solid var(--rd-line,#e4e6ea);border-radius:14px;padding:10px 12px}.rd-task-row small{color:var(--rd-muted,#5b6475)}
.rd-task-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}.rd-pop-go.is-done{color:#2fa36b;border-color:color-mix(in srgb,#2fa36b 40%,transparent);background:color-mix(in srgb,#2fa36b 10%,transparent)}
.rd-task-pill.is-setup{--k:#7b5bd6}
.rd-pop-f select{min-height:44px;border:1px solid var(--rd-line,#e4e6ea);border-radius:12px;padding:0 10px;font:inherit;color:var(--rd-ink,#1d2433);background:transparent}
.link-advance{display:grid;gap:8px}.link-advance select{min-height:44px}
/* ريثما تُفتح الجلسة من البوابة أو من جلسةٍ محفوظة (boot.js) لا تُرسم شاشة الدخول (المالك ١٨ أكتوبر ٢٠٢٦) */
html.has-session #login-view{display:none!important}
/* تفاصيل الفاتورة «أ» (المالك ١٨ أكتوبر ٢٠٢٦): الجوال عمودٌ واحد، والحاسوب عمودان */
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"amt" "chips" "facts" "files" "stage" "notes" "dec"!important;gap:10px!important;align-items:start!important;padding:12px!important;background:var(--rd-surface,#fff)!important}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-amount{grid-area:amt;display:grid!important;justify-items:center;text-align:center;gap:2px}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-amount strong{font-size:30px!important;font-weight:800!important;letter-spacing:.3px}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-amount small{color:var(--rd-muted,#5b6475);font-size:12px}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.t6d-chips{grid-area:chips;display:flex!important;flex-wrap:wrap;gap:5px;justify-content:center;margin:0!important}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.t6d-chips>span{border-radius:999px!important;border:0!important;font-weight:700!important;font-size:11.5px!important;padding:3px 10px!important}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-main{grid-area:facts;display:grid!important;gap:8px;min-width:0}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6-hide{display:none!important}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-facts{border:1px solid var(--rd-line,#e4e6ea);border-radius:14px;padding:2px 12px;background:var(--rd-surface,#fff)}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-row{display:flex;align-items:center;gap:8px;min-height:42px;border-bottom:1px solid var(--rd-line,#eef0f3);font-size:13px}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-row:last-child{border-bottom:0}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-row>i{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-size:11px;color:var(--k);background:color-mix(in srgb,var(--k) 15%,transparent)}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-row>span{flex:0 0 auto;color:var(--rd-muted,#5b6475)}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-row>b{flex:1;min-width:0;text-align:end;font-weight:700;overflow-wrap:anywhere}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-warn{margin:0!important;padding:8px 10px!important;border-radius:11px;border:1px solid color-mix(in srgb,#e8833a 35%,transparent);background:color-mix(in srgb,#e8833a 9%,transparent);color:#a35614!important;font-size:12.5px}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-file-actions{grid-area:files;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px!important;padding:0!important;border:0!important;background:transparent!important}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-file-actions>.invoice-files-label{display:none!important}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-file-actions>button{display:flex!important;align-items:center;justify-content:center;gap:7px;min-height:42px!important;border:1px solid var(--rd-line,#e4e6ea)!important;border-radius:12px!important;background:var(--rd-surface,#fff)!important;color:inherit!important;font-weight:700!important;box-shadow:none!important}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-file-actions>button::before{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;flex:none}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-file-actions>button[data-t6f=pdf]::before{content:"PDF";color:#d6453d;background:color-mix(in srgb,#d6453d 13%,transparent)}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-file-actions>button[data-t6f=img]::before{content:"▣";font-size:12px;color:#1f9aa5;background:color-mix(in srgb,#1f9aa5 14%,transparent)}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-file-actions>button[data-t6f=voucher]::before{content:"▤";font-size:12px;color:#7b5bd6;background:color-mix(in srgb,#7b5bd6 14%,transparent)}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.t6d-stage{grid-area:stage;display:flex;align-items:flex-start;padding:4px 2px}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-st{display:grid;justify-items:center;gap:4px;min-width:54px;font-size:11px;color:var(--rd-muted,#5b6475)}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-st>i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;color:#fff;background:#2fa36b}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-st.is-now>i{background:var(--rd-surface,#fff);color:#e8833a;box-shadow:0 0 0 2px #e8833a,0 0 0 6px color-mix(in srgb,#e8833a 18%,transparent)}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-st.is-now{color:inherit;font-weight:700}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-st.is-next>i{background:transparent;color:#9aa3b2;box-shadow:inset 0 0 0 1.5px #c9ced6}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-st.is-bad>i{background:#d6453d}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-st.is-bad{color:#d6453d;font-weight:700}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-ln{flex:1;height:2px;margin-top:13px;background:var(--rd-line,#dde1e7);font-style:normal}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd .t6d-ln.is-on{background:#2fa36b}
html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-notes-row{grid-area:notes}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-decision-actions{grid-area:dec}
@media (min-width:900px){html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important;grid-template-areas:"chips amt" "facts files" "facts stage" "notes notes" "dec dec"!important;column-gap:18px!important}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.invoice-amount{justify-items:start;text-align:start}html.in-app #dashboard-view details.t6-inv>.invoice-row-expanded.t6-invd>.t6d-chips{justify-content:flex-start}}
/* ===== أموال الموظفين «ب» (المالك ١٨ أكتوبر ٢٠٢٦) — renderRosterT6 في app.js =====
الحاسوب: صفوف جدولٍ بثمانية أعمدة، والأيقونة في رأس العمود. الجوّال: سطرٌ يُفتح على أوعيته. */
html.in-app #dashboard-view .roster-modes{display:none!important}
html.in-app #dashboard-view .custody-filter-bar select.t6r-native{display:none!important}
html.in-app #dashboard-view .rd-custody-head:has(+ .t6r){display:none!important}
html.in-app #dashboard-view .t6r-seg{display:flex;gap:3px;padding:3px;border-radius:999px;background:var(--rd-surface-soft,#eceff3);overflow-x:auto;scrollbar-width:none;min-width:0;max-width:100%}
html.in-app #dashboard-view .t6r-seg::-webkit-scrollbar{display:none}
html.in-app #dashboard-view .t6r-seg button{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;background:none;border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:700;color:var(--rd-muted);cursor:pointer;white-space:nowrap;min-height:0;box-shadow:none}
html.in-app #dashboard-view .t6r-seg button b{font-weight:700;opacity:.65;font-variant-numeric:tabular-nums}
html.in-app #dashboard-view .t6r-seg button.is-on{background:var(--rd-surface);color:var(--rd-ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
html.in-app #dashboard-view .t6r-seg button[hidden]{display:none}
html.in-app #dashboard-view .custody-filter-bar:has(.t6r-seg){display:flex!important;flex-wrap:wrap;gap:10px;align-items:center}
html.in-app #dashboard-view .custody-filter-bar:has(.t6r-seg)>label:first-child{flex:1 1 260px;min-width:0}
html.in-app #dashboard-view .custody-filter-bar:has(.t6r-seg)>label:has(select.t6r-native){display:none!important}
html.in-app #dashboard-view .employee-custody-grid.t6r{display:block!important;grid-template-columns:none!important;gap:0!important;background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:18px!important;margin-top:14px}
.t6r .t6r-ic{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;flex:none;background:color-mix(in srgb,var(--k) 14%,var(--rd-surface,#fff));color:var(--k);font-style:normal}
.t6r .t6r-ic.is-fill{background:var(--k);color:#fff}
.t6r .t6r-ic svg{width:14px;height:14px;fill:none;stroke:currentColor!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t6r .t6r-row{display:grid;align-items:center;cursor:pointer;color:var(--rd-ink)}
.t6r .t6r-who{display:flex;align-items:center;gap:10px;min-width:0}
.t6r .t6r-ava{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--c);color:#fff;font-size:12px;font-weight:700;box-shadow:0 0 0 2px var(--rd-surface,#fff),0 0 0 4px #2fa36b}
.t6r .t6r-row.is-off .t6r-ava{box-shadow:0 0 0 2px var(--rd-surface,#fff),0 0 0 4px #d6453d}
.t6r .t6r-name{display:grid;min-width:0}
.t6r .t6r-name b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t6r .t6r-name small{color:var(--rd-muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t6r .t6r-total{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.t6r .is-neg{color:#c0392b!important}
.t6r .t6r-src b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.t6r .t6r-src b.is-none{color:var(--rd-muted);font-weight:400}
.t6r .t6r-pend{color:var(--rd-muted);white-space:nowrap}
.t6r .t6r-pend.is-live{justify-self:start;color:#b45a12;background:color-mix(in srgb,#e8833a 14%,var(--rd-surface,#fff));border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.t6r .t6r-when{color:var(--rd-muted);font-size:12px;white-space:nowrap}
.t6r .t6r-open{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;cursor:pointer;font:inherit;font-weight:700;color:#4a55c9;background:color-mix(in srgb,#4a55c9 10%,var(--rd-surface,#fff));min-height:0;box-shadow:none}
.t6r .t6r-open svg{width:16px;height:16px;fill:none;stroke:currentColor!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t6r .t6r-open:hover{background:color-mix(in srgb,#4a55c9 18%,var(--rd-surface,#fff))}
.t6r .t6r-chev{color:var(--rd-muted);display:grid;place-items:center;transition:transform .2s}
.t6r .t6r-chev svg{width:18px;height:18px;fill:none;stroke:currentColor!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){
.t6r{--t6r-cols:minmax(190px,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1fr) 40px;background:var(--rd-surface);border:1px solid var(--rd-line);border-radius:18px;padding:4px 16px}
.t6r .t6r-head{display:grid;grid-template-columns:var(--t6r-cols);gap:12px;align-items:center;padding:12px 4px;color:var(--rd-muted);font-size:12px;font-weight:700}
.t6r .t6r-hsrc{display:inline-flex;align-items:center;gap:7px;min-width:0}
.t6r .t6r-row{grid-template-columns:var(--t6r-cols);gap:12px;padding:10px 4px;border-top:1px solid var(--rd-line-soft,var(--rd-line))}
.t6r .t6r-row:hover{background:var(--rd-surface-soft,#f6f7f9)}
.t6r .t6r-srcs,.t6r .t6r-foot{display:contents}
.t6r .t6r-src .t6r-ic,.t6r .t6r-src small,.t6r .t6r-sub-m,.t6r .t6r-chev,.t6r .t6r-open span{display:none}
.t6r .t6r-open{width:34px;height:34px;padding:0;border-radius:50%}
}
@media (max-width:899.98px){
.t6r{background:var(--rd-surface);border:1px solid var(--rd-line);border-radius:18px;padding:2px 12px}
.t6r .t6r-head,.t6r .t6r-sub-d,.t6r .t6r-when{display:none}
.t6r .t6r-row{grid-template-columns:minmax(0,1fr) auto 22px;grid-template-areas:"who total chev";column-gap:10px;padding:11px 0;border-top:1px solid var(--rd-line-soft,var(--rd-line))}
.t6r .t6r-row:first-of-type{border-top:0}
.t6r .t6r-who{grid-area:who}.t6r .t6r-total{grid-area:total}.t6r .t6r-chev{grid-area:chev}
.t6r .t6r-srcs,.t6r .t6r-foot{display:none;grid-column:1/-1}
.t6r .t6r-row.is-open .t6r-chev{transform:rotate(-90deg)}
.t6r .t6r-row.is-open .t6r-srcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.t6r .t6r-row.is-open .t6r-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
.t6r .t6r-src{display:grid;justify-items:center;gap:4px;text-align:center;padding:9px 4px;border-radius:12px;background:color-mix(in srgb,var(--k) 8%,var(--rd-surface,#fff));min-width:0}
.t6r .t6r-src small{color:var(--rd-muted);font-size:10.5px;line-height:1.3}
.t6r .t6r-src b{font-size:12.5px}
.t6r .t6r-foot .t6r-pend:not(.is-live){display:none}
.t6r .t6r-open{margin-inline-start:auto;border-radius:12px;padding:8px 14px;font-size:12.5px}
}
/* ===== العناصر المتكرّرة بهوية «٦» (جولة العهد، المالك ١٨ أكتوبر ٢٠٢٦) =====
تسعة عناصر قديمة تظهر في صفحاتٍ كثيرة؛ إصلاحها هنا يُصلحها حيث ظهرت. داخل التطبيق الموحّد وحده. */
/* ١ — وسم الحالة والدور: كبسولة بلا إطار ولا نقطة. */
html.in-app #dashboard-view :is(.status-badge,.rd-user-role,.rd-chip){border-color:transparent!important;box-shadow:none!important;border-radius:999px!important}
html.in-app #dashboard-view .rd-chip>i:empty{display:none!important}
html.in-app #dashboard-view .rd-chip-live{background:color-mix(in srgb,#2fa36b 13%,var(--rd-surface,#fff))!important;color:#1d7a4c!important}
/* ٢ — القائمة المنسدلة: كبسولةٌ بدائرة سهمٍ في طرفها (ما بقي منسدلًا لأن خياراته كثيرة). */
html.in-app #dashboard-view select:not([multiple]):not(.t6-seg-src):not(.t6r-native){-webkit-appearance:none!important;appearance:none!important;border:1px solid var(--rd-line)!important;border-radius:999px!important;background-color:var(--rd-surface)!important;color:var(--rd-ink)!important;min-height:40px;padding-block:6px!important;padding-inline:16px 44px!important;font-weight:700;background-repeat:no-repeat!important;background-position:left 7px center!important;background-size:28px 28px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%234a55c9' fill-opacity='.12'/%3E%3Cpath d='M10 12.5l4 4 4-4' fill='none' stroke='%234a55c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;box-shadow:none!important;cursor:pointer}
html.in-app #dashboard-view select:not([multiple]):not(.t6-seg-src):focus-visible{outline:2px solid color-mix(in srgb,#4a55c9 45%,transparent)!important;outline-offset:1px}
html.in-app #dashboard-view select:disabled{opacity:.6;cursor:default}
/* ٣ — حقل التاريخ يوم/شهر/سنة (theme6DateField). */
html.in-app #dashboard-view .t6-dt{position:relative;display:inline-flex;align-items:center;gap:6px;width:100%;min-width:0;box-sizing:border-box;background:var(--rd-surface);border:1px solid var(--rd-line);border-radius:12px;padding:3px 6px 3px 12px;min-height:42px}
html.in-app #dashboard-view .t6-dt:focus-within{border-color:color-mix(in srgb,#1f9aa5 60%,var(--rd-line))}
html.in-app #dashboard-view .t6-dt-text{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;outline:0;font:inherit;font-weight:700;color:var(--rd-ink);padding:6px 0!important;text-align:right;letter-spacing:.5px;min-height:0!important}
html.in-app #dashboard-view .t6-dt-text::placeholder{color:var(--rd-faint,#9aa3b1);font-weight:400;letter-spacing:0}
html.in-app #dashboard-view .t6-dt-pick{order:-1;width:30px;height:30px;min-height:0;flex:none;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;color:#1f9aa5;background:color-mix(in srgb,#1f9aa5 13%,var(--rd-surface,#fff));box-shadow:none}
html.in-app #dashboard-view .t6-dt-pick svg{width:16px;height:16px;fill:none;stroke:currentColor!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.in-app #dashboard-view .t6-dt-native{position:absolute!important;inset:auto 0 0 auto;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none;border:0!important;padding:0!important;min-height:0!important}
html.in-app #dashboard-view .t6-dt:has(.t6-dt-text:disabled){opacity:.6}
/* ٤ — مربّع الاختيار: دائرة صحّ خضراء. */
html.in-app #dashboard-view input[type="checkbox"]:not([role="switch"]):not(.t6-keep){-webkit-appearance:none;appearance:none;width:22px;height:22px;min-width:22px;margin:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--rd-muted) 55%,transparent);background:var(--rd-surface);display:inline-grid;place-items:center;cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s}
html.in-app #dashboard-view input[type="checkbox"]:not([role="switch"]):not(.t6-keep)::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg);opacity:0}
html.in-app #dashboard-view input[type="checkbox"]:not([role="switch"]):not(.t6-keep):checked{background:#2fa36b;border-color:#2fa36b}
html.in-app #dashboard-view input[type="checkbox"]:not([role="switch"]):not(.t6-keep):checked::after{opacity:1}
html.in-app #dashboard-view input[type="checkbox"]:not([role="switch"]):not(.t6-keep):indeterminate{background:#2fa36b;border-color:#2fa36b}
html.in-app #dashboard-view input[type="checkbox"]:not([role="switch"]):not(.t6-keep):indeterminate::after{opacity:1;width:9px;height:0;border-left:0;transform:none}
html.in-app #dashboard-view input[type="checkbox"]:disabled{opacity:.5;cursor:default}
/* ٥ — أزرار الكثافة: تُحذف — كثافةٌ واحدة مدروسة لكل جهاز. */
html.in-app #dashboard-view :is(.roster-modes,.org-cards-modes){display:none!important}
/* ٦ — زرّ الإضافة: دائرة «+» بلون القسم تتمدّد باسمها عند المرور؛ وعلى اللمس الاسم ظاهر بجانبها. */
html.in-app .t6-addc{--a:var(--t6-sc,#2f6f9f);position:relative;min-width:44px!important;width:auto!important;height:44px!important;min-height:0!important;box-sizing:border-box;border-radius:999px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:0;padding:0!important;font-size:0!important;line-height:1;color:var(--a)!important;background:color-mix(in srgb,var(--a) 11%,var(--rd-surface,#fff))!important;border:1px solid color-mix(in srgb,var(--a) 35%,transparent)!important;box-shadow:none!important;flex:none;cursor:pointer;transition:gap .3s ease,padding .3s ease,background .15s,box-shadow .2s}
/* «+» الدائرة تفرض inline-flex بـ!important فكانت تغلب hidden: «تسجيل حركة» ظاهرٌ في كل الصفحات ومكانه القيود وحدها (المالك ١٩ أكتوبر ٢٠٢٦). */
html.in-app .t6-addc[hidden]{display:none!important}
html.in-app .t6-addc>*{display:none!important}
html.in-app .t6-addc::before{content:"+";font-size:26px;font-weight:700;line-height:1}
html.in-app .t6-addc::after{content:attr(data-t6-label);max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:13.5px;font-weight:700;transition:max-width .3s ease,opacity .2s ease}
html.in-app .t6-addc:hover{background:color-mix(in srgb,var(--a) 18%,var(--rd-surface,#fff))!important}
@media (hover:hover){html.in-app .t6-addc:is(:hover,:focus-visible){gap:8px;padding-inline:14px 18px!important;box-shadow:0 6px 16px color-mix(in srgb,var(--a) 22%,transparent)!important}html.in-app .t6-addc:is(:hover,:focus-visible)::after{max-width:200px;opacity:1}}
@media (hover:none){html.in-app .t6-addc{height:38px!important;min-width:38px!important;gap:5px;padding-inline:10px 13px!important}html.in-app .t6-addc::before{font-size:20px}html.in-app .t6-addc::after{max-width:200px;opacity:1;font-size:12.5px}}
/* ٧ — الجداول: خطوطٌ فاتحة، والرأس بلا إطار، وشريط مجموعة القيد كبسولةٌ فاتحة لا خطٌّ كحليّ ثقيل. */
html.in-app #dashboard-view table th{border-color:transparent!important;color:var(--rd-muted)!important;font-weight:700}
html.in-app #dashboard-view table td{border-color:var(--rd-line-soft,var(--rd-line))!important}
html.in-app #dashboard-view.rd-shell tr.daftra-date-head>td{border-top:10px solid var(--rd-surface)!important;background:color-mix(in srgb,#2f6f9f 8%,var(--rd-surface,#fff))!important}
html.in-app #dashboard-view.rd-shell tr.daftra-date-head>td:first-child{border-radius:0 12px 12px 0}
html.in-app #dashboard-view.rd-shell tr.daftra-date-head>td:last-child{border-radius:12px 0 0 12px}
/* ٨ — الفراغ والتحميل: هيكلٌ رماديّ يتنفّس، وصندوقٌ فارغ يقول ما ليس فيه بدائرة. */
html.in-app #dashboard-view .t6-skel{height:54px;border-radius:14px;margin-bottom:8px;background:linear-gradient(90deg,var(--rd-surface-soft,#eef0f3) 0%,color-mix(in srgb,var(--rd-surface-soft,#eef0f3) 40%,var(--rd-surface,#fff)) 50%,var(--rd-surface-soft,#eef0f3) 100%);background-size:200% 100%;animation:t6-skel 1.3s ease-in-out infinite}
@keyframes t6-skel{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){html.in-app #dashboard-view .t6-skel{animation:none}}
html.in-app #dashboard-view #vat-details:empty{min-height:120px;display:grid;place-items:center;border:1px dashed var(--rd-line);border-radius:16px}
html.in-app #dashboard-view #vat-details:empty::before{content:"جارٍ القراءة من دفترة…";color:var(--rd-muted);font-size:13px}
html.in-app #dashboard-view .vat-empty-box{display:grid;justify-items:center;gap:6px;text-align:center;padding:26px 16px;border:1px dashed var(--rd-line)!important;border-radius:16px;background:none!important}
html.in-app #dashboard-view .vat-empty-box::before{content:"";width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,#c2621a 14%,var(--rd-surface,#fff)) center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2621a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E")}
html.in-app #dashboard-view #vat-page .t6-seg{display:flex!important;flex-wrap:wrap;grid-template-columns:none!important;width:auto}
html.in-app #dashboard-view .notification-center-note{display:none!important}
/* ٩ — وسم نوع المصدر في القيود: بلون قسمه (--k من journalSource). */
html.in-app #dashboard-view .journal-source-kind{border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--k,#5b6475) 13%,var(--rd-surface,#fff))!important;color:color-mix(in srgb,var(--k,#5b6475) 82%,var(--rd-ink,#000))!important;font-weight:700}
html.in-app .t6-addc.t6-addc-wide{gap:7px;padding-inline:12px 16px!important}
html.in-app .t6-addc.t6-addc-wide::before{font-size:20px}
html.in-app .t6-addc.t6-addc-wide::after{max-width:220px;opacity:1;font-size:13px}
html.in-app .t6-addc:disabled{opacity:.45;cursor:default}
html.in-app #dashboard-view input[type="checkbox"]:not([role="switch"]):not(.t6-keep){width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;padding:0!important;flex:none!important;border-radius:50%!important}
/* صفّ القيد (المالك ١٨ أكتوبر ٢٠٢٦): قائمة مركز التكلفة بحجم حقل حساب المصروف وتقويسه نفسه — سطرٌ واحد بنقاط،
والاسم كاملًا يظهر عند المرور (title من theme6Recurring). كانت قاعدة الكبسولة العامة أقوى فتلتفّ الأسماء في كبسولةٍ طولها ١٠٨. */
html.in-app #dashboard-view table td select:not([multiple]):not(.t6-seg-src):not(.t6r-native){height:40px!important;min-height:40px!important;max-height:40px!important;box-sizing:border-box!important;border-radius:12px!important;padding-block:0!important;padding-inline:10px 36px!important;background-size:22px 22px!important;background-position:left 7px center!important;font-weight:400!important;white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden;width:100%;max-width:100%;line-height:38px}
html.in-app #dashboard-view table td :is(input[type="search"],input[type="text"]):not(.t6-dt-text){height:40px!important;min-height:40px!important;max-height:40px!important;box-sizing:border-box!important;padding-block:0!important;border-radius:12px!important}
/* «تحديث مصادر القيد» يعيد رسم الصفحة فقط، والصفحة تقرأ مصادرها حين تُفتح وبعد كل قيد. */
html.in-app #daftra-journals-refresh{display:none!important}
/* أسطر قيد تصحيح المبلغ في طابور القيود: كل سطرٍ وحده (مدين، مدين، دائن) لا ملتصقةً في سطر. */
.reversal-lines:has(.reversal-amount-line){display:grid!important;gap:6px;justify-items:start}
.reversal-amount-line{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* «معاينة القيد» تحت المجموعة بشكل «معاينة المرفق» نفسه، أكبر قليلًا لأنه فعل المجموعة كلّها. */
html.in-app #dashboard-view .journal-peek.journal-preview-here{margin-top:0;padding:6px 14px;font-size:13px;gap:6px;border-radius:999px!important;background:var(--rd-surface)!important;box-shadow:none!important;min-height:0!important;height:auto!important}
html.in-app #dashboard-view .journal-peek.journal-preview-here svg{width:15px;height:15px}
/* نموذج التصنيف: القائمة بارتفاع الحقول وتقويسها (كصفّ القيد)، ومربّع «ورقة تفاصيل» دائرةٌ لا بيضاوي — قاعدة لمس قديمة كانت تمطّه. */
html.in-app #dashboard-view .classify-form :is(input[type="search"],input[type="text"],input:not([type]),select:not([multiple])){height:48px!important;min-height:48px!important;box-sizing:border-box!important;border-radius:12px!important}
html.in-app #dashboard-view .classify-form select:not([multiple]){padding-block:0!important;background-position:left 9px center!important}
html.in-app #dashboard-view input[type="checkbox"]:not([role="switch"]):not(.t6-keep){min-height:22px!important;max-height:22px!important}
html.in-app #dashboard-view .classify-form select:not([multiple]):not(.t6-seg-src):not(.t6r-native){border-radius:12px!important;height:48px!important;min-height:48px!important}
/* القائمة والبطاقة المختارة (المالك ١٨ أكتوبر ٢٠٢٦): ما تعمل عليه مضاءٌ، والباقي يخفّ — كأزرار طريقة الدفع.
تسري على كل قائمة بطاقاتٍ تختار منها: تصنيف البنك، مراجعة الفواتير، الموردون. والمرور يعيد البطاقة كاملةً. */
html.in-app #dashboard-view *:has(> .classify-pick.is-picked) > .classify-pick:not(.is-picked){opacity:.5;filter:saturate(.35);transition:opacity .2s ease,filter .2s ease}
html.in-app #dashboard-view *:has(> .classify-pick.is-picked) > .classify-pick:not(.is-picked):is(:hover,:focus-visible){opacity:1;filter:none}
html.in-app #dashboard-view .classify-pick.is-picked{opacity:1;filter:none;box-shadow:0 6px 18px color-mix(in srgb,var(--t6-sc,#2f6f9f) 22%,transparent)!important}
/* لوحة ربط الإيداع بإرجاع العهدة */
html.in-app #dashboard-view .custody-return-pick{display:grid;gap:6px;margin:8px 0}
html.in-app #dashboard-view .custody-return-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--rd-line);border-radius:12px;background:var(--rd-surface);cursor:pointer;font-size:13px}
html.in-app #dashboard-view .custody-return-option.is-exact{border-color:color-mix(in srgb,#2fa36b 55%,var(--rd-line));background:color-mix(in srgb,#2fa36b 7%,var(--rd-surface,#fff))}
html.in-app #dashboard-view .custody-return-list{margin:6px 0;padding-inline-start:18px;font-size:13px}
html.in-app #dashboard-view .custody-return-onapprove{margin:8px 0 0;padding:8px 12px;border-radius:12px;font-size:12.5px;color:#a35614;background:color-mix(in srgb,#e8833a 10%,var(--rd-surface,#fff))}
/* ===== نافذة تجديد الإقامة من حركة البنك (المالك ١٨ أكتوبر ٢٠٢٦) — openIqamaRenewal ===== */
.iqr-back{position:fixed;inset:0;z-index:885;background:rgb(15 23 42 / .45);display:grid;place-items:center;padding:16px}
.iqr-card{width:min(540px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--rd-surface,#fff);color:var(--rd-ink,#1d2433);border-radius:20px;padding:18px;display:grid;gap:12px;font-size:13.5px;box-shadow:0 20px 50px rgb(0 0 0 / .25)}
.iqr-head{display:flex;align-items:center;gap:10px}.iqr-head b{flex:1;font-size:16px}
.iqr-ic{width:38px;height:38px;border-radius:50%;background:#2f6f9f;color:#fff;display:grid;place-items:center;font-size:18px;flex:none}
.iqr-steps{display:flex;align-items:flex-start}
.iqr-step{display:grid;justify-items:center;gap:3px;font-size:11px;color:var(--rd-muted,#5b6475);width:56px}
.iqr-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--rd-surface,#fff);color:#9aa3b1;box-shadow:inset 0 0 0 1.5px #c9ced6}
.iqr-dot.is-done{background:#2fa36b;color:#fff;box-shadow:none}.iqr-dot.is-now{background:#2f6f9f;color:#fff;box-shadow:none}
.iqr-line{flex:1;height:2px;margin-top:12px;background:#dde1e7;font-style:normal}.iqr-line.is-done{background:#2fa36b}
.iqr-src{margin:0;background:var(--rd-surface-soft,#f7f8fb);border-radius:12px;padding:8px 12px;font-size:12px;color:var(--rd-muted,#5b6475);line-height:1.7;overflow-wrap:anywhere}
.iqr-emp{display:flex;align-items:center;gap:10px;border:1px solid var(--rd-line,#e3e7ec);border-radius:14px;padding:10px}
.iqr-av{position:relative;width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:#dfe6f2;color:#2f6f9f;font-weight:700}
.iqr-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.iqr-who{flex:1;display:grid;gap:2px;min-width:0}.iqr-who small{color:var(--rd-muted,#5b6475);font-size:11.5px}
.iqr-q{margin:0;font-weight:700;font-size:14px}
.iqr-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.iqr-actions button{justify-content:center}
.iqr-seg{display:grid;grid-template-columns:repeat(4,1fr);background:var(--rd-surface-soft,#eceff3);border-radius:999px;padding:3px;gap:2px}
.iqr-seg-b{border:0;background:none;border-radius:999px;padding:8px 0;font:inherit;font-weight:700;color:var(--rd-muted,#5b6475);cursor:pointer;min-height:0;box-shadow:none}
.iqr-seg-b.is-on{background:var(--rd-surface,#fff);color:var(--rd-ink,#1d2433);box-shadow:0 1px 3px rgb(0 0 0 / .1)}
.iqr-hint{margin:0;font-size:11.5px;color:var(--rd-muted,#5b6475)}
.iqr-res{display:grid;gap:6px;border:1px solid color-mix(in srgb,#2fa36b 45%,var(--rd-line,#e3e7ec));background:color-mix(in srgb,#2fa36b 6%,var(--rd-surface,#fff));border-radius:14px;padding:10px 12px}
.iqr-row{margin:0;font-size:12.5px}
.iqr-hijri{color:var(--rd-muted,#5b6475);font-size:12px}
.iqr-warn{color:#a35614;font-size:11.5px}
.iqr-ok{width:64px;height:64px;border-radius:50%;background:#2fa36b;color:#fff;display:grid;place-items:center;font-size:30px;margin:4px auto}
.iqr-reopen{margin:0 0 8px}
.iqr-done-tag{margin:0 0 8px;padding:8px 12px;border-radius:12px;font-size:12.5px;color:#1d7a4c;background:color-mix(in srgb,#2fa36b 10%,var(--rd-surface,#fff))}
@media (max-width:640px){.iqr-back{place-items:end center;padding:0}.iqr-card{border-radius:22px 22px 0 0;width:100%}}
/* ===== رأس القائمة «د» (المالك ١٨ أكتوبر ٢٠٢٦): الشعار يمينًا، وتحته خطٌّ رفيع بلون النظام واسمه عريضًا بلونه.
يُنقل إلى شؤون الموظفين والمراسلات مع بقية رأس القائمة (shellUiCss). ===== */
#dashboard-view.rd-shell .workspace-header > img.t6-logo{object-position:right center}
#dashboard-view.rd-shell .workspace-header .t6-side-sys{display:grid;gap:10px;margin:6px 0 0!important;padding:0!important}
/* الشعار أقرب إلى الخط (المالك ١٨ أكتوبر ٢٠٢٦): يُنزَّل ولا يتحرّك الخط. */
@media (min-width:761px){#dashboard-view.rd-shell .workspace-header:has(.t6-side-sys) > img.t6-logo{margin:16px 0 0!important}}
#dashboard-view.rd-shell .workspace-header .t6-side-sys-line{display:block;height:3px;border-radius:3px;background:linear-gradient(to left,var(--sys),transparent)}
#dashboard-view.rd-shell .workspace-header .t6-side-sys b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;line-height:1.3;color:var(--sys)}
#dashboard-view.rd-shell .workspace-header .t6-side-sys svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] #dashboard-view.rd-shell .workspace-header .t6-side-sys b{color:color-mix(in srgb,var(--sys) 62%,#fff)}
/* سطر «نظام …» واسم المستخدم (المخفي أصلًا) يحلّ محلّهما الاسم الملوّن: لا يبقى فراغهما. */
#dashboard-view.rd-shell .workspace-header:has(.t6-side-sys) .workspace-welcome{display:none}
/* نافذة «الإشعارات»: قائمة الأجهزة (المالك ١٩ أكتوبر ٢٠٢٦)، كنافذة شؤون الموظفين والمراسلات (shell-ui). */
.rd-push-devs{display:grid;gap:6px;margin-top:6px}.rd-push-dev{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;border:1px solid var(--rd-line,#e4e6ea);border-radius:12px;padding:8px 10px}.rd-push-dev b{font-size:13px}.rd-push-dev small{grid-column:1;font-size:11.5px;color:var(--rd-muted,#5b6475)}.rd-push-rm{grid-row:1/3;grid-column:2;height:30px;padding:0 10px;border-radius:9px;border:1px solid color-mix(in srgb,#d6453d 35%,transparent);background:transparent;color:#d6453d;font:inherit;font-size:12px;cursor:pointer}
/* ===== مشتريات المنشأة فاتورةً فاتورة (المالك ١٩ أكتوبر ٢٠٢٦): بطاقة الفاتورة تقول من أين جاءت ومن أرسلها ومتى ===== */
/* العمود ضيّق (١٩٠ نقطة على الحاسوب بين التفاصيل والمستند): المبلغ تحت الاسم لا بجانبه، وأيقونة البنك التي تضعها «٦» على بطاقات تصنيف الحركات لا تُوضع هنا. */
html.in-app #purchases-list .pv-card{display:grid!important;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"src body" "src amt";align-items:start;gap:4px 9px;text-align:start;padding-inline-end:12px!important}
html.in-app #purchases-list .pv-card::before{display:none!important}
html.in-app #purchases-list .pv-card .pv-src{grid-area:src;width:34px;height:34px}html.in-app #purchases-list .pv-card .pv-body{grid-area:body}html.in-app #purchases-list .pv-card .pv-amt{grid-area:amt;justify-self:start}
html.in-app .pv-src{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
html.in-app .pv-src svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.in-app .pv-src.is-tg{background:#2aa1da}html.in-app .pv-src.is-wa{background:#25a35a}html.in-app .pv-src.is-up{background:#5b6475}
html.in-app .pv-body{display:grid;gap:2px;min-width:0}html.in-app .pv-body strong{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.in-app .pv-body small{font-size:11.5px;color:var(--rd-muted,#5b6475)}
html.in-app .pv-state{justify-self:start;border-radius:999px;padding:1px 8px;font-weight:800;font-size:10.5px!important}
html.in-app .pv-state.is-draft{background:color-mix(in srgb,#e8833a 14%,transparent);color:#b5651d!important}
html.in-app .pv-state.is-pending{background:color-mix(in srgb,#4a55a2 14%,transparent);color:#4a55a2!important}
html.in-app .pv-state.is-ready{background:color-mix(in srgb,#2f6f9f 14%,transparent);color:#2f6f9f!important}
html.in-app .pv-state.is-done{background:color-mix(in srgb,#2fa36b 14%,transparent);color:#1d7a4c!important}
html.in-app .pv-amt{font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* ما ملأه ما أجاب به المرسِل في البوت يُقال تحته — ليُتحقّق منه. */
html.in-app .purchase-field.is-from-sender::after{content:attr(data-from);font-size:11px;font-weight:800;color:#1d7a4c}
/* قيود التصحيح مع قيدها في صفحة القيود المعتمدة (١٩ أكتوبر ٢٠٢٦). */
.journal-badge.is-correction { background: rgba(116, 87, 216, .12); color: #6a4fc7; }
.journal-section-title.is-correction { color: #6a4fc7; }
.journal-corrections { margin: 12px 0 6px; padding: 10px 14px; border: 1px dashed rgba(116, 87, 216, .4); border-radius: 12px; background: rgba(116, 87, 216, .04); }
.journal-correction-row { margin: 6px 0; font-size: 13px; }
.journal-correction-row small { display: block; opacity: .7; margin-top: 2px; }
html[data-theme="dark"] .journal-badge.is-correction, html[data-theme="dark"] .journal-section-title.is-correction { color: #b9a6f2; }
/* ===== صفحة القيود: ما جاء من مصدره يُقرأ، و«تعديل» يفتحه (المالك ١٩ أكتوبر ٢٠٢٦) ===== */
.jr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jr-view { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.jr-view b { font-size: var(--fs-12p5, 12.5px); font-weight: 600; color: var(--rd-ink, #16243a); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-view[hidden], .jr-field > [hidden] { display: none !important; }
.jr-from { display: inline-flex; align-items: center; border-radius: 999px; padding: 0 8px; font-size: 10.5px; font-weight: 600; background: color-mix(in srgb, #2f6f9f 10%, var(--rd-surface, #fff)); color: #2f6f9f; }
.jr-edit { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 700; color: #2f6f9f; border-bottom: 1px dashed color-mix(in srgb, #2f6f9f 50%, transparent); cursor: pointer; }
.jr-view.is-missing > span:first-child { display: inline-flex; border: 1px dashed #e3b26b; background: #fdf6ea; color: #9a5b0c; border-radius: 10px; padding: 4px 9px; font-size: 11.5px; font-weight: 600; }
html[data-theme="dark"] .jr-view.is-missing > span:first-child { background: rgba(227, 178, 107, .12); color: #f0c27f; }
html[data-theme="dark"] .jr-edit, html[data-theme="dark"] .jr-from { color: #9cc6ea; }
.jcc-shade { position: fixed; inset: 0; z-index: 890; background: rgba(15, 23, 36, .35); display: grid; place-items: center; padding: 16px; }
.jcc-box { width: min(480px, 100%); background: var(--rd-surface, #fff); color: var(--rd-ink, #16243a); border-radius: 16px; box-shadow: 0 18px 50px rgba(20, 30, 50, .25); overflow: hidden; }
.jcc-box h3 { margin: 0; padding: 16px 18px 4px; font-size: 16px; }
.jcc-box p { margin: 0 18px 10px; color: var(--rd-muted, #6b7686); font-size: 12.5px; }
.jcc-box ul { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.jcc-box li { padding: 9px 18px; border-top: 1px solid var(--rd-line-soft, #eef1f5); font-size: 12.5px; }
.jcc-box li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e8833a; margin-inline-end: 8px; vertical-align: middle; }
.jcc-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--rd-line, #e3e8ef); background: color-mix(in srgb, var(--rd-line, #e3e8ef) 25%, var(--rd-surface, #fff)); }
/* ===== لوحة تصنيف الحركة بترتيب المالك (١٩ أكتوبر ٢٠٢٦، التطبيق الموحّد) =====
المبلغ أوّلًا ومعه شريط المراحل صغيرًا، والتفاصيل أزواجًا، والطريقان الجاهزان في سطر،
ونوع الإثبات ثلاث كبسولات. */
html.in-app .classify-known > .stage-strip.is-compact { margin: 8px 0 4px !important; padding: 0 !important; }
html.in-app .stage-strip.is-compact > .stage-step { gap: 3px; }
html.in-app .stage-strip.is-compact .stage-mark { width: 24px !important; height: 24px !important; border-width: 1.5px !important; }
html.in-app .stage-strip.is-compact .stage-mark svg { width: 12px; height: 12px; }
html.in-app .stage-strip.is-compact .is-now .stage-mark { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 18%, transparent); }
html.in-app .stage-strip.is-compact > .stage-step:not(:first-child)::before { top: 11px; height: 2px; inset-inline-end: calc(50% + 15px); width: calc(100% - 30px); }
html.in-app .stage-strip.is-compact .stage-label { font-size: 10.5px !important; font-weight: 600 !important; }
html.in-app .classify-known > .stage-strip.is-compact + .stage-trail { margin: 0 0 4px; font-size: 11px; }
html.in-app .classify-known dl.classify-facts-b { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 5px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rd-line-soft, #eef1f5); font-size: 12.5px; }
html.in-app .classify-facts-b > .kf { display: flex; gap: 8px; min-width: 0; align-items: baseline; }
html.in-app .classify-facts-b > .kf.is-wide { grid-column: 1 / -1; }
html.in-app .classify-facts-b dt { flex: none; min-width: 62px; }
html.in-app .classify-facts-b dd { min-width: 0; font-weight: 600; }
html.in-app .classify-paths { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 2px 0 10px; }
/* جنبًا إلى جنب متى اتّسعت اللوحة، وسطرين كاملين متى ضاقت — لا زرّ يخرج عن حافته. */
html.in-app .classify-paths > * { flex: 1 1 auto !important; min-width: 0; margin: 0 !important; }
html.in-app .classify-paths > .link-invoice { padding: 0 12px; display: flex; flex-direction: column; justify-content: center; min-height: 38px; }
html.in-app .classify-paths > .link-invoice > summary { font-size: 12.5px; line-height: 36px; white-space: nowrap; }
html.in-app .classify-paths > .link-invoice[open] { flex-basis: 100% !important; order: 2; padding: 0 12px 12px; }
html.in-app .rd-shell .classify-paths > .classify-make-voucher, html.in-app .classify-paths > .classify-make-voucher { width: auto !important; justify-content: center; white-space: nowrap; }
html.in-app .classify-paths > .classify-voucher-tag { white-space: normal; }
html.in-app .classify-extras:empty { display: none; }
html.in-app .classify-or { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; color: var(--rd-muted, #6b7686); font-size: 11.5px; }
html.in-app .classify-or::before, html.in-app .classify-or::after { content: ""; flex: 1; height: 1px; background: var(--rd-line, #e3e8ef); }
/* السؤال نفسه بالشكل نفسه أينما سُئل (المالك ١٩ أكتوبر ٢٠٢٦): ما وُسم data-t6-pills يصير كبسولات —
نوع الإثبات وسؤال الضريبة في تصنيف الحركات، ومشتريات المنشأة، ونافذة الاعتماد، وتسجيل حركة.
:is(#dashboard-view, body) يعطيها وزن المعرّف لتغلب أزرار الصفحة، وتصل النوافذ التي خارجها. */
html.in-app :is(#dashboard-view, body) .t6-seg.t6-pills { display: grid !important; grid-template-columns: none !important; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; width: 100%; }
html.in-app :is(#dashboard-view, body) .t6-seg.t6-pills > button.t6-seg-btn { min-height: 38px !important; height: 38px !important; width: 100% !important; margin: 0 !important; padding: 0 8px !important; border-radius: 999px !important; border: 1px solid transparent !important; background: color-mix(in srgb, var(--rd-line, #e3e8ef) 45%, var(--rd-surface, #fff)) !important; color: var(--rd-muted, #6b7686) !important; justify-content: center !important; text-align: center; opacity: 1 !important; box-shadow: none !important; font: inherit; font-size: 13px !important; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.in-app :is(#dashboard-view, body) .t6-seg.t6-pills > button.t6-seg-btn.is-on { background: var(--t6-sc, #2f6f9f) !important; color: #fff !important; font-weight: 700; }
html.in-app :is(#dashboard-view, body) .t6-seg.t6-pills > button.t6-seg-btn:disabled { opacity: .55 !important; cursor: default; }
html.in-app :is(#dashboard-view, body) .t6-seg.t6-pills .t6-seg-ic { display: none !important; }
/* ===== نافذة الاعتماد بتصميم «٦» (المالك ١٩ أكتوبر ٢٠٢٦، التطبيق الموحّد) =====
كانت ترسم بالطبقة القديمة لأنها خارج الصفحة: عنوانٌ كبير وأيقونة تحذير وحقولٌ عالية.
صارت كنوافذ «٦» (rd-pop): رأسٌ صغير بزرّ إغلاق البيت، وحقولٌ ٤٠ بكسل، وعناوين خافتة صغيرة. */
html.in-app .approval-overlay { background: rgb(15 27 45 / .28) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.in-app .approval-overlay .approval-dialog.is-ordered-b { width: min(440px, calc(100vw - 32px)) !important; max-width: none !important; border-radius: 20px !important; padding: 14px 18px 18px !important; border: 0 !important; box-shadow: 0 20px 50px rgb(15 27 45 / .3) !important; background: var(--rd-surface, #fff) !important; }
html.in-app .approval-dialog.is-ordered-b .approval-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px; margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; }
html.in-app .approval-dialog.is-ordered-b .approval-heading span, html.in-app .approval-dialog.is-ordered-b .rd-dialog-icon { display: none !important; }
html.in-app .approval-dialog.is-ordered-b .approval-heading h2 { margin: 0 !important; font-size: 16px !important; line-height: 1.5 !important; font-weight: 700 !important; }
html.in-app .approval-dialog.is-ordered-b > p { margin: 0 0 12px !important; font-size: 12px !important; line-height: 1.7; color: var(--rd-muted, #6b7686) !important; }
html.in-app .approval-dialog.is-ordered-b #approval-form { display: grid !important; gap: 4px !important; }
html.in-app .approval-dialog.is-ordered-b #approval-form > label { margin: 10px 0 0 !important; font-size: 12px !important; font-weight: 600 !important; color: var(--rd-muted, #6b7686) !important; }
html.in-app .approval-dialog.is-ordered-b #approval-form > label:first-child { margin-top: 0 !important; }
html.in-app .approval-dialog.is-ordered-b #approval-form > :is(input, select) { height: 40px !important; min-height: 40px !important; border: 1px solid var(--rd-line, #e3e8ef) !important; border-radius: 12px !important; padding: 0 12px !important; font: inherit; font-size: 14px !important; background: var(--rd-surface, #fff) !important; box-shadow: none !important; }
html.in-app .approval-dialog.is-ordered-b #approval-form > input:focus { border-color: #2f6f9f !important; box-shadow: 0 0 0 3px color-mix(in srgb, #2f6f9f 18%, transparent) !important; outline: none; }
html.in-app .approval-dialog.is-ordered-b #approval-form > small.field-help { font-size: 11px !important; color: var(--rd-muted, #6b7686) !important; margin: 2px 0 0 !important; }
html.in-app .approval-dialog.is-ordered-b .approval-memory-note:empty { display: none; }
html.in-app .approval-dialog.is-ordered-b .approval-memory-note { color: #8a6410 !important; }
html.in-app .approval-dialog.is-ordered-b .approval-actions { display: flex !important; gap: 8px !important; margin-top: 16px !important; }
html.in-app .approval-dialog.is-ordered-b .approval-actions > button { flex: 1 1 0; min-height: 42px !important; border-radius: 12px !important; }
/* حقل التاريخ يوم/شهر/سنة في نافذة الاعتماد كما في الصفحة. */
html.in-app .approval-dialog .t6-dt{position:relative;display:inline-flex;align-items:center;gap:6px;width:100%;min-width:0;box-sizing:border-box;background:var(--rd-surface);border:1px solid var(--rd-line);border-radius:12px;padding:3px 6px 3px 12px;min-height:42px}
html.in-app .approval-dialog .t6-dt:focus-within{border-color:color-mix(in srgb,#1f9aa5 60%,var(--rd-line))}
html.in-app .approval-dialog .t6-dt-text{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;outline:0;font:inherit;font-weight:700;color:var(--rd-ink);padding:6px 0!important;text-align:right;letter-spacing:.5px;min-height:0!important}
html.in-app .approval-dialog .t6-dt-text::placeholder{color:var(--rd-faint,#9aa3b1);font-weight:400;letter-spacing:0}
html.in-app .approval-dialog .t6-dt-pick{order:-1;width:30px;height:30px;min-height:0;flex:none;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;color:#1f9aa5;background:color-mix(in srgb,#1f9aa5 13%,var(--rd-surface,#fff));box-shadow:none}
html.in-app .approval-dialog .t6-dt-pick svg{width:16px;height:16px;fill:none;stroke:currentColor!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.in-app .approval-dialog .t6-dt-native{position:absolute!important;inset:auto 0 0 auto;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none;border:0!important;padding:0!important;min-height:0!important}
html.in-app .approval-dialog .t6-dt:has(.t6-dt-text:disabled){opacity:.6}
html.in-app .approval-dialog.is-ordered-b .t6-dt { height: 40px; min-height: 40px; border-radius: 12px; }