@import url('/assets/fonts/fonts.css');
@import url('/assets/tokens.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { direction: rtl; font-family: var(--ui); font-size: 15px; line-height: 1.8; color: var(--ink); background: var(--bg); }
h1, h2, h3, h4 { margin: 0; line-height: 1.5; }
a { color: var(--g2); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.mono { direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 18px; }
.wrap-s { max-width: 900px; margin: 0 auto; padding: 0 18px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp { flex: 1; }
.grid2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* البطاقة */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); padding: 20px 22px; }
.card.pad-0 { padding: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-h h3 { font-size: 16.5px; display: flex; align-items: center; gap: 9px; }
.card-b { padding: 18px 20px; }
.card + .card { margin-top: 16px; }

/* الأزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  border-radius: 11px; padding: 9px 17px; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: .16s; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: #b9cdda; background: var(--tint); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.p { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(46,127,184,.28); }
.btn.p:hover { filter: brightness(1.06); background: var(--grad); }
.btn.d { color: var(--dan); border-color: #f0cccc; }
.btn.d:hover { background: var(--dan-bg); }
.btn.g { color: var(--ok); border-color: #bfe3d1; }
.btn.g:hover { background: var(--ok-bg); }
.btn.sm { padding: 6px 12px; font-size: 13.5px; border-radius: 9px; }
.btn.xs { padding: 3px 9px; font-size: 12.5px; border-radius: 8px; gap: 5px; }
.btn.lg { padding: 13px 30px; font-size: 16px; border-radius: 13px; }
.btn.blk { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.xs svg { width: 14px; height: 14px; }
.ib { border: 0; background: none; padding: 5px; border-radius: 8px; cursor: pointer; color: var(--ink-3); display: inline-grid; place-items: center; }
.ib:hover { background: var(--tint); color: var(--ink); }
.ib.d:hover { background: var(--dan-bg); color: var(--dan); }
.ib svg { width: 17px; height: 17px; }

/* الرقائق */
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 11px; font-size: 12.5px; font-weight: 600;
  background: var(--tint); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); border-color: #bfe3d1; }
.chip.warn { background: var(--warn-bg); color: var(--warn); border-color: #edd9b0; }
.chip.dan { background: var(--dan-bg); color: var(--dan); border-color: #f0cccc; }
.chip.info { background: var(--info-bg); color: var(--info); border-color: #c6ddef; }

/* الحقول */
label.f { display: block; }
label.f > span, .f-l { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=tel], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 11px; padding: 10px 13px; transition: .15s; }
textarea { min-height: 70px; resize: vertical; line-height: 1.7; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--g2); box-shadow: 0 0 0 3.5px rgba(46,127,184,.14); }
input.ltr { direction: ltr; text-align: right; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e91a3' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: left 12px center; background-size: 16px; padding-inline-end: 36px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; user-select: none; }
.chk input { width: 17px; height: 17px; accent-color: var(--g2); }

/* الاختيارات */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--line-2); background: #fff; border-radius: 10px;
  padding: 7px 13px; font-size: 14px; font-weight: 500; transition: .14s; user-select: none; }
.opt:hover { border-color: #a9c6da; background: var(--tint); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #b9cbd8; flex: 0 0 auto; transition: .14s; }
.opt:has(input:checked) { border-color: var(--g2); background: #eef6fc; color: #14486b; font-weight: 600; }
.opt:has(input:checked) .dot { border-color: var(--g2); background: var(--g2); box-shadow: inset 0 0 0 2.5px #fff; }
.opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(46,127,184,.25); }

/* الجداول */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14.2px; }
table.tbl th, table.tbl td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
table.tbl thead th { background: var(--tint); font-weight: 600; color: var(--ink-2); font-size: 13.2px; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
table.tbl tbody tr:hover { background: #f8fbfd; }
table.tbl td.num, table.tbl th.num { text-align: center; }
table.tbl tr.off td { opacity: .55; }

/* الإحصاء */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 13px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; box-shadow: var(--sh-1); position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--grad); }
.stat b { display: block; font-size: 27px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--ink-3); }
.stat.ok b { color: var(--ok); } .stat.ok::before { background: var(--ok); }
.stat.warn b { color: var(--warn); } .stat.warn::before { background: var(--warn); }

/* الرسائل */
.msg { border-radius: 12px; padding: 11px 15px; font-size: 14px; font-weight: 500; border: 1px solid; display: flex; gap: 9px; align-items: flex-start; }
.msg svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.msg.ok { background: var(--ok-bg); color: var(--ok); border-color: #bfe3d1; }
.msg.err { background: var(--dan-bg); color: var(--dan); border-color: #f0cccc; }
.msg.wrn { background: var(--warn-bg); color: var(--warn); border-color: #edd9b0; }
.msg.inf { background: var(--info-bg); color: #17557e; border-color: #c6ddef; }

/* النافذة */
.modal { position: fixed; inset: 0; background: rgba(9,28,42,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 90; }
.modal > div { background: #fff; border-radius: 20px; box-shadow: var(--sh-3); width: 100%; max-width: 620px; max-height: 92vh; overflow: auto; }
.modal.wide > div { max-width: 900px; }
.modal .card-h { position: sticky; top: 0; background: #fff; z-index: 2; border-radius: 20px 20px 0 0; }
.modal .card-f { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; position: sticky; bottom: 0; background: #fff; }

/* الشريط العلوي والتبويبات */
.topbar { background: var(--deep); color: #fff; position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 14px rgba(3,59,69,.25); }
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 62px; }
.topbar .brand { display: flex; align-items: center; gap: 11px; font-family: var(--disp); font-size: 20px; font-weight: 700; color: #fff; }
.topbar .brand img { height: 34px; }
.topbar .brand small { font-family: var(--ui); font-size: 12px; font-weight: 500; opacity: .75; display: block; line-height: 1.3; }
.topbar .who { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; opacity: .93; }
.topbar .out { color: #fff; opacity: .85; font: inherit; font-size: 13.5px; background: none; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; padding: 5px 12px; cursor: pointer; }
.topbar .out:hover { opacity: 1; background: rgba(255,255,255,.1); }
.tabs { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 62px; z-index: 30; }
.tabs .wrap { display: flex; gap: 3px; overflow-x: auto; }
.tabs button { background: none; border: 0; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-2); padding: 13px 15px; cursor: pointer;
  border-bottom: 3px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.tabs button:hover { color: var(--ink); background: var(--tint); }
.tabs button.on { color: var(--g2); border-bottom-color: var(--g2); }
.tabs svg { width: 17px; height: 17px; }
.page { padding: 22px 0 60px; }
.ph-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page h2.ph { font-size: 21px; font-family: var(--disp); }
.page p.pd { color: var(--ink-3); font-size: 14px; margin: 0; }

/* لوحة التوقيع */
.sig-pad { border: 2px dashed var(--line-2); border-radius: 14px; background: linear-gradient(#fff,#fbfdfe); position: relative; touch-action: none; overflow: hidden; }
.sig-pad canvas { display: block; width: 100%; height: 190px; cursor: crosshair; touch-action: none; }
.sig-pad.filled { border-style: solid; border-color: var(--g1); }
.sig-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 14px; pointer-events: none; gap: 8px; }
.sig-pad.filled .sig-hint { display: none; }
.img-slot { border: 1px dashed var(--line-2); border-radius: 12px; min-height: 96px; display: grid; place-items: center; background: var(--tint); padding: 8px; }
.img-slot img { max-height: 110px; max-width: 100%; }

/* التحميل والتنبيه */
.spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; }
.spin.dk { border-color: rgba(13,34,51,.15); border-top-color: var(--g2); }
@keyframes sp { to { transform: rotate(360deg); } }
.load { padding: 46px; text-align: center; color: var(--ink-3); display: grid; place-items: center; gap: 10px; }
.empty { padding: 38px 20px; text-align: center; color: var(--ink-3); }
.empty svg { width: 42px; height: 42px; opacity: .45; display: block; margin: 0 auto 8px; }
#toast { position: fixed; bottom: 22px; inset-inline-start: 50%; transform: translateX(50%); z-index: 120; display: grid; gap: 8px; pointer-events: none; }
#toast .t { background: var(--deep); color: #fff; padding: 10px 18px; border-radius: 12px; box-shadow: var(--sh-2); font-size: 14px; font-weight: 500; animation: tin .25s ease; }
#toast .t.err { background: var(--dan); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* محرّر الاستمارة */
.ed-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rows-ed { display: grid; gap: 12px; }
.row-ed { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.row-ed .rh { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--tint); border-bottom: 1px solid var(--line); }
.row-ed .rh b { font-size: 13px; color: var(--ink-2); }
.row-ed .rb { display: grid; gap: 10px; padding: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.row-ed .rb label.f > span { font-size: 12.5px; margin-bottom: 3px; }
.row-ed textarea { min-height: 56px; font-size: 14px; padding: 7px 10px; }
.row-ed input[type=text] { font-size: 14px; padding: 7px 10px; }
.sign-list { display: grid; gap: 8px; }
.sign-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; flex-wrap: wrap; }
.sign-item img { height: 38px; max-width: 120px; }
.sign-item .nm { font-weight: 600; }
.pick { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.pick label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick label:hover { background: var(--tint); }
.pick input { width: 17px; height: 17px; accent-color: var(--g2); }

/* المعاينة */
.pv { background: #dfe7ee; border-radius: 14px; padding: 16px; overflow: hidden; }
.pv-in { transform-origin: top right; }
.codebox { font-family: Consolas, monospace; font-size: 15px; font-weight: 700; letter-spacing: 1px; background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 2px 9px; direction: ltr; display: inline-block; }

@media (max-width: 640px) {
  .card { padding: 16px; }
  .topbar .brand small { display: none; }
  .tabs button { padding: 11px 11px; font-size: 13.5px; }
}

/* الطباعة: لا يظهر إلا جذر الطباعة */
#print-root { display: none; }
@media print {
  html, body { background: #fff !important; }
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block !important; }
}

/* البوابة: النقر على المعاينة يعرضها بحجمها الحقيقي مع تمرير أفقي */
.pv.zoom { overflow-x: auto; cursor: zoom-out; }
.pv { cursor: zoom-in; }
#main .pv { cursor: default; }
.pv.zoom .pv-in { transform: none !important; height: auto !important; }
.sig-hint svg { width: 18px; height: 18px; flex: none; }