/* ============================================================================
   FADEZEN · Barber Dashboard
   הצד השני של האפליקציה — מה שהספר רואה: שידור חי, תור, פרופיל.
   ========================================================================= */

.dash__head{ display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.dash__title{ font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); }
.dash__sub{ font-size: var(--t-xs); color: var(--ink-2); }

.dash__tabs{ margin-bottom: var(--s-4); }

/* ---------------------------------------------------------------- go live */
.golive{
  position: relative; overflow: hidden;
  padding: var(--s-4); border-radius: var(--r-lg);
  background: linear-gradient(140deg, rgba(0,229,255,.1), rgba(0,230,118,.05));
  border: 1px solid var(--line);
  transition: background var(--d-4), border-color var(--d-4);
}
.golive.is-live{
  background: linear-gradient(140deg, rgba(0,230,118,.22), rgba(0,229,255,.07));
  border-color: rgba(0,230,118,.42);
}
.golive::after{
  content: ""; position: absolute; inset-inline-end: -50px; top: -50px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,230,118,.3), transparent 70%);
  opacity: 0; transition: opacity var(--d-5); pointer-events: none;
}
.golive.is-live::after{ opacity: 1; }
.golive__row{ position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-3); }
.golive__row h3{ font-size: var(--t-lg); }
.golive__hint{ font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; }
/* רשת ולא flex-wrap: ארבע הגלולות נשברו ל-3+1 והשורה השנייה
   נראתה כמו תקלה. שתיים בשורה יוצא סימטרי בכל רוחב. */
.golive__waits{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-2); margin-top: var(--s-3);
}
@media (min-width: 520px){ .golive__waits{ grid-template-columns: repeat(4, 1fr); } }

.waitpill{ text-align: center;
  padding: 7px var(--s-3); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  transition: background var(--d-2), border-color var(--d-2), color var(--d-2), transform var(--d-1) var(--ease-out);
}
.waitpill:active{ transform: scale(.94); }
.waitpill.is-on{ background: rgba(0,230,118,.2); border-color: rgba(0,230,118,.55); color: var(--live-ink); }

/* ------------------------------------------------------------------ stats */
.stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.stat{
  padding: var(--s-3) var(--s-2); border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  text-align: center;
}
.stat b{ display: block; font-family: var(--font-display); font-size: var(--t-xl); font-weight: 900; font-variant-numeric: tabular-nums; }
.stat span{ font-size: var(--t-2xs); color: var(--ink-3); }

/* גרף שבועי */
.weekchart{ padding: var(--s-4); border-radius: var(--r-md); background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.weekchart__bars{ display: flex; align-items: flex-end; gap: var(--s-2); height: 108px; }
.weekchart__col{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); height: 100%; justify-content: flex-end; }
.weekchart__bar{
  width: 100%; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, rgba(0,229,255,.85), rgba(0,229,255,.22));
  transform-origin: bottom;
  animation: bz-grow var(--d-5) var(--ease-out) backwards;
}
.weekchart__col.is-today .weekchart__bar{ background: linear-gradient(180deg, var(--live), rgba(0,230,118,.28)); }
.weekchart__col span{ font-size: var(--t-2xs); color: var(--ink-3); }
.weekchart__col.is-today span{ color: var(--live); font-weight: 700; }

/* ------------------------------------------------------------------ queue */
.queue{ display: flex; flex-direction: column; gap: var(--s-2); }
.qitem{
  padding: var(--s-3); border-radius: var(--r-md);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  animation: bz-rise var(--d-3) var(--ease-out) backwards;
}
.qitem.is-new{ border-color: rgba(0,229,255,.38); background: var(--nav-dim); }
.qitem.is-done{ opacity: .5; }
.qitem__top{ display: flex; align-items: center; gap: var(--s-2); }
.qitem__name{ font-weight: 700; font-size: var(--t-md); }
.qitem__meta{ font-size: var(--t-xs); color: var(--ink-3); }
.qitem__acts{ display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.qitem__acts .btn{ height: 38px; font-size: var(--t-sm); border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ inbox */
.inbox{ display: flex; flex-direction: column; gap: var(--s-2); }
.ithread{
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md); text-align: start;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  transition: background var(--d-2);
}
.ithread:hover{ background: rgba(255,255,255,.08); }
.ithread__name{ display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--t-md); }
.ithread__last{ font-size: var(--t-sm); color: var(--ink-3); }
.ithread__time{ align-self: flex-start; font-size: var(--t-2xs); color: var(--ink-3); flex: none; }
.badge{
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--nav); color: var(--ink-on-nav);
  font-size: var(--t-2xs); font-weight: 900;
}

/* -------------------------------------------------------- profile editing */
.pricerow{
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  margin-bottom: var(--s-2);
}
.pricerow__name{ flex: 1; min-width: 0; font-size: var(--t-md); }
.pricerow .input{ width: 92px; height: 38px; text-align: center; font-weight: 700; color: var(--live); padding: 0 var(--s-2); }

