/* إشعارات الموقع كله — المدرسة والمنصة وبوابتا المعلم وولي الأمر.
   القالب: templates/_flashes.html، والسلوك: static/hk-flash.js.

   الخطأ والتنبيه بطاقةٌ في مكانها أعلى المحتوى تبقى حتى تُغلق.
   النجاح والمعلومة إشعارٌ عائم يُغلق نفسه بعد ست ثوانٍ؛ والخط السفلي يعدّ
   الوقت، ويتوقف ما دام المؤشر فوقه أو التركيز داخله.

   الألوان هنا لا تعتمد على رموز أي واجهة، لأن الملف يُحمَّل في أربع واجهات
   لكلٍّ منها رموزها. والوضع الليلي يتبع سمة الواجهة نفسها. */

:root {
  --hk-surface: #ffffff;
  --hk-ink: #0f1f33;
  --hk-muted: #5f6c7e;
  --hk-line: #e3e8ef;
  --hk-shadow: 0 1px 2px rgba(15, 31, 51, 0.06), 0 12px 30px -18px rgba(15, 31, 51, 0.35);
  --hk-float-shadow: 0 2px 6px rgba(6, 26, 49, 0.08), 0 22px 48px -18px rgba(6, 26, 49, 0.5);
  --hk-ok: #157a4f;   --hk-ok-soft: #e7f5ee;
  --hk-err: #b42318;  --hk-err-soft: #fdeeec;
  --hk-warn: #a15c07; --hk-warn-soft: #fdf3e2;
  --hk-info: #1f5189; --hk-info-soft: #eaf1fb;
  --hk-toast-top: 126px;
}

html[data-theme="dark"],
html[data-platform-theme="dark"],
html[data-gp-theme="dark"],
html[data-tp-theme="dark"] {
  --hk-surface: #0f1d2e;
  --hk-ink: #e9eef5;
  --hk-muted: #9aa8ba;
  --hk-line: #20344c;
  --hk-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 14px 32px -18px rgba(0, 0, 0, 0.7);
  --hk-float-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 22px 48px -16px rgba(0, 0, 0, 0.75);
  --hk-ok: #5fd29b;   --hk-ok-soft: rgba(95, 210, 155, 0.12);
  --hk-err: #ff8a80;  --hk-err-soft: rgba(255, 138, 128, 0.12);
  --hk-warn: #f0b35a; --hk-warn-soft: rgba(240, 179, 90, 0.12);
  --hk-info: #8fb7ee; --hk-info-soft: rgba(143, 183, 238, 0.12);
}

/* المنصة الليلية رمادية محايدة (platform-nova.css)، لا كحلية كالمدرسة */
html[data-platform-theme="dark"] {
  --hk-surface: #0f1117;
  --hk-line: #1f222b;
  --hk-muted: #9096a5;
}

html[data-platform-theme] { --hk-toast-top: 84px; }
html[data-gp-theme],
html[data-tp-theme] { --hk-toast-top: 16px; }

.hk-flash--success, .hk-toast--success { --hk-c: var(--hk-ok);   --hk-s: var(--hk-ok-soft); }
.hk-flash--error,   .hk-toast--error   { --hk-c: var(--hk-err);  --hk-s: var(--hk-err-soft); }
.hk-flash--warning, .hk-toast--warning { --hk-c: var(--hk-warn); --hk-s: var(--hk-warn-soft); }
.hk-flash--info,    .hk-toast--info    { --hk-c: var(--hk-info); --hk-s: var(--hk-info-soft); }

.hk-flash svg,
.hk-toast svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------ error / warning card */
.hk-flashes {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.hk-flash {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 30px;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  color: var(--hk-ink);
  border: 1px solid var(--hk-line);
  border-radius: 14px;
  background: var(--hk-surface);
  box-shadow: var(--hk-shadow);
  font-family: inherit;
  animation: hk-flash-in 0.28s ease-out both;
}

.hk-flash__icon,
.hk-toast__icon {
  display: grid;
  place-items: center;
  color: var(--hk-c);
  background: var(--hk-s);
}

.hk-flash__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hk-s) 55%, transparent);
}

.hk-flash__icon svg { width: 20px; height: 20px; }

.hk-flash__body strong,
.hk-toast__body strong {
  display: block;
  color: var(--hk-c);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.hk-flash__body p,
.hk-toast__body p {
  margin: 2px 0 0;
  color: var(--hk-ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.hk-flash__close,
.hk-toast__close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--hk-muted);
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.hk-flash__close:hover,
.hk-toast__close:hover { background: color-mix(in srgb, var(--hk-muted) 14%, transparent); color: var(--hk-ink); }
.hk-flash__close:focus-visible,
.hk-toast__close:focus-visible { outline: 2px solid var(--hk-c); outline-offset: 1px; }
.hk-flash__close svg,
.hk-toast__close svg { width: 15px; height: 15px; }

/* ------------------------------------------------ floating success / info */
.hk-toasts {
  position: fixed;
  z-index: 3100;
  top: var(--hk-toast-top);
  inset-inline-end: 20px;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}

.hk-toast {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: start;
  padding: 13px 14px 15px;
  overflow: hidden;
  color: var(--hk-ink);
  border: 1px solid var(--hk-line);
  border-inline-start: 4px solid var(--hk-c);
  border-radius: 12px;
  background: var(--hk-surface);
  box-shadow: var(--hk-float-shadow);
  font-family: inherit;
  pointer-events: auto;
  animation: hk-toast-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hk-toast__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.hk-toast__icon svg { width: 19px; height: 19px; }
.hk-toast__close { width: 28px; height: 28px; }

.hk-toast__timer {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--hk-s);
}

.hk-toast__timer::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 100%;
  background: var(--hk-c);
  transform-origin: var(--hk-origin, right);
  animation: hk-countdown var(--hk-timeout, 6s) linear forwards;
}

html[dir="ltr"] .hk-toast__timer::after { --hk-origin: left; }

.hk-toast:hover .hk-toast__timer::after,
.hk-toast:focus-within .hk-toast__timer::after { animation-play-state: paused; }

/* إشعار الخطأ من السكربت يبقى حتى يُغلق، فلا عدّاد له */
.hk-toast[data-persistent] .hk-toast__timer { display: none; }

.hk-flash.is-leaving,
.hk-toast.is-leaving {
  animation: hk-leave 0.22s ease-in forwards;
}

@keyframes hk-flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes hk-toast-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes hk-leave { to { opacity: 0; transform: translateY(-6px); } }
@keyframes hk-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .hk-flash, .hk-toast, .hk-flash.is-leaving, .hk-toast.is-leaving { animation-duration: 0.01s; }
}

@media (max-width: 640px) {
  .hk-toasts {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    inset-inline: 12px;
    width: auto;
  }
  html[data-gp-theme] .hk-toasts,
  html[data-tp-theme] .hk-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .hk-flash { grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 11px; padding: 12px 13px; }
  .hk-flash__icon { width: 34px; height: 34px; }
}

@media print {
  .hk-toasts, .hk-flash__close { display: none !important; }
}