/* ===================== NF-Dbase Control Panel =====================
   שכבה דקה מעל מערכת העיצוב של הקונסולה (/app/css/console.css). כאן יושבים רק
   הרכיבים שייחודיים ללוח הבקרה - הטוקנים, הפונט, הכפתורים, הטבלאות והמצבים
   מגיעים משם. כך שינוי בעיצוב הקונסולה מחלחל לשני הכלים במקום שיתפצלו.
   ================================================================= */

body{background:var(--bg); color:var(--ink)}

/* ---------- שורת לשוניות ראשית ----------
   הטופבר קבוע (position:fixed מהקונסולה), ולכן הלשוניות מתחילות מתחתיו. */
.dash-tabs{
  position:sticky; inset-block-start:var(--topbar-h); z-index:20;
  display:flex; gap:2px; overflow-x:auto; overflow-y:hidden;
  padding-inline:clamp(12px,3vw,32px);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-block-end:1px solid var(--border);
  scrollbar-width:none; -ms-overflow-style:none;
}
.dash-tabs::-webkit-scrollbar{display:none}

.dash-main{margin-block-start:var(--topbar-h); padding:var(--s5) clamp(12px,3vw,32px) var(--s7)}
.dash-panel{display:none}
.dash-panel.is-active{display:block}

.dash-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-block-end:var(--s5)}
.dash-head h1{font-size:var(--fs-2xl); font-weight:700; letter-spacing:var(--tracking-tight)}
.dash-head .view-sub{max-inline-size:70ch}
.dash-head-actions{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.dash-auto{display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm); color:var(--muted); cursor:pointer; user-select:none}
.dash-auto input{accent-color:var(--accent); inline-size:15px; block-size:15px}
.dash-who{max-inline-size:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- מדדים ---------- */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s4); margin-block-end:var(--s5)}
.dash-section-h{font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--faint); margin:0 0 var(--s3)}

.gauge{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4)}
.gauge-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2)}
.gauge-label{font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--faint)}
.gauge-val{font-size:var(--fs-2xl); font-weight:700; letter-spacing:var(--tracking-tight); line-height:1.1; font-variant-numeric:tabular-nums}
.gauge-val .unit{font-size:var(--fs-md); font-weight:600; color:var(--muted); margin-inline-start:2px}
.gauge-sub{font-size:var(--fs-xs); color:var(--muted); margin-block-start:var(--s2); font-variant-numeric:tabular-nums}

/* פס המילוי משנה צבע לפי מדרגות. אין כאן אדום "בכל מקרה" - אזהרה שדולקת תמיד
   מפסיקה להיות אזהרה. */
.gauge-track{block-size:6px; border-radius:4px; background:var(--surface-3); overflow:hidden; margin-block-start:var(--s3)}
.gauge-fill{block-size:100%; border-radius:4px; background:var(--accent); transition:inline-size .4s var(--ease), background .3s var(--ease)}
.gauge-fill.is-warn{background:var(--warn)}
.gauge-fill.is-stop{background:var(--stop)}
.gauge.is-stop{border-color:color-mix(in srgb, var(--stop) 45%, var(--border))}

/* ---------- מצב שירותים ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s2); margin-block-end:var(--s5)}
.svc{
  display:flex; align-items:center; gap:var(--s3);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px var(--s4);
}
.svc-dot{inline-size:9px; block-size:9px; border-radius:50%; flex:none; background:var(--stop); box-shadow:0 0 0 3px var(--stop-soft)}
.svc.is-ok .svc-dot{background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft)}
.svc-name{font-size:var(--fs-sm); font-weight:600; flex:1; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.svc-state{font-family:var(--mono); font-size:var(--fs-2xs); color:var(--muted)}
.svc.is-ok .svc-state{color:var(--ok)}

/* ---------- משתמשים ופרויקטים ---------- */
/* אריחי סיכום נמוכים יותר מאריחי המדדים: כאן אין פס מילוי, ורק מספר ותיאור. */
.dash-grid-sm{grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-block-end:var(--s4)}
.dash-grid-sm .gauge-val{font-size:var(--fs-xl)}
.dash-search{flex:1 1 240px; min-inline-size:0; max-inline-size:320px}
.dash-tag{margin-inline-start:var(--s2); vertical-align:1px}
/* מספר כשלים גדול מאפס נצבע, אפס נשאר ניטרלי - צבע קבוע מפסיק להיות אזהרה */
td.dash-err{color:var(--stop); font-weight:600}

