/* FADx إيجار — نفس توكنز عائلة FADx. خصائص منطقية فقط (inline/block) — لا left/right. */
@font-face { font-family: "Readex Pro"; font-weight: 160 700; font-display: swap;
  src: url("fonts/readex-pro-arabic-wght-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-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: "Readex Pro"; font-weight: 160 700; font-display: swap;
  src: url("fonts/readex-pro-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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 Mono"; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --navy-900: #0B1F3A; --navy-800: #13304F; --navy-700: #27405E; --navy-300: #9FB3C9; --navy-200: #C7D4E4;
  --accent: #A85A1C; --accent-hover: #8E4A14; --accent-soft: #E09445;
  --paper: #FBFBFC; --paper-2: #F1F4F8; --line: #E1E7EF; --line-strong: #C3CDDB;
  --slate-500: #51627A; --ink: #0B1F3A;
  --ok-bg: #E6F2EB; --ok: #1B6B47; --warn-bg: #FBF0DC; --warn: #7A4E00; --bad-bg: #FBE9E8; --bad: #A3231C;
  --bar: #0B1F3A; --on-dark: #FBFBFC; --surface: #fff; --link: #A85A1C; --link-hover: #8E4A14;
  --ok-line: #BFDCCB; --bad-line: #EBC3C0; --warn-line: #EBD3A6; --bad-tint: #FFFBFB; --placeholder: #9AA6B6;
  --chart: #1F3A5F; --sheet-line: #cfd6df; --shadow: rgba(11, 31, 58, .15); --nav-active: #0B1F3A;
  color-scheme: light;
  --radius-card: 0.875rem; --radius: 0.625rem;
}

/* ── الوضع الليلي: تلقائي حسب الجهاز، أو اختيار المستخدم (data-theme من theme.js). الطباعة فاتحة دائمًا ── */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) {
  --paper: #15233A; --paper-2: #0E1A2C; --line: #26374F; --line-strong: #3A4E6B;
  --slate-500: #9DADC4; --ink: #E7EDF5;
  --ok-bg: #123524; --ok: #7FD8A6; --warn-bg: #3A2C0E; --warn: #F2C46B; --bad-bg: #3D1618; --bad: #FF9A91;
  --bar: #08131F; --surface: #0F1C2F; --link: #EDA661; --link-hover: #F6BE85;
  --ok-line: #24573C; --bad-line: #6B2A2D; --warn-line: #6A5222; --bad-tint: #2A1416; --placeholder: #6D7F98;
  --chart: #7FA3D1; --sheet-line: #3A4E6B; --shadow: rgba(0, 0, 0, .45); --nav-active: #2A4466;
  color-scheme: dark;
} }
:root[data-theme=dark] {
  --paper: #15233A; --paper-2: #0E1A2C; --line: #26374F; --line-strong: #3A4E6B;
  --slate-500: #9DADC4; --ink: #E7EDF5;
  --ok-bg: #123524; --ok: #7FD8A6; --warn-bg: #3A2C0E; --warn: #F2C46B; --bad-bg: #3D1618; --bad: #FF9A91;
  --bar: #08131F; --surface: #0F1C2F; --link: #EDA661; --link-hover: #F6BE85;
  --ok-line: #24573C; --bad-line: #6B2A2D; --warn-line: #6A5222; --bad-tint: #2A1416; --placeholder: #6D7F98;
  --chart: #7FA3D1; --sheet-line: #3A4E6B; --shadow: rgba(0, 0, 0, .45); --nav-active: #2A4466;
  color-scheme: dark;
}
@media print { :root, :root[data-theme], :root:not([data-theme=light]) {
  --paper: #FBFBFC; --paper-2: #F1F4F8; --line: #E1E7EF; --line-strong: #C3CDDB;
  --slate-500: #51627A; --ink: #0B1F3A;
  --ok-bg: #E6F2EB; --ok: #1B6B47; --warn-bg: #FBF0DC; --warn: #7A4E00; --bad-bg: #FBE9E8; --bad: #A3231C;
  --bar: #0B1F3A; --surface: #fff; --link: #A85A1C; --link-hover: #8E4A14;
  --ok-line: #BFDCCB; --bad-line: #EBC3C0; --warn-line: #EBD3A6; --bad-tint: #FFFBFB; --placeholder: #9AA6B6;
  --chart: #1F3A5F; --sheet-line: #cfd6df; --shadow: rgba(11, 31, 58, .15); --nav-active: #0B1F3A;
  color-scheme: light;
} }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Readex Pro", system-ui, sans-serif; font-size: 14px; line-height: 1.6;
  color: var(--ink); background: var(--paper-2); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.3; }
