/* =====================================================================
   مدارس الأحد — التنسيقات.
   موبايل أولًا: أغلب الخدام هيفتحوا التطبيق من التليفون.
   ===================================================================== */
:root {
  --ink:      #241a2e;
  --ink-soft: #5d5268;
  --muted:    #8b8295;
  --line:     #e7e2ec;
  --bg:       #faf8fc;
  --card:     #ffffff;

  --brand:      #4c2a68;
  --brand-dark: #3a1f51;
  --brand-tint: #f2ecf7;
  --gold:       #e0a520;
  --gold-tint:  #fdf5e3;

  --ok:      #1d7a4c;
  --ok-tint: #e8f6ee;
  --warn:    #9a6207;
  --warn-tint:#fdf3e0;
  --bad:     #a32a37;
  --bad-tint:#fbebed;

  --r:  14px;
  --r-s: 9px;
  --shadow: 0 1px 2px rgba(36,26,46,.06), 0 4px 16px rgba(36,26,46,.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .6rem; font-weight: 800; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .8rem; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px; }
.page { padding: 20px 0 64px; }
.page.wide .wrap { max-width: 1400px; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; }

/* ---------- الترويسة ---------- */
.topbar { background: var(--brand); color: #fff; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 30; }
.topbar-inner { display: flex; align-items: center; gap: .75rem; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: .55rem; color: #fff; flex: 1 1 auto; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-title { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.brand-sub { display: block; font-size: .7rem; opacity: .72; line-height: 1.3;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.who { text-align: left; line-height: 1.25; flex: none; }
.who-name { display: block; font-weight: 700; font-size: .84rem; }
.who-role { display: block; font-size: .68rem; opacity: .75; }
.logout { color: #fff; opacity: .8; font-size: .8rem; border: 1px solid rgba(255,255,255,.3);
          border-radius: 99px; padding: .18rem .6rem; flex: none; }
.logout:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,.12); }

.nav { background: var(--brand-dark); overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-inner { display: flex; gap: .15rem; white-space: nowrap; }
.nav a { color: rgba(255,255,255,.76); padding: .55rem .7rem; font-size: .88rem; font-weight: 500;
         border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.active { color: #fff; font-weight: 700; border-bottom-color: var(--gold); }

/* ---------- البطاقات ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        padding: 1.1rem 1.15rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.card.tight { padding: .8rem .9rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
             flex-wrap: wrap; margin-bottom: .7rem; }
.card-head h2, .card-head h3 { margin: 0; }

.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid.four { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px) and (max-width: 899px) { .grid.four { grid-template-columns: 1fr 1fr; } }

/* ---------- الأزرار ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
       background: var(--brand); color: #fff; border: 1px solid var(--brand);
       border-radius: var(--r-s); padding: .5rem .95rem; font: inherit; font-weight: 700;
       font-size: .92rem; cursor: pointer; transition: filter .12s; }
.btn:hover { filter: brightness(1.12); text-decoration: none; color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
.btn.ghost { background: #fff; color: var(--brand); }
.btn.ghost:hover { background: var(--brand-tint); color: var(--brand); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #3d2c05; }
.btn.wa { background: #25d366; border-color: #1eb757; color: #06331a; }
.btn.danger { background: var(--bad); border-color: var(--bad); }
.btn.sm { padding: .28rem .6rem; font-size: .82rem; border-radius: 7px; }
.btn.block { width: 100%; }

/* ---------- النماذج ---------- */
label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .25rem; }
input[type=text], input[type=tel], input[type=date], input[type=number], input[type=email],
input[type=password], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-s); padding: .5rem .6rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
textarea { min-height: 96px; resize: vertical; }
.field { margin-bottom: .85rem; }
.field .hint { font-weight: 400; font-size: .79rem; color: var(--muted); margin-top: .2rem; }
.pin-input { font-size: 1.8rem; letter-spacing: .7rem; text-align: center; font-weight: 800; }

/* ---------- الجداول ---------- */
.tablewrap { overflow-x: auto; margin: 0 -1.15rem; padding: 0 1.15rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: right; padding: .48rem .55rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-weight: 800; font-size: .8rem; color: var(--ink-soft); background: var(--brand-tint); white-space: nowrap; }
tbody tr:hover { background: #fcfbfd; }
td.num, th.num { text-align: center; }

/* شبكة الجدول الشهري */
.roster th.date-col { position: sticky; inline-size: 92px; }
.roster td.slot { padding: .25rem; }
.roster select { font-size: .82rem; padding: .3rem .35rem; border-radius: 6px; }
.roster .role-head { font-size: .74rem; }
.roster tr.svc-row td { border-bottom: 2px solid var(--line); }

/* ---------- الشارات ---------- */
.badge { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: 99px;
         padding: .1rem .5rem; white-space: nowrap; border: 1px solid transparent; }
.badge.ok   { background: var(--ok-tint);   color: var(--ok);   border-color: #bfe3cf; }
.badge.warn { background: var(--warn-tint); color: var(--warn); border-color: #f0dcb4; }
.badge.bad  { background: var(--bad-tint);  color: var(--bad);  border-color: #f0c5ca; }
.badge.info { background: var(--brand-tint);color: var(--brand);border-color: #ded1eb; }
.badge.plain{ background: #f2f0f5;          color: var(--ink-soft); border-color: var(--line); }

.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700;
        background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .15rem .6rem; }
.class-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; display: inline-block; }

/* ---------- الرسائل ---------- */
.flash { border-radius: var(--r-s); padding: .65rem .9rem; margin-bottom: 1rem; font-weight: 500;
         border: 1px solid transparent; }
.flash-ok   { background: var(--ok-tint);   color: var(--ok);   border-color: #bfe3cf; }
.flash-warn { background: var(--warn-tint); color: var(--warn); border-color: #f0dcb4; }
.flash-bad  { background: var(--bad-tint);  color: var(--bad);  border-color: #f0c5ca; }

.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.empty-icon { font-size: 2rem; display: block; margin-bottom: .4rem; opacity: .5; }

/* ---------- الإحصاءات ---------- */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        padding: .85rem 1rem; box-shadow: var(--shadow); }
.stat-n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--brand); }
.stat-l { font-size: .8rem; color: var(--muted); }
.bar { height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); }

/* ---------- التذييل ---------- */
.foot { border-top: 1px solid var(--line); background: #fff; padding: 1rem 0; font-size: .8rem; color: var(--muted); }
.foot .wrap { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }

/* ---------- الدخول ---------- */
.auth { max-width: 380px; margin: 6vh auto; }
.auth .card { padding: 1.5rem; }
.auth-logo { display: block; width: 62px; height: 62px; margin: 0 auto .8rem; }

/* ---------- الطباعة ---------- */
@media print {
  .topbar, .nav, .foot, .btn, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .card { border: none; box-shadow: none; padding: 0; margin-bottom: .6rem; }
  .page { padding: 0; }
  table { font-size: 10pt; }
  th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 560px) {
  .brand-sub { display: none; }
  .who-name { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card { padding: .9rem; }
  .tablewrap { margin: 0 -.9rem; padding: 0 .9rem; }
}