/* ════════════════════════════════════════════════════════════════════
   luxe.css — طبقة العمق والتوحيد (Depth & Unify Layer)
   ────────────────────────────────────────────────────────────────────
   تُحمَّل أخيراً ومحصورة في @media screen فقط — الطباعة/PDF لا تتأثر.
   الفلسفة: نحافظ على هوية «منصة الوليد» الملوّنة كما هي (أخضر/ذهبي/مرجاني/أزرق)،
   ونضيف فقط: عمقاً للأسطح، لمعاناً للأزرار، وتوحيداً للشريط العلوي الملوّن
   على كل الصفحات. لا نغيّر أي لون أساسي ولا أي بنية أو معرّف.
   ════════════════════════════════════════════════════════════════════ */
@media screen {
  /* ════════ عمق إضافي للأسطح (بدون أي تغيير في الألوان) ════════ */
  .home-card {
    box-shadow:
      0 3px 10px rgba(8, 63, 58, 0.07),
      0 34px 70px -28px rgba(8, 63, 58, 0.3) !important;
  }
  .modal {
    box-shadow:
      0 3px 10px rgba(8, 63, 58, 0.08),
      0 40px 80px -30px rgba(8, 63, 58, 0.38) !important;
  }
  .adm-panel,
  .adm-card {
    box-shadow:
      0 2px 6px rgba(8, 63, 58, 0.06),
      0 16px 38px -18px rgba(8, 63, 58, 0.2) !important;
  }

  /* .btn-primary (لمعان + ظل) انتقل لملف assets/components.css */

  /* ════════ زر «افتح» — كبسولة بلون فئة البطاقة نفسها (أنعم وأوضح) ════════ */
  .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 0.2s ease;
  }
  .choice-card:hover .cc-go {
    background: color-mix(in srgb, currentColor 22%, transparent);
  }

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

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

  /* ════════════════════════════════════════════════════════════════════
     Icon System — لغة أيقونية موحّدة للموقع
     لا تغيّر HTML ولا منطق JS: تعتمد على pseudo-elements وCSS فقط.
     الهدف: إبراز المعنى في الأماكن الناقصة: التبويبات، الفلاتر، الحالات
     الفارغة، مؤشرات الإدارة، أزرار الإجراءات، وخطوات بناء الخطة.
     ════════════════════════════════════════════════════════════════════ */
  /* توكنز --neb-icon-* (الأساسية والمقاس الصغير للجوال) انتقلت لملف
     assets/alwaleed-tokens.css — نفس القيم بلا تغيير. */

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

  .choice-card .cc-ic,
  .subj-card .subj-ic,
  .tc-av {
    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, 0.78);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18);
  }
  .choice-card:hover .cc-ic,
  .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 0.18s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.18s ease;
  }

  .step-card[data-fill='teacher'] .ctl-h .t::before {
    content: '👤';
    --neb-icon-border: rgba(8, 118, 107, 0.18);
  }
  .step-card[data-fill='lesson'] .ctl-h .t::before {
    content: '📘';
    color: var(--vision-navy);
    --neb-icon-border: rgba(38, 79, 102, 0.18);
  }
  #section-dates .ctl-h .t::before {
    content: '◷';
    color: var(--vision-gold);
    --neb-icon-border: rgba(199, 154, 69, 0.2);
  }
  .step-card[data-fill='level'] .ctl-h .t::before {
    content: '◉';
    color: var(--vision-coral);
    --neb-icon-border: rgba(217, 117, 89, 0.2);
  }
  .step-card[data-fill='students'] .ctl-h .t::before {
    content: '👥';
    color: var(--vision-brand-2);
    --neb-icon-border: rgba(24, 160, 147, 0.2);
  }
  .home-settings-card .ctl-h .t::before {
    content: '⌂';
    color: var(--vision-navy);
    --neb-icon-border: rgba(38, 79, 102, 0.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, 0.72);
    border: 1px solid rgba(8, 118, 107, 0.14);
    color: currentColor;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    transition:
      transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.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, 0.26);
  }

  .adm-hero h3,
  .adm-kpi,
  .adm-class-row,
  .adm-line,
  .adm-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, 0.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 0.18s cubic-bezier(0.16, 1, 0.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, 0.08);
    opacity: 0.74;
  }
  .adm-line::after {
    opacity: 0.34;
  }

  .sp-head b::before {
    content: '▤';
    color: var(--vision-navy);
  }
  /* سهم «افتح ↗» لبطاقة المادة انتقل لملف assets/components.css */

  .empty-state::after,
  .adm-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, 0.11);
    border: 1px solid rgba(199, 154, 69, 0.2);
    box-shadow: var(--neb-icon-shadow);
    vertical-align: middle;
  }
  /* .student-chk.empty::before انتقلت لملف assets/components.css */
  .adm-empty::before {
    content: '✓';
    color: var(--vision-brand);
    background: rgba(8, 118, 107, 0.1);
    border-color: rgba(8, 118, 107, 0.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, 0.08);
    border: 1px solid rgba(8, 118, 107, 0.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-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-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 {
      transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s ease,
        background 0.2s ease;
    }
    .choice-card:hover .cc-ic svg,
    .mh-home-pill:hover svg {
      transform: translateY(-1px);
    }
  }

  @media (max-width: 640px) {
    /* --neb-icon-size/--neb-icon-radius (المقاس الصغير) انتقل لملف alwaleed-tokens.css */
    .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;
    }
  }
}