.num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.muted { color: var(--slate-500); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── الهيكل ── */
.topbar { background: var(--bar); color: var(--on-dark); block-size: 56px; display: flex; align-items: center;
  gap: 16px; padding-inline: 20px; position: sticky; inset-block-start: 0; z-index: 10; }
.brand { font-size: 17px; font-weight: 600; color: var(--on-dark); white-space: nowrap; }
.brand span { color: var(--accent-soft); font-weight: 400; }
.brand:hover { color: var(--on-dark); text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { display: inline-block; flex: none; }
.topbar .user { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--navy-200); }
.topbar .user form { margin: 0; }
.topbar .user button { background: none; border: 1px solid var(--navy-700); color: var(--navy-200); border-radius: 8px;
  padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.menu-toggle { display: none; background: none; border: 1px solid var(--navy-700); color: var(--on-dark); border-radius: 8px;
  padding: 4px 10px; font: inherit; cursor: pointer; }

.shell { display: flex; align-items: flex-start; min-block-size: calc(100vh - 56px); }
.sidebar { inline-size: 210px; flex-shrink: 0; background: var(--paper); border-inline-end: 1px solid var(--line);
  padding: 16px 12px; align-self: stretch; }
.sidebar a { display: block; padding: 9px 12px; border-radius: var(--radius); color: var(--ink); font-size: 14px; }
.sidebar a:hover { background: var(--paper-2); text-decoration: none; }
.sidebar a[aria-current="page"] { background: var(--nav-active); color: var(--on-dark); }
.sidebar hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 12px; }
main { flex: 1 1 auto; min-inline-size: 0; padding: 22px 24px 48px; }

@media (max-width: 860px) {
  .menu-toggle { display: inline-block; }
  .sidebar { display: none; position: fixed; inset-block: 56px 0; inset-inline-start: 0; z-index: 9; box-shadow: 0 8px 24px var(--shadow); }
  body.nav-open .sidebar { display: block; }
  main { padding: 16px; }
  .topbar { gap: 10px; padding-inline: 12px; }
  /* على الموبايل: الاسم والمكتب في سطرين مختصرين بدل الإخفاء */
  .topbar .user .name { display: grid; font-size: 11px; line-height: 1.35; max-inline-size: 46vw; }
  .topbar .user .name .sep { display: none; }
  .topbar .user .name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 56px 0 0 0; z-index: 8;
    background: rgba(11, 31, 58, .35); }
}

/* ── العناوين ── */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-block-end: 18px; }
.page-head h1 { font-size: 22px; font-weight: 600; }
.page-head .sub { margin: 4px 0 0; font-size: 13px; color: var(--slate-500); }
.page-head .actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs { font-size: 12px; color: var(--slate-500); margin-block-end: 8px; }

/* ── الأزرار والنماذج ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 38px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--line-strong); text-decoration: none; color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); color: #fff; }
.btn.danger { color: var(--bad); border-color: var(--bad-line); }
.btn.small { min-block-size: 30px; padding: 0 10px; font-size: 12px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

.stack { display: grid; gap: 14px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
label.field { display: grid; gap: 5px; font-size: 13px; align-content: start; }
label.field > span { color: var(--slate-500); }
label.field > span .req { color: var(--bad); }
input[type=text], input[type=search], input[type=tel], input[type=email], input[type=number], input[type=date],
input[type=password], select, textarea {
  inline-size: 100%; min-block-size: 40px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
input[type=number], input.num { text-align: end; }
textarea { min-block-size: 76px; resize: vertical; }
label.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-block-size: 40px; }
label.check input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--slate-500); margin: 0; }

/* ── البطاقات والجداول ── */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px 18px; }
.card > h2, .card-head h2 { font-size: 15px; font-weight: 600; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-block-end: 1px solid var(--line); }
.card-head .end { margin-inline-start: auto; }
.card.flush { padding: 0; overflow: hidden; }
.card-note { padding: 10px 18px; border-block-start: 1px solid var(--line); font-size: 12px; color: var(--slate-500); margin: 0; }
.stack-gap { display: grid; gap: 16px; }
.cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cols > .main { flex: 999 1 560px; min-inline-size: 0; }
.cols > .side { flex: 1 1 290px; min-inline-size: 0; }
/* الجانب أولًا على الموبايل (مثل «مستحق عليه الآن» فوق مبلغ الدفعة)، وفي مكانه المعتاد على الشاشة العريضة */
@media (min-width: 900px) { .cols.side-first > .main { order: -1; } }

.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 45%), 1fr)); margin-block-end: 18px; }
.kpi .label { margin: 0 0 8px; font-size: 13px; color: var(--slate-500); }
.kpi .value { margin: 0; font-size: 26px; font-weight: 500; font-family: "IBM Plex Mono", monospace; }
.kpi .value.text { font-family: inherit; font-size: 20px; }
/* القيمة الرقمية LTR حتى تبقى علامة − يسار الرقم؛ end في LTR = نفس محاذاة start في الصفحة RTL */
.kpi .value:not(.text) { direction: ltr; text-align: end; unicode-bidi: isolate; }
.kpi .foot { margin: 6px 0 0; font-size: 12px; color: var(--slate-500); }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; inline-size: 100%; font-size: 13px; }
th { text-align: start; font-weight: 400; color: var(--slate-500); font-size: 12px; padding: 10px 12px; white-space: nowrap; }
td { text-align: start; padding: 11px 12px; border-block-start: 1px solid var(--line); vertical-align: middle; }
th:first-child, td:first-child { padding-inline-start: 18px; }
th:last-child, td:last-child { padding-inline-end: 18px; }
td.amount, th.amount { text-align: end; }
/* أعمدة الأرقام: الخلية RTL مثل عنوانها والرقم وحده LTR داخل <span class="num">.
   شبكة أمان لخلايا قديمة عليها .num مباشرة (الخلية كلها LTR): نعكس المحاذاة لتطابق العنوان. */
