/* ============================================================================
 * components/buttons.css — גרסת רענון (v2)  ·  9 המחלקות הגלובליות
 * ----------------------------------------------------------------------------
 * שמות המחלקות לא השתנו (btn-primary / -secondary / -cancel / -danger /
 * -success / -export / -icon / close-btn) — שינוי המראה כאן בלבד, אפס overrides.
 *
 * עקרון ההיררכיה (הפתרון ל"עודף כפתורים / עודף צבעוניות"):
 *   • מילוי מלא = הדגשה. רק פעולה אחת ראשית במסך אמורה להיות btn-primary מלא.
 *   • פעולות משניות = טונליות שקטות (btn-secondary) או שקופות (btn-cancel).
 *   • הרסני = btn-danger מלא רק ל-confirm סופי; בטולברים העדיפו btn-icon שקט.
 *   • ייצוא = קבוצה ניטרלית אחת; הרמז הצבעוני עבר מהמסגרת אל האייקון הקטן.
 *   • כולם באותו גובה (36px), אותו radius, אותה טבעת focus נגישה.
 * ============================================================================ */
/* Updated: 2026-08-01 IL */

/* ── בסיס משותף ─────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-cancel,
.btn-danger,
.btn-success,
.btn-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0 0.95rem;
    border-radius: var(--radius-md);
    font: var(--fw-semibold) var(--text-md)/1 var(--font-body);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .04s;
    user-select: none;
    white-space: nowrap;
}

/* focus נגיש אחיד לכל הסוגים (תקנות נגישות) */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-cancel:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible,
.btn-export:focus-visible,
.btn-icon:focus-visible,
.close-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.btn-primary:active,
.btn-secondary:active,
.btn-cancel:active,
.btn-danger:active,
.btn-success:active,
.btn-export:active { transform: translateY(1px); }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-cancel:disabled,
.btn-danger:disabled,
.btn-success:disabled,
.btn-export:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* TAK-574 DT8 / D-13: same disabled LOOK for a control that must stay real
 * (native `disabled` pulls it out of the tab order and silences its
 * aria-describedby — unusable for AC-18's "reason exposed to assistive
 * technology" requirement). Pair with aria-disabled="true", never :disabled. */
.btn-primary.is-blocked,
.btn-secondary.is-blocked,
.btn-cancel.is-blocked,
.btn-danger.is-blocked,
.btn-success.is-blocked,
.btn-export.is-blocked,
.btn-icon.is-blocked,
.btn-danger-sm.is-blocked { opacity: .5; cursor: not-allowed; transform: none; }

/* TAK-1105 C2: the dimmed variant of macros/module_control.html (a span, not
 * a link or button) and any JS-built dimmed control using the same classes.
 * Same disabled look as above. The side menu has its own .is-locked rules in
 * _app_shell.css, so its app-nav-* elements are excluded. */
.is-locked[aria-disabled="true"]:not([class*="app-nav"]) { opacity: .5; cursor: not-allowed; }


/* ── btn-primary — פעולה ראשית (מילוי navy). ההדגשה היחידה במסך ──────────── */
.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover:not(:disabled):not(.is-blocked) { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }


/* ── btn-secondary — פעולה משנית (טונלי ניטרלי, ללא צבע מותג) ────────────── */
.btn-secondary {
    background: var(--ink-100);
    color: var(--ink-700);
    border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--ink-200); }


/* ── btn-cancel — ביטול / סגירה (שקוף, הכי שקט) ─────────────────────────── */
.btn-cancel {
    background: transparent;
    color: var(--ink-600);
    border-color: var(--border-strong);
}
.btn-cancel:hover:not(:disabled) { background: var(--ink-100); color: var(--ink-800); }


/* ── btn-danger — הרסני. מלא רק ל-confirm סופי; מרוסן ב-AA ───────────────── */
.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) { background: var(--color-danger-dark); border-color: var(--color-danger-dark); }
/* וריאנט שקט לפעולות הרסניות משניות בטולבר (אותה מחלקה + modifier קיים אם צריך) */
.btn-danger.btn-quiet {
    background: transparent;
    color: var(--color-danger-text);
    border-color: var(--ink-300);
}
.btn-danger.btn-quiet:hover:not(:disabled) { background: var(--color-danger-bg); border-color: var(--color-danger); }