/* --- לוגו המספרה --- */
.logoedit{ display: flex; align-items: center; gap: var(--s-4); }
.logoedit__prev{
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: var(--r-3);
  overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line); display: grid; place-items: center;
}
.logoedit__prev img{ width: 100%; height: 100%; object-fit: cover; }
.logoedit__acts{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.logoedit__acts .hint{ flex: 1 0 100%; margin: 0; }

.galedit{ display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: var(--s-2); }
.galedit__cell{
  position: relative; aspect-ratio: 3 / 4;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--c-surface-2);
  animation: bz-pop var(--d-3) var(--ease-spring) backwards;
}
.galedit__cell img{ width: 100%; height: 100%; object-fit: cover; }
.galedit__del{
  position: absolute; top: 4px; inset-inline-end: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.7); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.galedit__add{
  display: grid; place-items: center; align-content: center; gap: 3px;
  border-style: dashed; border-color: var(--line-strong);
  color: var(--ink-3); font-size: var(--t-xs);
  transition: background var(--d-2), color var(--d-2);
}
.galedit__add:hover{ background: rgba(255,255,255,.05); color: var(--ink-2); }

.hourrow{
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  margin-bottom: var(--s-2);
}
.hourrow__day{ width: 44px; font-size: var(--t-sm); font-weight: 700; flex: none; }
.hourrow .input{ width: 78px; height: 36px; text-align: center; padding: 0; font-variant-numeric: tabular-nums; }
.hourrow__sep{ color: var(--ink-4); }
.hourrow__off{ margin-inline-start: auto; }
.hourrow.is-closed .input{ opacity: .35; pointer-events: none; }

/* ======================================================== עמוד ספָּרים
   חיווי בכרטיס "פנוי עכשיו": מסתובב וצבעוני כשהמספרה פתוחה, עומד ודהוי
   כשהיא סגורה. פריט ראשון בשורה, כמו אייקון — ולא שכבה מעל הכרטיס.

   מצויר ב-CSS ולא בתלת-ממד. בגודל הזה המודל האמיתי התפורר לנקודות
   מנצנצות — הפסים הלוליינים צפופים מכדי להיקלט ב-66 פיקסלים — והוא גם
   גרר ספרייה ומודל של כמיליון וחצי בייט בשביל אייקון. כאן אין תמונה
   בכלל: הפסים הם גרדיאנט חוזר, ולכן חדים בכל צפיפות מסך.

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

.bpole{
  flex: none;
  width: 30px;
  height: 92px;
  margin-inline-start: 2px;
  position: relative;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* כבוי: אפור וכהה. דלוק: צבע מלא. חלק מהמשוב על המתג. */
  filter: grayscale(.9) brightness(.62);
  opacity: .65;
  transition: filter var(--d-4) var(--ease-out), opacity var(--d-4);
}
.bpole.is-live{ filter: none; opacity: 1; }

/* הגלובוס שבראש העמוד */
.bpole__globe{
  width: 13px; height: 13px;
  border-radius: 50%;
  /* גלובוס לבן, כמו במקור. הירוק נשאר להילה בלבד — היא זו שאומרת
     "פתוח", וגם היא נעלמת כשהמספרה סגורה. */
  background: radial-gradient(circle at 34% 30%, #ffffff, #eef3f6 58%, #b9c6d0);
  flex: none;
}
.bpole.is-live .bpole__globe{
  box-shadow: 0 0 9px rgba(0,230,118,.75), 0 0 20px rgba(0,230,118,.35);
}

/* טבעות הפלדה שסוגרות את הזכוכית מלמעלה ומלמטה */
.bpole__cap{
  width: 26px; height: 7px;
  flex: none;
  border-radius: 3px;
  background: linear-gradient(180deg, #9fb0bd, #5b6b78 45%, #38454f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.bpole__cap--foot{ background: linear-gradient(0deg, #9fb0bd, #5b6b78 45%, #38454f); }

.bpole__base{
  width: 20px; height: 5px;
  flex: none;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #4a5862, #2b353d);
}

/* הזכוכית — הפסים בפנים, הברק מעליהם */
.bpole__glass{
  position: relative;
  width: 22px;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 2px;
  background: #0a0f14;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}
.bpole__glass i{
  position: absolute;
  /* גבוה מהמיכל: ההזזה האנכית חייבת חומר מעל ומתחת כדי לא לחשוף קצה */
  inset: -50% 0;
  /* אדום־לבן־כחול, כמו עמוד ספָּרים אמיתי. ניסיתי פעם אחת בצבעי המותג
     (ירוק־כחול) וזה הפסיק להיראות כמו עמוד ספָּרים — הצבעים האלה הם
     הסימן עצמו. החיווי של "פתוח/סגור" נשען על העמעום, לא על הגוון. */
  background: repeating-linear-gradient(
    -52deg,
    #E0342F   0px,  #E0342F   5px,
    #F4F7F9   5px,  #F4F7F9  10px,
    #2350C8  10px,  #2350C8  15px,
    #F4F7F9  15px,  #F4F7F9  20px
  );
  animation: bpole-spin 2.6s linear infinite;
  animation-play-state: paused;
}
.bpole.is-live .bpole__glass i{ animation-play-state: running; }

/* 20px הוא בדיוק מחזור אחד של הגרדיאנט, ולכן הלולאה לא קופצת */
@keyframes bpole-spin{ to { transform: translateY(20px); } }

/* ברק הזכוכית — פס אור אנכי שמסגיר שהמשטח קמור */
.bpole__glass::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.42) 0%,
      rgba(255,255,255,.30) 26%,
      rgba(255,255,255,.05) 46%,
      rgba(0,0,0,.30) 78%,
      rgba(0,0,0,.5) 100%);
  pointer-events: none;
}

/* מסך צר — הכותרת חשובה יותר מהקישוט */
@media (max-width: 380px){
  .bpole{ display: none; }
}

/* מי שביקש פחות תנועה מקבל עמוד סטטי — אבל עדיין מקבל את החיווי,
   כי הצבע והעמעום נושאים את המידע גם בלי האנימציה. */
@media (prefers-reduced-motion: reduce){
  .bpole__glass i{ animation: none !important; }
}

/* ------------------------------------------------- היסטוריית תורים */
.histbtn{
  width: 100%; margin-top: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-md);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; text-align: start;
  transition: color var(--d-2), border-color var(--d-2), background var(--d-2);
}
.histbtn:hover{ color: var(--ink-1); border-color: var(--line-strong); }
.histbtn.is-open{ color: var(--ink-1); border-radius: var(--r-md) var(--r-md) 0 0; }
.histbtn__n{
  flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,.09); color: var(--ink-1);
  font-size: var(--t-2xs); text-align: center;
}
.histbtn__chev{ flex: none; display: grid; transition: transform var(--d-2) var(--ease-out); }
.histbtn.is-open .histbtn__chev{ transform: rotate(180deg); }

