/* ============================================================
   Agency OS — app.css (المرحلة 3)
   الهيكل (شريط جانبي/علوي/سفلي) + المكونات المشتركة + تعديلات التصميم الهادئ.
   يُحمَّل بعد tokens.css وicons.css وmain.css؛ لا ألوان صلبة هنا — كلها من tokens.css.
   ============================================================ */

/* ---------- أساسيات وإتاحة ---------- */
html { background: var(--color-bg); overflow-x: hidden; }
body { background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font); font-size: var(--fs-base); line-height: 1.65; text-rendering: optimizeLegibility; }
h1 { font-size: var(--fs-xl); font-weight: 700; }
h2 { font-size: var(--fs-lg); font-weight: 700; }
h3 { font-size: var(--fs-base); font-weight: 700; }
a { color: inherit; }
.page-content a:not([class]), .page-content td a:not(.btn), .page-content .dl a, .page-content .panel-foot a, .page-content .entity-meta a { color: var(--color-info); }
.page-content a:not([class]):hover, .page-content td a:not(.btn):hover { text-decoration: underline; }
.text-accent { color: var(--color-accent-strong); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; margin: -1px; padding: 0; }
.skip-link { position: fixed; top: -60px; right: 12px; z-index: 1000; background: var(--color-text-primary); color: var(--color-bg); padding: 10px 16px; border-radius: var(--radius); transition: top .15s; }
.skip-link:focus { top: 12px; }
.m-0 { margin: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
::selection { background: var(--color-accent-muted); color: var(--color-text-primary); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border: 2px solid var(--color-bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- الهيكل ---------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-content { flex: 1; width: 100%; max-width: 1320px; margin-inline: auto; padding: var(--sp-6) var(--sp-6) var(--sp-10); outline: none; }
.flash-wrap { margin-bottom: var(--sp-4); }

/* الشريط الجانبي */
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--color-surface); border-left: 1px solid var(--color-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: var(--z-sidebar); }
.sidebar-logo { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); height: var(--topbar-h); font-size: var(--fs-lg); font-weight: 700; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius); background: var(--color-accent); color: var(--color-text-on-accent); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-4); display: block; }
.nav-group { margin-bottom: var(--sp-3); }
.nav-section-label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); padding: var(--sp-2) var(--sp-3) var(--sp-1); letter-spacing: 0; text-transform: none; margin: 0; }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); min-height: 38px; padding: 7px var(--sp-3); border-radius: var(--radius); color: var(--color-text-secondary); font-size: var(--fs-sm); font-weight: 500; position: relative; }
.nav-item i { width: 1.2em; height: 1.2em; color: var(--color-text-muted); }
.nav-item:hover { background: var(--color-sunken); color: var(--color-text-primary); }
.nav-item.active { background: var(--color-accent-ghost); color: var(--color-text-primary); font-weight: 700; }
.nav-item.active i { color: var(--color-accent-strong); }
.nav-item.active::before { content: ''; position: absolute; right: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px 0 0 3px; background: var(--color-accent); }
.nav-badge { margin-inline-start: auto; background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; padding: 0 6px; border-radius: 99px; text-align: center; }
.sidebar-footer { border-top: 1px solid var(--color-border); padding: var(--sp-3); flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2); }
.sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent-muted); color: var(--color-accent-strong); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; border: 0; }
.sidebar-user-name { font-size: var(--fs-sm); font-weight: 700; }
.sidebar-user-role { font-size: var(--fs-xs); color: var(--color-text-muted); }
.sidebar-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: calc(var(--z-sidebar) - 1); }