td.num:not(.amount), dd.num { text-align: end; }
td.num.amount { text-align: start; }
tr.voided td { color: var(--slate-500); text-decoration: line-through; }
.empty { padding: 28px 18px; text-align: center; color: var(--slate-500); }

dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 18px; margin: 0; }
dl.facts dt { font-size: 12px; color: var(--slate-500); margin: 0 0 3px; }
dl.facts dd { margin: 0; font-size: 14px; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-block-start: 1px solid var(--line); font-size: 13px; }
ul.plain li:first-child { border-block-start: 0; }
ul.plain li .end { margin-inline-start: auto; min-inline-size: 0; overflow-wrap: anywhere; text-align: end; }
ul.plain li .end.num, ul.plain li .end .num { white-space: nowrap; overflow-wrap: normal; } /* المبلغ لا ينكسر «60− / 0» */
html, body { overflow-x: clip; }

.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--paper-2); color: var(--slate-500); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.navy { background: var(--bar); color: var(--on-dark); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 14px; }
.filters a.chip { padding: 5px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.filters a.chip[aria-current="true"] { background: var(--nav-active); border-color: var(--nav-active); color: var(--on-dark); }
.filters form { margin-inline-start: auto; display: flex; gap: 6px; }
.filters input[type=search] { inline-size: 240px; min-block-size: 36px; }

.flash { border-radius: var(--radius); padding: 11px 14px; margin-block-end: 16px; font-size: 14px; border: 1px solid; }
.flash.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.flash.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }

.bar { block-size: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar > i { display: block; block-size: 100%; background: var(--accent); }

/* ── الدخول ── */
.login-wrap { min-block-size: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bar); }
.login { inline-size: min(380px, 100%); background: var(--paper); border-radius: var(--radius-card); padding: 28px; }
.login .brand { color: var(--ink); font-size: 22px; display: flex; margin-block-end: 4px; }
.login .brand span { color: var(--link); }



/* ── الوصول والهيكل ── */
.skip-link { position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 50; padding: 10px 16px;
  border-radius: var(--radius); background: var(--accent); color: #fff; }
.skip-link:focus { inset-block-start: 8px; color: #fff; text-decoration: none; }
main:focus { outline: none; }
.nav-backdrop { display: none; }
.notice { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 8px 14px; margin-block-end: 14px;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--accent-soft); border-radius: var(--radius);
  background: var(--paper); font-size: 13px; color: var(--slate-500); }
.flash-sub { display: block; margin-block-start: 4px; font-size: 12px; opacity: .85; }

/* ── النماذج: خطأ بجانب الحقل، أمثلة باهتة، التاريخ مكتوبًا ── */
.field-error { color: var(--bad); font-size: 12px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-tint); }
::placeholder { color: var(--placeholder); opacity: 1; font-size: 13px; }
.date-spell { font-size: 12px; color: var(--slate-500); min-block-size: 1.3em; }
.date-spell:empty { display: none; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; gap: 14px; }
fieldset.plain[disabled] { display: none; }
.select-filter { min-block-size: 36px !important; font-size: 13px !important; }
.select-filter + select { margin-block-start: 6px; }
.file-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.file-pick input[type=file] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.file-pick input[type=file]:focus-visible + .btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-pick .file-name { font-size: 12px; color: var(--slate-500); overflow-wrap: anywhere; }
.dupe { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--radius);
  background: var(--warn-bg); color: var(--warn); }
.dupe ul { margin: 0; padding-inline-start: 18px; }

/* ── عقد جديد: كل مستأجر سطر كامل، والمدة ظاهرة قبل الحفظ ── */
.tenant-rows { display: grid; gap: 10px; }
.tenant-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(120px, 180px) auto; align-items: end;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tenant-row[hidden] { display: none; }
.tenant-row .primary-pick { min-block-size: 40px; white-space: nowrap; font-size: 13px; }
@media (max-width: 640px) { .tenant-row { grid-template-columns: 1fr; } }
.lease-summary { padding: 10px 14px; border-radius: var(--radius); background: var(--paper-2); font-size: 13px; }
.lease-summary:empty { display: none; }
.lease-summary.bad { background: var(--bad-bg); color: var(--bad); }
.space-note { font-size: 12px; }
.space-note.bad { color: var(--bad); }

