/* =====================================
GBOX / VRF INDOOR UNIT (TYPE 11)
משתמש במשתני העיצוב של A-Pulse (dashbaord.css)
===================================== */

:root{
  --gbox-cool:#2563eb;
  --gbox-cool-soft:#dbeafe;
  --gbox-heat:#dc2626;
  --gbox-heat-soft:#fee2e2;
  --gbox-dry:#0891b2;
  --gbox-dry-soft:#cffafe;
  --gbox-fan:#0ea5e9;
  --gbox-fan-soft:#e0f2fe;
  --gbox-auto:#4f46e5;
  --gbox-auto-soft:#e0e7ff;
  --gbox-off:#94a3b8;
  --gbox-off-soft:#f1f5f9;
  --gbox-ink:#0f2f6b;
}

/* צבע פעיל לפי מצב הפעולה — נקבע ב-JS דרך data-mode */
.gbox-card,
.gbox-panel{
  --gbox-accent:var(--gbox-off);
  --gbox-accent-soft:var(--gbox-off-soft);
}
.gbox-card[data-mode="cool"], .gbox-panel[data-mode="cool"]{ --gbox-accent:var(--gbox-cool); --gbox-accent-soft:var(--gbox-cool-soft); }
.gbox-card[data-mode="heat"], .gbox-panel[data-mode="heat"]{ --gbox-accent:var(--gbox-heat); --gbox-accent-soft:var(--gbox-heat-soft); }
.gbox-card[data-mode="dry"],  .gbox-panel[data-mode="dry"] { --gbox-accent:var(--gbox-dry);  --gbox-accent-soft:var(--gbox-dry-soft); }
.gbox-card[data-mode="fan"],  .gbox-panel[data-mode="fan"] { --gbox-accent:var(--gbox-fan);  --gbox-accent-soft:var(--gbox-fan-soft); }
.gbox-card[data-mode="auto"], .gbox-panel[data-mode="auto"]{ --gbox-accent:var(--gbox-auto); --gbox-accent-soft:var(--gbox-auto-soft); }

/* =====================================
CARD
===================================== */

.gbox-card .top{
  align-items:center;
}

.gbox-card .icon{
  color:var(--gbox-accent);
  background:var(--gbox-accent-soft);
  border-color:transparent;
  font-size:20px;
}

.gbox-card .title{
  min-width:0;
  flex:1;
}