/* الشريط العلوي */
.topbar { position: sticky; top: 0; z-index: var(--z-topbar); height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.topbar-title-wrap { min-width: 0; flex: 1; }
.topbar .breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; }
.topbar .breadcrumb a { color: var(--color-text-muted); }
.topbar .breadcrumb a:hover { color: var(--color-text-primary); text-decoration: none; }
.topbar .breadcrumb .sep { width: .8em; height: .8em; }
.topbar .breadcrumb .current { color: var(--color-text-primary); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.topbar-title { display: none; font-weight: 700; font-size: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-hamburger { display: none; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.topbar-search { display: flex; align-items: center; gap: var(--sp-2); width: 280px; max-width: 32vw; height: 36px; padding: 0 var(--sp-3); background: var(--color-sunken); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text-muted); font-family: inherit; font-size: var(--fs-sm); cursor: text; }
.topbar-search:hover { border-color: var(--color-border-strong); }
.topbar-search span { flex: 1; text-align: start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-search kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 0 5px; color: var(--color-text-muted); background: var(--color-surface); }

/* قوائم منسدلة */
.menu-wrap { position: relative; }
.menu-pop { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 220px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--sp-1); z-index: var(--z-drawer); }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 38px; padding: 7px var(--sp-3); border: 0; background: none; border-radius: var(--radius); color: var(--color-text-primary); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: start; }
.menu-pop a:hover, .menu-pop button:hover, .menu-pop a:focus-visible, .menu-pop button:focus-visible { background: var(--color-sunken); }
.menu-label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.notif-pop { width: 340px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); margin: 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
.notif-head a { display: inline; width: auto; min-height: 0; padding: 0; color: var(--color-info); font-weight: 500; }
.notif-item { align-items: flex-start !important; border-radius: 0 !important; border-bottom: 1px solid var(--color-border) !important; }
.notif-item.unread { background: var(--color-accent-ghost) !important; }
.notif-item > span { display: flex; flex-direction: column; min-width: 0; }
.notif-item-title { font-weight: 600; white-space: normal; }
.notif-item-date { font-size: var(--fs-xs); color: var(--color-text-muted); }
.notif-empty { padding: var(--sp-6); text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); }
.notif-bell { position: relative; }
.notif-badge { position: absolute; top: 0; inset-inline-start: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; transform: translate(-30%, -20%); }
:root[data-theme="dark"] .notif-badge, :root[data-theme="dark"] .nav-badge { color: #1b2230; }

/* الشريط السفلي (موبايل) */
.bottom-nav { display: none; }

/* ---------- ترويسة الصفحة ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-header h1 { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xl); }
.page-header h1 i { color: var(--color-text-muted); font-size: 1em; }
.page-subtitle { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ---------- أزرار ---------- */
.btn { min-height: 38px; padding: 7px var(--sp-4); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; background: var(--color-card); color: var(--color-text-primary); border: 1px solid var(--color-border-strong); box-shadow: none; transform: none; gap: var(--sp-2); }
.btn:hover { background: var(--color-sunken); border-color: var(--color-border-strong); color: var(--color-text-primary); box-shadow: none; transform: none; }
.btn:active { transform: none; }
.btn-primary, .btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-accent); font-weight: 700; box-shadow: none; }
.btn-primary:hover, .btn-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-text-on-accent); box-shadow: none; transform: none; }
.btn-secondary { background: var(--color-card); color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-sunken); color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-sunken); color: var(--color-text-primary); border-color: transparent; }
.btn-danger { background: var(--color-card); color: var(--color-danger); border-color: var(--color-danger-border); }
.btn-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }
.btn-xs { min-height: 28px; padding: 2px 10px; font-size: var(--fs-xs); }
.btn-sm { min-height: 32px; padding: 4px 12px; font-size: var(--fs-sm); }
.btn-lg { min-height: 46px; padding: 10px var(--sp-6); font-size: var(--fs-base); }
.btn-icon { width: 38px; min-width: 38px; height: 38px; padding: 0; border-radius: var(--radius); background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.btn-icon.btn-ghost:hover, .btn-icon:hover { background: var(--color-sunken); color: var(--color-text-primary); border-color: transparent; }
.btn-icon.btn-xs { width: 28px; min-width: 28px; height: 28px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid var(--color-text-on-accent); border-inline-end-color: transparent; border-radius: 50%; animation: icon-spin .7s linear infinite; }
.btn:not(.btn-primary):not(.btn-accent).is-loading::after { border-color: var(--color-text-secondary); border-inline-end-color: transparent; }

/* ---------- نماذج ---------- */
label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; }
.req, label .req, .required { color: var(--color-danger); margin-inline-start: 2px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=week], input[type=tel], input[type=month], input[type=search], input[type=url], select, textarea {
  background: var(--color-card); color: var(--color-text-primary); border: 1px solid var(--color-input-border); border-radius: var(--radius); min-height: 42px; padding: 9px var(--sp-3); font-size: var(--fs-base); color-scheme: inherit;
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); font-weight: 400; opacity: .85; }
input:hover, select:hover, textarea:hover { border-color: var(--color-text-secondary); }
input:focus, select:focus, textarea:focus { border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 22%, transparent); }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--color-sunken); color: var(--color-text-secondary); cursor: not-allowed; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23788' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; background-size: 16px; padding-inline-start: 34px; }
select option { background: var(--color-card); color: var(--color-text-primary); }
input[type=checkbox], input[type=radio] { accent-color: var(--color-accent-strong); width: 18px; height: 18px; min-height: 0; vertical-align: middle; }
.form-group { margin-bottom: var(--sp-4); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.form-row > .form-group { margin-bottom: var(--sp-4); }
.field-hint { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 4px; }
.field-error { color: var(--color-danger); font-size: var(--fs-sm); margin-top: 4px; min-height: 0; display: none; font-weight: 600; }
.field-error:not(:empty), .has-error .field-error { display: flex; align-items: center; gap: 6px; }
.field-error:not(:empty)::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ic-err) center/contain no-repeat; mask: var(--ic-err) center/contain no-repeat; }
:root { --ic-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E"); }
.has-error input, .has-error select, .has-error textarea, input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true], input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--color-danger); background: var(--color-danger-bg); }
.form-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-4); margin-top: var(--sp-2); border-top: 1px solid var(--color-border); }
details.advanced { border: 1px dashed var(--color-border-strong); border-radius: var(--radius); padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); background: var(--color-sunken); }
details.advanced > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--color-text-secondary); min-height: 32px; display: flex; align-items: center; list-style: none; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: '+'; display: inline-grid; place-items: center; width: 18px; margin-inline-end: 8px; font-weight: 700; }
details.advanced[open] > summary::before { content: '−'; }
details.advanced[open] { padding-bottom: var(--sp-3); }
details.advanced[open] > summary { margin-bottom: var(--sp-3); }
.combo { position: relative; }
.combo-list { position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 20; list-style: none; margin: 0; padding: var(--sp-1); background: var(--color-card); border: 1px solid var(--color-border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); max-height: 240px; overflow-y: auto; }
.combo-list li { padding: 9px var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); }
.combo-list li:hover, .combo-list li.active { background: var(--color-sunken); }
.combo-list li span { color: var(--color-text-muted); }
.combo-empty { color: var(--color-text-muted); cursor: default !important; }
.chip-selected { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: 8px; padding: 2px 4px 2px 12px; background: var(--color-accent-ghost); border: 1px solid var(--color-accent-dim); border-radius: 99px; font-size: var(--fs-sm); font-weight: 600; }