/* ── أزرار مقفولة بعد انتهاء الاشتراك ── */
.btn.is-locked { opacity: .6; border-style: dashed; cursor: not-allowed; }
a.btn.is-locked { cursor: pointer; }
.btn.is-locked small { font-size: 11px; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ── القوائم: ترقيم، حالات فارغة، ابدأ هنا ── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-block-start: 1px solid var(--line); font-size: 13px; }
.empty p { margin: 0 0 12px; }
.empty p:last-child { margin: 0; }
.filters form { flex: 1 1 260px; justify-content: flex-end; }
.filters input[type=search] { flex: 0 1 260px; inline-size: auto; min-inline-size: 0; }
.filters a.chip.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.start-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.start-list li { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); }
.start-list .tick { inline-size: 32px; block-size: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--line-strong); font-weight: 600; color: var(--slate-500); }
.start-list li.done .tick { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.start-list li.done .title { color: var(--slate-500); text-decoration: line-through; }
.start-list li.next { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 90, 28, .12); }
.start-list .body { flex: 1 1 220px; min-inline-size: 0; }
.start-list .title { font-weight: 600; }

/* ── المتأخرات: صف لكل عميل ── */
.debtors { list-style: none; margin: 0; padding: 0; }
.debtor { display: grid; gap: 8px; padding: 14px 18px; border-block-start: 1px solid var(--line); }
.debtor:first-child { border-block-start: 0; }
.debtor .top { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.debtor .name { font-weight: 600; font-size: 15px; }
.debtor .total { margin-inline-start: auto; font-size: 18px; font-weight: 500; }
.debtor .meta { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--slate-500); }
.debtor .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.debtor details > summary { cursor: pointer; font-size: 13px; color: var(--slate-500); }
.debtor details table { margin-block-start: 8px; }
.debtor details th:first-child, .debtor details td:first-child { padding-inline-start: 0; }

/* ── الاستحقاقات المسدّدة مطوية ── */
.paid-toggle { cursor: pointer; }
.paid-toggle input { inline-size: 16px; block-size: 16px; accent-color: var(--accent); }
#charges tr.is-paid { display: none; }
#charges.show-paid tr.is-paid, #charges:has(.paid-toggle input:checked) tr.is-paid { display: table-row; }

/* ── أهداف لمس 44px على الشاشات اللمسية ── */
@media (pointer: coarse) {
  .btn, .btn.small { min-block-size: 44px; }
  details > summary { padding-block: 11px; }
  .topbar .user button, .menu-toggle { min-block-size: 40px; min-inline-size: 44px; }
  .sidebar a { padding-block: 12px; }
  label.check { min-block-size: 44px; }
}

/* ── الطباعة ── */
.print-only { display: none; }
.print-head { gap: 2px; padding-block-end: 10px; margin-block-end: 14px; border-block-end: 2px solid var(--ink); }
.sheet .print-head { display: grid; }
.print-head .office { font-size: 15px; font-weight: 600; }
.print-head h1 { font-size: 20px; }
.print-head p { margin: 0; font-size: 12px; }
.print-foot { margin-block-start: 18px; padding-block-start: 6px; border-block-start: 1px solid #ccc; font-size: 11px; color: #555; }

/* قائمة الجرد: ورقة تُسلَّم للمستأجر */
body.sheet-page { background: var(--paper-2); }
.sheet { max-inline-size: 820px; margin: 24px auto; padding: 32px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); display: grid; gap: 18px; }
.sheet .sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet table th, .sheet table td { border: 1px solid var(--sheet-line); padding: 8px 10px; }
.sheet table th { background: var(--paper-2); color: var(--ink); }
.signatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-block-start: 12px; }
.signatures div { padding-block-start: 44px; border-block-end: 1px solid var(--ink); font-size: 13px; }
.signatures span { display: block; margin-block-start: 6px; color: var(--slate-500); font-size: 12px; }
@media (max-width: 640px) { .sheet { margin: 0; padding: 18px; border-radius: 0; } }