/* ---------- גיליון צד: פירוט משתמש ---------- */
/* גיליון ולא מסך נפרד: הרשימה נשארת מאחוריו, כך שאפשר לעבור בין משתמשים בלי
   לאבד את המקום ברשימה ובחיפוש. */
.sheet-root{position:fixed; inset:0; z-index:70; display:flex; justify-content:flex-end}
.sheet-scrim{position:absolute; inset:0; background:rgba(6,12,16,.55); backdrop-filter:blur(2px)}
.sheet{
  position:relative; inline-size:min(760px, 100%); max-inline-size:100%;
  background:var(--bg); border-inline-start:1px solid var(--border);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  animation:sheetIn .22s var(--ease);
}
@keyframes sheetIn{ from{transform:translateX(24px); opacity:.6} to{transform:none; opacity:1} }
.sheet-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3);
  padding:var(--s4) var(--s5); border-block-end:1px solid var(--border);
  background:var(--surface); position:sticky; inset-block-start:0; z-index:2;
}
.sheet-title-wrap{min-inline-size:0}
.sheet-title{font-size:var(--fs-lg); font-weight:600; letter-spacing:var(--tracking-tight); word-break:break-word}
.sheet-sub{font-size:var(--fs-xs); color:var(--faint); margin:var(--s1) 0 0; font-family:var(--mono); word-break:break-all}
.sheet-body{padding:var(--s5); overflow-y:auto; display:flex; flex-direction:column; gap:var(--s5)}
.sheet-body > div > .dash-section-h{margin-block-start:var(--s5)}
.sheet-body > div > .dash-section-h:first-child{margin-block-start:0}
.sheet-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4)}
.sheet-note{font-size:var(--fs-xs); color:var(--faint); margin:var(--s3) 0 0; line-height:1.5}

/* מד מכסה */
.quota-item + .quota-item{margin-block-start:var(--s4)}
.quota-row{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2)}
.quota-name{font-size:var(--fs-sm); font-weight:600}
.quota-num{font-size:var(--fs-sm); font-weight:700; font-variant-numeric:tabular-nums}
.quota-sub{font-size:var(--fs-xs); color:var(--muted); margin-block-start:var(--s2); font-variant-numeric:tabular-nums}
.quota-note{color:var(--faint); margin-inline-start:var(--s2)}
.quota-note::before{content:"· "}

.runs-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-block-end:var(--s4)}
.runs-split{display:flex; gap:var(--s2); flex-wrap:wrap}
.spark-wrap{margin-block-start:var(--s4)}
.spark{display:flex; align-items:flex-end; gap:3px; block-size:56px; margin-block-start:var(--s2)}
.spark-bar{flex:1; background:var(--accent); border-radius:2px 2px 0 0; min-block-size:2px; transition:background var(--t-fast) var(--ease)}
.spark-bar:hover{background:var(--accent-ink)}
.spark-bar.is-empty{background:var(--surface-3)}

/* שורת משתמש לחיצה */
tr.is-clickable{cursor:pointer}
tr.is-clickable:hover td{background:var(--surface-2)}
.user-email-cell{font-weight:600}

@media (max-width:760px){
  .sheet{inline-size:100%; border-inline-start:none}
  .sheet-head{padding:var(--s3) var(--s4)}
  .sheet-body{padding:var(--s4); gap:var(--s4)}
  .sheet-sub{font-size:10.5px}
}