/* ---------- بطاقات ولوحات ---------- */
.card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: none; padding: var(--sp-5); margin-bottom: var(--sp-5); transform: none; }
.card:hover { border-color: var(--color-border); box-shadow: none; transform: none; }
.card-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); font-weight: 700; color: var(--color-text-primary); margin: 0 0 var(--sp-4); padding: 0; border: 0; }
.card-title i { color: var(--color-text-muted); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: 0; border: 0; }
.panel { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--sp-5); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--color-border); min-height: 52px; }
.panel-head h2, .panel-head h3 { font-size: var(--fs-base); margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.panel-head .count { font-weight: 500; color: var(--color-text-muted); font-size: var(--fs-sm); }
.panel-body { padding: var(--sp-5); }
.panel-body.flush { padding: 0; }
.panel-foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border); background: var(--color-sunken); font-size: var(--fs-sm); color: var(--color-text-secondary); }
.layout-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.layout-2 > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.stack > .panel, .stack > .card { margin-bottom: 0; }
.grid { gap: var(--sp-4); }

/* مؤشرات KPI: رقم + تسمية، بلا زخرفة */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.kpi { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); min-width: 0; display: block; color: inherit; }
a.kpi:hover { border-color: var(--color-border-strong); background: var(--color-card-hover); text-decoration: none !important; }
.kpi-label { font-size: var(--fs-sm); color: var(--color-text-secondary); display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; margin-top: 4px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); margin-inline-start: 4px; }
.kpi-sub { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
.kpi.is-danger .kpi-value { color: var(--color-danger); }
.kpi.is-warning .kpi-value { color: var(--color-warning); }
.kpi.is-success .kpi-value { color: var(--color-success); }
.kpi.is-danger { border-color: var(--color-danger-border); }
.kpi-cur { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.kpi-cur .kpi-value { font-size: var(--fs-xl); margin-top: 0; }
.stat-box, .big-stat-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: none; transform: none; }
.stat-box:hover { box-shadow: none; transform: none; }
.stat-value, .big-stat-card .value { color: var(--color-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.big-stat-card .label, .stat-label { color: var(--color-text-secondary); font-size: var(--fs-sm); }
.big-stat-card.income .value { color: var(--color-success); }
.big-stat-card.expense .value { color: var(--color-danger); }

/* قوائم صفوف (مهام/عناصر) */
.row-list { list-style: none; margin: 0; padding: 0; }
.row-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--color-border); min-height: 56px; }
.row-item:last-child { border-bottom: 0; }
.row-item:hover { background: var(--color-card-hover); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: var(--color-text-primary) !important; }
.row-title:hover { text-decoration: none !important; color: var(--color-info) !important; }
.row-sub { font-size: var(--fs-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-side { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.row-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.next-action { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); background: var(--color-accent-ghost); border: 1px solid var(--color-accent-dim); border-radius: var(--radius-lg); }
.next-action .na-text { flex: 1; min-width: 200px; }
.next-action .na-label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent-strong); }
.next-action .na-title { font-weight: 700; font-size: var(--fs-lg); }
.next-action .na-sub { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.attn-list { display: flex; flex-direction: column; }
.attn-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--color-border); color: inherit !important; }
.attn-item:last-child { border-bottom: 0; }
.attn-item:hover { background: var(--color-card-hover); text-decoration: none !important; }
.attn-item .attn-ic { width: 34px; height: 34px; border-radius: var(--radius); display: grid; place-items: center; flex-shrink: 0; background: var(--color-sunken); color: var(--color-text-secondary); }
.attn-item.is-danger .attn-ic { background: var(--color-danger-bg); color: var(--color-danger); }
.attn-item.is-warning .attn-ic { background: var(--color-warning-bg); color: var(--color-warning); }
.attn-item.is-info .attn-ic { background: var(--color-info-bg); color: var(--color-info); }
.attn-item .attn-text { flex: 1; min-width: 0; font-weight: 600; }
.attn-item .attn-sub { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--color-text-muted); }
.attn-item .attn-num { font-weight: 700; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

/* شريط تقدم */
.progress-track { height: 8px; background: var(--color-sunken); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-accent); border-radius: 99px; }
.progress-fill.is-success { background: var(--color-success); }
.progress-fill.is-danger { background: var(--color-danger); }

