/*
 * لوحة ألوان بطاقات الرئيسية
 * تتبع ترتيب مواد بوابة الأسرة مع إبقاء تصميم البطاقة ونسب خفتها كما هي.
 */
@media screen {
  .home-choices > #home-new {
    --home-hc: var(--seq-1);
    --home-hc-deep: var(--seq-1-deep);
    --home-hc-rgb: var(--seq-1-rgb);
    --home-orb-alpha: .08;
    --home-icon-alpha: .10;
    --home-icon-alpha-2: .10;
  }

  .home-choices > #home-saved {
    --home-hc: var(--seq-2);
    --home-hc-deep: var(--seq-2-deep);
    --home-hc-rgb: var(--seq-2-rgb);
    --home-orb-alpha: .09;
    --home-icon-alpha: .10;
    --home-icon-alpha-2: .10;
  }

  .home-choices > #home-eval {
    --home-hc: var(--seq-3);
    --home-hc-deep: var(--seq-3-deep);
    --home-hc-rgb: var(--seq-3-rgb);
    --home-orb-alpha: .10;
    --home-icon-alpha: .12;
    --home-icon-alpha-2: .12;
  }

  .home-choices > #home-reports {
    --home-hc: var(--seq-4);
    --home-hc-deep: var(--seq-4-deep);
    --home-hc-rgb: var(--seq-4-rgb);
    --home-orb-alpha: .11;
    --home-icon-alpha: .13;
    --home-icon-alpha-2: .13;
  }

  .home-choices > #home-admin {
    --home-hc: var(--seq-5);
    --home-hc-deep: var(--seq-5-deep);
    --home-hc-rgb: var(--seq-5-rgb);
    --home-orb-alpha: .12;
    --home-icon-alpha: .16;
    --home-icon-alpha-2: .10;
  }

  .home-choices > #home-dashboard {
    --home-hc: var(--seq-6);
    --home-hc-deep: var(--seq-6-deep);
    --home-hc-rgb: var(--seq-6-rgb);
    --home-orb-alpha: .11;
    --home-icon-alpha: .13;
    --home-icon-alpha-2: .13;
  }

  .home-choices > :is(#home-studentfile, #home-teacher-print-center) {
    --home-hc: var(--seq-7);
    --home-hc-deep: var(--seq-7-deep);
    --home-hc-rgb: var(--seq-7-rgb);
    --home-orb-alpha: .13;
    --home-icon-alpha: .14;
    --home-icon-alpha-2: .11;
  }

  .home-choices > #home-services {
    --home-hc: var(--seq-8);
    --home-hc-deep: var(--seq-8-deep);
    --home-hc-rgb: var(--seq-8-rgb);
    --home-orb-alpha: .12;
    --home-icon-alpha: .14;
    --home-icon-alpha-2: .10;
  }

  /* لا نمس خلفية البطاقة أو مقاسها أو ظلها؛ هذه هي طبقات اللون الموجودة أصلًا. */
  .home-choices > .choice-card::before {
    background: var(--home-hc);
  }

  .home-choices > .choice-card::after {
    background: rgba(var(--home-hc-rgb), var(--home-orb-alpha));
  }

  .home-choices > .choice-card .cc-ic {
    background: rgba(var(--home-hc-rgb), var(--home-icon-alpha));
  }

  .home-choices > #home-admin::before,
  .home-choices > #home-services::before {
    background: linear-gradient(90deg, var(--home-hc), var(--home-hc-deep));
  }

  .home-choices > :is(#home-studentfile, #home-teacher-print-center)::before {
    background: linear-gradient(90deg, var(--home-hc-deep), var(--home-hc));
  }

  .home-choices > #home-admin .cc-ic,
  .home-choices > #home-services .cc-ic {
    background: linear-gradient(
      135deg,
      rgba(var(--home-hc-rgb), var(--home-icon-alpha)),
      rgba(var(--home-hc-rgb), var(--home-icon-alpha-2))
    );
  }

  .home-choices > :is(#home-studentfile, #home-teacher-print-center) .cc-ic {
    background: linear-gradient(
      135deg,
      rgba(var(--home-hc-rgb), var(--home-icon-alpha-2)),
      rgba(var(--home-hc-rgb), var(--home-icon-alpha))
    );
  }

  .home-choices > .choice-card .cc-ic svg {
    stroke: var(--home-hc);
  }

  .home-choices > .choice-card .cc-ic svg [fill]:not([fill="none"]) {
    fill: var(--home-hc);
  }

  .home-choices > .choice-card .cc-go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    direction: rtl;
    unicode-bidi: isolate;
    color: var(--home-hc-deep);
  }

  .home-choices > .choice-card .cc-go::after {
    content: "";
    width: 11px;
    height: 11px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.1 5.3a1 1 0 0 1 0 1.4L9.8 12l5.3 5.3a1 1 0 1 1-1.4 1.4l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.1 5.3a1 1 0 0 1 0 1.4L9.8 12l5.3 5.3a1 1 0 1 1-1.4 1.4l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .home-choices > .choice-card:hover {
    border-color: rgba(var(--home-hc-rgb), .20) !important;
  }

  .home-choices > .choice-card:hover .cc-go {
    color: #fff;
    background: rgba(var(--home-hc-rgb), .22);
  }

  .home-choices > :is(#home-saved, #home-eval, #home-reports):hover .cc-go {
    background: var(--home-hc);
  }

  .home-choices > :is(#home-admin, #home-services):hover .cc-go {
    background: linear-gradient(135deg, var(--home-hc), var(--home-hc-deep));
  }

  .home-choices > :is(#home-studentfile, #home-teacher-print-center):hover .cc-go {
    background: linear-gradient(135deg, var(--home-hc-deep), var(--home-hc));
  }

  /* Subject identity follows the same eight-color sequence in saved plans and evaluation. */
  .subj-card.subj-islamic { --subj-hc: var(--seq-1); --subj-deep: var(--seq-1-deep); --subj-rgb: var(--seq-1-rgb); }
  .subj-card.subj-lughati { --subj-hc: var(--seq-2); --subj-deep: var(--seq-2-deep); --subj-rgb: var(--seq-2-rgb); }
  .subj-card.subj-math { --subj-hc: var(--seq-3); --subj-deep: var(--seq-3-deep); --subj-rgb: var(--seq-3-rgb); }
  .subj-card.subj-science { --subj-hc: var(--seq-4); --subj-deep: var(--seq-4-deep); --subj-rgb: var(--seq-4-rgb); }
  .subj-card.subj-digital { --subj-hc: var(--seq-5); --subj-deep: var(--seq-5-deep); --subj-rgb: var(--seq-5-rgb); }
  .subj-card.subj-english { --subj-hc: var(--seq-6); --subj-deep: var(--seq-6-deep); --subj-rgb: var(--seq-6-rgb); }
  .subj-card.subj-social { --subj-hc: var(--seq-7); --subj-deep: var(--seq-7-deep); --subj-rgb: var(--seq-7-rgb); }
  .subj-card.subj-life { --subj-hc: var(--seq-8); --subj-deep: var(--seq-8-deep); --subj-rgb: var(--seq-8-rgb); }
  .subj-card.subj-other { --subj-hc: var(--seq-8); --subj-deep: var(--seq-8-deep); --subj-rgb: var(--seq-8-rgb); }

  #recent-body .saved-subject-card[class*="subj-"],
  #ev-body .eval-subject-card[class*="subj-"] {
    box-shadow: inset 0 3px 0 rgba(var(--subj-rgb), .72), var(--vision-shadow-sm) !important;
  }

  #recent-body .saved-subject-card[class*="subj-"] .subj-ic,
  #ev-body .eval-subject-card[class*="subj-"] .subj-ic {
    color: var(--subj-hc);
    background: rgba(var(--subj-rgb), .11);
  }

  #recent-body .saved-subject-card[class*="subj-"] .subj-nm,
  #ev-body .eval-subject-card[class*="subj-"] .subj-nm,
  #recent-body .saved-subject-card[class*="subj-"] .saved-subj-go,
  #ev-body .eval-subject-card[class*="subj-"] .saved-subj-go {
    color: var(--subj-deep);
  }

  #recent-body .saved-subject-card[class*="subj-"] .saved-subj-go,
  #ev-body .eval-subject-card[class*="subj-"] .saved-subj-go {
    background: rgba(var(--subj-rgb), .10);
  }

  /* Neutral overview categories use the sequence; status categories keep their semantics. */
  #recent-body .saved-overview-kpi.subjects { border-top-color: var(--seq-1); }
  #recent-body .saved-overview-kpi.classes { border-top-color: var(--seq-2); }
  #recent-body .saved-overview-kpi.lessons { border-top-color: var(--seq-3); }
  #recent-body .saved-overview-kpi.plans { border-top-color: var(--seq-4); }
  #recent-body .saved-overview-kpi.eval { border-top-color: var(--seq-5); }

  #ev-body .saved-overview-kpi.subjects { border-top-color: var(--seq-1); }
  #ev-body .saved-overview-kpi.classes { border-top-color: var(--seq-2); }
  #ev-body .saved-overview-kpi.lessons { border-top-color: var(--seq-3); }
}