/* البطاقات الملونة: لكل قسم لونه من النسخة السابقة، وحلقات موجات الصوت هويتها، على الشاشة فقط (الطباعة تبقى محايدة) */
@media screen {
  .homecard, .tilecard {
    --hue: var(--primary);
    --tint: 9%;
    position: relative; overflow: hidden; isolation: isolate;
    background: color-mix(in srgb, var(--hue) var(--tint), var(--card));
    border-color: color-mix(in srgb, var(--hue) 26%, var(--line));
    transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease;
  }
  .homecard:hover, .tilecard:hover {
    background: color-mix(in srgb, var(--hue) var(--tint), var(--card));
    border-color: color-mix(in srgb, var(--hue) 55%, var(--line));
  }

  /* ألوان الأقسام */
  .hc-children { --hue: #0d9488; } .hc-schedule { --hue: #ea580c; } .hc-attendance { --hue: #16a34a; }
  .hc-subscriptions { --hue: #4f46e5; } .hc-transport { --hue: #b45309; } .hc-messages { --hue: #0284c7; }
  .hc-bookings { --hue: #e11d48; } .hc-records { --hue: #7c3aed; } .hc-approvals { --hue: #dc2626; }
  .hc-employees { --hue: #2563eb; } .hc-finance { --hue: #047857; } .hc-settings { --hue: #64748b; }

  /* بطاقات الأقسام الفرعية: دورة ثابتة من نفس الألوان */
  .tilecard:nth-child(6n+1) { --hue: #0d9488; } .tilecard:nth-child(6n+2) { --hue: #4f46e5; }
  .tilecard:nth-child(6n+3) { --hue: #ea580c; } .tilecard:nth-child(6n+4) { --hue: #0284c7; }
  .tilecard:nth-child(6n+5) { --hue: #7c3aed; } .tilecard:nth-child(6n+6) { --hue: #e11d48; }

  .homecard .tile-ic, .tilecard .tile-ic {
    width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center;
    background: var(--hue); color: #fff;
    transition: transform 200ms var(--ease-out);
  }
  .tilecard .tile-ic { width: 38px; height: 38px; border-radius: 10px; }
  .homecard .desc, .tilecard .d { color: var(--ink-2); }

  /* حلقات موجات الصوت في زاوية البطاقة */
  .homecard::after, .tilecard::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset-inline-end: -26px; inset-block-start: -26px; width: 64px; height: 64px; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--hue) 28%, transparent);
    box-shadow:
      0 0 0 13px color-mix(in srgb, var(--hue) 8%, transparent),
      0 0 0 28px color-mix(in srgb, var(--hue) 5%, transparent);
    transition: transform 320ms var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .homecard:hover, .tilecard:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--hue) 70%, transparent);
    }
    .homecard:hover .tile-ic, .tilecard:hover .tile-ic { transform: rotate(-6deg) scale(1.06); }
    .homecard:hover::after, .tilecard:hover::after { transform: scale(1.35); }
    .homecard:hover .go { color: var(--hue); }
  }
  .homecard:active, .tilecard:active { transform: scale(.98); box-shadow: none; }

  /* بطاقة الإضافة تبقى منقطة */
  .tilecard.tile-add, .tilecard.set-add {
    background: transparent; border-style: dashed;
  }
  .tilecard.tile-add::after, .tilecard.set-add::after { content: none; }
  .tilecard.tile-add .tile-ic, .tilecard.set-add .tile-ic {
    background: color-mix(in srgb, var(--hue) 14%, transparent); color: var(--hue);
  }

  /* بطاقات الأرقام */
  .statgrid { gap: var(--s3); background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .stat {
    --hue: #0d9488;
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--radius); padding: 14px var(--s4);
    background: color-mix(in srgb, var(--hue) 9%, var(--card));
    border: 1px solid color-mix(in srgb, var(--hue) 26%, var(--line));
  }
  .stat::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset-inline-end: -22px; inset-block-end: -22px; width: 54px; height: 54px; border-radius: 50%;
    box-shadow:
      0 0 0 11px color-mix(in srgb, var(--hue) 8%, transparent),
      0 0 0 24px color-mix(in srgb, var(--hue) 5%, transparent);
  }
  .stat:nth-child(5n+2) { --hue: #4f46e5; } .stat:nth-child(5n+3) { --hue: #ea580c; }
  .stat:nth-child(5n+4) { --hue: #0284c7; } .stat:nth-child(5n+5) { --hue: #7c3aed; }
  .now-stats .stat:hover { background: color-mix(in srgb, var(--hue) 15%, var(--card)); }

  /* دخول متدرج مرة واحدة عند فتح الصفحة، ولا يعيق الضغط */
  @keyframes cardin { from { opacity: 0; transform: translateY(10px); } }
  .homegrid > .homecard, .cardgrid > .tilecard, .statgrid > .stat { animation: cardin 300ms var(--ease-out) backwards; }
  .homegrid > :nth-child(2), .cardgrid > :nth-child(2), .statgrid > :nth-child(2) { animation-delay: 40ms; }
  .homegrid > :nth-child(3), .cardgrid > :nth-child(3), .statgrid > :nth-child(3) { animation-delay: 80ms; }
  .homegrid > :nth-child(4), .cardgrid > :nth-child(4), .statgrid > :nth-child(4) { animation-delay: 120ms; }
  .homegrid > :nth-child(5), .cardgrid > :nth-child(5), .statgrid > :nth-child(5) { animation-delay: 160ms; }
  .homegrid > :nth-child(6), .cardgrid > :nth-child(6) { animation-delay: 200ms; }
  .homegrid > :nth-child(n+7), .cardgrid > :nth-child(n+7) { animation-delay: 240ms; }
}

/* الوضع الداكن: صبغة أقوى ليبقى اللون ظاهراً */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .homecard, :root:not([data-theme="light"]) .tilecard { --tint: 16%; }
  :root:not([data-theme="light"]) .stat { background: color-mix(in srgb, var(--hue) 16%, var(--card)); }
  :root:not([data-theme="light"]) .homecard:hover .go { color: color-mix(in srgb, var(--hue) 55%, #fff); }
}
@media screen {
  :root[data-theme="dark"] .homecard, :root[data-theme="dark"] .tilecard { --tint: 16%; }
  :root[data-theme="dark"] .stat { background: color-mix(in srgb, var(--hue) 16%, var(--card)); }
  :root[data-theme="dark"] .homecard:hover .go { color: color-mix(in srgb, var(--hue) 55%, #fff); }
}

/* تقليل الحركة: تبقى الألوان وتزول كل إزاحة */
@media (prefers-reduced-motion: reduce) {
  .homegrid > .homecard, .cardgrid > .tilecard, .statgrid > .stat { animation: none !important; }
  .homecard:hover, .tilecard:hover, .homecard:active, .tilecard:active,
  .homecard:hover .tile-ic, .tilecard:hover .tile-ic, .homecard:hover::after, .tilecard:hover::after { transform: none !important; }
}

/* الهاتف: البطاقة أهدأ والأرقام بعمودين */
@media (max-width: 760px) {
  .statgrid { gap: var(--s2); }
}