/* لوحة إعلانات My Tutors — الألوان والخط من التطبيق نفسه (lib/student/ui/theme.dart):
   كحليٌّ للفعل وأخضر للحالة العاملة، وCairo بأوزانه الثلاثة. المعاينة يجب أن تشبه ما
   في الهاتف، فلا هويةَ ثانية هنا. */

@font-face { font-family: Cairo; font-weight: 400; font-display: swap; src: url(/panel/fonts/Cairo-400.ttf) format('truetype'); }
@font-face { font-family: Cairo; font-weight: 600; font-display: swap; src: url(/panel/fonts/Cairo-600.ttf) format('truetype'); }
@font-face { font-family: Cairo; font-weight: 700; font-display: swap; src: url(/panel/fonts/Cairo-700.ttf) format('truetype'); }

:root {
  --bg: #F6F7FC;
  --surface: #FFFFFF;
  --field: #F3F4F9;
  --line: #E9EBF3;
  --line-strong: #CDD1E2;
  --ink: #1A1C38;
  --muted: #585D7C;
  --faint: #9CA1B8;
  --navy: #2C3070;
  --navy-soft: #E6E8F8;
  --on-navy: #FFFFFF;
  --green: #25785A;
  --green-soft: #D6F5E5;
  --warn: #B03A55;
  --warn-soft: #FFE1EA;
  --amber: #9A5F08;
  --amber-soft: #FFEFCF;
  --shadow: 0 1px 2px rgb(26 28 56 / .04), 0 8px 24px rgb(26 28 56 / .06);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-card: 20px; --r-field: 12px; --r-pill: 999px;
  /* سلّم الخط: 12 · 14 · 16 · 18 · 22 · 28 */
  --t-label: 12px; --t-detail: 14px; --t-body: 16px; --t-heading: 18px; --t-title: 22px; --t-display: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1022;
    --surface: #1A1D36;
    --field: #23264A;
    --line: #2B2F4D;
    --line-strong: #454A72;
    --ink: #ECEDF7;
    --muted: #A7ABC8;
    --faint: #6E7392;
    --navy: #6C73D9;
    --navy-soft: #252950;
    --on-navy: #0E1022;
    --green: #72D2A8;
    --green-soft: #173A2E;
    --warn: #F07A95;
    --warn-soft: #3D1A25;
    --amber: #E7B05A;
    --amber-soft: #3A2A12;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.7 Cairo, 'Segoe UI', Tahoma, sans-serif;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
h1 { font-size: var(--t-display); font-weight: 700; line-height: 1.4; text-wrap: balance; }
h2 { font-size: var(--t-heading); font-weight: 700; line-height: 1.5; }
h3 { font-size: var(--t-detail); font-weight: 700; color: var(--muted); margin-block-start: var(--s5); }
button, input, select { font: inherit; color: inherit; }

.muted { color: var(--muted); font-size: var(--t-detail); }
.small { font-size: var(--t-label); }
.strong { font-weight: 700; }
.ltr { direction: ltr; unicode-bidi: isolate; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 6px; }

/* ─── الشعار ─── */
.mark {
  display: inline-grid; place-items: center;
  inline-size: 64px; block-size: 64px; border-radius: 18px;
  background: var(--navy); color: var(--on-navy);
  font: 700 28px/1 Cairo, sans-serif; direction: ltr;
}
.mark-s { inline-size: 32px; block-size: 32px; border-radius: 10px; font-size: 14px; }

/* ─── الدخول ─── */
.boot { padding: var(--s7) var(--s4); text-align: center; }
.gate { min-block-size: 100dvh; display: grid; place-items: center; padding: var(--s4); }
.gate-card {
  inline-size: min(100%, 420px);
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: var(--s6); display: grid; gap: var(--s4); justify-items: start;
}
.gate-card h1 { font-size: var(--t-title); }
.gate-actions { display: grid; gap: var(--s2); inline-size: 100%; }

/* ─── الأزرار ─── */
.btn {
  min-block-size: 44px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-field);
  background: var(--surface); color: var(--ink);
  font-size: var(--t-detail); font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--field); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.btn-primary:hover { background: var(--navy); filter: brightness(1.12); }
.btn-danger { background: var(--warn); border-color: var(--warn); color: var(--surface); }
.btn-danger:hover { background: var(--warn); filter: brightness(1.1); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--muted); }

/* ─── الرأس ─── */
.top { background: var(--surface); border-block-end: 1px solid var(--line); }
.top-in, .page, .savebar-in { inline-size: min(100%, 1120px); margin-inline: auto; padding-inline: var(--s4); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-block-size: 60px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; }
.who { display: flex; align-items: center; gap: var(--s1); min-inline-size: 0; }
.who .ltr { overflow-wrap: anywhere; }

.page { padding-block: var(--s5) 160px; display: grid; gap: var(--s5); }