/* ---------- חבילות ---------- */
.plans-banner{margin:0 0 var(--s4); font-size:var(--fs-sm)}
.plans-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s4)}
.plan-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3);
}
/* חבילה פעילה מסומנת בגבול ופס עליון - היא זו שמחייבת חשבונות, וזה חייב להיקרא במבט */
.plan-card.is-on{border-color:var(--accent); box-shadow:inset 0 2px 0 var(--accent)}
.plan-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2)}
.plan-title{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; min-inline-size:0}
.plan-name{font-size:var(--fs-lg); font-weight:600; letter-spacing:var(--tracking-tight); word-break:break-word}
.plan-flag{flex:none}
.plan-desc{margin:0; font-size:var(--fs-sm); color:var(--muted); line-height:1.5}

.plan-limits{display:grid; grid-template-columns:auto 1fr; gap:6px var(--s3); margin:0; font-size:var(--fs-sm)}
.plan-limits dt{color:var(--muted)}
.plan-limits dd{margin:0; font-weight:600; text-align:end; font-variant-numeric:tabular-nums}

.plan-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); flex-wrap:wrap;
  border-block-start:1px solid var(--border); padding-block-start:var(--s3); margin-block-start:auto}
.plan-actions{display:flex; gap:var(--s2)}

/* בורר החבילה בכרטיס המשתמש. align-items:flex-end כדי שהכפתור יתיישר לתחתית התיבה
   ולא למרכזה - ל-label יש תווית מעליה, ומרכוז היה מרים את הכפתור לגובה התווית. */
.plan-assign{display:flex; align-items:flex-end; gap:var(--s3)}
.plan-assign .field{flex:1; min-inline-size:0}
.plan-assign .btn{flex:none}

.plan-form{display:flex; flex-direction:column; gap:var(--s3)}
.plan-form .field-unit{color:var(--faint); font-weight:400; font-style:normal; margin-inline-start:5px}
.plan-form .field-hint{font-size:var(--fs-xs); color:var(--faint); margin-block-start:2px}
.plan-form .modal-actions{margin-block-start:var(--s2)}

@media (max-width:640px){
  .plans-grid{grid-template-columns:1fr}
  .plan-actions{inline-size:100%}
  .plan-actions .btn{flex:1; justify-content:center}
  .plan-assign{flex-direction:column; align-items:stretch}
}

/* ---------- שבבי טבלאות ---------- */
.dash-chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-block-end:var(--s3)}
.dash-chip{
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:7px 13px; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-xs); white-space:nowrap;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.dash-chip:hover{background:var(--surface-2)}
.dash-chip.is-active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.dash-meta{margin-block-end:var(--s3)}

/* ---------- עורך SQL ---------- */
.dash-sql{
  inline-size:100%; min-block-size:150px; resize:vertical;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4);
  font-family:var(--mono); font-size:var(--fs-sm); line-height:1.6;
  font-variant-ligatures:none;
}
.dash-sql:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.dash-sql-bar{display:flex; align-items:center; gap:var(--s3); margin-block:var(--s3)}

/* ---------- מובייל ---------- */
@media (max-width:640px){
  .dash-main{padding:var(--s4) var(--s3) var(--s6)}
  .dash-head{margin-block-end:var(--s4)}
  .dash-head h1{font-size:var(--fs-xl)}
  .dash-head-actions{inline-size:100%; justify-content:space-between}
  /* אריח אחד בשורה צר מדי לקריאה בטלפון; שניים נותנים השוואה מהירה במבט. */
  .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2)}
  .gauge{padding:var(--s3)}
  .gauge-val{font-size:var(--fs-xl)}
  .svc-grid{grid-template-columns:1fr}
  .dash-who{display:none}
  .brand-sm .brand-name{display:none}
}