@media print {
  .topbar, .sidebar, .actions, .filters, .no-print, .skip-link, .flash, .notice, .crumbs, .pager, .date-spell,
  .nav-backdrop, .sheet-actions { display: none !important; }
  .print-only { display: block; }
  .print-only.print-head { display: grid; }
  .print-head ~ .page-head { display: none; }
  main { padding: 0; } body, body.sheet-page { background: var(--surface); }
  .card { border-color: #ccc; break-inside: avoid; }
  .sheet { margin: 0; padding: 0; border: 0; }
  #charges tr.is-paid { display: table-row !important; }
}
.space-note:empty { display: none; }

/* ── جولة المراجعة الثالثة ── */
ul.plain li.voided { text-decoration: line-through; color: var(--slate-500); }
ul.plain li.voided::after { content: "ملغى"; font-size: 11px; text-decoration: none; margin-inline-start: 6px; }
ul.plain li .check { flex-wrap: wrap; row-gap: 4px; min-inline-size: 0; }
/* جداول بإجراءات داخل الصف: بطاقات على الموبايل بدل تمرير أفقي يخفي الأزرار */
@media (max-width: 640px) {
  table.cards-mobile, table.cards-mobile tbody, table.cards-mobile tr, table.cards-mobile td { display: block; inline-size: 100%; }
  table.cards-mobile thead { display: none; }
  table.cards-mobile tr { border-block-end: 1px solid var(--line); padding-block: 8px; }
  table.cards-mobile td { border: 0; padding: 4px 14px; text-align: start; }
  table.cards-mobile td[data-label]::before { content: attr(data-label) " · "; color: var(--slate-500); font-size: 12px; }
}
@media (pointer: coarse) {
  .filters a.chip { min-block-size: 44px; display: inline-flex; align-items: center; }
  a[href^="tel:"], td a.num, td .num > a { display: inline-block; min-block-size: 44px; line-height: 44px; }
  input, select { min-block-size: 44px; }
}
.inventory-sheet table, .print-sheet table { inline-size: 100%; table-layout: auto; }

/* ── المرفقات ── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 14px 18px; }
.thumb { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.thumb.is-cover { border-color: var(--ok); }
.thumb img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumb figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; }
.thumb-actions { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.thumb-actions form { display: inline; }
.linkish { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; }
.linkish.bad { color: var(--bad); }
.files-list li { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-block-start: 1px solid var(--line); }
.files-list li form.end { margin-inline-start: auto; }
.upload-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end;
  padding: 14px 18px; border-block-start: 1px solid var(--line); }
.cover-img { inline-size: 56px; block-size: 42px; object-fit: cover; border-radius: 4px; vertical-align: middle; }
@media print { .gallery { grid-template-columns: repeat(3, 1fr); } .upload-row, .thumb-actions { display: none; } }
.seg { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.services-detail { display: grid; gap: 8px; }
.service-row { border-block-start: 1px dashed var(--line); padding-block-start: 8px; }
.clauses { display: grid; gap: 6px; }
.contract-text { white-space: pre-line; line-height: 2; margin-block: 14px; }
.contract h2 { font-size: 15px; margin-block: 12px 6px; }
.alerts li { display: flex; align-items: center; gap: 10px; padding-block: 6px; }
.dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.dot.warn { background: #D99A1E; } .dot.bad { background: var(--bad); }
.bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; block-size: 140px; padding: 14px 18px; }
/* أعمدة رسم الإشغال في التقارير — محصورة داخل .bars حتى لا تكسر شريط النسبة (.bar) في بطاقات العمارات والاشتراك */
.bars .bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; block-size: 100%; gap: 2px;
  font-size: 11px; border-radius: 0; background: none; overflow: visible; }
.bars .bar span { display: block; inline-size: 70%; background: var(--chart); border-radius: 3px 3px 0 0; min-block-size: 2px; }

/* ── العناوين ── */
.addr-level { display: grid; gap: 10px; align-content: start; }
.grid.tight { gap: 8px; grid-template-columns: 2fr 1fr; }
.code-preview { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--paper-2); font-size: 14px; }
.code-preview output { font-weight: 600; }
.loc-gov > summary { cursor: pointer; }
.loc-tree { list-style: none; margin: 0; padding-inline-start: 18px; border-inline-start: 1px solid var(--line); display: grid; gap: 6px; }
.loc-tree.root { margin-block-start: 12px; padding-inline-start: 0; border: 0; }
.loc-tree > li { display: grid; gap: 6px; }
.loc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.loc-row input[name=name] { flex: 1 1 180px; min-inline-size: 0; }
.loc-row input.code { inline-size: 7ch; flex: 0 0 auto; text-align: center; }
.loc-row.add input[name=name] { border-style: dashed; }
form.inline { display: inline; }
.loc-kids > summary { cursor: pointer; font-size: 12px; color: var(--slate-500); padding-inline-start: 18px; }
.loc-kids > .loc-tree { margin-block-start: 6px; }
label.field[hidden] { display: none; }

/* زر الوضع الليلي في الشريط العلوي */
.topbar .user .theme-toggle { inline-size: 32px; block-size: 30px; padding: 0; font-size: 15px; line-height: 1; }
.theme-toggle .ic-sun, .only-dark { display: none !important; }
:root[data-theme=dark] .theme-toggle .ic-sun, :root[data-theme=dark] .only-dark { display: inline-block !important; }
:root[data-theme=dark] .theme-toggle .ic-moon, :root[data-theme=dark] .only-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .ic-sun, :root:not([data-theme]) .only-dark { display: inline-block !important; }
  :root:not([data-theme]) .theme-toggle .ic-moon, :root:not([data-theme]) .only-light { display: none !important; }
}
.app-version { margin: 18px 12px 0; font-size: 11px; color: var(--slate-500); }
.login .app-version { margin: 4px 0 0; text-align: center; }