/* ---------- جداول ---------- */
.table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); overflow-x: auto; }
.panel .table-wrap, .panel-body.flush .table-wrap { border: 0; border-radius: 0; }
table { font-size: var(--fs-sm); background: transparent; }
thead th { background: var(--color-sunken); color: var(--color-text-secondary); font-weight: 700; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; padding: 10px var(--sp-4); border-bottom: 1px solid var(--color-border); text-align: start; }
tbody td { padding: 12px var(--sp-4); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
tbody tr:hover td { background: var(--color-card-hover); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
tr[data-href] { cursor: pointer; }
tfoot td { font-weight: 700; background: var(--color-sunken); padding: 10px var(--sp-4); }

/* ---------- شارات (حالة) ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; min-height: 22px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700; border: 1px solid transparent; white-space: nowrap; line-height: 1.4; }
.badge-green, .badge-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.badge-red, .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.badge-yellow, .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge-blue, .badge-info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); }
.badge-gray, .badge-secondary, .badge-default { background: var(--color-sunken); color: var(--color-text-secondary); border-color: var(--color-border); }
.badge-gold { background: var(--color-accent-ghost); color: var(--color-accent-strong); border-color: var(--color-accent-dim); }

/* ---------- تنبيهات ---------- */
.alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid; font-size: var(--fs-sm); margin-bottom: var(--sp-4); line-height: 1.6; }
.alert > i { margin-top: 3px; }
.alert-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.alert-error, .alert-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.alert-info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); }

