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

/* ============================================================
   منصة رِعاية — نظام التصميم
   ألوان الهوية مستمدة من ترويسة وزارة التعليم الرسمية
   ============================================================ */
:root {
  --g1: #3f9d6d;                 /* أخضر الوزارة */
  --g2: #2e7fb8;                 /* أزرق الوزارة */
  --gm: #33929a;                 /* منتصف التدرّج */
  --deep: #033b45;               /* الأزرق الداكن في لوح العنوان */
  --grad:   linear-gradient(105deg, var(--g2) 0%, var(--gm) 52%, var(--g1) 100%);
  --grad-r: linear-gradient(285deg, var(--g2) 0%, var(--gm) 52%, var(--g1) 100%);

  --ink:   #0d2233;
  --ink-2: #3d5568;
  --ink-3: #7e91a3;
  --line:  #e4ebf2;
  --line-2:#d2dfe9;
  --bg:    #eef4f9;
  --card:  #ffffff;
  --tint:  #f6fafc;

  --ok:  #17825c;  --ok-bg:  #e6f6ee;
  --warn:#a06a12;  --warn-bg:#fdf2df;
  --dan: #b23b3b;  --dan-bg: #fdecec;
  --info:#2e7fb8;  --info-bg:#eaf3fa;
  --gold:#b8893a;

  --r: 16px; --r-s: 11px; --r-l: 26px;
  --sh-1: 0 1px 2px rgba(13,34,51,.05), 0 4px 14px rgba(13,34,51,.05);
  --sh-2: 0 2px 6px rgba(13,34,51,.07), 0 14px 38px rgba(13,34,51,.10);
  --sh-3: 0 30px 70px rgba(13,34,51,.20);

  --ui:    'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --disp:  'Aref Ruqaa', 'Amiri', serif;
  --serif: 'Amiri', 'Traditional Arabic', serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; direction: rtl; background: var(--bg); color: var(--ink);
  font-family: var(--ui); font-size: 15px; line-height: 1.8;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--g2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
/* الأيقونات المضمّنة — مقاس افتراضي تتجاوزه قواعد المكوّنات لاحقاً */
svg.ic { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3.5px; }
::selection { background: #cfe8f7; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c6d5e1; border-radius: 20px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #a6bbcc; }

.mono { font-variant-numeric: tabular-nums; letter-spacing: .3px; direction: ltr;
        unicode-bidi: embed; display: inline-block; }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.sp { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

h1, h2, h3, h4 { margin: 0; line-height: 1.5; font-weight: 700; }
.disp { font-family: var(--disp); font-weight: 700; }

/* ============================================================
   الترويسة الرسمية (ترويسة الوزارة الخضراء)
   ============================================================ */
.moe-band {
  position: relative; color: #fff;
  background: url('/assets/hd-top.png') no-repeat center/100% 100%;
  border-radius: 5px 5px 16px 16px;
  padding: 14px 22px 16px; min-height: 84px;
  display: flex; align-items: center; gap: 18px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.moe-mark { display: flex; align-items: center; gap: 18px; align-self: stretch; }
.moe-mark img { height: 56px; width: auto; display: block; }
.moe-rule { width: 2px; background: rgba(255,255,255,.45); border-radius: 2px;
  margin: 4px 0; align-self: stretch; }
.moe-org { line-height: 1.72; font-size: 13.2px; text-align: right; }
.moe-org b { display: block; font-size: 16px; font-weight: 600; letter-spacing: .2px; }
.moe-org span { display: block; opacity: .9; }

.moe-title {
  margin: -20px auto 0; position: relative; z-index: 2;
  max-width: 620px; background: var(--deep); color: #fff;
  border-radius: 0 0 18px 18px; padding: 12px 30px 13px;
  text-align: center; font-family: var(--disp); font-size: 20px; font-weight: 700;
  box-shadow: 0 12px 26px rgba(3,59,69,.28);
  border: 1px solid rgba(255,255,255,.14); border-top: 0;
}
.moe-foot {
  height: 22px; margin-top: 24px; border-radius: 16px 16px 5px 5px;
  background: url('/assets/hd-foot.png') no-repeat center/100% 100%;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ============================================================
   عناصر عامة
   ============================================================ */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 18px; }
.wrap-s { max-width: 900px; margin: 0 auto; padding: 0 18px; }

.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; }

.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.lg { padding: 13px 30px; font-size: 16px; border-radius: 13px; }
.btn.blk { width: 100%; }
.btn svg { width: 17px; height: 17px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 3px 11px; font-size: 12.5px; font-weight: 600; background: var(--tint);
  color: var(--ink-2); border: 1px solid var(--line);
}
.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; }

.tag { display: inline-block; padding: 2px 9px; border-radius: 8px; font-size: 12px;
       background: var(--tint); border: 1px solid var(--line); color: var(--ink-2); }

/* حقول الإدخال */
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; }
.req::after { content: ' *'; color: var(--dan); }
input[type=text], input[type=tel], input[type=number], input[type=password],
input[type=date], 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: 92px; resize: vertical; line-height: 1.8; }
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.bad, select.bad, textarea.bad { border-color: var(--dan); background: #fffafa; }
input[type=number] { 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-start: 13px; padding-inline-end: 36px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }

/* شبكة الحقول */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px 16px; }
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
@media (max-width: 860px) { .grid > * { grid-column: span 12 !important; } }