.gbox-card .name{
  color:var(--gbox-ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.gbox-card-readout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 14px 10px;
}

.gbox-card-temp{
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:var(--gbox-ink);
}

.gbox-card-mode{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}

.gbox-mode-icon{
  font-size:22px;
  color:var(--gbox-accent);
}

.gbox-card--on .gbox-mode-icon{
  filter:drop-shadow(0 0 6px var(--gbox-accent-soft));
}

/* תגי התקלות עשויים להופיע כמה יחד — שיתכווצו במקום לגלוש מהכרטיס */
.gbox-card .js-gbox-pill-fault,
.gbox-card .js-gbox-pill-fault-extra{
  flex-shrink:1;
}

/* =====================================
POWER BUTTON
===================================== */

.gbox-power{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:var(--gbox-off-soft);
  color:var(--gbox-off);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.gbox-power:hover{ transform:translateY(-1px); }
.gbox-power:active{ transform:translateY(0); }

.gbox-power.on{
  background:var(--gbox-heat);
  color:#fff;
  box-shadow:0 6px 16px rgba(220,38,38,.35);
}

.gbox-power.off{
  background:#fff;
  color:var(--ok);
  border:2px solid var(--ok);
}

.gbox-power-sm{
  width:38px;
  height:38px;
  font-size:16px;
  flex-shrink:0;
}

.gbox-power-lg{
  width:64px;
  height:64px;
  font-size:26px;
}

/* =====================================
MODAL - PANEL
===================================== */

.gbox-modal-sub{
  font-size:13px;
  color:var(--muted);
  font-weight:400;
}

.gbox-panel{
  background:linear-gradient(180deg,#ffffff 0%, #f6f9ff 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 18px 22px;
}

.gbox-panel.is-off{
  filter:saturate(.35);
}

/* ---------- FAN SPEED ---------- */

/* עוצמת המאוורר + צ'יפ "אוטומטי" — יחידה אחת ממורכזת, תמיד בשורה אחת */
.gbox-panel-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
}

.gbox-fan{
  flex:0 1 300px;
  max-width:300px;
  min-width:0;
}

.gbox-fan-title{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  text-align:center;
  margin-bottom:4px;
}

.gbox-fan-bars{
  display:flex;
  align-items:flex-end;
  gap:7px;
  height:32px;
  direction:ltr;
}

.gbox-fan-group{
  display:flex;
  align-items:flex-end;
  gap:2px;
  flex:1;
  height:100%;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:6px;
}

.gbox-fan-group:hover .gbox-fan-bar{
  background:var(--gbox-accent-soft);
}

.gbox-fan-bar{
  flex:1;
  min-width:3px;
  border-radius:2px 2px 0 0;
  background:#e2e8f0;
  transition:background .15s ease;
}

.gbox-fan-group.active .gbox-fan-bar{
  background:var(--gbox-accent);
}

.gbox-fan-group.selected .gbox-fan-bar:last-child{
  box-shadow:0 0 0 2px var(--gbox-accent-soft);
}

.gbox-fan-labels{
  display:flex;
  direction:ltr;
  margin-top:4px;
}

.gbox-fan-labels span{
  flex:1;
  text-align:center;
  font-size:11px;
  color:var(--muted);
}

.gbox-chip{
  flex:0 0 auto;
  white-space:nowrap;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  border-radius:8px;
  padding:5px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.gbox-chip.active{
  background:var(--gbox-accent);
  border-color:var(--gbox-accent);
  color:#fff;
}

/* ---------- MAIN ROW ---------- */

.gbox-panel-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:12px;
}

.gbox-room{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-width:74px;
}

.gbox-room-value{
  font-size:30px;
  font-weight:700;
  color:var(--gbox-ink);
  line-height:1;
}

.gbox-room-label{
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

/* ---------- DIAL ---------- */

.gbox-dial{
  position:relative;
  width:min(300px, 62vw);
  aspect-ratio:1 / 1;
  flex-shrink:0;
}

.gbox-dial-svg{
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  cursor:pointer;
  outline:none;
}

.gbox-dial-svg:focus-visible .gbox-dial-knob{
  stroke:var(--gbox-ink);
  stroke-width:3;
}

.gbox-dial-track{
  fill:none;
  stroke:#e5eaf3;
  stroke-width:16;
  stroke-linecap:round;
}

.gbox-dial-progress{
  fill:none;
  stroke:var(--gbox-accent);
  stroke-width:16;
  stroke-linecap:round;
  transition:stroke .2s ease;
}

.gbox-dial-knob{
  fill:#fff;
  stroke:var(--gbox-accent);
  stroke-width:4;
}

.gbox-dial-edge{
  fill:var(--muted);
  font-size:13px;
  font-weight:600;
}

.gbox-dial-center{
  position:absolute;
  inset:26%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%, #1e3a8a 0%, #0b1f4b 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  box-shadow:inset 0 -8px 18px rgba(0,0,0,.25);
}

.gbox-panel[data-mode="heat"] .gbox-dial-center{
  background:radial-gradient(circle at 50% 30%, #ef4444 0%, #991b1b 100%);
}
.gbox-panel[data-mode="off"] .gbox-dial-center{
  background:radial-gradient(circle at 50% 30%, #94a3b8 0%, #475569 100%);
}

.gbox-dial-value{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  font-size:30px;
  font-weight:700;
  direction:ltr;
}

.gbox-dial-unit{
  font-size:14px;
  font-weight:500;
  opacity:.85;
}

.gbox-dial-steps{
  display:flex;
  gap:8px;
  direction:ltr;
}

.gbox-step-btn{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.gbox-step-btn:hover{
  background:rgba(255,255,255,.28);
}

/* ---------- MODE RAIL ---------- */

.gbox-modes{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:96px;
}

.gbox-mode-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.gbox-mode-btn i{
  font-size:19px;
  width:22px;
  text-align:center;
}

.gbox-mode-btn:hover{
  background:#fff;
  border-color:var(--border);
}

.gbox-mode-btn.active{
  background:var(--gbox-accent-soft);
  border-color:var(--gbox-accent);
  color:var(--gbox-accent);
  font-weight:600;
}

.gbox-mode-btn[data-mode-key="cool"].active{ background:var(--gbox-cool-soft); border-color:var(--gbox-cool); color:var(--gbox-cool); }
.gbox-mode-btn[data-mode-key="heat"].active{ background:var(--gbox-heat-soft); border-color:var(--gbox-heat); color:var(--gbox-heat); }
.gbox-mode-btn[data-mode-key="dry"].active { background:var(--gbox-dry-soft);  border-color:var(--gbox-dry);  color:var(--gbox-dry); }
.gbox-mode-btn[data-mode-key="fan"].active { background:var(--gbox-fan-soft);  border-color:var(--gbox-fan);  color:var(--gbox-fan); }
.gbox-mode-btn[data-mode-key="auto"].active{ background:var(--gbox-auto-soft); border-color:var(--gbox-auto); color:var(--gbox-auto); }

/* ---------- FOOTER ---------- */

.gbox-panel-foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:14px;
}

.gbox-power-label{
  font-size:13px;
  color:var(--muted);
}

/* כמה תקלות במקביל — כל אחת בתג משלה */
.gbox-error{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:29px;
}

.gbox-error-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:29px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--gbox-heat-soft);
  color:var(--gbox-heat);
  font-size:13px;
  font-weight:600;
}

.gbox-error-item--warn{
  background:var(--gbox-auto-soft);
  color:var(--gbox-auto);
}

/* שומר על מקום קבוע כשאין תקלה, כדי שהמסך לא יקפוץ */
.gbox-error.is-empty{
  visibility:hidden;
}

/* =====================================
TABS - גובה אחיד לשני הטאבים
===================================== */

#gboxModal .modal-body > .tab-content{
  position:relative;
}

/* מדידת גובה טאב מוסתר בלי שיראו אותו */
#gboxModal .tab-content > .tab-pane.gbox-tab-measure{
  display:block !important;
  visibility:hidden !important;
  position:absolute !important;
  inset-inline-start:0 !important;
  top:0 !important;
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
  pointer-events:none !important;
}

/* ---------- SCHEDULE PLACEHOLDER ---------- */

/* הטאב יורש את הגובה שנקבע ל-.tab-content, והתוכן ממורכז בתוכו */
#gboxTabSchedule{
  min-height:inherit;
}