/* ---------- تبويبات ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: none; background: transparent; padding: 0; }
.tab-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px var(--sp-4); min-height: 44px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--color-text-secondary); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; border-radius: 0; cursor: pointer; font-family: inherit; }
.tab-link:hover { color: var(--color-text-primary); background: transparent; }
.tab-link.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent); background: transparent; }
.segmented { display: flex; gap: 4px; padding: 4px; margin: 0 var(--sp-5) var(--sp-4); background: var(--color-sunken); border-radius: var(--radius); overflow-x: auto; scrollbar-width: none; }
.segmented button { flex: 1; min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.segmented button[aria-selected=true] { background: var(--color-card); color: var(--color-text-primary); box-shadow: 0 0 0 1px var(--color-border-strong); }

/* ---------- فلاتر ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.filter-bar .form-group { margin: 0; min-width: 150px; flex: 1 1 150px; }
.filter-bar label { font-size: var(--fs-xs); margin-bottom: 4px; color: var(--color-text-secondary); }
.filter-bar input, .filter-bar select { min-height: 38px; padding-block: 6px; }
.filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: 99px; border: 1px solid var(--color-border-strong); background: var(--color-card); color: var(--color-text-secondary) !important; font-size: var(--fs-sm); font-weight: 600; text-decoration: none !important; }
.chip:hover { background: var(--color-sunken); }
.chip.active { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-bg) !important; }
.chip .n { font-weight: 500; opacity: .8; }

/* ---------- حالات: فراغ/تحميل/خطأ ---------- */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--color-text-secondary); }
.empty-state i { display: block; margin: 0 auto var(--sp-3); width: 40px; height: 40px; color: var(--color-text-muted); opacity: .6; font-size: 40px; }
.empty-state h3 { font-size: var(--fs-base); color: var(--color-text-primary); margin: 0 0 4px; }
.empty-state p { margin: 0 auto var(--sp-4); max-width: 420px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.loading-state { text-align: center; padding: var(--sp-8); color: var(--color-text-muted); }
.skeleton { background: linear-gradient(90deg, var(--color-sunken) 25%, var(--color-border) 37%, var(--color-sunken) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: var(--radius); min-height: 16px; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- نوافذ ---------- */
body.dialog-open, body.drawer-open { overflow: hidden; }
.dialog-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 8vh var(--sp-4) var(--sp-4); overflow-y: auto; }
.dialog { width: 100%; max-width: 480px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; max-height: 84vh; overflow: hidden; }
.dialog-lg { max-width: 600px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.dialog-head h2 { margin: 0; font-size: var(--fs-lg); }
.dialog-body { padding: 0 var(--sp-5) var(--sp-4); overflow-y: auto; flex: 1; }
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border); background: var(--color-sunken); }
.dialog-search { max-width: 640px; }
.search-box { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); padding-inline-start: var(--sp-4); border-bottom: 1px solid var(--color-border); }
.search-box input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 44px; font-size: var(--fs-lg); }
.search-results { overflow-y: auto; max-height: 56vh; padding: var(--sp-2); }
.search-group { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.search-results a[role=option] { display: flex; flex-direction: column; padding: 8px var(--sp-3); border-radius: var(--radius); color: var(--color-text-primary) !important; text-decoration: none !important; }
.search-results a[role=option]:hover, .search-results a[role=option].active { background: var(--color-sunken); }
.sr-title { font-weight: 600; }
.sr-sub { font-size: var(--fs-sm); color: var(--color-text-muted); }
.search-hint { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); }
.search-hint.is-error { color: var(--color-danger); }
.summary-box { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--color-info-bg); border: 1px solid var(--color-info-border); border-radius: var(--radius); color: var(--color-text-primary); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 4px; }
.result-panel { text-align: center; padding: var(--sp-6) var(--sp-5) var(--sp-5); }
.result-icon { color: var(--color-success); font-size: 44px; line-height: 1; margin-bottom: var(--sp-2); }
.result-icon i { width: 1em; height: 1em; }
.result-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.sheet-list { display: flex; flex-direction: column; padding: 0 var(--sp-3) var(--sp-4); }
.sheet-list a, .sheet-list button { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 8px var(--sp-3); background: none; border: 0; border-bottom: 1px solid var(--color-border); font: inherit; font-size: var(--fs-base); color: var(--color-text-primary) !important; text-align: start; cursor: pointer; text-decoration: none !important; }
.sheet-list a:last-child, .sheet-list button:last-child { border-bottom: 0; }