/* اختيارات على شكل أزرار */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  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.box .dot { border-radius: 5px; }
.opt.on { border-color: var(--g2); background: #eef6fc; color: #14486b; font-weight: 600; }
.opt.on .dot { border-color: var(--g2); background: var(--g2);
  box-shadow: inset 0 0 0 2.5px #fff; }

/* جداول */
.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; }
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; }
table.tbl tbody tr:hover { background: #f8fbfd; }
table.tbl td.num, table.tbl th.num { text-align: center; }
table.tbl tfoot td { font-weight: 700; background: var(--tint); }

/* بطاقات إحصائية */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 13px; }
.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.warn b { color: var(--warn); }
.stat.dan b { color: var(--dan); } .stat.info b { color: var(--info); }
.stat.ok::before   { background: var(--ok); }
.stat.warn::before { background: var(--warn); }
.stat.dan::before  { background: var(--dan); }
.stat.info::before { background: var(--info); }

/* شريط تقدّم */
.bar { height: 9px; border-radius: 9px; background: #e3ebf2; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--grad); border-radius: 9px;
  transition: width .5s cubic-bezier(.4,0,.2,1); }

/* رسائل */
.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.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 .card-h { position: sticky; top: 0; background: #fff; z-index: 2; border-radius: 20px 20px 0 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; }
.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; }

/* تحميل */
.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; }
@keyframes sp { to { transform: rotate(360deg); } }
.load { padding: 46px; text-align: center; color: var(--ink-3); }

/* الشريط العلوي للتطبيق */
.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; }
.topbar .brand img { height: 34px; }
.topbar .who { margin-inline-start: auto; display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; opacity: .93; }
.topbar a.out { color: #fff; opacity: .8; font-size: 13.5px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px; padding: 5px 12px; }
.topbar a.out:hover { opacity: 1; background: rgba(255,255,255,.1); text-decoration: none; }

.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; }
.page h2.ph { font-size: 21px; font-family: var(--disp); margin-bottom: 4px; }
.page p.pd { color: var(--ink-3); font-size: 14px; margin: 0 0 18px; }

/* ============================================================
   وثيقة الاستمارة المطبوعة — مشتركة بين /print و /print-all
   ============================================================ */
.sheet { width: 210mm; min-height: 297mm; margin: 22px auto; background: #fff;
  box-shadow: var(--sh-3); padding: 0 0 14mm; }
@media (max-width: 900px) { .sheet { width: auto; margin: 12px; } }
.doc { padding: 0 12mm; font-family: var(--serif); }
.doc .ui { font-family: var(--ui); }

