:root {
  --teal:#0f766e; --teal2:#14b8a6; --bg:#f8faf9; --card:#ffffff; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --booked:#14b8a6; --done:#22c55e; --cancelled:#94a3b8; --no_show:#f59e0b; --danger:#dc2626; --wa:#25d366;
}
:root[data-theme="dark"] { --bg:#0f172a; --card:#1e293b; --ink:#e2e8f0; --muted:#94a3b8; --line:#334155; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",Tahoma,sans-serif; background:var(--bg); color:var(--ink); transition:background .2s,color .2s; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:linear-gradient(90deg,var(--teal),var(--teal2)); color:#fff; }
.brand { display:flex; align-items:center; gap:10px; }
.brand h1 { margin:0; font-size:20px; } .brand p { margin:0; font-size:12px; opacity:.9; }
.logo { font-size:24px; }
.tabs { display:flex; gap:6px; padding:12px 18px 0; max-width:820px; margin:0 auto; }
.tab { flex:1; padding:10px; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:10px 10px 0 0; cursor:pointer; font-size:15px; }
.tab.active { color:var(--teal); font-weight:bold; border-top:2px solid var(--teal); }
.view { max-width:820px; margin:0 auto; padding:16px 18px 48px; display:flex; flex-direction:column; gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.card h2 { margin:0 0 12px; font-size:17px; }
.row-between { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
.form-grid { display:flex; flex-wrap:wrap; gap:8px; }
input,select,button { font:inherit; padding:9px 11px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
.form-grid > input, .form-grid > select { flex:1 1 130px; min-width:110px; }
button { cursor:pointer; }
.form-grid button[type=submit] { background:var(--teal); color:#fff; border:none; flex:0 0 auto; }
.list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.empty { text-align:center; color:var(--muted); padding:22px; background:var(--card); border:1px dashed var(--line); border-radius:10px; }
.appt { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.appt .time { font-weight:bold; font-size:16px; color:var(--teal); min-width:52px; }
.appt-main { flex:1; } .appt-name { font-weight:600; } .dur { color:var(--muted); font-weight:normal; font-size:13px; }
.appt-sub { display:flex; gap:6px; margin-top:4px; align-items:center; }
.appt-actions { display:flex; gap:6px; align-items:center; }
.appt-actions button { padding:6px 8px; background:transparent; border:1px solid var(--line); border-radius:8px; }
.appt-actions .wa { border-color:var(--wa); }
.badge { font-size:12px; padding:2px 9px; border-radius:999px; color:#fff; }
.badge.booked { background:var(--booked); } .badge.done { background:var(--done); } .badge.cancelled { background:var(--cancelled); } .badge.no_show { background:var(--no_show); }
.chip { font-size:13px; }
.prow, .payrow { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; }
.pname { font-weight:600; } .psub { font-size:13px; color:var(--muted); margin-top:2px; }
.delP { color:var(--muted); border:1px solid var(--line); background:transparent; border-radius:8px; padding:6px 8px; cursor:pointer; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; padding:10px 18px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.2); z-index:9; }
.toast.bad { background:var(--danger); }

/* ===== الجدول الماتركس ===== */
.muted { color:var(--muted); font-size:13px; }
.wknav { display:flex; gap:6px; align-items:center; }
.wknav button { padding:6px 12px; }
.matrix-wrap { overflow-x:auto; }
.matrix { border-collapse:collapse; width:100%; min-width:660px; }
.matrix th, .matrix td { border:1px solid var(--line); padding:4px; text-align:center; font-size:12px; vertical-align:top; }
.matrix thead th { background:var(--card); }
.tslot { background:var(--card); font-weight:bold; color:var(--teal); white-space:nowrap; }
.slot { height:46px; cursor:pointer; min-width:82px; }
.slot:hover { background:rgba(20,184,166,.10); }
.cellappt { border-radius:6px; padding:3px 5px; margin:1px 0; color:#fff; cursor:pointer; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cellappt small { opacity:.85; }
.cellappt.booked { background:var(--booked); } .cellappt.done { background:var(--done); } .cellappt.cancelled { background:var(--cancelled); } .cellappt.no_show { background:var(--no_show); }
.cellappt.cont { opacity:.5; font-style:italic; }
.matrix tr.offrow > .tslot { background:#fbf4e9; color:#b26a00; }
.slot.offhour { background:repeating-linear-gradient(45deg,#fbf7f0,#fbf7f0 6px,#f4ecdd 6px,#f4ecdd 12px); }
.slot.offhour:hover { background:rgba(20,184,166,.10); }
.offtag { color:#b26a00; font-weight:normal; font-size:10px; }
.sched-stats { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.sched-stats .sc { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:4px 12px; font-size:13px; }
.sched-stats .sc b { color:var(--teal); font-size:16px; margin-inline-end:3px; }
.slot.dragover { outline:2px dashed var(--teal); outline-offset:-2px; background:rgba(20,184,166,.15); }
.cellappt[draggable="true"] { cursor:grab; }
.cellappt[draggable="true"]:active { cursor:grabbing; }
.warn-banner { background:#fdecea; border:1px solid #f5c2bd; color:#b3261e; padding:8px 12px; border-radius:8px; margin-bottom:10px; font-size:13px; }
.backup-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.dl-btn { display:inline-block; padding:9px 14px; border:1px solid var(--teal); color:var(--teal); border-radius:8px; text-decoration:none; font-size:13px; background:transparent; }
.dl-btn:hover { background:var(--teal); color:#fff; }
.mail-btn { background:#5b6ee1; color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; text-decoration:none; font-size:13px; display:inline-block; text-align:center; }
.mail-btn:hover { filter:brightness(1.08); }
.send-group { display:flex; gap:6px; align-items:center; }
.type-legend { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px; font-size:12px; color:#555; }
.type-legend .tl { display:inline-flex; align-items:center; gap:4px; }
.type-legend .tl i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.ic-btn { background:transparent; border:none; cursor:pointer; font-size:16px; padding:2px 6px; }
.ic-btn:hover { filter:brightness(1.2); }
.matrix.month td.mcell { height:64px; width:14.2%; cursor:pointer; vertical-align:top; text-align:right; padding:6px; }
.matrix.month td.mcell:hover { background:rgba(20,184,166,.10); }
.matrix.month td.mcell.empty { background:#fafafa; cursor:default; }
.matrix.month td.mcell.today { outline:2px solid var(--teal); outline-offset:-2px; }
.mday { font-weight:bold; color:var(--teal); font-size:14px; }
.mcount { margin-top:6px; font-size:11px; background:var(--teal); color:#fff; border-radius:10px; padding:2px 6px; display:inline-block; }
.mtitle { font-weight:bold; color:var(--teal); padding:0 10px; }

/* ===== النوافذ (modal) ===== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal-box { background:var(--card); color:var(--ink); border-radius:14px; padding:20px; max-width:430px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal-box h3 { margin:0 0 4px; }
.form-col { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.form-col label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.two { display:flex; gap:8px; } .two > * { flex:1; }
.modal-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:10px; }
.modal-actions button { padding:8px 12px; }
.btn-ghost { background:transparent; }
.btn-danger { background:var(--danger); color:#fff; border:none; }

/* ===== رقم الوصل ===== */
.receipt-row { display:flex; gap:8px; align-items:center; flex:1 1 100%; }
.receipt-row label { white-space:nowrap; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:4px; }
.receipt-row input[type=text] { flex:1; }
.rcpt { font-size:12px; color:var(--muted); font-weight:normal; }

/* ===== الطلبات ===== */
.reqrow { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; }
.reqinfo { flex:1; }
.reqactions { display:flex; gap:6px; }
.reqactions button { padding:7px 10px; }
.approve { background:var(--done); color:#fff; border:none; }
.slots { display:flex; flex-wrap:wrap; gap:6px; }

/* ===== الإعدادات ===== */
.linkrow { display:flex; gap:8px; }
.linkrow input { flex:1; }
.wa-btn { background:var(--wa); color:#fff; border:none; }
.delST { color:var(--muted); }

/* ===== صفحة الحجز العامة ===== */
.book-body { display:flex; align-items:flex-start; justify-content:center; padding:24px 14px; background:var(--bg); }
.book-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; max-width:440px; width:100%; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.book-head { text-align:center; margin-bottom:16px; }
.book-head .logo { font-size:34px; }
.book-head h1 { margin:6px 0 2px; color:var(--teal); }
.book-head p { margin:0; color:var(--muted); font-size:13px; }
.radios { display:flex; gap:14px; margin-top:4px; }
.rad { display:flex; align-items:center; gap:5px; color:var(--ink); font-size:14px; cursor:pointer; }
.book-msg { min-height:20px; margin:4px 0 0; text-align:center; font-size:14px; }
.book-msg.ok { color:var(--done); } .book-msg.bad { color:var(--danger); }

/* ===== v3.1 تلميع + فايل المُراجِع ===== */
.card h2 { font-size:16px; font-weight:700; margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.form-grid { align-items:stretch; }
.prow { transition:border-color .15s; }
.prow.clickable { cursor:pointer; }
.prow.clickable:hover { border-color:var(--teal); box-shadow:0 2px 10px rgba(15,118,110,.08); }
.chev { color:var(--muted); font-size:18px; }
.due-pill { font-size:12px; background:#fef2f2; color:var(--danger); padding:4px 11px; border-radius:999px; white-space:nowrap; margin-inline-start:auto; }
.ok-pill { font-size:12px; background:#ecfdf5; color:#059669; padding:4px 11px; border-radius:999px; margin-inline-start:auto; }
.back-btn { background:transparent; border:none; color:var(--teal); cursor:pointer; font-size:15px; padding:2px 4px; align-self:flex-start; font-weight:600; }
.profile-head { display:flex; align-items:center; gap:14px; }
.avatar { width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:bold; flex:0 0 auto; }
.pname.big { font-size:19px; }
.stats { display:flex; gap:10px; flex-wrap:wrap; }
.stat { flex:1 1 120px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; }
.stat-l { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.stat-v { font-size:18px; font-weight:bold; }
.stat-v.paid { color:#059669; } .stat-v.due { color:var(--danger); } .stat-v.ok { color:#059669; }
.visit { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.del-btn { border:1px solid var(--line); background:transparent; border-radius:8px; padding:6px 9px; cursor:pointer; }
.amount { margin-inline-start:auto; }

/* ===== ماتركس الاعتماد ===== */
.modal-box.wide { max-width:760px; }
.legend { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin:10px 0 8px; }
.lg { width:15px; height:15px; border-radius:4px; display:inline-block; vertical-align:middle; }
.lg.free { border:1px solid var(--line); background:var(--card); }
.lg.busy { background:var(--booked); }
.approve-matrix .mcell { width:auto; min-width:40px; height:30px; padding:0; }
.approve-matrix .mcell.free { cursor:pointer; background:var(--card); }
.approve-matrix .mcell.free:hover { background:rgba(20,184,166,.20); box-shadow:inset 0 0 0 2px var(--teal); }
.approve-matrix .mcell.busy { background:var(--booked); }
.approve-matrix .mcell.busy::after { content:'●'; color:#fff; font-size:9px; }

/* ===== لوحة اليوم + قالب التذكير ===== */
.att-done, .att-no { border:1px solid var(--line); background:transparent; border-radius:8px; padding:6px 8px; cursor:pointer; }
.att-done:hover { background:#ecfdf5; } .att-no:hover { background:#fef2f2; }
.send-one { text-decoration:none; padding:8px 14px; border-radius:9px; }
.bulk-list { max-height:340px; overflow-y:auto; }
.tpl-area { width:100%; min-height:90px; resize:vertical; font-family:inherit; }
code { background:var(--bg); padding:1px 5px; border-radius:4px; font-size:12px; }
.profile-actions { display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
.profile-actions button { padding:7px 12px; white-space:nowrap; }
.payrow .del-btn, .delPay { margin-inline-start:8px; }
.wh-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wh-grid label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.login-card { max-width:380px; margin:50px auto 0; }
.login-card h2 { border:none; text-align:center; }

/* ===== هوية العيادة ===== */
.logo-img { max-height: 34px; max-width: 90px; vertical-align: middle; border-radius: 6px; }
.book-head .logo-img { max-height: 52px; max-width: 130px; }
.brand-edit { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.brand-preview { display: flex; align-items: center; gap: 10px; background: #f6fbfa; border: 1px dashed #9fd8d0; border-radius: 12px; padding: 14px 16px; min-width: 200px; }
.brand-preview span { font-size: 30px; line-height: 1; }
.brand-preview b { font-size: 17px; }
.brand-preview small { color: #6b8; }

/* ===== المواعيد الفائتة ===== */
.overdue-card { border-inline-start: 5px solid #f59e0b; background: #fffdf5; }
.appt.overdue { background: #fffaf0; }
.badge.overdue-badge { background: #f59e0b; color: #fff; }
.cellappt.isover { outline: 2px dashed #f59e0b; outline-offset: -2px; }
.sched-stats .sc.over { background: #fef3c7; color: #92400e; }

/* ===== جرس الإشعارات ===== */
.bell { position: relative; background: rgba(255,255,255,.16); border: 0; color: #fff; font-size: 20px; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; margin-inline-start: auto; }
.bell:hover { background: rgba(255,255,255,.3); }
.bell.has { animation: bellpulse 2s ease-in-out infinite; }
@keyframes bellpulse { 0%,100% { transform: rotate(0); } 8% { transform: rotate(-12deg); } 16% { transform: rotate(12deg); } 24% { transform: rotate(0); } }
.bell-count { position: absolute; top: -2px; inset-inline-end: -2px; background: #ef4444; color: #fff; font-size: 11px; font-weight: bold; min-width: 19px; height: 19px; line-height: 19px; border-radius: 10px; padding: 0 4px; }
.nf-wrap { max-height: 60vh; overflow: auto; }
.nf-head { margin: 12px 0 6px; font-size: 14px; color: #0f766e; }
.nf-item { cursor: pointer; }
.nf-item:hover { background: #f0fdfa; }
.nf-go { font-size: 22px; color: #94a3b8; }

/* ===== الأقساط والمطالبات ===== */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.fbtn { background: #f1f5f9; border: 1px solid #dbe6e4; color: #334; border-radius: 20px; padding: 5px 13px; font-size: 13px; cursor: pointer; }
.fbtn:hover { background: #e2f5f2; }
.fbtn.on { background: #14b8a6; border-color: #14b8a6; color: #fff; font-weight: bold; }
.prow.inst.late { background: #fef2f2; border-inline-start: 4px solid #ef4444; }
.prow.inst.ispaid { background: #f0fdf4; border-inline-start: 4px solid #22c55e; }
.prow.inst.iswaived { background: #f8fafc; border-inline-start: 4px solid #94a3b8; opacity: .85; }
.badge.inst-due { background: #e2e8f0; color: #334; }
.badge.inst-due.late { background: #ef4444; color: #fff; }
.badge.inst-paid { background: #22c55e; color: #fff; }
.badge.inst-waived { background: #94a3b8; color: #fff; }
.prow.plan { border-inline-start: 4px solid #8b5cf6; }
.ok-pill, .warn-pill, .due-pill { font-size: 11px; border-radius: 10px; padding: 2px 8px; font-weight: bold; }
.warn-pill { background: #fef3c7; color: #92400e; }
.due-pill { background: #fee2e2; color: #b91c1c; }
.due-txt { color: #b91c1c; font-weight: bold; }
.money-in { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.stat-v.credit, .amount.credit { color: #7c3aed; }

/* ════════════ التجاوب: تابلت وموبايل ════════════ */
/* تمرير أفقي آمن للجداول العريضة بدل كسر الصفحة */
.matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- تابلت (حتى 900px) ---------- */
@media (max-width: 900px) {
  .view { padding: 12px 12px 60px; }
  .tabs { padding: 10px 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }
  .modal-box { width: 94vw; max-width: 94vw; }
  .brand-edit { flex-direction: column; }
}

/* ---------- موبايل (حتى 640px) ---------- */
@media (max-width: 640px) {
  .topbar { padding: 10px 12px; }
  .brand h1 { font-size: 17px; }
  .brand p { font-size: 11px; }
  .logo { font-size: 20px; }
  .logo-img { max-height: 28px; }
  .card { padding: 13px; border-radius: 10px; }
  .card h2 { font-size: 15px; }

  /* حقول ملء العرض + 16px يمنع تكبير iOS التلقائي عند التركيز */
  input, select, textarea, button { font-size: 16px; }
  .form-grid, .form-col { flex-direction: column; }
  .form-grid > *, .form-col > * { width: 100%; flex: 1 1 auto !important; }
  .two { display: flex; flex-direction: column; gap: 8px; }
  .receipt-row { flex-wrap: wrap; }

  /* أزرار بحجم لمس مريح (≥44px) */
  button, .btn-ghost, .wa-btn, .mail-btn, .dl-btn, .ic-btn, .del-btn { min-height: 44px; }
  .ic-btn, .del-btn { min-width: 44px; }

  /* صفوف القوائم: عمودية بدل تزاحم أفقي */
  .prow, .payrow, .appt, .reqrow, .visit {
    flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 12px;
  }
  .prow > div:first-child, .payrow > div:first-child, .appt-main, .reqinfo { flex: 1 1 100%; min-width: 0; }
  .pname, .psub { word-break: break-word; }
  .appt-actions, .reqactions, .send-group { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
  .amount { flex: 0 0 auto; font-size: 15px; }
  .appt .time { flex: 0 0 auto; }

  /* الملخّصات: عمودان بدل صف واحد مزدحم */
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { min-width: 0; }
  .sched-stats { flex-wrap: wrap; }
  .sched-stats .sc { flex: 1 1 45%; }

  /* الجدول الأسبوعي: خلايا أضيق + تمرير */
  .matrix { font-size: 11px; min-width: 620px; }
  .matrix th, .matrix td { padding: 3px; }
  .cellappt { font-size: 10px; padding: 2px 3px; }
  .cellappt small { display: block; }
  .matrix.month { min-width: 480px; }

  /* النوافذ المنبثقة: شاشة شبه كاملة */
  .modal-overlay { align-items: flex-end; }
  .modal-box { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 14px 14px 0 0; padding: 16px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions > * { width: 100%; }
  .modal-actions .send-one, .bulk-list .send-group > * { width: auto; }

  /* المرشّحات وروابط التصدير */
  .filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .fbtn { flex: 0 0 auto; }
  .backup-row { flex-direction: column; }
  .backup-row .dl-btn { width: 100%; text-align: center; }
  .wknav { flex-wrap: wrap; }
  .linkrow { flex-direction: column; }
  .linkrow > * { width: 100%; }
  .profile-actions { flex: 1 1 100%; flex-wrap: wrap; }
  .profile-head { flex-wrap: wrap; }
  .toast { inset-inline: 12px; width: auto; text-align: center; }
}

/* ---------- موبايل صغير (حتى 380px) ---------- */
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .tab { font-size: 14px; padding: 9px 11px; }
}

/* ===== البحث الشامل ===== */
.gsearch { position: relative; flex: 1 1 260px; max-width: 380px; margin-inline: 14px; }
.gsearch input { width: 100%; padding: 9px 13px; border: 0; border-radius: 22px; background: rgba(255,255,255,.22); color: #fff; font-size: 14px; }
.gsearch input::placeholder { color: rgba(255,255,255,.75); }
.gsearch input:focus { background: #fff; color: var(--ink); outline: 2px solid rgba(255,255,255,.6); }
.gresults { position: absolute; top: 46px; inset-inline: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); max-height: 60vh; overflow: auto; z-index: 60; }
.gitem { display: flex; gap: 10px; align-items: center; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid var(--line); }
.gitem:last-child { border-bottom: 0; }
.gitem:hover { background: #f0fdfa; }
:root[data-theme="dark"] .gitem:hover { background: #0f3d3a; }
.gicon { font-size: 19px; }
.gtitle { font-weight: bold; font-size: 14px; }
.gsub { font-size: 12px; color: var(--muted); }
.gempty { padding: 14px; color: var(--muted); font-size: 13px; text-align: center; }

/* ===== نافذة التأكيد ===== */
.ask-msg { font-size: 15px; line-height: 1.7; margin: 6px 0 4px; }

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; }
  .gsearch { order: 3; flex: 1 1 100%; margin: 9px 0 0; max-width: none; }
  .gresults { top: 44px; }
}

/* ===== واجهة المراجعين المحسّنة ===== */
.pcard { align-items: flex-start; }
.pmain { flex: 1; min-width: 0; }
.ptags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.tag { font-size: 11px; border-radius: 9px; padding: 2px 7px; font-weight: bold; white-space: nowrap; }
.tag.next { background: #ccfbf1; color: #0f766e; }
.tag.dorm { background: #e2e8f0; color: #475569; }
.tag.new  { background: #dbeafe; color: #1d4ed8; }
.tag.risk { background: #fee2e2; color: #b91c1c; }
.tag.emg  { background: #fef3c7; color: #92400e; }
.tag.arch { background: #ede9fe; color: #6d28d9; }
.credit-pill { background: #ede9fe; color: #6d28d9; font-size: 11px; border-radius: 10px; padding: 2px 8px; font-weight: bold; }
.sortlbl { align-self: center; font-size: 13px; }
.lnk { color: var(--teal); text-decoration: none; }
.lnk:hover { text-decoration: underline; }
.emg-line { color: #b45309; font-weight: 600; }
.emg-box { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px; padding: 10px 12px; margin: 4px 0; }
:root[data-theme="dark"] .emg-box { background: #3f2d0a; border-color: #a16207; }
.emg-box legend { font-size: 13px; font-weight: bold; color: #b45309; padding: 0 6px; }

/* الملاحظات السريرية */
.notes-card { border-inline-start: 5px solid #8b5cf6; }
.note-row { align-items: flex-start; }
.note-body { white-space: pre-wrap; line-height: 1.7; font-size: 14px; }

/* الخط الزمني */
.timeline .tlrow { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-bottom: 1px solid var(--line); cursor: pointer; }
.timeline .tlrow:last-child { border-bottom: 0; }
.timeline .tlrow:hover { background: #f0fdfa; }
:root[data-theme="dark"] .timeline .tlrow:hover { background: #0f3d3a; }
.tlicon { font-size: 18px; flex: 0 0 auto; }
.tlbody { flex: 1; min-width: 0; }
.tltitle { font-weight: bold; font-size: 14px; }
.tlsub { font-size: 12px; color: var(--muted); word-break: break-word; }
.tlrow[data-kind="note"] { background: #faf5ff; }
:root[data-theme="dark"] .tlrow[data-kind="note"] { background: #2a1f3d; }

/* وضع الخصوصية */
body.privacy-on .avatar { filter: blur(1px); }
.danger-sep { border: 0; border-top: 1px dashed var(--line); margin: 14px 0 8px; }
.danger-note { color: #b91c1c; font-size: 12.5px; line-height: 1.6; }

/* ═══════════ نظام الأيقونات ═══════════ */
.ic { display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; }
/* محاذاة داخل الأزرار والوسوم */
button, .btn-ghost, .wa-btn, .mail-btn, .dl-btn, .del-btn, .ic-btn,
.tag, .ok-pill, .due-pill, .warn-pill, .credit-pill, .badge, .fbtn, .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pname, .tltitle, .gtitle, .stat-l, .nf-head, .card h2, h3, .psub { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card h2, h3 { display: flex; }
.pname { display: flex; }
/* أزرار الأيقونة فقط: مربّعة ومتوازنة */
.ic-btn, .del-btn { padding: 7px; line-height: 0; }
.bell .ic, #themeBtn .ic, #privBtn .ic { vertical-align: middle; }
.bell { display: inline-flex; align-items: center; justify-content: center; }
/* التبويبات: أيقونة فوق النص على الجوال، بجانبه على الشاشات الكبيرة */
.tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.tab .ic { opacity: .75; }
.tab.active .ic { opacity: 1; }
/* الأيقونات داخل النص الصغير أخفت */
.psub .ic, .muted .ic, .tlsub .ic { opacity: .7; }
/* حالات لونية */
.btn-danger .ic, .del-btn .ic { color: inherit; }
.tag.risk .ic, .due-pill .ic { color: currentColor; }

@media (max-width: 640px) {
  .tab { flex-direction: column; gap: 3px; font-size: 12px; padding: 8px 10px; }
  .tab .ic { width: 19px; height: 19px; }
}

/* ═══════════ إكمال الوضع الليلي ═══════════ */
:root[data-theme="dark"] {
  --shade1: #16233a;   /* سطح أفتح قليلاً من البطاقة */
  --shade2: #1f2f4a;
}
:root[data-theme="dark"] .fbtn { background: var(--shade1); border-color: var(--line); color: #cbd5e1; }
:root[data-theme="dark"] .fbtn:hover { background: var(--shade2); }
:root[data-theme="dark"] .fbtn.on { background: var(--teal2); border-color: var(--teal2); color: #06231f; }
:root[data-theme="dark"] .brand-preview { background: var(--shade1); border-color: #2f6f68; }
:root[data-theme="dark"] .overdue-card { background: #2b2210; }
:root[data-theme="dark"] .appt.overdue { background: #2b2210; }
:root[data-theme="dark"] .prow.inst.late { background: #33191b; }
:root[data-theme="dark"] .prow.inst.ispaid { background: #12301f; }
:root[data-theme="dark"] .prow.inst.iswaived { background: var(--shade1); }
:root[data-theme="dark"] .warn-banner { background: #3a1c1a; border-color: #7f2d26; color: #fca5a5; }
:root[data-theme="dark"] .matrix tr.offrow > .tslot { background: #2b2210; color: #d9a441; }
:root[data-theme="dark"] .matrix.month td.mcell.empty { background: var(--shade1); }
:root[data-theme="dark"] .badge.inst-due { background: var(--shade2); color: #cbd5e1; }
:root[data-theme="dark"] .att-done:hover { background: #12301f; } 
:root[data-theme="dark"] .att-no:hover { background: #33191b; }
:root[data-theme="dark"] .sched-stats .sc.over { background: #3a2c0c; color: #fbbf24; }
/* الوسوم والحبوب: خلفيات داكنة بنفس دلالة اللون */
:root[data-theme="dark"] .tag.next { background: #0f3d3a; color: #5eead4; }
:root[data-theme="dark"] .tag.dorm { background: var(--shade2); color: #cbd5e1; }
:root[data-theme="dark"] .tag.new  { background: #17294d; color: #93c5fd; }
:root[data-theme="dark"] .tag.risk { background: #3d1618; color: #fca5a5; }
:root[data-theme="dark"] .tag.emg  { background: #3a2c0c; color: #fcd34d; }
:root[data-theme="dark"] .tag.arch { background: #2a1f45; color: #c4b5fd; }
:root[data-theme="dark"] .ok-pill { background: #12301f; color: #6ee7b7; }
:root[data-theme="dark"] .due-pill { background: #3d1618; color: #fca5a5; }
:root[data-theme="dark"] .warn-pill { background: #3a2c0c; color: #fcd34d; }
:root[data-theme="dark"] .credit-pill { background: #2a1f45; color: #c4b5fd; }
:root[data-theme="dark"] .disc-pill { background: #2a1f45; color: #c4b5fd; }
:root[data-theme="dark"] .emg-line { color: #fcd34d; }
:root[data-theme="dark"] .gsearch input:focus { background: var(--card); color: var(--ink); }

/* ═══════════ تبويبات داخل ملف المُراجِع ═══════════ */
.subtabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin-bottom: -4px; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: transparent; border: 0; border-bottom: 2.5px solid transparent; color: var(--muted);
  padding: 9px 14px; font-size: 14px; cursor: pointer; border-radius: 8px 8px 0 0; }
.subtab:hover { background: var(--card); color: var(--ink); }
.subtab.on { color: var(--teal); border-bottom-color: var(--teal2); font-weight: bold; background: var(--card); }
.subtab .ic { opacity: .8; }
.ppane { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 640px) { .subtab { padding: 9px 11px; font-size: 13px; } }

/* ═══════════ قائمة أدوات الترويسة ═══════════ */
.hmenu { position: relative; }
.hmenu-pop { position: absolute; top: 48px; inset-inline-end: 0; min-width: 190px; z-index: 70;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.2); overflow: hidden; padding: 5px; }
.hmi { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0;
  color: var(--ink); padding: 10px 12px; font-size: 14px; cursor: pointer; border-radius: 8px; text-align: start; justify-content: flex-start; }
.hmi:hover { background: #f0fdfa; }
:root[data-theme="dark"] .hmi:hover { background: var(--shade2); }
.hmi .ic { opacity: .8; }

/* خاصية hidden يجب أن تتغلّب على أي display في الأنماط */
[hidden] { display: none !important; }

/* أزرار ملف المُراجِع: صف كامل يلتفّ أفقياً بدل عمود متكدّس */
.profile-head { flex-wrap: wrap; }
.profile-actions { flex: 1 1 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line); justify-content: flex-start; }

/* ═══════════ مؤشّر التحميل والحالات الفارغة ═══════════ */
body.is-busy::after { content: ''; position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, transparent, var(--teal2), transparent);
  background-size: 45% 100%; background-repeat: no-repeat; animation: bar 1.1s ease-in-out infinite; }
@keyframes bar { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
.sk { pointer-events: none; }
.sk-line { height: 13px; border-radius: 7px; background: linear-gradient(90deg, var(--line) 25%, var(--bg) 50%, var(--line) 75%);
  background-size: 200% 100%; animation: shim 1.3s linear infinite; margin: 11px 0; }
.sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; }
@keyframes shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.chk-line { display: flex; align-items: center; gap: 8px; }
.chk-line input { width: auto; }

/* ═══════════ مؤشّر التحميل والحالات الفارغة ═══════════ */
body.is-busy::after { content: ''; position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, transparent, var(--teal2), transparent);
  background-size: 45% 100%; background-repeat: no-repeat; animation: bar 1.1s ease-in-out infinite; }
@keyframes bar { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
.sk { pointer-events: none; }
.sk-line { height: 13px; border-radius: 7px; background: linear-gradient(90deg, var(--line) 25%, var(--bg) 50%, var(--line) 75%);
  background-size: 200% 100%; animation: shim 1.3s linear infinite; margin: 11px 0; }
.sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; }
@keyframes shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.chk-line { display: flex; align-items: center; gap: 8px; }
.chk-line input { width: auto; }
.more-wrap { display: flex; justify-content: center; padding: 6px 0 2px; }
.more-btn { min-width: 220px; }

/* ═══════════ بوابة المُراجِع (موبايل أولاً) ═══════════ */
.portal-body { padding-bottom: var(--safe-b); }
.portal-top { position: sticky; top: 0; z-index: 50; padding-top: max(14px, env(safe-area-inset-top)); }
.portal-view { max-width: 560px; padding-bottom: 92px; }
.portal-login { max-width: 420px; margin: 24px auto; }
.portal-help { font-size: 12px; text-align: center; margin-top: 12px; }

/* بطاقة الموعد القادم */
.next-card { background: linear-gradient(135deg, var(--teal), var(--teal2)); color: #fff; border: 0; text-align: center; padding: 24px 18px; }
.nc-label { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; opacity: .9; }
.nc-date { font-size: 20px; font-weight: bold; margin-top: 10px; }
.nc-time { font-size: 42px; font-weight: bold; line-height: 1.1; letter-spacing: 1px; }
.nc-count { display: inline-block; margin-top: 8px; background: rgba(255,255,255,.22); border-radius: 20px; padding: 5px 16px; font-size: 14px; }
.nc-meta { margin-top: 10px; font-size: 13px; opacity: .92; }
.nc-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.nc-actions .btn-ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.nc-actions .btn-ghost:hover { background: rgba(255,255,255,.28); }
.nc-pending { margin-top: 14px; background: rgba(255,255,255,.18); border-radius: 10px; padding: 9px 12px; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 6px; }
.empty-card { text-align: center; padding: 34px 18px; color: var(--muted); }
.empty-card h3 { margin: 12px 0 4px; color: var(--ink); }

/* شريط التنقّل السفلي */
.botnav { position: fixed; bottom: 0; inset-inline: 0; z-index: 60; display: flex;
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b); box-shadow: 0 -4px 18px rgba(0,0,0,.07); }
.bn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; color: var(--muted); padding: 9px 4px 8px; font-size: 11.5px; cursor: pointer; min-height: 56px; }
.bn .bn-ic { display: flex; opacity: .8; }
.bn.on { color: var(--teal); font-weight: bold; }
.bn.on .bn-ic { opacity: 1; }
body.has-botnav { padding-bottom: 0; }
.invite-code { font-size: 34px; font-weight: bold; letter-spacing: 8px; color: var(--teal); margin: 8px 0; font-family: monospace; }

/* ═══════════ قشرة الموبايل: تنقّل سفلي · سحب · قفل ═══════════ */
/* الشريط السفلي للموظفين يظهر على الشاشات الصغيرة فقط */
.staff-nav { display: none; }
@media (max-width: 820px) {
  .staff-nav { display: flex; }
  .tabs { display: none; }                       /* التبويبات العلوية تُستبدل بالسفلي */
  body.has-botnav .view { padding-bottom: 86px; }
}

/* سحب للتحديث */
.ptr { position: fixed; top: 0; inset-inline: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; font-size: 13px; color: var(--teal); background: var(--card); border-bottom: 1px solid var(--line);
  transform: translateY(-100%); transition: transform .12s linear; }
.ptr.ready { color: #fff; background: var(--teal2); }
.ptr .ic { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* شاشة القفل */
.lock-screen { position: fixed; inset: 0; z-index: 300; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.lock-box { width: 100%; max-width: 330px; text-align: center; }
.lock-logo { color: var(--teal); margin-bottom: 8px; }
.lock-box h2 { margin: 4px 0; font-size: 20px; }
.pin-dots { display: flex; gap: 11px; justify-content: center; margin: 20px 0 22px; }
.pd { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line); }
.pd.on { background: var(--teal2); border-color: var(--teal2); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; direction: ltr; }
.pk { height: 62px; font-size: 22px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; }
.pk:active { background: var(--teal2); color: #fff; }
.lock-bio { width: 100%; margin-top: 16px; }
.lock-msg { min-height: 20px; color: var(--danger); font-size: 13px; margin-top: 12px; }
.more-row { cursor: pointer; }

/* الأزرار الملوّنة تتغلّب على أي قاعدة حاوية (تمنع أيقونة بيضاء على خلفية شفافة) */
button.wa-btn, a.wa-btn { background: var(--wa) !important; color: #fff !important; border: none !important; }
button.mail-btn, a.mail-btn { background: #4f46e5 !important; color: #fff !important; border: none !important; }
button.btn-danger { background: var(--danger) !important; color: #fff !important; border: none !important; }

/* شريط حالة الشبكة والعمليات المؤجّلة */
.netbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 9px 12px; font-size: 13px; font-weight: bold; color: #fff; }
.netbar.off { background: #b91c1c; }
.netbar.pending { background: #b45309; }
body.has-botnav .netbar { bottom: calc(var(--botnav-h) + var(--safe-b)); }
.nb-btn { background: rgba(255,255,255,.22); border: 0; color: #fff; border-radius: 8px; padding: 4px 12px; cursor: pointer; font-size: 12.5px; }

/* زر تبديل اللغة (i18n) */
.lang-btn{position:absolute;top:10px;inset-inline-end:10px;border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:4px 10px;font-size:13px;cursor:pointer;color:#0f766e;font-weight:700}
.lang-btn:hover{background:#f0fdf4}
.book-head{position:relative}

/* ═══════════ Bottom Sheet (قائمة المزيد وغيرها) ═══════════ */
.sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 9px auto 4px; flex: none; }
.sheet-title { font-weight: 700; font-size: 16px; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.modal-overlay.as-sheet .prow { min-height: 48px; }

/* ═══════════ الشريط السفلي: ثبات الارتفاع ومساحات نقر 44px وحالة نشطة أوضح ═══════════ */
.botnav { height: calc(var(--botnav-h) + var(--safe-b)); }
.bn { min-height: 44px; min-width: 44px; position: relative; -webkit-tap-highlight-color: transparent; }
.bn.on::before { content: ""; position: absolute; top: 0; inset-inline: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal); }
.bn.on { background: color-mix(in srgb, var(--teal) 8%, transparent); border-radius: 10px; }

/* ═══════════ بطاقة الاشتراك في لوحة المالك ═══════════ */
.sub-card { border: 1px solid var(--line); border-inline-start: 3px solid var(--teal2); border-radius: 10px;
  padding: 8px 10px; margin: 6px 0; font-size: 13.5px; background: color-mix(in srgb, var(--teal) 4%, var(--card)); }
.sub-card.expired { border-inline-start-color: #dc2626; background: color-mix(in srgb, #dc2626 6%, var(--card)); }
.sub-card.none { border-inline-start-color: var(--muted); color: var(--muted); background: transparent; }
.days-chip { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); margin-inline-start: 6px; }
.days-chip.warn { background: #f59e0b26; color: #b45309; }
.days-chip.danger { background: #dc262626; color: #dc2626; }
.prow.pcol { flex-wrap: wrap; }
.prow.pcol > div:first-child { min-width: 0; flex: 1 1 100%; }

/* ═══════════ شاشة الإيقاف (انتهاء اشتراك / تعطيل) ═══════════ */
.suspended-card { max-width: 480px; margin: 40px auto; text-align: center; padding: 34px 22px; }
.suspended-card h2 { margin: 12px 0 6px; }
.inline-num { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }

/* ═══════════ شاشات ضيقة (~390px): لا قصّ ولا تداخل ═══════════ */
@media (max-width: 420px) {
  .view { padding-inline: 8px; }
  .card { padding: 12px; }
  .topbar { flex-wrap: wrap; gap: 6px; padding-inline: 10px; }
  .brand h1 { font-size: 17px; }
  .gsearch { order: 3; flex: 1 1 100%; }
  .gsearch input { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .send-group { flex-wrap: wrap; justify-content: flex-start; }
  .prow { flex-wrap: wrap; }
  .amount { white-space: nowrap; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .modal-box { width: calc(100vw - 24px); max-height: 86dvh; overflow-y: auto; }
  table, .table-wrap { display: block; overflow-x: auto; }
  .sub-card { font-size: 12.5px; }
}
/* ═══════════ المكوّن الموحّد للنوافذ (dialog.js) — هندسة Bottom Sheet الصحيحة ═══════════ */
:root {
  --safe-b: env(safe-area-inset-bottom, 0px);   /* متغيّر واحد للمنطقة الآمنة — قابل للمحاكاة في الاختبارات */
  --botnav-h: 58px;                             /* ارتفاع الشريط السفلي الثابت */
}
/* فوق كل عناصر الصفحة (الشريط السفلي 60، القائمة 70، ptr 90، netbar 95) — كان 50 وهذا جذر الدفن */
.modal-overlay { z-index: 100; transition: background .2s ease; }
.toast { z-index: 250; }                        /* رسائل النجاح فوق النوافذ دائماً (كانت 9 = مدفونة) */
body.dlg-open { overflow: hidden; }             /* قفل تمرير الصفحة الخلفية عند فتح نافذة */
.modal-overlay .mbody { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; max-height: calc(100dvh - 80px); }
.modal-overlay.as-sheet { align-items: flex-end; padding: 0; }
.modal-overlay.as-sheet .modal-box {
  width: 100%; max-width: 100%; margin: 0; border-radius: 18px 18px 0 0;
  /* dvh لا vh: أشرطة متصفح الموبايل تغيّر vh وتقصّ المحتوى */
  max-height: calc(100dvh - var(--botnav-h) - var(--safe-b) - 16px);
  display: flex; flex-direction: column; padding: 4px 16px 0;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.9,.3,1);
  box-shadow: 0 -10px 30px rgba(0,0,0,.2);
}
.modal-overlay.as-sheet.open .modal-box { transform: translateY(0); }
.modal-overlay.as-sheet .mbody { flex: 1; max-height: none; padding-bottom: 8px; }
/* أزرار الإجراءات: ذيل هيكلي ثابت خارج منطقة التمرير — مرئي دائماً ولا يغطي المحتوى */
.modal-overlay.as-sheet .mfoot { flex: none; background: var(--card); padding: 8px 0 calc(8px + var(--safe-b)); box-shadow: 0 -8px 12px -10px rgba(0,0,0,.25); }
.modal-overlay.as-sheet .mfoot .modal-actions { margin-top: 0; }
.modal-overlay.as-sheet .mfoot button { min-height: 44px; }
.modal-overlay.as-sheet .prow { min-height: 48px; }

/* ═══════════ شريط تحديث PWA + مؤشر تحميل الأزرار + إرشاد تثبيت iOS ═══════════ */
.upd-bar { position: fixed; bottom: calc(var(--botnav-h) + var(--safe-b) + 10px); inset-inline: 12px; z-index: 260;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--teal); color: #fff; padding: 10px 14px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: updIn .3s ease; }
body:not(.has-botnav) .upd-bar { bottom: calc(var(--safe-b) + 12px); }
.upd-bar button { background: #fff; color: var(--teal); border: 0; border-radius: 8px; padding: 7px 16px; font-weight: 700; cursor: pointer; min-height: 40px; }
@keyframes updIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
button.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: btnSpin .7s linear infinite; }
button.is-loading.btn-ghost::after, button.is-loading.ic-btn::after { border-color: color-mix(in srgb, var(--teal) 40%, transparent); border-top-color: var(--teal); }
@keyframes btnSpin { to { transform: rotate(360deg); } }

.install-steps { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.install-steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.install-steps .step-ic { font-size: 22px; flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent); border-radius: 10px; }

/* ═══════════ الجدول الدقيق: الشرائح في مواضع دقائقها الفعلية وبارتفاع مدتها ═══════════ */
.matrix td.slot.precise { position: relative; height: 58px; min-width: 92px; padding: 0; overflow: visible; }
.matrix td.slot.precise .cellappt { position: absolute; margin: 0; z-index: 2; overflow: hidden;
  font-size: 11.5px; line-height: 1.25; padding: 2px 5px; box-sizing: border-box; }
.matrix td.slot.precise .cellappt:hover { z-index: 5; }
.matrix td.slot.precise .cellappt small { display: block; opacity: .8; font-size: 10px; }

/* ═══════════ مكوّن البحث عن المُراجِع (combobox) ═══════════ */
.ppick { position: relative; }
.ppick input[type="text"] { width: 100%; box-sizing: border-box; }
.ppick-list { position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); max-height: 250px; overflow-y: auto; }
.ppick-it { padding: 9px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; min-height: 40px; align-items: center; }
.ppick-it small { color: var(--muted); direction: ltr; }
.ppick-it:hover, .ppick-it.on { background: color-mix(in srgb, var(--teal) 9%, transparent); }
.ppick-empty { padding: 9px 12px; color: var(--muted); font-size: 13px; }
.ppick-new { padding: 10px 12px; cursor: pointer; color: var(--teal); font-weight: 700; border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 6px; min-height: 42px; }
.ppick-new:hover { background: color-mix(in srgb, var(--teal) 9%, transparent); }
.ppick-form { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; }
.ppick-form input { flex: 1 1 110px; }
.ppick-form button { background: var(--teal); color: #fff; border: 0; }
/* داخل النوافذ: القائمة يجب أن تعلو محتوى اللوح المتمرر */
#modal .ppick-list { z-index: 40; }