/* نوافذ/أدراج قديمة (modal/drawer) على نفس الألوان */
.modal-overlay { background: var(--overlay); }
.modal-box, .modal { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal) !important; }
.modal-header { border-bottom: 1px solid var(--color-border); }
.modal-footer { border-top: 1px solid var(--color-border); }
.modal-close { color: var(--color-text-secondary); }
.drawer { background: var(--color-card); border-color: var(--color-border); }
.drawer-overlay { background: var(--overlay); }

/* ---------- إشعارات عابرة (toast): النجاح يختفي، الخطأ يبقى حتى الإغلاق ---------- */
.toast-container { position: fixed; z-index: var(--z-toast); bottom: var(--sp-5); inset-inline-start: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(420px, calc(100vw - 2 * var(--sp-4))); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--color-card); color: var(--color-text-primary); border: 1px solid var(--color-border-strong); border-inline-start-width: 4px; border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); font-weight: 500; }
.toast i { margin-top: 3px; }
.toast .toast-x { margin-inline-start: auto; background: none; border: 0; color: var(--color-text-muted); cursor: pointer; padding: 0 4px; font-size: 18px; line-height: 1; min-height: 24px; }
.toast-success { border-inline-start-color: var(--color-success); } .toast-success i { color: var(--color-success); }
.toast-error { border-inline-start-color: var(--color-danger); } .toast-error i { color: var(--color-danger); }
.toast-warning { border-inline-start-color: var(--color-warning); } .toast-warning i { color: var(--color-warning); }
.toast-info { border-inline-start-color: var(--color-info); } .toast-info i { color: var(--color-info); }

/* ---------- ملف شخصي/رأس كيان ---------- */
.entity-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-5); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--sp-5); }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--color-accent-muted); color: var(--color-accent-strong); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xl); flex-shrink: 0; }
.entity-head h1 { margin: 0 0 4px; font-size: var(--fs-xl); }
.entity-meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; color: var(--color-text-secondary); font-size: var(--fs-sm); }
.entity-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--sp-5); margin: 0; font-size: var(--fs-sm); }
.dl dt { color: var(--color-text-muted); }
.dl dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 var(--sp-5) var(--sp-4) 0; margin-inline-end: 6px; border-inline-end: 2px solid var(--color-border); }
.timeline li::before { content: ''; position: absolute; inset-inline-end: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-card); border: 2px solid var(--color-accent); }
.timeline .t-title { font-weight: 600; font-size: var(--fs-sm); }
.timeline .t-date { font-size: var(--fs-xs); color: var(--color-text-muted); }
.steps { display: flex; gap: 0; margin-bottom: var(--sp-5); overflow-x: auto; }
.steps .step { flex: 1; min-width: 96px; text-align: center; font-size: var(--fs-sm); color: var(--color-text-muted); padding-top: 22px; position: relative; font-weight: 600; }
.steps .step::before { content: ''; position: absolute; top: 4px; inset-inline: 0; height: 4px; background: var(--color-border); }
.steps .step.done { color: var(--color-text-primary); } .steps .step.done::before { background: var(--color-success); }
.steps .step.current { color: var(--color-text-primary); } .steps .step.current::before { background: var(--color-accent); }