#gboxTabSchedule.active{
  display:flex;
  flex-direction:column;
}

.gbox-soon{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:32px 16px;
  color:var(--muted);
  text-align:center;
}

.gbox-soon i{
  font-size:34px;
  color:var(--gbox-cool);
  opacity:.6;
}

/* =====================================
RESPONSIVE
===================================== */

@media (max-width:575.98px){
  .gbox-panel-main{
    flex-direction:column;
    gap:10px;
  }

  .gbox-dial{
    width:min(280px, 80vw);
  }

  .gbox-modes{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    min-width:0;
  }

  .gbox-mode-btn .gbox-mode-btn-text{
    display:none;
  }

  .gbox-room{
    flex-direction:row;
    gap:8px;
    align-items:baseline;
  }
}

/* =====================================
   לוחות זמנים (טאב תזמון במודל GBOX)
   ===================================== */

.gbox-sched{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:220px;
}

/* מצבי המסך — רק אחד גלוי בכל רגע, לפי data-state על השורש */
.gbox-sched-state{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:32px 16px;
  color:var(--muted, #6c757d);
  text-align:center;
}

.gbox-sched-state i{ font-size:32px; opacity:.6; }
.gbox-sched-state-error i{ color:var(--gbox-heat); }
.gbox-sched-state-empty i{ color:var(--gbox-cool); }

.gbox-sched[data-state="loading"] .gbox-sched-state-loading,
.gbox-sched[data-state="error"]   .gbox-sched-state-error,
.gbox-sched[data-state="empty"]   .gbox-sched-state-empty{ display:flex; }

/* הרשימה וכפתור ההוספה מוסתרים כשטוענים או כשיש שגיאה */
.gbox-sched[data-state="loading"] #gboxSchedList,
.gbox-sched[data-state="error"]   #gboxSchedList,
.gbox-sched[data-state="loading"] .gbox-sched-foot,
.gbox-sched[data-state="error"]   .gbox-sched-foot{ display:none; }

.gbox-sched-foot{ display:flex; justify-content:center; padding-top:4px; }

/* ── כרטיס תזמון ── */
.gbox-sched-card{
  background:#fff;
  border:1px solid #e3eaf3;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(30,90,150,.07);
  margin-bottom:10px;
  overflow:hidden;
}

.gbox-sched-card.is-disabled{ opacity:.6; }

.gbox-sched-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  cursor:pointer;
  user-select:none;
}

