/* ==========================================================================
   AdminIcon — Tickchak Live
   Figma: "AdminIcon" (UO0nhgcl5YIqYS16vYOXAE) node 306:9712
   Required: tokens.css

   ── שני צירים (פיצול 16/07 — ראה ADR-017) ──────────────────────────────
     active: true  → עיגול טורקיז (--color-turquoise-400 #8eedff)   = דולק
             false → עיגול אפור   (--color-grays-600     #666666)   = כבוי
     state:  default · hover

   🔴 `active=false` הוא **כבוי, לא מושבת** — והוא **לחיץ**. זו בדיוק הלחיצה
      שמקדמת אירוע. אל תהפוך אותו ל-disabled. (המילה "disabled" בפיגמה הייתה
      שגויה ותוקנה; היא הייתה מפילה את הפיצ'ר בקוד.)

   ── icon: מתחלף ──────────────────────────────────────────────────────────
     עיפרון (fe:edit) · קבב · כוכב בולד. ה-SVG מקוריים מהפיגמה.

   Usage:
     <button class="admin-icon" aria-pressed="false">
       <span class="admin-icon__circle"><svg …/></span>
     </button>
     <button class="admin-icon is-active" aria-pressed="true"> … </button>

     עם סימן-שאלה (helpMark — כבוי בכרטיסי-אירוע, דולק בדף-המרכז):
     <button class="admin-icon admin-icon--help"> <span class="admin-icon__help">…</span> … </button>
   ========================================================================== */

.admin-icon{
  display:inline-flex;
  align-items:flex-start;justify-content:center;
  gap:var(--space-xs);                 /* 4 — פיגמה */
  padding:0;border:none;background:none;
  cursor:pointer;
  font-family:var(--font-family-live);
}

/* העיגול — 40×40, טורקיז כשדולק */
/* צבע-האייקון לפי ניגודיות — הכלל של ADR-006, מאומת בפיגמה:
     כבוי  → עיגול אפור #666666 (כהה)  → אייקון **לבן**   (כוכב 40633:135358)
     דולק → עיגול טורקיז #8eedff (בהיר) → אייקון **שחור**  (קבב  40633:146487)
   ה-color של העיגול הוא המקור; ה-SVG יורשים דרך currentColor. */
.admin-icon__circle{
  flex:none;
  width:var(--dim-10,40px);height:var(--dim-10,40px);
  border-radius:var(--border-radius-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--color-grays-600);        /* כבוי = ברירת-המחדל */
  color:var(--tl-color-text-default);       /* לבן — על האפור */
  /* מדוד מהנתון הגולמי: DROP_SHADOW offset y=4 · radius=6 · #000 25%.
     ⚠️ התרגום-לקוד של פיגמה נתן "0 4px 3px" — מחלקת-Tailwind מוכנה, לא הערך האמיתי. */
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
}
.admin-icon.is-active .admin-icon__circle{
  background:var(--color-turquoise-400);
  color:var(--tl-color-bg-base);            /* שחור — על הטורקיז */
}

/* האייקון שבתוך העיגול — 24×24, יורש צבע מהעיגול */
.admin-icon__circle > svg{
  display:block;
  width:var(--dim-6,24px);height:var(--dim-6,24px);
}
.admin-icon__circle > svg [fill="black"]{fill:currentColor;}
.admin-icon__circle > svg [stroke="black"]{stroke:currentColor;}

/* ── helpMark — סימן-שאלה 15×15 לצד העיגול ────────────────────────────────
   מיושר לראש (align-items:flex-start על ההורה) ורווח 4 — כמו בפיגמה 322:9756.
   🔑 **רק ברמת-הסליידר/הדף, לא על כרטיס-אירוע** (הכרעת אסף 16/07):
      "רק בסליידר או משהו אחר, אבל לא בתוך רכיב אירוע".
      סימן-השאלה הוא מה שמבדיל בין פקד ברמת-הדף לפקד על כרטיס. */
.admin-icon__help{
  flex:none;
  width:15px;height:15px;                /* פיגמה — לא טוקן */
  display:flex;align-items:center;justify-content:center;
  color:var(--tl-color-text-default);    /* לבן */
  pointer-events:none;
}
.admin-icon__help > svg{width:100%;height:100%;display:block;fill:currentColor;}

/* ── state=hover — טבעת לבנה 2 סביב העיגול (אסף עיצב בפיגמה, 16/07) ────────
   מדוד: stroke #ffffff · weight 2 · strokeAlign=OUTSIDE — כלומר העיגול נשאר 40
   והטבעת מוסיפה מסביב (סה"כ 44). לכן box-shadow ולא border: border היה מכווץ
   את התוכן פנימה ומזיז את האייקון.
   הרקע, האייקון והצל **לא** משתנים — רק הטבעת. עובד בשני מצבי active. */
.admin-icon__circle{transition:background .2s, color .2s, box-shadow .15s;}
.admin-icon:hover .admin-icon__circle,
.admin-icon:focus-visible .admin-icon__circle{
  box-shadow:0 0 0 2px var(--tl-color-border-default);
}
.admin-icon:focus{outline:none;}   /* הטבעת היא חיווי-המיקוד */