/* ---------- حاسبة/ملخص قبل الحفظ ---------- */
.calc-box { background: var(--color-sunken); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--sp-4); }
.calc-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px dashed var(--color-border); font-size: var(--fs-sm); }
.calc-row:last-child { border-bottom: 0; }
.calc-row.total { font-weight: 700; font-size: var(--fs-lg); border-top: 2px solid var(--color-border-strong); border-bottom: 0; margin-top: 4px; padding-top: 10px; }

/* ---------- إتاحة الأحجام للأهداف اللمسية ---------- */
@media (pointer: coarse) { .btn, .nav-item, .tab-link, .menu-pop a, .menu-pop button { min-height: 44px; } .btn-sm { min-height: 40px; } }

/* ============================================================
   شاشة ≤ 1024: ضغط الهيكل
   ============================================================ */
@media (max-width: 1024px) {
  .layout-2 { grid-template-columns: 1fr; }
  .topbar-search { width: 44px; max-width: 44px; padding: 0; justify-content: center; }
  .topbar-search span, .topbar-search kbd { display: none; }
}

/* ============================================================
   موبايل ≤ 768: درج جانبي + شريط سفلي + نماذج لمسية
   ============================================================ */
@media (max-width: 768px) {
  .sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: auto; right: 0; transform: translateX(100%); transition: transform .22s ease; width: min(86vw, 320px); z-index: calc(var(--z-sidebar) + 1); box-shadow: var(--shadow-modal); }
  .sidebar.open { transform: none; }
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .topbar-hamburger { display: inline-flex; }
  .topbar .breadcrumb { display: none; }
  .topbar-title { display: block; }
  .hide-sm { display: none; }
  #newMenuBtn { display: none; }
  .page-content { padding: var(--sp-4) var(--sp-4) calc(var(--bottom-nav-h) + var(--sp-6) + env(safe-area-inset-bottom)); }
  .page-header { margin-bottom: var(--sp-4); }
  .page-header h1 { font-size: var(--fs-lg); }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .kpi { padding: var(--sp-3) var(--sp-4); }
  .kpi-value { font-size: var(--fs-xl); }
  .kpi-cur .kpi-value { font-size: var(--fs-lg); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=search], input[type=url], select, textarea { min-height: 46px; font-size: 16px; }
  .form-actions { position: static; }
  .form-actions .btn { flex: 1 1 140px; min-height: 46px; }
  .filter-bar .form-group { flex: 1 1 100%; }
  .card, .panel-body { padding: var(--sp-4); }
  .panel-head { padding: var(--sp-3) var(--sp-4); }
  .row-item, .attn-item { padding: var(--sp-3) var(--sp-4); }
  .row-item { flex-wrap: wrap; row-gap: var(--sp-2); }
  .row-main { flex: 1 1 100%; }
  .row-title, .row-sub { white-space: normal; overflow: visible; }
  .row-side { flex-wrap: wrap; }
  .toast-container { inset-inline: var(--sp-3); bottom: calc(var(--bottom-nav-h) + var(--sp-3)); max-width: none; }
  .dialog-backdrop { padding: 0; align-items: flex-end; }
  .dialog { max-width: none; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .dialog-search { max-height: 90vh; }
  .dialog-backdrop.dialog-sheet .dialog { padding-bottom: env(safe-area-inset-bottom); }
  .segmented { margin-inline: var(--sp-4); }
  .dialog-head, .dialog-foot { padding-inline: var(--sp-4); }
  .dialog-body { padding-inline: var(--sp-4); }
  .dialog-foot .btn { flex: 1; min-height: 46px; }
  .table-wrap { margin-inline: calc(-1 * var(--sp-1)); }

  .bottom-nav { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: var(--z-topbar); height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--color-surface); border-top: 1px solid var(--color-border); }
  .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; background: none; border: 0; color: var(--color-text-muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; text-decoration: none; padding: 4px 2px; }
  .bottom-nav-item i { font-size: 20px; }
  .bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav-item.active { color: var(--color-text-primary); }
  .bottom-nav-item.active i { color: var(--color-accent-strong); }
  .bottom-nav-new { position: relative; color: var(--color-text-primary); }
  .bottom-nav-new::before { content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent); }
  .bottom-nav-new i { position: relative; color: var(--color-text-on-accent); }
  body.kb-open .bottom-nav { display: none; }
  body.kb-open .page-content { padding-bottom: var(--sp-6); }
}
@media (max-width: 480px) {
  .page-content { padding-inline: var(--sp-3); }
  .kpi-grid { gap: var(--sp-2); }
}

