/* ============ SHC Action Loader — לואדר פעולות אחיד ============ */
/* אוברליי חוסם עם גרף עמודות תקציבי + התווית "טוען נתונים". נטען מ-action-loader.js. */

.action-loader {
    position: fixed;
    inset: 0;
    /* מעל modal-content (10001) — הלואדר תמיד השכבה העליונה וגם חוסם קליקים */
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    direction: rtl;
    background: rgba(248, 250, 252, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: al-fade-in 0.2s ease;
}

.action-loader[hidden] {
    display: none;
}

.action-loader--closing {
    animation: al-fade-out 0.18s ease forwards;
}

/* ── הסימן שנבנה ─────────────────────────────────────────────────────────────
   הגרף הכללי הוחלף בסימן המערכת עצמו, מפורק לתשעה חלקים. מחזור אחד של
   2.4 שניות מספר את מסלול הרכש: הטבעת נסגרת, הדף נפתח, שתי שורות הבקשה
   נכתבות, ארבע העמודות נמדדות, והווי מאשר. כל החלקים חולקים מחזור אחד
   ולכן נשארים מסונכרנים בלולאה.

   הטבעת והווי הם צורות מלאות ולא קווים, ולכן אי אפשר לצייר אותם ישירות
   עם stroke-dashoffset; במקום זה כל אחד נחשף דרך מסכה שקו לבן נמתח
   לאורך מרכזה, כך שהצורה הסופית נשארת בדיוק הלוגו. */
.action-loader__chart {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74px;
}

.action-loader__chart .pm { width: 78px; height: 75px; display: block; overflow: visible; }
.pm-doc, .pm-line, .pm-bar { opacity: 0; }
.pm-line { transform-box: fill-box; transform-origin: right center; }
.pm-bar  { transform-box: fill-box; transform-origin: 50% 100%; }

.pm-anim .pm-ring-sweep  { animation: pm-ring  2.4s linear infinite; }
.pm-anim .pm-doc         { animation: pm-doc   2.4s ease-out infinite; }
.pm-anim .pm-line        { animation: pm-line  2.4s ease-out infinite; animation-delay: calc(var(--i) * 0.11s); }
.pm-anim .pm-bar         { animation: pm-bar   2.4s cubic-bezier(0.34, 1.5, 0.6, 1) infinite; animation-delay: calc(var(--i) * 0.09s); }
.pm-anim .pm-check-sweep { animation: pm-check 2.4s linear infinite; }

@keyframes pm-ring {
    0%        { stroke-dashoffset: 1000; }
    25%, 84%  { stroke-dashoffset: 0; }
    93%, 100% { stroke-dashoffset: 1000; }
}
@keyframes pm-doc {
    0%, 17%   { opacity: 0; }
    27%, 84%  { opacity: 1; }
    93%, 100% { opacity: 0; }
}
@keyframes pm-line {
    0%, 26%   { opacity: 0; transform: scaleX(0); }
    36%, 84%  { opacity: 1; transform: scaleX(1); }
    93%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes pm-bar {
    0%, 37%   { opacity: 0; transform: scaleY(0); }
    50%, 84%  { opacity: 1; transform: scaleY(1); }
    93%, 100% { opacity: 0; transform: scaleY(1); }
}
@keyframes pm-check {
    0%, 58%   { stroke-dashoffset: 1000; }
    74%, 84%  { stroke-dashoffset: 0; }
    93%, 100% { stroke-dashoffset: 1000; }
}

.action-loader__label {
    font-family: "Heebo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

/* מד התקדמות אמיתי — נחשף רק בהעלאות עם אחוזים (setProgress) */
.action-loader__meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -6px;
}

.action-loader__meter[hidden] {
    display: none;
}

.action-loader__meter-track {
    width: 160px;
    height: 5px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.action-loader__meter-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    transition: width 0.25s ease;
}

.action-loader__pct {
    font-family: "Heebo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #2563eb;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: left;
}

    82%  { transform: scaleY(1);   opacity: 1; }
    100% { transform: scaleY(0.1); opacity: 0.35; }
}

@keyframes al-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes al-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* תחת reduced-motion: העמודות קפואות בגובה מלא, בלי אנימציה */
@media (prefers-reduced-motion: reduce) {
    /* בלי ציור ובלי תנועה — הסימן עומד שלם ורק נושם, כדי שעדיין יהיה
       סימן חיים שהמערכת עובדת. לואדר שדבר לא זז בו נקרא כמערכת תקועה. */
    .pm-anim .pm-ring-sweep,
    .pm-anim .pm-check-sweep { stroke-dashoffset: 0 !important; animation: none !important; }
    .pm-anim .pm-doc,
    .pm-anim .pm-line,
    .pm-anim .pm-bar { opacity: 1 !important; transform: none !important; animation: none !important; }
    .action-loader__chart .pm-anim { animation: pm-breathe 2.6s ease-in-out infinite !important; }
}
@keyframes pm-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
}