.letter { font-size: 15.6px; line-height: 2.15; white-space: pre-line; margin: 16px 0 14px;
  text-align: justify; color: #17334a; }
.idbar { display: flex; justify-content: space-between; gap: 10px; font-size: 12.6px;
  font-family: var(--ui); color: var(--ink-2); border-bottom: 1.5px solid var(--g1);
  padding-bottom: 6px; margin-bottom: 12px; }

h3.sec { font-family: var(--ui); font-size: 13.6px; font-weight: 700; color: #fff;
  background: var(--grad); border-radius: 8px; padding: 5px 12px; margin: 15px 0 9px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
table.dt { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: 12.4px; }
table.dt td { border: 1px solid #c9d6e0; padding: 5px 8px; vertical-align: middle; }
table.dt td.k { background: #f2f7fa; font-weight: 600; color: var(--ink-2); width: 1%;
  white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
table.dt td.v { min-width: 90px; }
table.dt td.v.empty { color: #9fb2c1; }

table.dz { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: 11.8px; }
table.dz th { background: var(--deep); color: #fff; padding: 5px 7px; font-weight: 600;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
table.dz td { border: 1px solid #c9d6e0; padding: 4px 7px; }
table.dz td.m { text-align: center; width: 26px; font-weight: 700; color: var(--dan); }
table.dz tr.on td { background: #fdf2f2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.decl { margin-top: 16px; border: 1.5px solid var(--g1); border-radius: 12px; padding: 12px 15px;
  font-size: 14.4px; line-height: 2; background: #f7fcf9;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sigs { display: flex; gap: 12px; margin-top: 14px; align-items: stretch; }
.sigbox { flex: 1; border: 1px solid #c9d6e0; border-radius: 12px; padding: 9px 12px;
  text-align: center; font-family: var(--ui); font-size: 12.2px; display: flex;
  flex-direction: column; justify-content: space-between; min-height: 108px; }
.sigbox b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }
.sigbox .im { flex: 1; display: grid; place-items: center; }
.sigbox .im img { max-height: 58px; max-width: 92%; }
.sigbox .nm { font-weight: 600; color: var(--ink); }
.stampim { position: relative; }
.stampim img { max-height: 92px; opacity: .92; }

.docfoot { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin-top: 16px; padding-top: 10px; border-top: 1px dashed #c9d6e0;
  font-family: var(--ui); font-size: 11.6px; color: var(--ink-3); }
.docfoot .qr { width: 74px; height: 74px; }
.docfoot .no { font-size: 15px; font-weight: 700; color: var(--deep); direction: ltr;
  font-variant-numeric: tabular-nums; }
.note-box { margin-top: 12px; border: 1px solid #c9d6e0; border-radius: 10px; padding: 9px 12px;
  font-family: var(--ui); font-size: 12.4px; }
.note-box b { color: var(--ink-2); }

@media print {
  .sheet { width: auto; min-height: 0; margin: 0; box-shadow: none; padding: 0; }
  .doc { padding: 0; }
  /* كل استمارة طالب تبدأ في ورقة جديدة */
  .sheet + .sheet { break-before: page; page-break-before: always; }
  h3.sec { break-after: avoid; break-inside: avoid; }
  table.dt, table.dz, .decl, .sigs, .note-box, .docfoot, .letter { break-inside: avoid; }
}

/* ============================================================
   الطباعة
   ============================================================ */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 10mm 9mm 9mm; }
  html, body { background: #fff !important; font-size: 11.4px; }
  .no-print, .topbar, .tabs, .btn, .modal { display: none !important; }
  .print-only { display: block; }
  .card { box-shadow: none !important; border-color: #cbd6df !important; break-inside: avoid; }
  .sheet { box-shadow: none !important; margin: 0 !important; border: 0 !important;
           max-width: none !important; width: auto !important; padding: 0 !important; }
  .moe-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .moe-title, .stat::before, .chip, .bar > i, table.tbl thead th {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.tbl thead th { position: static; }
  a[href]::after { content: ''; }
  .break { break-before: page; }
  .avoid { break-inside: avoid; }
}