.hist{
  display: grid; gap: 1px;
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
  animation: bz-rise var(--d-3) var(--ease-out) backwards;
}
.hitem{
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  background: rgba(255,255,255,.025);
}
/* תור שהתקיים בפועל הוא הישג ולא כישלון — הוא לא מעומעם כמו ביטול */
.hitem--off{ opacity: .62; }
.hitem .grow{ min-width: 0; }
.hitem__name{ display: block; font-size: var(--t-sm); font-weight: 700; }
.hitem__when{ display: block; font-size: var(--t-2xs); color: var(--ink-1); margin-top: 1px; }
.hitem__svc{
  display: block; font-size: var(--t-2xs); color: var(--ink-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hitem .tag{ flex: none; }

/* ------------------------------------------------- עריכת המחירון */
/* שתי משבצות מספר צרות (מחיר, דקות) + פח. השם מקבל את מה שנשאר.
   הסלקטור כפול בכוונה: ל-.pricerow .input שלמעלה יש רוחב 92px
   וספציפיות זהה, ובשורה אחת הוא היה מנצח ודוחס את השם לשתי שורות. */
.pricerow{ gap: var(--s-2); }
.pricerow__name{ font-size: var(--t-sm); line-height: 1.25; }

/* המספר והיחידה בתוך אותה מסגרת, כדי שייקראו כערך אחד: "80 ₪".
   היחידה היא span ולא suffix על ה-input, כי input[type=number]
   לא מאפשר תוכן נוסף בתוכו. */
.numbox{
  flex: none; position: relative; display: inline-flex; align-items: center;
}
.pricerow .numbox .pricerow__num{
  width: 78px; text-align: start;
  padding-inline: var(--s-2) 26px;   /* מקום ליחידה בקצה */
}
.numbox__u{
  position: absolute; inset-inline-end: 8px;
  font-size: var(--t-2xs); font-weight: 600; color: var(--ink-3);
  pointer-events: none;
}
.pricerow__del{
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-3);
  background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: color var(--d-2), background var(--d-2), border-color var(--d-2);
}
.pricerow__del:hover{ color: var(--busy-ink); background: var(--busy-dim); border-color: rgba(255,82,82,.3); }
.pricerow__del.is-off{ opacity: .22; cursor: default; }

.svcadd{ display: flex; gap: var(--s-2); margin-top: var(--s-3); }

.svcpick{
  display: grid; gap: 1px; margin-top: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  animation: bz-rise var(--d-3) var(--ease-out) backwards;
  max-height: 340px; overflow-y: auto;
}
.svcpick__it{
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); text-align: start; cursor: pointer;
  background: rgba(255,255,255,.025); border: 0; color: inherit;
  transition: background var(--d-2);
}
.svcpick__it:hover{ background: rgba(0,229,255,.10); }
.svcpick__it .grow{ min-width: 0; }
.svcpick__it b{ font-size: var(--t-sm); }
.svcpick__meta{ flex: none; font-size: var(--t-2xs); color: var(--ink-2); }

@media (max-width: 420px){
  .pricerow .numbox .pricerow__num{ width: 66px; padding-inline: 6px 22px; }
  .numbox__u{ inset-inline-end: 5px; }
  .svcadd{ flex-direction: column; }
}