/* ── btn-success — אישור / החלה / פרסום (ירוק מרוסן, שימוש נדיר) ─────────── */
.btn-success {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}
.btn-success:hover:not(:disabled) { background: var(--color-success); border-color: var(--color-success); }


/* ── btn-icon — כפתור אייקון בתאי טבלה. רקע hover עדין ──────────────────── */
.btn-icon {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    color: var(--ink-500);
    transition: background .15s, color .15s, border-color .15s;
}
.btn-icon:hover { background: var(--ink-100); color: var(--ink-800); }
.btn-icon.is-danger:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }


/* ── close-btn — ✕ בפינת מודאל (על header כהה) ──────────────────────────── */
.close-btn {
    /* rule-exempt: css-light-literal — sits on the gradient modal header band (any of the gradient-blue/green/red/purple/yellow variants), which stays the same colour in both themes; a solid token would clash with whichever gradient colour is active (TAK-984) */
    background: rgba(255,255,255,.16);
    border: none;
    color: #fff;
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.1rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0;
    transition: background .15s;
}
/* rule-exempt: css-light-literal — same gradient-header rationale as .close-btn above (TAK-984) */
.close-btn:hover { background: rgba(255,255,255,.3); }


/* ── btn-export — קבוצת ייצוא ניטרלית. הרמז הצבעוני = אייקון בלבד ────────── */
.btn-export {
    background: var(--surface);
    color: var(--ink-700);
    border-color: var(--border-strong);
}
.btn-export:hover:not(:disabled) { background: var(--ink-50); border-color: var(--ink-400); }
/* כשמסדרים אותם ברצף — מראה של segmented group נקי */
.btn-export-group { display: inline-flex; gap: 0; }
.btn-export-group .btn-export { border-radius: 0; margin-inline-start: -1px; }
.btn-export-group .btn-export:first-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.btn-export-group .btn-export:last-child  { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); margin-inline-start: 0; }

/* הרמז הצבעוני עבר מהמסגרת לאייקון — אפס "קשת בענן" של מסגרות */
.btn-export-pdf   .ico { color: var(--color-danger-text); display: inline-flex; }
.btn-export-excel .ico { color: var(--color-success-text); display: inline-flex; }
.btn-export-word  .ico { color: var(--brand-primary-hover-text); display: inline-flex; }
.btn-export .ico svg { width: 14px; height: 14px; }


/* ── טולבר דוח — פריסת flex עם פעולה ראשית מובילה ───────────────────────── */
.rpt-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    padding: var(--sp-md) var(--sp-lg);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.rpt-toolbar__lead { display: inline-flex; align-items: center; gap: var(--sp-sm); }
.rpt-toolbar__spacer { flex: 1 1 auto; min-width: var(--sp-md); }


/* ── overflow menu — תפריט «עוד» ────────────────────────────────────────── */
.ovf { position: relative; display: inline-block; }
.ovf__trigger { min-width: 36px; padding: 0; font-size: 1.1rem; font-weight: 700; line-height: 1; }
.ovf__menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
    /* TAK-225: the open menu is re-positioned to position:fixed in JS (shared
       TAK-223 helper) so it escapes the .fw-group{overflow:hidden} ancestor.
       Once fixed it must sit above the framework cards/headers/nav, so it uses
       the same stacking layer as .cell-actions-popup (5500). Scoped: .ovf is
       used only on the framework-management screen. */
    z-index: 5500;
}
.ovf.is-open .ovf__menu { display: block; }
.ovf__item {
    display: block;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font: var(--fw-medium) var(--text-base) var(--font-body);
    color: var(--ink-700);
    cursor: pointer;
}
.ovf__item:hover { background: var(--ink-100); color: var(--ink-900); }
.ovf__item--danger { color: var(--color-danger-text); }
.ovf__item--danger:hover { background: var(--color-danger-bg); }