/* نافذة التأكيد */
.confirm-dialog { inline-size: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--paper); color: var(--ink); box-shadow: 0 18px 48px var(--shadow); }
.confirm-dialog::backdrop { background: rgba(8, 19, 31, .55); }
.confirm-dialog p { margin: 0; font-size: 15px; line-height: 1.7; white-space: pre-line; }
.confirm-dialog .form-actions { justify-content: flex-start; }
.btn.danger-solid { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.btn.danger-solid:hover { filter: brightness(.95); color: var(--surface); }

.search-box { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.search-box input[type=search] { inline-size: 260px; min-block-size: 36px; }
@media (max-width: 640px) { .search-box { inline-size: 100%; } .search-box input[type=search] { flex: 1; inline-size: auto; } }
.inline-details summary { cursor: pointer; font-size: 12px; color: var(--slate-500); display: inline; }
.row-form { display: flex; gap: 6px; margin-block-start: 6px; flex-wrap: wrap; }
[data-show-when][hidden] { display: none !important; }

/* الخدمات في نموذج العقد: سطر لكل خدمة */
.services-table { display: grid; gap: 8px; }
.service-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(200px, 2fr) minmax(120px, 1fr); gap: 10px; align-items: end; }
.service-row .svc-name { align-self: center; font-weight: 500; }
.service-row[hidden] { display: none; }
@media (max-width: 640px) { .service-row { grid-template-columns: 1fr 1fr; } .service-row .svc-name { grid-column: 1 / -1; } }
/* اختيار وحدات متعددة بقائمة قابلة للبحث */
.pick-list { display: grid; gap: 4px; max-block-size: 360px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; background: var(--surface); }
.pick-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.pick-row input[type=text] { inline-size: 140px; min-block-size: 34px; }
.pick-row[hidden] { display: none; }
/* الفنيون: التقييم بالنجوم وعنوان مجموعة اختيارات */
.stars { color: var(--warn); letter-spacing: 1px; white-space: nowrap; }
.stars .muted { color: var(--line); }
.label-like { font-size: 13px; color: var(--slate-500); padding: 0; }
.chips-check { display: flex; flex-wrap: wrap; gap: 6px 14px; }
/* كشف الحساب: اختيار الفترة بجانب الأزرار السريعة */
.range-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-inline-start: auto; }
.range-form input[type=date] { min-block-size: 34px; inline-size: auto; }
.range-form .date-spell { display: none; }
table.statement td:nth-child(2) { min-inline-size: 220px; }
@media (max-width: 640px) { .range-form { margin-inline-start: 0; inline-size: 100%; } .range-form input[type=date] { flex: 1; min-inline-size: 0; } }
/* فلتر داخل رأس البطاقة (كشف المالك): يلتف على الموبايل بدل أن يخرج زر «عرض» خارج البطاقة */
.head-filter { display: flex; flex-wrap: wrap; gap: 6px; min-inline-size: 0; max-inline-size: 100%; }
.head-filter input, .head-filter select { min-inline-size: 0; flex: 1 1 120px; }
@media (max-width: 640px) { .head-filter { inline-size: 100%; margin-inline-start: 0; } }
.legal h2 { font-size: 15px; margin-block: 16px 6px; }
.legal p, .legal li { line-height: 1.9; font-size: 14px; }
.legal ul { padding-inline-start: 20px; }
.flash.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.support-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* ═════════════════════════ الموبايل كتطبيق (لا مجرد شاشة أصغر) ═════════════════════════
   شريط تنقل سفلي، قائمة جانبية منزلقة فيها الحساب، «إجراء جديد» من الأسفل، حقول بخط 16 (iOS لا يكبّر الصفحة
   عند الكتابة)، كل الجداول بطاقات، أزرار الحفظ ثابتة أسفل الشاشة، وهوامش الشاشات ذات النتوء (safe-area). */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.drawer-head, .tabbar, .action-sheet { display: none; }
.ic { display: block; flex: none; }
.btn:active, .tabbar a:active, .sheet-grid a:active { transform: scale(.97); }

