/* ════════════════════════════════════════════════════════════════════
   luxe.css — طبقة العمق والتوحيد (Depth & Unify Layer)
   ────────────────────────────────────────────────────────────────────
   تُحمَّل أخيراً ومحصورة في @media screen فقط — الطباعة/PDF لا تتأثر.
   الفلسفة: نحافظ على هوية «نبراس» الملوّنة كما هي (أخضر/ذهبي/مرجاني/أزرق)،
   ونضيف فقط: عمقاً للأسطح، لمعاناً للأزرار، وتوحيداً للشريط العلوي الملوّن
   على كل الصفحات. لا نغيّر أي لون أساسي ولا أي بنية أو معرّف.
   ════════════════════════════════════════════════════════════════════ */
@media screen {

  /* ════════ توحيد الشريط العلوي الملوّن على كل الصفحات ════════
     شريط «نبراس»: أخضر ← أخضر فاتح ← ذهبي ← مرجاني.
     كان موجوداً على الدخول والرئيسية والشاشات، وناقصاً فقط على
     صفحة بناء الخطة (main-head) — نضيفه هنا ليتوحّد الثيم بالكامل. */
  .main-head::before {
    content: ""; position: absolute; top: 0; right: 0; left: 0; height: 6px;
    background: linear-gradient(90deg, var(--vision-brand), #61b7aa, var(--vision-gold), var(--vision-coral));
    z-index: 1;
  }

  /* ════════ عمق إضافي للأسطح (بدون أي تغيير في الألوان) ════════ */
  .home-card {
    box-shadow: 0 3px 10px rgba(8,63,58,.07), 0 34px 70px -28px rgba(8,63,58,.30) !important;
  }
  .modal {
    box-shadow: 0 3px 10px rgba(8,63,58,.08), 0 40px 80px -30px rgba(8,63,58,.38) !important;
  }
  .adm-panel, .adm-card, .teacher-card, .sp-row, .ctl-card {
    box-shadow: 0 2px 6px rgba(8,63,58,.06), 0 16px 38px -18px rgba(8,63,58,.20) !important;
  }

  /* ════════ لمعان رقيق + ظل أعمق للأزرار الرئيسية (نفس لونها) ════════ */
  .btn-primary, .h-btn.primary {
    position: relative; overflow: hidden;
    box-shadow: 0 12px 28px -10px rgba(8,63,58,.42) !important;
  }
  .btn-primary::after, .h-btn.primary::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 46%);
  }
  .btn-primary:hover, .h-btn.primary:hover {
    box-shadow: 0 18px 36px -10px rgba(8,63,58,.5) !important;
  }

  /* ════════ زر «افتح» — كبسولة بلون فئة البطاقة نفسها (أنعم وأوضح) ════════ */
  .cc-go {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 13px; border-radius: 999px;
    background: color-mix(in srgb, currentColor 13%, transparent);
    transition: background .2s ease;
  }
  .choice-card:hover .cc-go {
    background: color-mix(in srgb, currentColor 22%, transparent);
  }

  /* ════════ مودال: تعتيم وتغبيش خلفية أنعم ════════ */
  .modal-bg {
    background: rgba(13,40,37,.36) !important;
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  }

  /* ════════ أشرطة تمرير أنيقة ════════ */
  .screen-body::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .adm-panel::-webkit-scrollbar { width: 10px; }
  .screen-body::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb, .adm-panel::-webkit-scrollbar-thumb {
    background: rgba(8,118,107,.22); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
  }
  .screen-body::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover, .adm-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(8,118,107,.4); background-clip: padding-box;
  }

  /* ════════════════════════════════════════════════════════════════════
     Icon System — لغة أيقونية موحّدة للموقع
     لا تغيّر HTML ولا منطق JS: تعتمد على pseudo-elements وCSS فقط.
     الهدف: إبراز المعنى في الأماكن الناقصة: التبويبات، الفلاتر، الحالات
     الفارغة، مؤشرات الإدارة، أزرار الإجراءات، وخطوات بناء الخطة.
     ════════════════════════════════════════════════════════════════════ */
  :root {
    --neb-icon-size: 30px;
    --neb-icon-radius: 12px;
    --neb-icon-bg: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,248,244,.84));
    --neb-icon-border: rgba(8,118,107,.16);
    --neb-icon-shadow: 0 1px 0 rgba(255,255,255,.82) inset, 0 10px 22px -17px rgba(8,63,58,.45);
  }

  :where(.screen-ic, .cc-ic, .title-mark, .ic, .di-ic, .bt-icon) {
    flex: none;
    isolation: isolate;
  }

  .choice-card .cc-ic,
  .screen-brand-t .screen-ic,
  .lvlhelp-card .ch::before,
  .subj-card .subj-ic,
  .tc-av,
  .cp-ring {
    box-shadow: var(--neb-icon-shadow) !important;
  }

  .choice-card .cc-ic {
    position: relative;
    overflow: hidden;
  }
  .choice-card .cc-ic::after {
    content: "";
    position: absolute;
    inset: 8px 9px auto auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 0 0 5px rgba(255,255,255,.18);
  }
  .choice-card:hover .cc-ic,
  .ctl-card:hover .ctl-h .t::before,
  .admin-tab:hover::before,
  .adm-kpi:hover::before,
  .subj-card:hover .subj-ic {
    transform: translateY(-2px) scale(1.03);
  }

  .ctl-h .t,
  .date-block-label,
  .ptv-label,
  .sc-label,
  .student-list-title,
  .sp-head b,
  .adm-panel-head h4,
  .detail-section h3,
  .codes-intro,
  body #modal-services .svc-intro,
  body .sf-modal .sf-guide,
  .lvlhelp-head h3,
  .lvlhelp-ct {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .ctl-h .t::before,
  .date-block-label::before,
  .ptv-label::before,
  .sc-label::before,
  .student-list-title::before,
  .sp-head b::before,
  .adm-panel-head h4::before,
  .detail-section h3::before,
  .codes-intro::after,
  body #modal-services .svc-intro::after,
  body .sf-modal .sf-guide::after,
  .lvlhelp-head h3::before,
  .lvlhelp-ct::before {
    content: "✦";
    width: var(--neb-icon-size);
    height: var(--neb-icon-size);
    min-width: var(--neb-icon-size);
    border-radius: var(--neb-icon-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vision-brand);
    background: var(--neb-icon-bg);
    border: 1px solid var(--neb-icon-border);
    box-shadow: var(--neb-icon-shadow);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    transition: transform .18s cubic-bezier(.16,1,.3,1), background .18s ease;
  }

  .step-card[data-fill="teacher"] .ctl-h .t::before { content: "👤"; --neb-icon-border: rgba(8,118,107,.18); }
  .step-card[data-fill="lesson"] .ctl-h .t::before { content: "📘"; color: var(--vision-navy); --neb-icon-border: rgba(38,79,102,.18); }
  #section-dates .ctl-h .t::before { content: "◷"; color: var(--vision-gold); --neb-icon-border: rgba(199,154,69,.20); }
  .step-card[data-fill="level"] .ctl-h .t::before { content: "◉"; color: var(--vision-coral); --neb-icon-border: rgba(217,117,89,.20); }
  .step-card[data-fill="students"] .ctl-h .t::before { content: "👥"; color: var(--vision-brand-2); --neb-icon-border: rgba(24,160,147,.20); }
  .home-settings-card .ctl-h .t::before { content: "⌂"; color: var(--vision-navy); --neb-icon-border: rgba(38,79,102,.18); }

  .date-block-label::before { content: "▣"; width: 22px; height: 22px; min-width: 22px; border-radius: 8px; font-size: 11px; color: var(--vision-gold); }
  .ptv-label::before { content: "◌"; width: 24px; height: 24px; min-width: 24px; border-radius: 9px; color: var(--vision-brand); }
  .sc-label::before { content: "◈"; width: 24px; height: 24px; min-width: 24px; border-radius: 9px; color: var(--vision-coral); }
  .student-list-title::before { content: "👥"; width: 24px; height: 24px; min-width: 24px; border-radius: 9px; color: var(--vision-brand-2); }
  .lvlhelp-head h3::before { content: "؟"; color: var(--vision-coral); }
  .lvlhelp-ct::before { content: "⋯"; color: var(--vision-navy); width: 24px; height: 24px; min-width: 24px; border-radius: 9px; }

  .lvlhelp-bar,
  .chip-btn,
  .end-chip,
  .ptarget,
  .sc-opt,
  .sp-open,
  .sp-del,
  .sp-back,
  .adm-mini,
  .copy-summary,
  .open-detail,
  .cdc-gen,
  .cdc-edit,
  body #modal-services .svc-all,
  body #modal-services .svc-back,
  body .sf-modal .sf-sel,
  body .sf-modal .sf-chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .lvlhelp-bar::before { content: "✧"; }
  #ck-all::before { content: "✓"; }
  #uck-all::before { content: "×"; }
  .ptarget[data-print-target="plan"]::before { content: "▤"; }
  .ptarget[data-print-target="home"]::before { content: "⌂"; }
  .sc-opt[data-style="bloom"]::before { content: "☀"; }
  .sc-opt[data-style="royal"]::before { content: "◆"; }
  .sc-opt[data-style="modern"]::before { content: "▱"; }
  .sc-opt[data-style="bloom2"]::before { content: "✿"; }
  .sc-opt[data-style="masar"]::before { content: "↗"; }
  .sp-back::before { content: "↩"; }
  .sp-open::before { content: "↗"; }
  .sp-del::before { content: "⌫"; }
  .copy-summary::before { content: "⧉"; }
  .open-detail::before { content: "↗"; }
  .cdc-gen::before { content: "⟳"; }
  .cdc-edit::before { content: "✎"; }
  body #modal-services .svc-all::before { content: "✓"; }
  body #modal-services .svc-back::before { content: "↩"; }
  body .sf-modal .sf-sel::before { content: "✓"; }

  .adm-mini[data-admin-action="refresh"]::before { content: "⟳"; }
  .adm-mini[data-admin-action^="new"]::before,
  .adm-mini[data-admin-action^="add"]::before { content: "+"; }
  .adm-mini[data-admin-action^="save"]::before { content: "✓"; }
  .adm-mini[data-admin-action^="edit"]::before { content: "✎"; }
  .adm-mini[data-admin-action^="delete"]::before,
  .adm-mini[data-admin-action^="bulk-delete"]::before { content: "⌫"; }
  .adm-mini[data-admin-action^="tab"]::before { content: "↗"; }
  .adm-mini[data-admin-action^="move"]::before,
  .adm-mini[data-admin-action^="transfer"]::before { content: "⇄"; }
  .adm-mini[data-admin-action*="assignment"]::before { content: "⇆"; }
  .adm-mini[data-admin-action="cancel-form"]::before { content: "×"; }

  .admin-tabs {
    gap: 8px;
  }
  .admin-tab {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
  }
  .admin-tab::before {
    content: "◌";
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(8,118,107,.14);
    color: currentColor;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
    transition: transform .18s cubic-bezier(.16,1,.3,1), background .18s ease;
  }
  .admin-tab[data-tab="overview"]::before { content: "◌"; }
  .admin-tab[data-tab="classes"]::before { content: "▦"; }
  .admin-tab[data-tab="students"]::before { content: "👥"; }
  .admin-tab[data-tab="staff"]::before { content: "👤"; }
  .admin-tab[data-tab="assignments"]::before { content: "⇆"; }
  .admin-tab[data-tab="health"]::before { content: "✓"; }
  .admin-tab.active::before {
    color: #fff;
    background: linear-gradient(135deg, var(--vision-brand), var(--vision-brand-2));
    border-color: rgba(8,118,107,.26);
  }

  .adm-hero h3,
  .adm-kpi,
  .adm-class-row,
  .adm-line,
  .adm-empty,
  .student-chk.empty,
  .empty-state,
  body #modal-services .svc-empty,
  body .sf-modal .sf-empty {
    position: relative;
  }
  .adm-hero h3 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }
  .adm-hero h3::before {
    content: "▦";
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--vision-brand), var(--vision-brand-2));
    box-shadow: 0 12px 26px -16px rgba(8,63,58,.5);
  }

  .adm-kpi {
    padding-inline-start: 54px !important;
  }
  .adm-kpi::before {
    content: "◌";
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neb-icon-bg);
    border: 1px solid var(--neb-icon-border);
    color: var(--vision-brand);
    box-shadow: var(--neb-icon-shadow);
    transition: transform .18s cubic-bezier(.16,1,.3,1);
  }
  .adm-kpi:nth-child(1)::before { content: "👥"; color: var(--vision-brand); }
  .adm-kpi:nth-child(2)::before { content: "👤"; color: var(--vision-navy); }
  .adm-kpi:nth-child(3)::before { content: "▦"; color: var(--vision-gold); }
  .adm-kpi:nth-child(4)::before { content: "⇆"; color: var(--vision-brand-2); }
  .adm-kpi:nth-child(5)::before { content: "◇"; color: var(--vision-navy); }
  .adm-kpi:nth-child(6)::before { content: "!"; color: var(--vision-coral); }

  .adm-panel-head h4::before { content: "▣"; width: 25px; height: 25px; min-width: 25px; border-radius: 9px; font-size: 12px; }
  .adm-grid.two .adm-panel:nth-child(1) .adm-panel-head h4::before { content: "!"; color: var(--vision-coral); }
  .adm-grid.two .adm-panel:nth-child(2) .adm-panel-head h4::before { content: "▦"; color: var(--vision-gold); }
  .adm-grid.two .adm-panel:nth-child(3) .adm-panel-head h4::before { content: "⚡"; color: var(--vision-brand); }

  .adm-class-row::after,
  .adm-line::after {
    content: "›";
    position: absolute;
    inset-inline-end: 12px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vision-brand);
    background: rgba(8,118,107,.08);
    opacity: .74;
  }
  .adm-line::after { opacity: .34; }

  .sp-head b::before { content: "▤"; color: var(--vision-navy); }
  .subj-card {
    position: relative;
    overflow: hidden;
  }
  .subj-card::after {
    content: "↗";
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    width: 24px;
    height: 24px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vision-brand);
    background: rgba(8,118,107,.08);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  }
  .subj-card:hover::after { opacity: 1; transform: translateY(0); }
  .sp-row .ti b::before {
    content: "▤";
    margin-inline-end: 6px;
    color: var(--vision-brand);
  }

  .empty-state::after,
  .adm-empty::before,
  .student-chk.empty::before,
  body #modal-services .svc-empty::after,
  body .sf-modal .sf-empty::after {
    content: "◇";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 12px;
    margin-inline-end: 8px;
    color: var(--vision-gold);
    background: rgba(199,154,69,.11);
    border: 1px solid rgba(199,154,69,.20);
    box-shadow: var(--neb-icon-shadow);
    vertical-align: middle;
  }
  .student-chk.empty::before { content: "👥"; color: var(--vision-brand-2); background: rgba(24,160,147,.10); border-color: rgba(24,160,147,.18); }
  .adm-empty::before { content: "✓"; color: var(--vision-brand); background: rgba(8,118,107,.10); border-color: rgba(8,118,107,.18); }
  body #modal-services .svc-empty::after { content: "♡"; }
  body .sf-modal .sf-empty::after { content: "▤"; color: var(--vision-navy); }

  .field:has(#f-grade) label::before,
  .field:has(#f-subject) label::before,
  .field:has(#f-section) label::before,
  .field:has(#f-lesson) label::before,
  .field:has(#home-note-student) label::before,
  .field:has(#home-message) label::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 5px;
    background: rgba(8,118,107,.08);
    border: 1px solid rgba(8,118,107,.14);
    color: var(--vision-brand);
    font-size: 11px;
    font-weight: 900;
    vertical-align: -4px;
  }
  .field:has(#f-grade) label::before { content: "▦"; }
  .field:has(#f-subject) label::before { content: "◇"; color: var(--vision-navy); }
  .field:has(#f-section) label::before { content: "◫"; color: var(--vision-gold); }
  .field:has(#f-lesson) label::before { content: "✦"; color: var(--vision-coral); }
  .field:has(#home-note-student) label::before { content: "👤"; }
  .field:has(#home-message) label::before { content: "✉"; }

  body #modal-services .svc-intro::after { content: "♡"; color: var(--vision-brand); }
  body .sf-modal .sf-guide::after { content: "▤"; color: var(--vision-navy); }
  .codes-intro::after { content: "⌘"; color: var(--vision-gold); }

  body .sf-modal .sf-mode h3::before,
  body .sf-modal .sf-subj b::before,
  body .sf-modal .sf-lesson b::before,
  body #modal-services .svc-card h4::before,
  body #modal-services .svc-chk b::before {
    content: "✦";
    margin-inline-end: 6px;
    color: var(--vision-brand);
  }
  body .sf-modal .sf-mode:nth-child(1) h3::before { content: "👤"; }
  body .sf-modal .sf-mode:nth-child(2) h3::before { content: "👥"; }
  body .sf-modal .sf-mode:nth-child(3) h3::before { content: "◇"; }
  body .sf-modal .sf-mode:nth-child(4) h3::before { content: "▤"; }
  body #modal-services .svc-card h4::before { content: "♡"; }
  body #modal-services .svc-chk b::before { content: "✓"; }

  @media (prefers-reduced-motion: no-preference) {
    .choice-card .cc-ic,
    .ctl-h .t::before,
    .admin-tab::before,
    .adm-kpi::before,
    .subj-ic,
    .screen-ic {
      transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease;
    }
    .choice-card:hover .cc-ic svg,
    .screen-back:hover svg,
    .mh-home-pill:hover svg,
    .mh-reset-pill:hover svg {
      transform: translateY(-1px);
    }
  }

  @media (max-width: 640px) {
    :root { --neb-icon-size: 26px; --neb-icon-radius: 10px; }
    .ctl-h .t::before,
    .adm-panel-head h4::before,
    .date-block-label::before,
    .ptv-label::before,
    .sc-label::before,
    .student-list-title::before {
      width: 23px;
      height: 23px;
      min-width: 23px;
      border-radius: 9px;
      font-size: 12px;
    }
    .admin-tab {
      gap: 5px;
    }
    .admin-tab::before {
      width: 23px;
      height: 23px;
      min-width: 23px;
      border-radius: 8px;
      font-size: 12px;
    }
    .adm-kpi {
      padding-inline-start: 46px !important;
    }
    .adm-kpi::before {
      width: 26px;
      height: 26px;
      inset-inline-start: 12px;
    }
    .adm-class-row::after,
    .adm-line::after {
      display: none;
    }
  }

}