/* ─── المفتاح العام ─── */
.master {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: var(--s5);
}
.state { font-size: var(--t-detail); font-weight: 700; padding: 2px var(--s3); border-radius: var(--r-pill); vertical-align: middle; white-space: nowrap; }
.state[data-on="true"] { background: var(--green-soft); color: var(--green); }
.state[data-on="false"] { background: var(--warn-soft); color: var(--warn); }
.chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips li {
  font-size: var(--t-label); font-weight: 600; color: var(--muted);
  background: var(--field); border-radius: var(--r-pill); padding: 2px var(--s3);
}
.chips li[data-off="true"] { text-decoration: line-through; color: var(--faint); }

.notes { grid-column: 1 / -1; display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border-radius: var(--r-field); background: var(--amber-soft); }
.notes li { color: var(--amber); font-size: var(--t-detail); font-weight: 600; }

/* ─── التخطيط ─── */
.cols { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.col-main { display: grid; gap: var(--s5); min-inline-size: 0; }
@media (min-width: 960px) {
  .cols { grid-template-columns: minmax(0, 1fr) 340px; }
  /* اللصق على عنصر الشبكة نفسه: بطاقةٌ داخل عمودٍ بطولها لا تجد ما تنزلق فيه. */
  .col-side { position: sticky; inset-block-start: var(--s4); }
  /* الصفوف بقدر محتواها: عنصرٌ بنسبةٍ ثابتة ومقصوص (الهاتف) حدّه الأدنى صفر، فيضغطه
     الارتفاع المحدود ويغطّي ما تحته. */
  .side { max-block-size: calc(100dvh - 2 * var(--s4)); overflow-y: auto; grid-auto-rows: max-content; }
}

.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s5); display: grid; gap: var(--s4); min-inline-size: 0; }
.card-head { display: flex; justify-content: space-between; align-items: start; gap: var(--s4); }
.count { font-size: var(--t-detail); font-weight: 600; color: var(--muted); }

/* ─── المفتاح ─── */
.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; inline-size: 100%; block-size: 100%; }
.track {
  inline-size: 52px; block-size: 32px; border-radius: var(--r-pill);
  background: var(--line-strong); position: relative; transition: background .15s;
}
.track::after {
  content: ''; position: absolute; inset-block-start: 4px; inset-inline-start: 4px;
  inline-size: 24px; block-size: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: translate .15s;
}
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { translate: -20px 0; }
[dir="ltr"] .switch input:checked + .track::after { translate: 20px 0; }
.switch input:focus-visible + .track { outline: 3px solid var(--navy); outline-offset: 2px; }
.switch-l .track { inline-size: 64px; block-size: 38px; }
.switch-l .track::after { inline-size: 30px; block-size: 30px; }
.switch-l input:checked + .track::after { translate: -26px 0; }
@media (prefers-reduced-motion: reduce) { .track, .track::after { transition: none; } }

/* ─── الحقول ─── */
.fields { display: grid; gap: var(--s4); }
.fields[data-off="true"] { opacity: .5; }
.fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.field { display: grid; gap: var(--s1); min-inline-size: 0; }
.field > label, .field > legend { font-size: var(--t-detail); font-weight: 600; }
output { color: var(--navy); font-weight: 700; margin-inline-start: var(--s1); }
input[type="text"], input[type="url"], input[type="date"], select {
  inline-size: 100%; min-block-size: 44px; padding: 0 var(--s3);
  background: var(--field); border: 1px solid transparent; border-radius: var(--r-field);
}
input[type="text"]:hover, input[type="url"]:hover, input[type="date"]:hover, select:hover { border-color: var(--line-strong); }
input[aria-invalid="true"] { border-color: var(--warn); }
input[type="range"] { inline-size: 100%; min-block-size: 32px; accent-color: var(--navy); }
.err { color: var(--warn); font-size: var(--t-label); font-weight: 600; }
.note { color: var(--amber); font-size: var(--t-label); font-weight: 600; }

/* ─── اختيار من مجموعة ─── */
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.seg label, .picks label, .sources label { position: relative; cursor: pointer; }
.seg input, .picks input, .sources input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; inline-size: 100%; block-size: 100%; }
.seg span, .picks span, .sources span {
  display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--t-detail); font-weight: 600; background: var(--surface);
}
.picks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.picks span { min-block-size: 36px; padding: 0 var(--s3); }
.seg input:checked + span, .picks input:checked + span, .sources input:checked + span {
  background: var(--navy); border-color: var(--navy); color: var(--on-navy);
}
.seg input:focus-visible + span, .picks input:focus-visible + span, .sources input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.sources { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sources input:disabled + span { color: var(--faint); border-style: dashed; cursor: not-allowed; }
.sources small { font-size: var(--t-label); font-weight: 400; margin-inline-start: var(--s2); }

/* ─── الإعلانات ─── */
.add { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ads { display: grid; gap: var(--s4); }
.empty { padding: var(--s5); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-field); }
.ad {
  display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: 16px; padding: var(--s4);
}
.ad[data-active="false"] { background: var(--field); }
@media (min-width: 640px) { .ad { grid-template-columns: 148px minmax(0, 1fr); } }
.ad-media { display: grid; gap: var(--s2); align-content: start; justify-items: start; }
.thumb {
  inline-size: 100%; max-inline-size: 148px; border-radius: var(--r-field); overflow: hidden;
  background: var(--field); display: grid; place-items: center;
  color: var(--faint); font-size: var(--t-label); text-align: center; border: 1px dashed var(--line-strong);
}
.thumb[data-placement="splash"] { aspect-ratio: 9 / 16; }
.thumb[data-placement="inline"] { aspect-ratio: 3 / 1; max-inline-size: 100%; }
.thumb[data-has="true"] { border-style: solid; border-color: var(--line); }
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ad-body { display: grid; gap: var(--s3); min-inline-size: 0; }
.ad-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.kind { font-size: var(--t-label); font-weight: 700; padding: 2px var(--s3); border-radius: var(--r-pill); background: var(--navy-soft); color: var(--navy); }
.ad-head .switch { margin-inline-start: auto; }
.ad-live { font-size: var(--t-label); font-weight: 600; color: var(--muted); }
.ad-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); align-items: center; }
details.where { border: 1px solid var(--line); border-radius: var(--r-field); }
details.where > summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; padding: 0 var(--s3); font-size: var(--t-detail); font-weight: 600; gap: var(--s2); }
details.where > summary b { color: var(--navy); font-weight: 700; }
details.where > div { padding: 0 var(--s3) var(--s3); }