.gbox-sched-titles{ flex:1; min-width:0; }

.gbox-sched-title{
  font-weight:700;
  font-size:.92rem;
  color:var(--gbox-ink);
}

.gbox-sched-sub{
  font-size:.76rem;
  color:var(--muted, #6c757d);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.gbox-sched-chevron{
  font-size:.85rem;
  color:var(--gbox-ink);
  transition:transform .2s;
  flex-shrink:0;
}
.gbox-sched-chevron.open{ transform:rotate(180deg); }

.gbox-sched-body{
  display:none;
  padding:0 14px 12px;
  border-top:1px solid #eef3f9;
}
.gbox-sched-body.open{ display:block; }

.gbox-sched-label{
  font-size:.74rem;
  color:var(--muted, #6c757d);
  margin:10px 0 6px;
}

/* ── בוררי ימים ── */
.gbox-sched-pills{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:6px;
}

.gbox-sched-pill{
  min-width:42px;
  padding:5px 8px;
  border:none;
  border-radius:7px;
  background:#e8eff8;
  color:var(--gbox-ink);
  font-size:.73rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.gbox-sched-pill.active{ background:var(--gbox-cool); color:#fff; }

/* ── שדות ── */
.gbox-sched-row{
  display:flex;
  gap:10px;
  margin-top:8px;
  flex-wrap:wrap;
}

.gbox-sched-field{
  flex:1 1 120px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.gbox-sched-field-label{
  font-size:.72rem;
  color:var(--muted, #6c757d);
}

.gbox-sched-input{
  width:100%;
  padding:6px 9px;
  border:1px solid #cfdcec;
  border-radius:8px;
  background:#f7fafd;
  color:var(--gbox-ink);
  font-size:.85rem;
  outline:none;
}
.gbox-sched-input:focus{
  border-color:var(--gbox-cool);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}

/* ── שדה שעה + כפתור ניקוי ── */
.gbox-sched-time{
  display:flex;
  align-items:center;
  gap:6px;
}

.gbox-sched-time .gbox-sched-input{
  flex:1 1 auto;
  min-width:0;
}

.gbox-sched-time-clear{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #cfdcec;
  border-radius:8px;
  background:#f7fafd;
  color:var(--muted, #6c757d);
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
}

.gbox-sched-time-clear:hover:not(:disabled){
  border-color:var(--gbox-heat);
  color:var(--gbox-heat);
}

.gbox-sched-time-clear:disabled{
  opacity:.4;
  cursor:default;
}

.gbox-sched-error{
  margin-top:8px;
  font-size:.78rem;
  font-weight:600;
  color:var(--gbox-heat);
}

/* ── מתג הפעלה ── */
.gbox-sched-switch{
  position:relative;
  display:inline-block;
  width:40px;
  height:22px;
  margin-top:2px;
}
.gbox-sched-switch input{ opacity:0; width:0; height:0; }

.gbox-sched-slider{
  position:absolute;
  inset:0;
  border-radius:22px;
  background:#ccd6e2;
  cursor:pointer;
  transition:background .2s;
}
.gbox-sched-slider::before{
  content:'';
  position:absolute;
  width:16px; height:16px;
  left:3px; top:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform .2s;
}
.gbox-sched-switch input:checked + .gbox-sched-slider{ background:#29a302; }
.gbox-sched-switch input:checked + .gbox-sched-slider::before{ transform:translateX(18px); }

[dir="rtl"] .gbox-sched-slider::before{ left:auto; right:3px; }
[dir="rtl"] .gbox-sched-switch input:checked + .gbox-sched-slider::before{ transform:translateX(-18px); }

.gbox-sched-actions{
  display:flex;
  gap:8px;
  margin-top:14px;
}