/* طباعة: بلا قوائم */
@media print { .sidebar, .topbar, .bottom-nav, .toast-container, .page-actions, .filter-bar { display: none !important; } .page-content { padding: 0; max-width: none; } body { background: #fff; } }

/* ---------- بنود الفاتورة/العرض (مكوّن مشترك) ---------- */
.li-fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-3); min-width: 0; }
.li-fieldset legend { font-weight: 700; font-size: var(--fs-sm); padding: 0; margin-bottom: var(--sp-3); }
.line-items { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.line-item-row { display: grid; grid-template-columns: minmax(0, 3fr) 90px 130px 120px 40px; gap: var(--sp-3); align-items: end; padding: var(--sp-3); background: var(--color-sunken); border: 1px solid var(--color-border); border-radius: var(--radius); }
.line-item-row .form-group { margin: 0; }
.line-item-row label { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-bottom: 4px; }
.item-line-total { display: block; min-height: 42px; line-height: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
.li-c-del { align-self: end; }
[data-tab-container].card { background: transparent; border: 0; padding: 0; margin: 0; }
@media (max-width: 1024px) { .layout-2 > aside.stack { position: static !important; } }
@media (max-width: 768px) {
  .line-item-row { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "name name del" "qty price total"; }
  .li-c-name { grid-area: name; } .li-c-qty { grid-area: qty; } .li-c-price { grid-area: price; } .li-c-total { grid-area: total; } .li-c-del { grid-area: del; }
}

/* استرداد داخل جدول الدفعات */
.refund-box { position: relative; }
.refund-box > summary { list-style: none; cursor: pointer; }
.refund-box > summary::-webkit-details-marker { display: none; }
.refund-box form { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; width: 260px; padding: var(--sp-3); background: var(--color-card); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.refund-box label { font-size: var(--fs-xs); margin-top: 6px; }

/* جداول → بطاقات على الموبايل (تُحقن data-label من app.js) */
@media (max-width: 768px) {
  table.stack-sm { display: block; }
  table.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm tr { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); }
  table.stack-sm tr:last-child { border-bottom: 0; }
  table.stack-sm td { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 6px 0; border: 0; text-align: end; }
  table.stack-sm td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: 700; text-align: start; flex-shrink: 0; }
  table.stack-sm td:not([data-label])::before { content: none; }
  table.stack-sm td:first-child { font-weight: 600; }
  table.stack-sm tbody tr:hover td { background: transparent; }
  table.stack-sm tfoot { display: block; }
  table.stack-sm tfoot td { display: flex; justify-content: space-between; }
  .table-wrap { overflow-x: visible; }
}

/* شبكات متجاوبة بحسب المساحة الفعلية (لا بعرض الشاشة) فلا يُضغط المحتوى ولا يتمدد بمحتوى طويل */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
@media (max-width: 1200px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.grid > *, .layout-2 > *, .form-row > *, .stack > * { min-width: 0; }
.page-content { overflow-wrap: break-word; }
.main-col { max-width: 100vw; }
@media (max-width: 768px) { table.stack-sm { min-width: 0 !important; width: 100%; } table.stack-sm td { min-width: 0; overflow-wrap: anywhere; } }