/* ─── المعاينة ─── */
.phone {
  position: relative; justify-self: center;
  inline-size: min(100%, 236px); aspect-ratio: 9 / 19.5;
  border: 8px solid #12132A; border-radius: 40px; overflow: hidden; background: var(--bg);
}
.phone-app { position: absolute; inset: 0; padding: 28px 14px 14px; display: grid; gap: 10px; align-content: start; }
.sk { display: block; border-radius: 10px; background: var(--line); }
.sk-h { block-size: 16px; inline-size: 55%; }
.sk-b { block-size: 74px; background: var(--navy-soft); border-radius: 16px; }
.sk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-t { block-size: 48px; border-radius: 14px; }
.sk-c { block-size: 40px; border-radius: 14px; }
.phone-ad { position: absolute; inset: 0; background: #000; }
.phone-ad img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.phone-top, .phone-bottom { position: absolute; inset-inline: 10px; display: flex; gap: 6px; }
.phone-top { inset-block-start: 22px; justify-content: space-between; align-items: center; }
.phone-bottom { inset-block-end: 12px; flex-direction: column; align-items: center; }
.pill {
  display: inline-flex; align-items: center; min-block-size: 22px; padding: 0 10px;
  border-radius: var(--r-pill); background: rgb(0 0 0 / .45); color: #fff;
  font-size: 11px; font-weight: 600; border: 0; white-space: nowrap;
}
.pill-btn { min-block-size: 28px; cursor: pointer; }
.pill-btn:disabled { color: rgb(255 255 255 / .75); cursor: default; }
.pill-s { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; }
.bar { display: block; inline-size: 100%; block-size: 3px; border-radius: 3px; background: rgb(255 255 255 / .25); overflow: hidden; }
.bar span { display: block; block-size: 100%; inline-size: 0; background: #fff; }
.why { font-size: var(--t-detail); color: var(--muted); text-align: center; }
.why[data-shows="true"] { color: var(--green); font-weight: 600; }
.side-actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.inline-prev {
  position: relative; aspect-ratio: 3 / 1; border-radius: 16px; overflow: hidden;
  background: var(--field); border: 1px dashed var(--line-strong);
}
.inline-prev[data-has="true"] { border: 0; box-shadow: var(--shadow); }
.inline-prev img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* ─── شريط الحفظ ─── */
.savebar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 5;
  background: var(--surface); border-block-start: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgb(26 28 56 / .08);
}
.savebar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); flex-wrap: wrap; }
.savebar-text { min-inline-size: 0; flex: 1 1 260px; }
.savebar-actions { display: flex; gap: var(--s2); }
.problems { display: grid; gap: 2px; max-block-size: 96px; overflow-y: auto; }
.problems li { font-size: var(--t-label); font-weight: 600; }
.problems li[data-level="block"] { color: var(--warn); }
.problems li[data-level="warn"] { color: var(--amber); }

/* ─── التنبيهات ─── */
.notice { padding: var(--s3) var(--s4); border-radius: var(--r-field); font-size: var(--t-detail); font-weight: 600; }
.notice-bad { background: var(--warn-soft); color: var(--warn); }
.toast {
  position: fixed; inset-block-end: 104px; inset-inline: 0; margin-inline: auto; z-index: 6;
  inline-size: fit-content; max-inline-size: calc(100% - 32px);
  background: var(--ink); color: var(--bg); padding: var(--s3) var(--s5);
  border-radius: var(--r-pill); font-size: var(--t-detail); font-weight: 600; text-align: center;
}
.toast[data-bad="true"] { background: var(--warn); color: #fff; }

.ask { border: 0; border-radius: var(--r-card); padding: var(--s5); inline-size: min(calc(100% - 32px), 420px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.ask::backdrop { background: rgb(14 16 34 / .55); }
.ask form { display: grid; gap: var(--s3); }
.ask-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-block-start: var(--s2); }