@media (max-width: 860px) {
  :root { --tabbar-h: 62px; --topbar-h: calc(52px + env(safe-area-inset-top)); }
  .topbar { block-size: var(--topbar-h); padding-block-start: env(safe-area-inset-top);
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .topbar .user .name, .topbar .user form { display: none; }
  body.has-tabbar .topbar > .menu-toggle { display: none; }
  .brand { font-size: 16px; }
  .shell { min-block-size: calc(100vh - var(--topbar-h)); }
  main { padding: 14px max(14px, env(safe-area-inset-left)) 28px max(14px, env(safe-area-inset-right)); }
  body.has-tabbar main { padding-block-end: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }

  /* القائمة الجانبية: تنزلق من الجانب فوق المحتوى، وفي رأسها الحساب */
  .sidebar { display: block; position: fixed; inset-block: var(--topbar-h) 0; inset-inline-start: 0; z-index: 30;
    inline-size: min(84vw, 330px); overflow-y: auto; overscroll-behavior: contain;
    padding-block-end: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
    transform: translateX(105%); transition: transform .22s ease; visibility: hidden; }
  body.nav-open .sidebar { transform: none; visibility: visible; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 29; background: rgba(8, 19, 31, .45); }
  body.nav-open { overflow: hidden; }
  .drawer-head { display: grid; gap: 10px; padding: 4px 4px 14px; margin-block-end: 10px; border-block-end: 1px solid var(--line); }
  .drawer-who { display: grid; gap: 2px; font-size: 14px; }
  .drawer-who .muted { font-size: 12px; }
  .drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .drawer-actions form { margin: 0; }
  .sidebar a { font-size: 15px; }

  /* شريط التنقل السفلي */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; position: fixed; inset-inline: 0;
    inset-block-end: 0; z-index: 25; block-size: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 max(4px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-right));
    background: var(--paper); border-block-start: 1px solid var(--line); box-shadow: 0 -4px 18px var(--shadow); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-inline-size: 0; border: 0; background: none; color: var(--slate-500); font: inherit; font-size: 11px; cursor: pointer;
    text-decoration: none; padding: 6px 2px; }
  .tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .tabbar a:hover { text-decoration: none; color: var(--ink); }
  .tabbar .tab-plus { align-self: center; justify-self: center; inline-size: 52px; block-size: 52px; border-radius: 50%;
    background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(168, 90, 28, .35); margin-block-start: -18px; padding: 0; }
  .tabbar .tab-menu[aria-expanded="true"] { color: var(--accent); }

  /* «إجراء جديد»: لوحة تنزلق من الأسفل */
  .action-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 40; }
  .sheet-backdrop { position: absolute; inset: 0; background: rgba(8, 19, 31, .5); }
  .sheet-panel { position: absolute; inset-inline: 0; inset-block-end: 0; background: var(--paper); border-radius: 18px 18px 0 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 12px; animation: sheet-up .2s ease; }
  .sheet-panel h2 { font-size: 16px; }
  .sheet-grip { inline-size: 40px; block-size: 4px; border-radius: 4px; background: var(--line-strong); justify-self: center; }
  .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sheet-grid a { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface); color: var(--ink); font-size: 13px; text-align: center; }
  .sheet-grid a:hover { text-decoration: none; }
  .sheet-grid a .ic { color: var(--accent); }
  .sheet-cancel { inline-size: 100%; }

  /* الحقول: 16px حتى لا يكبّر iOS الصفحة عند الكتابة، وارتفاع لمس مريح */
  input[type=text], input[type=search], input[type=tel], input[type=email], input[type=number], input[type=date],
  input[type=month], input[type=password], select, textarea { font-size: 16px; min-block-size: 46px; }
  label.field > span { font-size: 13px; }
  .grid { grid-template-columns: 1fr; }
  .grid.tight { grid-template-columns: 2fr 1fr; }

  /* أزرار الحفظ ثابتة أسفل الشاشة فوق شريط التنقل — لا تمرير لآخر نموذج طويل */
  main form .form-actions { position: sticky; inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 6;
    background: var(--paper-2); padding-block: 10px; margin-inline: -4px; padding-inline: 4px; border-block-start: 1px solid var(--line); }
  body:not(.has-tabbar) main form .form-actions { inset-block-end: env(safe-area-inset-bottom); }
  main form .form-actions .btn { flex: 1 1 0; }

  /* العنوان والأزرار */
  .page-head { margin-block-end: 14px; }
  .page-head h1 { font-size: 20px; }
  .page-head .actions { inline-size: 100%; margin-inline-start: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .page-head .actions > form, .page-head .actions > form .btn { inline-size: 100%; }
  .page-head .actions .search-box { grid-column: 1 / -1; }
  .notice { font-size: 12px; padding: 6px 12px; }
  dl.facts { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .kpi .value { font-size: 22px; }
  .card-head { padding: 12px 14px; }

  /* نافذة التأكيد: من أسفل الشاشة كقوائم الموبايل */
  .confirm-dialog { inline-size: 100vw; max-inline-size: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0;
    padding-block-end: calc(22px + env(safe-area-inset-bottom)); }
  .confirm-dialog .form-actions .btn { flex: 1 1 0; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* كل الجداول بطاقات على الهاتف (لا تمرير أفقي يخفي الأعمدة): عنوان كل خانة من رأس عمودها، والخانة الأولى عنوان البطاقة */
@media (max-width: 640px) {
  main .table-wrap { overflow: visible; }
  main .table-wrap > table:not(.keep-table), main .table-wrap > table:not(.keep-table) tbody,
  main .table-wrap > table:not(.keep-table) tfoot, main .table-wrap > table:not(.keep-table) tr,
  main .table-wrap > table:not(.keep-table) td { display: block; inline-size: 100%; }
  main .table-wrap > table:not(.keep-table) thead { display: none; }
  main .table-wrap > table:not(.keep-table) tr { border-block-end: 1px solid var(--line); padding-block: 10px; }
  main .table-wrap > table:not(.keep-table) td { border: 0; padding: 3px 14px; text-align: start; min-block-size: 0; }
  main .table-wrap > table:not(.keep-table) td:empty { display: none; }
  main .table-wrap > table:not(.keep-table) td:first-child { font-weight: 600; font-size: 15px; }
  main .table-wrap > table:not(.keep-table) td[data-label]::before { content: attr(data-label) " · "; color: var(--slate-500);
    font-size: 12px; font-weight: 400; }
  main .table-wrap > table:not(.keep-table) td.amount { text-align: start; }
  main .table-wrap > table:not(.keep-table) tfoot tr { background: var(--paper-2); }
}
@media print { .tabbar, .action-sheet, .drawer-head { display: none !important; } }

/* صفحة «لا يوجد اتصال» (من عامل الخدمة) وشرح التثبيت على الآيفون */
.offline-page { min-block-size: 100vh; display: grid; place-items: center; padding: 24px; }
.offline-box { max-inline-size: 360px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.offline-box h1 { font-size: 20px; }
.offline-box p { margin: 0; color: var(--slate-500); line-height: 1.8; }
.ios-hint { position: fixed; inset-inline: 12px; inset-block-end: calc(var(--tabbar-h, 0px) + 12px + env(safe-area-inset-bottom));
  z-index: 26; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; font-size: 13px;
  background: var(--bar); color: var(--on-dark); box-shadow: 0 10px 30px var(--shadow); }
.ios-hint[hidden] { display: none; }
.ios-hint .btn { flex: none; }
.ios-hint .ic { display: inline-block; vertical-align: -5px; }
@media (max-width: 860px) { .select-filter { min-block-size: 44px !important; font-size: 16px !important; } }
.small-check { font-size: 12.5px; color: var(--slate-500); }
.agent-main { max-inline-size: 1180px; margin: 0 auto; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); display: block; }

/* ── العروض (شغل السمسار) ── */
.listing-filters select, .listing-filters input { inline-size: auto; min-inline-size: 120px; flex: 1 1 140px; }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.listing-tile { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; }
.listing-tile:hover { text-decoration: none; border-color: var(--accent); color: inherit; }
.listing-tile.is-off { opacity: .7; }
.lt-img { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); display: grid; place-items: center; color: var(--slate-500); }
.lt-img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lt-type { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; background: var(--navy-900); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.lt-body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.lt-body p { margin: 0; }
.lt-price { font-size: 18px; font-weight: 700; color: var(--accent); }
.lt-price small { font-size: 12px; font-weight: 400; color: var(--slate-500); }
.lt-title { font-weight: 600; }
.lt-area { font-size: 13px; }
.lt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 4px !important; }
.listing-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.listing-head h2 { margin: 2px 0 4px; }
.listing-price { color: var(--accent); margin-inline-start: 8px; font-size: .9em; }
.eyebrow-s { margin: 0; font-size: 12px; color: var(--slate-500); font-weight: 600; }
.match-box { margin-block-start: 14px; border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.match-box h3 { margin: 0 0 8px; font-size: 15px; }
.listing-off { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.listing-off h2 { margin: 0 0 2px; }
.listing-off p { margin: 0; }
.followup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip.due { background: var(--bad-bg); color: var(--bad); }

/* ── تقويم الحجوزات اليومية ── */
.cal-wrap { overflow-x: auto; }
.cal { border-collapse: separate; border-spacing: 0; font-size: 12px; min-inline-size: max-content; }
.cal th, .cal td { padding: 0; text-align: center; border-inline-start: 1px solid var(--line); border-block-end: 1px solid var(--line); }
.cal thead th { padding: 4px 2px; min-inline-size: 30px; font-weight: 600; }
.cal thead th small { display: block; font-size: 10px; color: var(--slate-500); font-weight: 400; }
.cal .cal-unit { position: sticky; inset-inline-start: 0; background: var(--surface); padding: 6px 10px; text-align: start; min-inline-size: 120px; z-index: 1; }
.cal .cal-unit small { display: block; color: var(--slate-500); font-weight: 400; }
.cal td { block-size: 34px; }
.cal td a { display: block; block-size: 100%; line-height: 34px; color: inherit; }
.cal .cal-free a { color: transparent; }
.cal .cal-free a:hover, .cal .cal-free a:focus-visible { color: var(--accent); background: var(--paper-2); text-decoration: none; }
.cal .cal-busy { background: var(--accent); }
.cal .cal-busy a { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; max-inline-size: 30px; text-overflow: clip; }
.cal .cal-start { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.cal .cal-today { box-shadow: inset 0 0 0 2px var(--navy-900); }
.cal .cal-wk { background: var(--paper-2); }
.import-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.dot-on { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); vertical-align: middle; }

/* قمع التحويل في لوحة FADx */
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.funnel li { display: grid; grid-template-columns: minmax(110px, 160px) 1fr minmax(120px, auto); gap: 12px; align-items: center; }
.funnel .bar { block-size: 14px; }
.funnel .f-num { display: flex; gap: 8px; align-items: baseline; }
.funnel li.worst .f-label { color: var(--bad); font-weight: 700; }
.funnel li.worst .bar > i { background: var(--bad); }
@media (max-width: 560px) { .funnel li { grid-template-columns: 1fr auto; } .funnel .bar { grid-column: 1 / -1; grid-row: 2; } }
.demo-try { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }
.demo-try .hint { flex: 1 1 260px; }
.qr-box { inline-size: 200px; block-size: 200px; background: #fff; border-radius: 12px; padding: 8px; }
.qr-box svg { inline-size: 100%; block-size: 100%; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; list-style: none; margin: 0; padding: 0; font-size: 18px; }