/* ===== Al-Mohab Clinics: additions on top of the accounting look (app.css + nest.css) ===== */

/* ---------- login + connection setup ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); }
.auth-side { background: var(--night); color: #fff; position: relative; overflow: hidden; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; inset-inline-start: -160px; top: -200px; background: radial-gradient(circle, rgba(132, 94, 255, .55), transparent 65%); }
.auth-side::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; inset-inline-end: -120px; bottom: -160px; background: radial-gradient(circle, rgba(186, 42, 186, .4), transparent 65%); }
.auth-side > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-brand img { height: 58px; }
.auth-brand .name { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; }
.auth-brand .name b { color: var(--lime); }
.auth-brand small { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .16em; color: #A9A3C6; margin-top: 8px; font-weight: 600; }
.auth-hero h1 { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1.25; margin: 0 0 12px; }
.auth-hero h1 b { color: var(--lime); }
.auth-hero p { color: #B9B3D6; font-size: 16px; max-width: 460px; margin: 0; }
.auth-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.auth-feats div { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.auth-feats i { color: var(--lime); font-size: 20px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-card { width: min(460px, 100%); }
.auth-card h2 { font-family: var(--display); font-weight: 900; font-size: 30px; margin: 0 0 4px; }
.auth-card .sub { color: var(--text-2); margin: 0 0 22px; }
.auth-card .field { margin-bottom: 14px; }
.auth-card .input, .auth-card .select { height: 48px; font-size: 16px; padding: 0 14px; }
.auth-card .btn.primary { width: 100%; height: 50px; font-size: 16px; margin-top: 6px; }
.err-box { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.err-box:empty { display: none; }
.db-pick { display: grid; gap: 8px; }
.db-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); text-align: start; width: 100%; }
.db-opt:hover { border-color: var(--violet-100); background: var(--surface-2); }
.db-opt.on { border-color: var(--violet); background: var(--violet-50); }
.db-opt .ic { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--violet-50); color: var(--violet); font-size: 21px; flex: none; }
.db-opt.on .ic { background: var(--violet); color: #fff; }
.db-opt .t { font-weight: 800; font-size: 15px; }
.db-opt .s { font-size: 12.5px; color: var(--text-3); direction: ltr; text-align: start; unicode-bidi: plaintext; }
.db-opt .ro { margin-inline-start: auto; }
.auth-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 13.5px; flex-wrap: wrap; }
.auth-links a, .link { color: var(--violet-d); font-weight: 700; cursor: pointer; background: none; border: 0; padding: 0; }
.pw-wrap { position: relative; }
.pw-wrap .icon-btn { position: absolute; inset-inline-end: 6px; top: 6px; }

.setup-wrap { max-width: 1040px; margin: 0 auto; padding: 32px 20px 60px; }
.prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.prof-card { padding: 16px 18px; border-top: 3px solid var(--violet); }
.prof-card .hd { display: flex; align-items: center; gap: 10px; }
.prof-card .hd strong { font-family: var(--display); font-size: 18px; font-weight: 800; }
.prof-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; font-size: 13.5px; }
.prof-card dt { color: var(--text-3); font-weight: 600; }
.prof-card dd { margin: 0; direction: ltr; text-align: start; unicode-bidi: plaintext; font-weight: 600; overflow-wrap: anywhere; }
.prof-card .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.test-res { margin-top: 12px; font-size: 13.5px; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; font-weight: 700; cursor: pointer; color: var(--text-2); }
.seg button.on { background: var(--violet); color: #fff; }

/* ---------- sidebar database pill ---------- */
.sidebar .dbpill { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; cursor: pointer; text-align: start; }
.sidebar .dbpill i { color: var(--lime); }
.sidebar .dbpill .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.sidebar .dbpill .tag { margin-inline-start: auto; background: var(--lime); color: var(--night); font-weight: 800; font-size: 11px; padding: 1px 8px; border-radius: 6px; direction: ltr; }
.sidebar .dbpill .tag.ro { background: #F5B14C; }
.nav-item .soon { background: rgba(255, 255, 255, .08); padding: 0 6px; border-radius: 6px; color: #A9A3C6; }

/* ---------- lists ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.toolbar .search-in { position: relative; flex: 1 1 280px; max-width: 460px; }
.toolbar .search-in i { position: absolute; inset-inline-start: 12px; top: 11px; color: var(--text-3); }
.toolbar .search-in .input { padding-inline-start: 38px; }
.toolbar .grow { flex: 1; }
.toolbar .field { min-width: 150px; }
.pager { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.pager .grow { flex: 1; }
.tbl td.strong { font-weight: 700; color: var(--text); }
.tbl tr.clickable:hover td { background: var(--violet-50); }
.tbl td .sub { display: block; font-size: 12px; color: var(--text-3); font-weight: 500; }
.empty { padding: 40px 20px; text-align: center; color: var(--text-3); }
.empty i { font-size: 34px; color: var(--violet-100); display: block; margin-bottom: 6px; }
.loading { padding: 40px 20px; text-align: center; color: var(--text-3); }
.spin { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--violet-100); border-top-color: var(--violet); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ltr { direction: ltr; unicode-bidi: plaintext; }

/* ---------- home ---------- */
.kpis .kpi .val small { margin-inline-start: 4px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding: 18px 18px 6px; }
.bars .b { flex: 1; min-width: 4px; background: var(--violet-100); border-radius: 6px 6px 2px 2px; position: relative; cursor: default; transition: background .12s; }
.bars .b:hover, .bars .b.today { background: var(--violet); }
.bars .b .tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--night); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 2; }
.bars .b:hover .tip { display: block; }
.bars-x { display: flex; justify-content: space-between; padding: 0 18px 14px; font-size: 11.5px; color: var(--text-3); }
.dr-row { display: flex; align-items: center; gap: 10px; padding: 9px 18px; }
.dr-row .av { width: 34px; height: 34px; border-radius: 50%; background: var(--violet-50); color: var(--violet-d); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.dr-row .nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-row .meter { height: 6px; border-radius: 6px; background: var(--line-soft); margin-top: 4px; overflow: hidden; }
.dr-row .meter span { display: block; height: 100%; background: var(--lime); }
.home-grid + .home-grid { margin-top: 16px; }

/* ---------- appointments ---------- */
.day-nav { display: flex; align-items: center; gap: 6px; }
.day-nav .day { font-family: var(--display); font-weight: 800; font-size: 17px; min-width: 210px; text-align: center; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.board .col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.board .col-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--violet-50); font-weight: 800; }
.board .col-h .n { margin-inline-start: auto; background: var(--violet); color: #fff; border-radius: 999px; padding: 0 9px; font-size: 12px; }
.board .col-b { padding: 10px; display: grid; gap: 8px; }
.appt { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--st, var(--violet)); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.appt:hover { box-shadow: var(--shadow-pop); }
.appt .tm { font-family: var(--display); font-weight: 800; font-size: 16px; direction: ltr; display: inline-block; }
.appt .who { font-weight: 700; margin-top: 2px; }
.appt .meta { font-size: 12.5px; color: var(--text-3); display: flex; gap: 10px; flex-wrap: wrap; }
.appt.st-1 { --st: #7DB30A; } .appt.st-2 { --st: #B42318; opacity: .6; } .appt.st-3 { --st: #F08A24; }
.st-badge { font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 6px; }
.st-badge.s0 { background: var(--violet-50); color: var(--violet-d); }
.st-badge.s1 { background: var(--lime-50); color: var(--lime-ink); }
.st-badge.s2 { background: var(--bad-bg); color: var(--bad); }
.st-badge.s3 { background: var(--peach); color: #C2620F; }
.st-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- patient file ---------- */
.pfile-hero { display: flex; gap: 16px; align-items: center; padding: 18px 20px; flex-wrap: wrap; }
.pfile-hero .av { width: 64px; height: 64px; border-radius: 18px; background: var(--night); color: var(--lime); font-family: var(--display); font-weight: 900; font-size: 26px; display: flex; align-items: center; justify-content: center; flex: none; }
.pfile-hero .nm { font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1.3; }
.pfile-hero .facts { display: flex; gap: 8px 16px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; margin-top: 4px; }
.pfile-hero .facts span { display: inline-flex; align-items: center; gap: 5px; }
.pfile-hero .facts i { color: var(--violet); font-size: 16px; }
.pfile-hero .acts { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; background: transparent; padding: 12px 14px; font-weight: 700; color: var(--text-2); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button.on { color: var(--violet-d); border-bottom-color: var(--violet); }
.tabs button .n { background: var(--line-soft); border-radius: 999px; padding: 0 7px; font-size: 11.5px; }
.inv-head { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; padding: 16px 18px; }
.inv-head .k { font-size: 12px; color: var(--text-3); font-weight: 700; }
.inv-head .v { font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 28px 22px; gap: 22px; }
  .auth-hero h1 { font-size: 30px; }
  .auth-feats { display: none; }
}
@media (max-width: 720px) {
  .day-nav .day { min-width: 0; font-size: 15px; }
  .pfile-hero .acts { margin-inline-start: 0; width: 100%; }
  .toolbar .search-in { max-width: none; }
}
@media print {
  .toolbar, .pager, .tabs, .pfile-hero .acts { display: none !important; }
}

/* ---------- invoice + receipt screens ---------- */
.inv-layout { grid-template-columns: minmax(0, 1fr) 330px; }
.req { color: var(--bad); }
.pat-search, .srv-search { position: relative; flex: 1 1 260px; max-width: 460px; }
.pat-search i, .srv-search i { position: absolute; inset-inline-start: 12px; top: 11px; color: var(--violet); }
.pat-search .input, .srv-search .input { padding-inline-start: 38px; background: var(--surface); }
.srv-search { max-width: none; }
.card-head .pat-search { margin-inline-start: auto; }
/* المريض مش موجود + إضافة مريض جديد (جنب البحث) */
.pat-none { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pat-none[hidden] { display: none; }
.pat-none-msg { display: inline-flex; align-items: center; gap: 4px; color: var(--bad); background: var(--bad-bg); border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.pat-none .btn { color: var(--violet); border-color: var(--violet-100); }
.pat-new-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--violet); font-weight: 600; }
.flags { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 0 18px 14px; font-size: 13.5px; }
.flags .grow { flex: 1; }
.flag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.flag input { width: 17px; height: 17px; accent-color: var(--pink); }
.inv-lines td { vertical-align: middle; }
.inv-lines .cell { height: 36px; }
.inv-lines td .sub { display: block; font-size: 12px; color: var(--text-3); font-weight: 500; }
.add-line { align-items: center; }
.totals { padding: 10px 16px 14px; }
.totals .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.totals .row:last-child { border-bottom: 0; }
.totals .row span { color: var(--text-2); font-weight: 600; font-size: 13.5px; }
.totals .row b { font-weight: 800; }
.totals .row .input { width: 130px; height: 36px; text-align: end; }
.totals .row.big { padding: 10px 0; }
.totals .row.big b { font-family: var(--display); font-size: 24px; font-weight: 900; color: var(--violet-d); }
.totals .row.due b { color: var(--pink); font-size: 16px; }
.unsaved { margin-top: 8px; background: var(--peach); color: #C2620F; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; }
.tools a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius); font-size: 13.5px; color: var(--text); }
.tools a:hover { background: var(--line-soft); }
.tools a i { color: var(--violet); }
.tools button.primary-tool { background: var(--violet); color: #fff; font-weight: 800; }
.tools button.primary-tool i, .tools button.primary-tool .hint { color: #fff; opacity: .9; }
.tools button.primary-tool:hover { background: var(--violet-d); }
.tools button:disabled { opacity: .6; cursor: progress; }
.seg.sm button { padding: 4px 9px; font-size: 12px; }
.today-list { max-height: 380px; overflow-y: auto; padding: 6px; }
.today-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.today-list a:hover { background: var(--surface-2); }
.today-list a.on { background: var(--violet-50); }
.today-list .no { font-weight: 800; color: var(--violet-d); min-width: 48px; }
.today-list .nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-list .nm small { display: block; font-weight: 500; color: var(--text-3); font-size: 11.5px; }
.today-list .am { font-weight: 800; display: inline-flex; gap: 4px; align-items: center; }
.today-list .am i { font-size: 15px; color: var(--text-3); }
.dis-log { padding: 8px 14px 12px; display: grid; gap: 8px; font-size: 13px; }
.dis-log small { display: block; color: var(--text-3); }
.pay-tbl td { vertical-align: middle; }
.pay-tbl .input, .pay-tbl .select { height: 40px; }
.doc-preview { max-width: 820px; }
@media (max-width: 1280px) { .inv-layout { grid-template-columns: 1fr; } }

/* ---------- printed invoice / receipt ---------- */
#printArea { display: none; }
.pdoc { font-family: var(--font); color: #111; background: #fff; padding: 8px; }
.pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 3px solid #845EFF; padding-bottom: 10px; margin-bottom: 12px; }
.pd-co { font-family: var(--display); font-weight: 900; font-size: 22px; }
.pd-sub { color: #555; font-weight: 700; }
.pd-no { text-align: end; font-size: 13px; line-height: 1.8; }
.pd-no b { font-size: 16px; }
.pd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; margin-bottom: 12px; font-size: 13.5px; }
.pd-grid span { color: #666; margin-inline-end: 8px; }
.pd-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.pd-tbl th { background: #F3EFFF; padding: 7px 8px; text-align: start; border: 1px solid #ddd; }
.pd-tbl td { padding: 7px 8px; border: 1px solid #ddd; }
.pd-tbl td small { display: block; color: #777; }
.pd-tot { margin-inline-start: auto; width: min(360px, 100%); font-size: 13.5px; }
.pd-tot div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #ddd; }
.pd-tot .big { font-size: 17px; font-weight: 900; border-bottom: 2px solid #111; }
.pd-foot { margin-top: 18px; font-size: 12px; color: #555; border-top: 1px solid #ddd; padding-top: 8px; }
/* بيانات المنشأة + QR + رقم الدخول + التذييل (زي invoice_display_dw) */
.pd-coen { font-weight: 800; color: #333; font-size: 13px; }
.pd-coinfo { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: #444; margin-top: 4px; }
.pd-qr { width: 108px; height: 108px; margin-top: 6px; image-rendering: pixelated; }
.pd-entry { display: inline-flex; align-items: center; gap: 10px; border: 2px solid #111; border-radius: 10px; padding: 4px 14px; margin-bottom: 10px; font-weight: 800; }
.pd-entry b { font-size: 26px; font-family: var(--display); }
.pd-bot { text-align: center; font-size: 12px; color: #444; margin-top: 10px; }
.pd-thanks { text-align: center; font-weight: 800; margin-top: 8px; }
.pd-break { page-break-after: always; break-after: page; height: 0; }
/* حراري 80 مم (invoice_display_thermal) */
.pdoc.thermal { width: 72mm; padding: 0; font-size: 11px; }
.pdoc.thermal .pd-head { flex-direction: column; align-items: center; text-align: center; gap: 4px; border-bottom-width: 2px; }
.pdoc.thermal .pd-co { font-size: 15px; }
.pdoc.thermal .pd-coinfo { justify-content: center; font-size: 10px; }
.pdoc.thermal .pd-no { text-align: center; }
.pdoc.thermal .pd-grid { grid-template-columns: 1fr; font-size: 11px; gap: 2px; }
.pdoc.thermal .pd-tbl { font-size: 11px; }
.pdoc.thermal .pd-tbl th, .pdoc.thermal .pd-tbl td { padding: 3px 4px; border: 0; border-bottom: 1px dashed #bbb; }
.pdoc.thermal .pd-tot { width: 100%; font-size: 11.5px; }
.pdoc.thermal .pd-tot .big { font-size: 13px; }
.pdoc.thermal .pd-entry { display: flex; justify-content: center; }
/* عدد النسخ + الحفظ + مدفوعات الفاتورة */
.copies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.copies .btn { height: 54px; font-size: 20px; font-weight: 800; justify-content: center; }
.saved-entry { text-align: center; font-size: 15px; margin-bottom: 12px; }
.saved-entry b { display: block; font-size: 44px; font-family: var(--display); color: var(--violet); }
.rv-mini a { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.rv-mini a:hover { background: var(--surface-2); }
.rv-mini small { display: block; color: var(--text-2); font-size: 12px; }
.rv-state { padding: 10px 16px; font-weight: 700; border-top: 1px solid var(--line); }
.rv-state.due { color: var(--bad); }
.rv-state.ok { color: var(--lime-ink); }
#drawer.wide { width: min(900px, 96vw); }
@media print {
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing #printArea { display: block; }
  body.printing { background: #fff; }
}

/* ---------- doctor examination (كشف الطبيب) ---------- */
.exam-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.exam-list { position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.exam-list .today-list { max-height: none; overflow-y: auto; flex: 1; }
.today-list a.done .nm { color: var(--text-2); }
.today-list a.done .no { color: var(--lime-ink); }
.today-list .am small { font-weight: 800; }
.exam-bar .pfile-hero { align-items: flex-start; }
.exam-bar .pfile-hero .nm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.exam-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 18px; }
.exam-acts .btn { height: 38px; }
.rx-tbl td { padding: 5px 8px; }
.rx-tbl .input { height: 38px; }
.rx-tbl .rn span { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: var(--violet-50); color: var(--violet-d); font-weight: 800; }
#xf .pad { padding: 18px; }
.pd-sign { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; font-size: 13px; }
.pd-sign .line { border-top: 1px solid #999; margin-top: 34px; padding-top: 4px; color: #666; min-width: 180px; }
.pd-sign .stamp { width: 120px; height: 90px; border: 1.5px dashed #aaa; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: #888; font-size: 12px; }
.pdoc h4 { font-family: var(--display); }
@media (max-width: 1100px) { .exam-layout { grid-template-columns: 1fr; } .exam-list { position: static; max-height: 360px; } }

/* home: quick buttons (like the old main screen) under the numbers */
.hero .acts { position: static; margin-top: 16px; flex-wrap: wrap; }

/* ---------- teeth chart (شاشة الأسنان) ---------- */
.chart-wrap { padding: 16px 18px 12px; overflow-x: auto; }
.tchart { min-width: 760px; display: grid; gap: 6px; justify-content: center; }
.jaw { display: flex; justify-content: center; gap: 10px; }
.jaw .q { display: flex; gap: 4px; }
.jaw .mid { width: 2px; background: var(--line); border-radius: 2px; }
.jaw-line { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); border-top: 1px dashed var(--line); padding-top: 2px; margin: 0 4px; }
.tooth { width: 42px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border: 1.5px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; color: var(--text-2); font-weight: 800; font-size: 12px; }
.tooth.down { flex-direction: column-reverse; }
.tooth svg { width: 30px; height: 38px; }
.tooth.molar svg { width: 36px; }
.tooth path { fill: var(--surface); stroke: #B9B2D6; stroke-width: 2; }
.tooth span { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.tooth small { color: var(--pink); font-size: 10px; }
.tooth:hover { background: var(--violet-50); border-color: var(--violet-100); }
.tooth.old path { fill: var(--lime-50); stroke: #9BC93A; }
.tooth.on path { fill: var(--violet); stroke: var(--violet-d); }
.tooth.on { color: var(--violet-d); }
.tooth.cur { border-color: var(--violet); background: var(--violet-50); }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); justify-content: center; margin-top: 10px; }
.chart-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; margin-inline-end: 5px; border: 1.5px solid #B9B2D6; }
.chart-legend .lg.on { background: var(--violet); border-color: var(--violet-d); }
.chart-legend .lg.old { background: var(--lime-50); border-color: #9BC93A; }
.teeth-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-top: 16px; align-items: start; }
.teeth-tbl td { padding: 4px 6px; vertical-align: middle; }
.teeth-tbl td:nth-child(2) { position: relative; }
.teeth-tbl .tl { position: absolute; inset-inline-start: 10px; top: 13px; color: var(--pink); font-weight: 800; font-size: 11px; }
.rules { margin: 10px 0 0; padding-inline-start: 18px; font-size: 12px; color: var(--text-3); }
@media (max-width: 1200px) { .teeth-layout { grid-template-columns: 1fr; } }

/* ---------- doctor discounts / transfers / vital signs ---------- */
.dr-report { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.dr-row.clickable { cursor: pointer; border-radius: 10px; margin: 2px 8px; padding: 9px 10px; }
.dr-row.clickable:hover { background: var(--violet-50); }
.dr-total { padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); font-weight: 700; }
.vital label i { color: var(--violet); }
.vin { display: flex; align-items: center; gap: 8px; }
.vin .input { flex: 1; min-width: 0; height: 46px; font-size: 18px; font-weight: 700; text-align: center; }
.vin span { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.vin.bp b { color: var(--text-3); }
@media (max-width: 1100px) { .dr-report { grid-template-columns: 1fr; } }

/* ---------- reports: patients receivable / users receipts / price list ---------- */
.tbl tr.sub-total td { background: var(--surface-2); font-weight: 800; border-top: 1px solid var(--line); }
.meter-bar { height: 8px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.meter-bar span { display: block; height: 100%; background: var(--violet); border-radius: 6px; }
.sign-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 18px 18px; color: var(--text-2); font-size: 13px; }

/* ---------- options / branches ---------- */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 18px; align-items: start; }
.opt-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.opt-check:has(input:checked) { border-color: var(--violet); background: var(--violet-50); }
.opt-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--violet); }
.opt-check small { display: block; color: var(--text-3); font-weight: 500; font-size: 12px; }
.color-in { display: flex; align-items: center; gap: 10px; }
.color-in input[type=color] { width: 64px; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--surface); cursor: pointer; }

/* ===== phones / tablets: nothing wider than the screen (22/10/2026) ===== */
/* grid columns may shrink below their content (long names, wide tables scroll inside .table-wrap) */
.jv-layout > *, .inv-layout > *, .exam-layout > *, .teeth-layout > *, .dr-report > *, .home-grid > *, .board > *, .kpis > *, .side-panel > * { min-width: 0; }
.today-list a { min-width: 0; }
@media (max-width: 720px) {
  /* fields that span 2 columns on a computer take the full width on a phone (no hidden 2nd column) */
  .form-grid > [style*="span 2"], .form-grid > [style*="span 3"] { grid-column: 1 / -1 !important; }
  .form-grid, .drawer .form-grid { grid-template-columns: 1fr !important; }
  .card-head { flex-wrap: wrap; }
  .card-head .pat-search { flex: 1 1 100%; max-width: none; margin-inline-start: 0; }
  .toolbar > * { flex: 1 1 100%; max-width: none !important; }
  .toolbar .seg, .day-nav { flex-wrap: wrap; }
  .head-actions { flex-wrap: wrap; }
  .head-actions .btn { flex: 1 1 auto; }
  .exam-acts .btn, .st-btns .btn { flex: 1 1 45%; }
  .pfile-hero .nm { font-size: 20px; }
  .pfile-hero .facts { gap: 6px 12px; font-size: 13px; }
  .tabs button { padding: 10px; font-size: 13px; }
  .totals .row .input { width: 110px; }
  .sum-cards .v { font-size: 16px; }
  .page-title { font-size: 26px; }
  .tchart { min-width: 700px; }
  .dr-row.clickable { margin: 2px 4px; }
  .prof-grid { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
  .exam-list { max-height: 300px; }
  .vin .input { font-size: 16px; }
  .pd-grid { grid-template-columns: 1fr; }
  .jaw .q { gap: 2px; }
  /* bigger touch targets */
  .btn, .select, .input { min-height: 42px; }
  .icon-btn { width: 40px; height: 40px; }
}
/* tablets: two columns where there is room */
@media (min-width: 721px) and (max-width: 1100px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid > [style*="span 2"] { grid-column: 1 / -1 !important; }
}
/* inputs under 16px make iPhone zoom in when typing */
@media (max-width: 1024px) { input.input, select.select, textarea.input { font-size: 16px; } }
/* phone: fixed bar at the bottom with the total and the save button */
.mob-bar { display: none; }
@media (max-width: 720px) {
  .mob-bar { display: flex; align-items: center; gap: 10px; position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(10, 5, 38, .08); }
  .mob-bar .btn { flex: 1; height: 46px; }
  .mob-bar .mb-t { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
  .mob-bar .mb-t span { font-size: 11.5px; color: var(--text-3); font-weight: 700; }
  .mob-bar .mb-t b { font-family: var(--display); font-weight: 900; font-size: 20px; color: var(--violet-d); }
  body:has(.mob-bar) .main { padding-bottom: 110px; }
  body:has(.mob-bar) .toast { bottom: 84px; }
}
@media print { .mob-bar { display: none !important; } }

/* the side panel never wider than the visible area (100vw counts the scrollbar on tablets) */
.drawer { width: min(820px, 100%); max-width: 100%; }
.modal { width: min(620px, calc(100% - 32px)); }

/* ---------- توريد النقدية للإدارة ---------- */
.kv-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.kv-list.pad { padding: 16px 18px; }
.kv-list > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kv-list span { font-size: 12px; color: var(--text-2); font-weight: 600; }
.kv-list b { font-weight: 700; overflow-wrap: anywhere; }
.srf-sum .l { font-size: 12px; color: var(--text-2); font-weight: 600; margin-top: 10px; }
.srf-sum .l:first-child { margin-top: 0; }
.srf-sum .v { font-size: 20px; font-weight: 800; }
.srf-sum .v.big { font-size: 28px; color: var(--violet-d); }
.tbl tr.sel td { background: var(--violet-50); }

/* ---------- مركز التقارير ---------- */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.rc-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 18px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.rc-tile:hover, .rc-tile:focus-visible { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 10px 24px rgba(10, 5, 38, .08); }
.rc-tile i { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.rc-tile b { font-size: 16px; font-family: var(--display); margin-top: 6px; }
.rc-tile small { color: var(--text-2); font-size: 12.5px; }
.rc-n { position: absolute; top: 12px; inset-inline-end: 14px; font-size: 12px; color: var(--text-3); font-weight: 700; }
@media (max-width: 720px) {
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rc-tile { padding: 14px 12px; }
  .rc-tile i { width: 40px; height: 40px; font-size: 22px; }
  .rc-tile b { font-size: 14.5px; }
}

/* ---------- حسابي ---------- */
.me-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, #2B1A6E 0%, var(--night, #0A0526) 60%); color: #fff; }
.me-av { width: 64px; height: 64px; border-radius: 20px; background: var(--lime); color: #0A0526; display: flex; align-items: center; justify-content: center; font: 800 24px var(--display); flex: none; }
.me-who { flex: 1; min-width: 200px; }
.me-name { font: 800 24px var(--display); }
.me-sub { font-size: 13.5px; opacity: .85; margin-top: 3px; }
.me-hero .faint { color: rgba(255, 255, 255, .65); }
.me-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.me-acts .btn:not(.primary) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.me-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.me-kpis > div { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--s); border-radius: 18px; padding: 18px; min-width: 0; }
.me-kpis .l { font-size: 13px; color: var(--text-2); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.me-kpis .l i { color: var(--s); font-size: 18px; }
.me-kpis .v { font-size: 30px; font-weight: 800; margin-top: 6px; }
.me-kpis .s { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
@media (max-width: 720px) {
  .me-hero { padding: 18px 16px; gap: 14px; }
  .me-acts { width: 100%; }
  .me-acts .btn { flex: 1 1 140px; justify-content: center; }
  .me-kpis { grid-template-columns: 1fr; gap: 10px; }
  .me-kpis .v { font-size: 26px; }
}

/* ---------- إستيراد البيانات ---------- */
.imp-cols { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-cols span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--violet-50); color: var(--violet-d); font-size: 13px; font-weight: 700; }
.imp-cols b { width: 20px; height: 20px; border-radius: 50%; background: var(--violet); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.imp-paste { width: 100%; min-height: 150px; resize: vertical; font-family: var(--mono, monospace); font-size: 13px; direction: ltr; text-align: left; white-space: pre; }
.imp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.imp-bar label.btn { cursor: pointer; }
.imp-save { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--line-soft); }
.tbl tr.imp-bad td { background: var(--bad-bg, #FFF1F2); }
@media (max-width: 720px) { .imp-save .btn { width: 100%; justify-content: center; } }

/* ---------- المستخدمين والصلاحيات ---------- */
.job-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; }
.job-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13.5px; }
.job-chip span { min-width: 26px; height: 24px; padding: 0 6px; border-radius: 8px; background: var(--violet-50); color: var(--violet-d); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.job-chip:hover { border-color: var(--violet); }
.job-chip.warn span { background: var(--peach, #FFE9D6); color: #C2620F; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.check input, .pchk { width: 18px; height: 18px; accent-color: var(--violet); cursor: pointer; }
.perm-tbl th.c, .perm-tbl td.c { text-align: center; width: 70px; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.nav-item.locked { opacity: .45; pointer-events: none; }
.nav-item .lock-i { font-size: 13px; margin-inline-start: auto; }

/* ---------- المساعد الذكي ---------- */
:root { --viz-1: #845EFF; }
:root[data-theme="dark"] { --viz-1: #8F6FFF; }
.ai-layout { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ai-layout > * { min-width: 0; }
.ai-chat { display: flex; flex-direction: column; height: min(74vh, 760px); }
.ai-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-m { max-width: 92%; padding: 10px 12px; border-radius: 14px; background: var(--surface-2, #F6F4FD); font-size: 14px; line-height: 1.7; }
.ai-m b { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 2px; }
.ai-m p { margin: 0; }
.ai-m.me { align-self: flex-start; background: var(--violet); color: #fff; }
.ai-m.me b { color: rgba(255, 255, 255, .75); }
.ai-m.bot { align-self: flex-end; }
.ai-m.err { background: var(--bad-bg, #FFF1F2); color: var(--bad); }
.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.ai-quick .btn { font-size: 12px; white-space: normal; text-align: start; height: auto; padding: 6px 10px; }
.ai-ask { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); }
.ai-ask textarea { flex: 1; resize: none; min-height: 48px; }
.ai-chart { padding: 12px 16px 4px; }
.ai-chart svg { width: 100%; height: auto; display: block; max-height: 300px; }
.ai-chart .g { stroke: var(--line-soft); stroke-width: 1; }
.ai-chart .base { stroke: var(--line); stroke-width: 1; }
.ai-chart .ax { fill: var(--text-3); font-size: 11px; font-family: var(--body, inherit); }
.ai-chart .bar { fill: var(--viz-1); }
.ai-chart .ln { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; }
.ai-chart .dot { fill: var(--viz-1); stroke: var(--surface); stroke-width: 2; }
.ai-chart [data-tip] { cursor: pointer; }
.ai-chart [data-tip]:hover { opacity: .85; }
.ai-chart.pie { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ai-chart.pie svg { width: 200px; max-width: 60%; }
.ai-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.ai-legend span { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.ai-legend b { color: var(--text); margin-inline-start: 4px; }
.ai-tip { position: fixed; display: none; z-index: 80; pointer-events: none; background: var(--night, #0A0526); color: #fff; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
@media (max-width: 1024px) { .ai-layout { grid-template-columns: 1fr; } .ai-chat { height: min(70vh, 620px); } }
@media print { .ai-chart .ax { font-size: 10px; } }

/* ---------- دليل الاستخدام ---------- */
.help-search { padding: 12px 14px; margin-bottom: 14px; }
.help-cur { margin-bottom: 18px; }
.help-cur .help-item { border-color: var(--violet); }
.help-sec h3 { font-family: var(--display); margin: 18px 0 10px; font-size: 17px; }
.help-item { margin-bottom: 8px; padding: 0; }
.help-item summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary b { display: block; }
.help-item summary small { color: var(--text-3); font-size: 12px; }
.help-item .chev { margin-inline-start: auto; transition: transform .15s; color: var(--text-3); }
.help-item[open] .chev { transform: rotate(180deg); }
.hi-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--violet-50); color: var(--violet-d); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.help-body { padding: 0 16px 16px 16px; line-height: 1.9; }
.help-body h4 { margin: 10px 0 4px; font-size: 14px; color: var(--violet-d); }
.help-body ol, .help-body ul { margin: 0; padding-inline-start: 22px; }
@media print { .help-item { break-inside: avoid; } .help-item .help-body { display: block !important; } .help-search, .help-body .btn { display: none !important; } }

.exam-flags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.exam-flags .badge{font-size:13px;padding:4px 10px}

/* كشف الطبيب: رقم الفاتورة، اللي عليه الدور، الرصيد */
.ex-go{display:flex;gap:6px;margin:10px 12px 0}.ex-go .input{height:34px}
.today-list a.next .no{background:#92400E;color:#fff}
.bal-link{cursor:pointer;text-decoration:underline dotted}
.bal-strip{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}.bal-strip:hover{text-decoration:underline}
.ex-foot{display:flex;justify-content:space-between;padding:8px 14px;font-size:12px;border-top:1px solid var(--line, #e5e7eb)}
/* المرفقات */
.att-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.att-tile{display:flex;flex-direction:column;border:1px solid var(--line, #e5e7eb);border-radius:10px;overflow:hidden;background:var(--surface, #fff);padding:0;cursor:pointer;text-align:start;font:inherit;color:inherit}
.att-tile:hover{border-color:var(--brand, #0f766e)}
.att-tile img,.att-pdf{width:100%;height:120px;object-fit:cover;background:#f3f4f6;display:flex;align-items:center;justify-content:center;gap:6px;color:#b91c1c;font-weight:700}
.att-pdf .ti{font-size:34px}
.att-cap{padding:6px 8px;font-size:12px}
.att-view{background:#f3f4f6;border-radius:10px;padding:8px;text-align:center}
.att-view img{max-width:100%;max-height:70vh}
.att-view iframe{width:100%;height:72vh;border:0;background:#fff}
/* محرر الصور */
.img-ed{position:fixed;inset:0;z-index:1000;background:#1f2937;display:flex;flex-direction:column}
.ie-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;background:var(--surface, #fff)}
.ie-grp{display:flex;align-items:center;gap:4px;padding-inline-end:10px;border-inline-end:1px solid var(--line, #e5e7eb)}
.ie-grp .icon-btn.on{background:var(--brand, #0f766e);color:#fff}
.ie-grp .select{height:32px;width:auto}.ie-grp .input{height:32px}
.ie-sw{width:24px;height:24px;border-radius:50%;border:2px solid #d1d5db;cursor:pointer;padding:0}
.ie-sw.on{outline:3px solid var(--brand, #0f766e);outline-offset:1px}
#ieCol{width:30px;height:28px;border:0;padding:0;background:none}
.ie-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:16px}
.ie-stage canvas{max-width:100%;max-height:100%;background:#fff;touch-action:none;cursor:crosshair;box-shadow:0 4px 24px rgba(0,0,0,.4)}

/* كشف الطبيب: محرر الملاحظات، بيانات الزيارة، التحويل، الطباعة */
.memo-ed{border:1px solid var(--line, #e5e7eb);border-radius:10px;overflow:hidden}
.memo-bar{display:flex;align-items:center;gap:4px;padding:4px 6px;border-bottom:1px solid var(--line, #e5e7eb);background:var(--surface-2, #f8fafc)}
.memo-area{min-height:190px;height:auto;padding:10px 12px;border:0;border-radius:0;white-space:pre-wrap;overflow:auto;max-height:420px;line-height:1.7}
.memo-area:focus{outline:none;box-shadow:none}
.visit-info,.tr-sum{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 12px;background:var(--surface-2, #f8fafc);border-radius:10px;margin-bottom:12px}
.visit-info span,.tr-sum span{display:flex;flex-direction:column}.visit-info small,.tr-sum small{color:var(--muted, #6b7280);font-size:11.5px}
.tr-docs{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;margin-top:6px}
.tr-docs button{display:flex;flex-direction:column;align-items:flex-start;text-align:start;padding:8px 10px;border:1px solid var(--line, #e5e7eb);border-radius:8px;background:var(--surface, #fff);cursor:pointer;font:inherit;color:inherit}
.tr-docs button small{color:var(--muted, #6b7280)}.tr-docs button.on{border-color:var(--brand, #0f766e);background:color-mix(in srgb, var(--brand, #0f766e) 10%, transparent)}
.ex-grp{padding:6px 12px;font-size:12px;font-weight:700;color:var(--muted, #6b7280);background:var(--surface-2, #f8fafc)}
.pd-logo{max-height:70px;max-width:140px;object-fit:contain;margin-inline-end:12px}
.pd-printed{display:flex;justify-content:space-between;font-size:10.5px;color:#6b7280;margin-top:8px}

/* الأسنان: بحث الخدمة ومخطط الطباعة */
.srv-pop{position:fixed;z-index:900;max-height:300px;overflow:auto;background:var(--surface, #fff);border:1px solid var(--line, #e5e7eb);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:4px}
.srv-pop button{display:grid;grid-template-columns:56px 1fr;gap:0 8px;width:100%;text-align:start;padding:6px 8px;border:0;background:none;border-radius:6px;cursor:pointer;font:inherit;color:inherit}
.srv-pop button small{grid-column:2;color:var(--muted, #6b7280)}
.srv-pop button.on,.srv-pop button:hover{background:color-mix(in srgb, var(--brand, #0f766e) 12%, transparent)}
.pd-chart{display:block;margin:8px auto 10px}

/* شاشات البيانات: كروت الإحصائيات، الترتيب، صورة الطبيب */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.stat-cards .stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border-radius:14px;border:1px solid var(--line, #e5e7eb);background:var(--surface, #fff);border-inline-start:4px solid var(--s);text-align:start;font:inherit;color:inherit;cursor:pointer}
.stat-cards .stat:disabled{cursor:default;opacity:1}
.stat-cards .stat.on{box-shadow:0 0 0 2px var(--s)}
.stat-cards .l{font-size:12.5px;color:var(--muted, #6b7280)}.stat-cards .v{font-size:20px}.stat-cards .s{font-size:12px;color:var(--muted, #6b7280)}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}th.sortable:hover{color:var(--brand, #0f766e)}th.sorted{color:var(--brand, #0f766e)}
.dr-photo{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dr-photo img,.dr-photo .ph-none{width:84px;height:84px;border-radius:50%;object-fit:cover;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:38px;color:#9ca3af}

/* المواعيد: كروت الأطباء، حالة Google، عنوان مجموعة الطبيب */
.dr-strip{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.dr-cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex:1}.dr-cards::-webkit-scrollbar{display:none}
.dr-card{flex:0 0 calc((100% - 20px) / 3);min-width:220px;scroll-snap-align:start;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line, #e5e7eb);border-radius:14px;background:var(--surface, #fff);text-align:start;cursor:pointer;font:inherit;color:inherit}
.dr-card.on{border-color:var(--brand, #0f766e);box-shadow:0 0 0 2px color-mix(in srgb, var(--brand, #0f766e) 30%, transparent)}
.dr-card img,.dr-card .ph{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 52px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:24px}
.dr-card span{display:flex;flex-direction:column;min-width:0}.dr-card small{color:var(--muted, #6b7280);font-size:12px}.dr-card .bio{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle}
.grp-row td{background:var(--surface-2, #f8fafc);font-weight:700}
.gc-panel{margin-top:16px}.gc-panel summary{padding:12px 16px;cursor:pointer;font-weight:700}
.err-box.ok{color:var(--lime-ink, #15803d)}

/* زرار ممنوع بالصلاحية */
.perm-off{opacity:.45;cursor:not-allowed!important;filter:grayscale(1)}

/* التقارير: فلتر العمود زي Excel، المستويات، الطباعة */
.rep-tbl th.flt{cursor:pointer;user-select:none;white-space:nowrap}.rep-tbl th.flt:hover{color:var(--brand, #0f766e)}
.rep-tbl th.flt-on{color:#EA580C!important;background:color-mix(in srgb, #EA580C 10%, transparent)}
.rep-bar{flex-wrap:wrap;gap:10px}
.col-flt{position:fixed;z-index:950;width:260px;background:var(--surface, #fff);border:1px solid var(--line, #e5e7eb);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.18);padding:10px;display:flex;flex-direction:column;gap:8px}
.col-flt .cf-sort,.col-flt .cf-all,.col-flt .cf-btns{display:flex;gap:6px}.col-flt .cf-sort button,.col-flt .cf-all button{flex:1;border:1px solid var(--line, #e5e7eb);background:var(--surface-2, #f8fafc);border-radius:8px;padding:5px;cursor:pointer;font:inherit;font-size:12.5px;color:inherit}
.col-flt .cf-list{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line, #e5e7eb);border-radius:8px;padding:6px}
.col-flt .cf-list label{display:flex;gap:6px;align-items:center;font-size:13px;cursor:pointer}
.col-flt .input{height:32px}
.icon-btn.sm{width:28px;height:28px;font-size:15px}
.pd-tbl .pg-row td{background:#f1f5f9;font-weight:700}.pd-tbl .pt-row td{background:#e2e8f0;font-weight:800}
.rv-nav{margin-bottom:14px}

/* الفاتورة: فتح برقم، فواتير النهارده مجمّعة، الطبيب كشف، أدوات السطر، التنقل */
.go-inv .input{width:140px;height:40px}
.today-tools{display:flex;gap:8px;align-items:center;padding:8px 12px 0;flex-wrap:wrap}.today-tools .input{height:34px;flex:1;min-width:140px}
.chk-sm{display:flex;gap:4px;align-items:center;font-size:12.5px;color:var(--muted, #6b7280);white-space:nowrap}
.today-grp{padding:6px 12px;font-size:12px;font-weight:700;color:var(--muted, #6b7280);background:var(--surface-2, #f8fafc);display:flex;justify-content:space-between}
.today-list .no.kshf{background:var(--lime-ink, #15803d);color:#fff}
.ln-note{color:var(--orange, #c2410c)}.ln-acts{white-space:nowrap}.ln-dr{min-width:120px}
.inv-nav{display:flex;gap:6px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.inv-nav form{display:flex}

.admin-box summary{padding:12px 16px;cursor:pointer;font-weight:700}.admin-box .ab-body{padding:0 16px 16px}
.rv-st{margin:10px 0;padding:8px 12px;border-radius:8px;font-weight:700;text-align:center}.rv-st.ok{background:#dcfce7;color:#15803d}.rv-st.due{background:#fee2e2;color:#b91c1c}.rv-st.over{background:#dbeafe;color:#1d4ed8}
#rDue{width:130px;height:34px;text-align:end}

/* الإنجليزي: الأسهم بتتعكس مع الاتجاه */
html[dir="ltr"] .ti-chevron-right, html[dir="ltr"] .ti-chevron-left, html[dir="ltr"] .ti-chevrons-right, html[dir="ltr"] .ti-chevrons-left,
html[dir="ltr"] .ti-arrow-right, html[dir="ltr"] .ti-arrow-left { display:inline-block; transform: scaleX(-1); }
.lang-btn{font-weight:800;font-size:12px;min-width:30px}
html[dir="ltr"] body{font-family:"IBM Plex Sans Arabic", system-ui, sans-serif}