/* =====================================
   LIGHT MODAL — לשונית סקירה (js/lightOverview.js)
   ===================================== */

/* "מידע נוסף": התפריט צריך לצאת מגבולות שורת הלשוניות */
#lightModal #lightTabs { overflow: visible; }
#lightModal .light-more-menu { min-width: 12rem; text-align: right; }
#lightModal .light-more-menu .dropdown-item { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; }
#lightModal .light-more-menu .dropdown-item i { width: 1.1rem; color: var(--bs-primary); text-align: center; }

#lightModal .lo-root { direction: rtl; text-align: right; min-width: 0; }
#lightModal .lo-view { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
#lightModal .lo-view.d-none { display: none !important; }

/* ----- pills (תקשורת / תקינות) ----- */
#lightModal .lo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
#lightModal .lo-pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bs-secondary-color); flex-shrink: 0; }
#lightModal .lo-pill--ok::before { background: var(--bs-success); }
#lightModal .lo-pill--bad::before { background: var(--bs-danger); }
#lightModal .lo-pill--bad { border-color: rgba(var(--bs-danger-rgb), 0.45); color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); }
#lightModal .lo-pill--unknown { color: var(--bs-secondary-color); border-style: dashed; }
#lightModal .lo-pill--unknown::before { background: transparent; border: 1px dashed var(--bs-secondary-color); }

/* ----- header (שורה אחת) ----- */
#lightModal .lo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  background: var(--bs-primary-bg-subtle);
}
#lightModal .lo-head-main { min-width: 0; flex: 1 1 12rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; }
#lightModal .lo-head-name { font-weight: 700; overflow-wrap: anywhere; }
#lightModal .lo-head-updated { font-size: 0.8rem; color: var(--bs-secondary-color); }
#lightModal .lo-head-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
#lightModal .lo-head-note { flex-basis: 100%; font-size: 0.82rem; color: var(--bs-danger-text-emphasis); }

/* ----- status block: נורה + שם + סטטוס ----- */
#lightModal .lo-status { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
#lightModal .lo-status-text { min-width: 0; }
#lightModal .lo-status-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
#lightModal .lo-ch-name { font-weight: 700; font-size: 1.05rem; color: #0f172a; overflow-wrap: anywhere; }
#lightModal .lo-ch-num { font-size: 0.78rem; color: var(--bs-secondary-color); }
#lightModal .lo-status-main { font-weight: 800; font-size: 1.1rem; line-height: 1.3; }
#lightModal .lo-status-sub { font-size: 0.8rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }

#lightModal .lo-bulb {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--bs-secondary-bg);
  color: #94a3b8;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
/* דולקת לפי משוב מהשטח */
#lightModal [data-tone="lit"] .lo-bulb { background: #fef3c7; color: #f59e0b; box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.15), 0 0 18px rgba(245, 158, 11, 0.45); }
#lightModal [data-tone="lit"] .lo-status-main { color: #b45309; }
/* יציאה פעילה בלי אישור מהשטח — כחול, לא "דולק" */
#lightModal [data-tone="active"] .lo-bulb { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), 0.35); }
#lightModal [data-tone="active"] .lo-status-main { color: var(--bs-primary-text-emphasis); }
#lightModal [data-tone="off"] .lo-status-main { color: #475569; }
/* סתירה בין היציאה למשוב — נורה אפורה (לא "דולקת") עם טבעת אזהרה */
#lightModal [data-tone="warn"] .lo-bulb { background: var(--bs-secondary-bg); color: #94a3b8; box-shadow: inset 0 0 0 3px rgba(217, 119, 6, 0.55); }
#lightModal [data-tone="warn"] .lo-status-main,
#lightModal [data-tone="warn"] .lo-status-sub { color: var(--bs-warning-text-emphasis); }
#lightModal [data-tone="unknown"] .lo-bulb { background: transparent; border: 2px dashed #cbd5e1; color: #cbd5e1; }
#lightModal [data-tone="unknown"] .lo-status-main { color: var(--bs-secondary-color); }

/* ----- channel cards: זה לצד זה במחשב, אחד מתחת לשני בטלפון ----- */
#lightModal .lo-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
#lightModal .lo-ch {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  min-width: 0;
}
#lightModal .lo-ch-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
#lightModal .lo-badge-fault {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bs-danger-text-emphasis);
  background: var(--bs-danger-bg-subtle);
  white-space: nowrap;
}
#lightModal .lo-badge-fault.d-none { display: none !important; }
#lightModal .lo-ch-program { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: #334155; }
#lightModal .lo-ch-program i { color: var(--bs-primary); }

#lightModal .lo-details { font-size: 0.85rem; }
#lightModal .lo-details summary {
  cursor: pointer;
  color: var(--bs-primary);
  font-weight: 600;
  min-height: 32px;
  display: flex;
  align-items: center;
  list-style-position: inside;
}
#lightModal .lo-details[open] summary { margin-bottom: 0.25rem; }

#lightModal .lo-rows { margin: 0; display: flex; flex-direction: column; }
#lightModal .lo-row {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
#lightModal .lo-row:last-child { border-bottom: 0; }
#lightModal .lo-row dt { font-weight: 600; color: var(--bs-secondary-color); }
#lightModal .lo-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#lightModal .lo-fault-active { color: var(--bs-danger); font-weight: 600; }

#lightModal .lo-ch-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; border-radius: 0.6rem; }

/* ----- meter summary (שורה אחת במחשב) ----- */
#lightModal .lo-meter { padding: 0.6rem 0.9rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: 0.9rem; background: #fff; }
#lightModal .lo-meter-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
#lightModal .lo-meter-title { font-weight: 700; display: inline-flex; gap: 0.4rem; align-items: center; }
#lightModal .lo-meter-title i { color: var(--bs-primary); }
#lightModal .lo-meter-link { padding: 0; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; text-decoration: none; min-height: 32px; }
#lightModal .lo-meter-grid { display: grid; grid-template-columns: 1.6fr 1.6fr 1fr 1fr; gap: 0.5rem; }
#lightModal .lo-meter-grid.d-none { display: none !important; }
#lightModal .lo-meter-cell { padding: 0.4rem 0.6rem; border-radius: 0.55rem; background: var(--bs-tertiary-bg); min-width: 0; }
#lightModal .lo-meter-lbl { display: block; font-size: 0.75rem; color: var(--bs-secondary-color); }
#lightModal .lo-meter-vals { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; }
#lightModal .lo-meter-v { display: inline-flex; align-items: baseline; gap: 0.25rem; }
#lightModal .lo-meter-v small { font-size: 0.7rem; color: var(--bs-secondary-color); }
#lightModal .lo-meter-v bdi { font-weight: 700; font-variant-numeric: tabular-nums; }
#lightModal .lo-meter-empty { color: var(--bs-secondary-color); font-size: 0.9rem; }

/* ----- channel screens ----- */
#lightModal .lo-subhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 0.75rem; }
#lightModal .lo-back { display: inline-flex; align-items: center; gap: 0.4rem; padding-inline: 0; min-height: 44px; font-weight: 600; text-decoration: none; }
#lightModal .lo-subhead-unit { font-size: 0.82rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
#lightModal .lo-subtitle { margin: 0; font-weight: 700; color: var(--bs-primary); }

#lightModal .lo-status--hero {
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: #fff;
}
#lightModal .lo-status--big {
  flex-direction: column;
  text-align: center;
  padding: 1.1rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: #fff;
  gap: 0.6rem;
}
#lightModal .lo-status--big .lo-bulb { width: 5.5rem; height: 5.5rem; font-size: 2.6rem; }
#lightModal .lo-status--big .lo-status-name { justify-content: center; }
#lightModal .lo-status--big .lo-status-main { font-size: 1.35rem; }

#lightModal .lo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
#lightModal .lo-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  min-height: 92px;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: #fff;
  text-align: right;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
#lightModal .lo-option:hover,
#lightModal .lo-option:focus-visible { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15); }
#lightModal .lo-option-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}
#lightModal .lo-option-icon--manual { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
#lightModal .lo-option-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#lightModal .lo-option-title { font-weight: 800; font-size: 1.05rem; color: #0f172a; }
#lightModal .lo-option-desc { font-size: 0.82rem; color: var(--bs-secondary-color); }
#lightModal .lo-option-chev { color: var(--bs-secondary-color); }

#lightModal .lo-notice { font-size: 0.85rem; padding: 0.45rem 0.65rem; border-radius: 0.5rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
#lightModal .lo-notice--warn { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
#lightModal .lo-notice.d-none { display: none !important; }

#lightModal .lo-cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
#lightModal .lo-cmd { min-height: 56px; font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.7rem; }
#lightModal .lo-cmd[aria-busy="true"]::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: lo-spin 0.75s linear infinite;
}
@keyframes lo-spin { to { transform: rotate(360deg); } }

#lightModal .lo-cmd-status { font-size: 0.9rem; padding: 0.45rem 0.65rem; border-radius: 0.5rem; }
#lightModal .lo-cmd-status.d-none { display: none !important; }
#lightModal .lo-cmd-status--pending { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
#lightModal .lo-cmd-status--ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
#lightModal .lo-cmd-status--warn { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
#lightModal .lo-cmd-status--bad { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

#lightModal .lo-note-row { display: flex; align-items: center; gap: 0.25rem; }
#lightModal .lo-note { margin: 0; font-size: 0.85rem; color: var(--bs-secondary-color); }
#lightModal .lo-note-more { padding: 0.55rem 0.75rem; border-radius: 0.5rem; background: var(--bs-tertiary-bg); }
#lightModal .lo-note-more.d-none { display: none !important; }
#lightModal .lo-info { padding: 0; min-width: 44px; min-height: 44px; font-size: 1.15rem; flex-shrink: 0; }

/* ----- settings ----- */
#lightModal .lo-settings {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: #fff;
}
#lightModal .lo-settings--shared { border: 2px dashed rgba(var(--bs-primary-rgb), 0.45); background: var(--bs-primary-bg-subtle); }
#lightModal .lo-settings-title { display: flex; align-items: center; gap: 0.45rem; font-weight: 800; margin-bottom: 0.15rem; }
#lightModal .lo-settings-title i { color: var(--bs-primary); }
#lightModal .lo-shared-note { font-size: 0.82rem; color: var(--bs-primary-text-emphasis); margin-bottom: 0.25rem; }

#lightModal .lo-setting { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
#lightModal .lo-settings .lo-setting:last-child { border-bottom: 0; }
#lightModal .lo-view > .lo-setting { padding: 0.5rem 0.9rem; border: 1px solid var(--bs-border-color); border-radius: 0.75rem; background: #fff; }
#lightModal .lo-setting-text { flex: 1 1 auto; min-width: 0; }
#lightModal .lo-setting-lbl { font-weight: 600; font-size: 0.9rem; }
#lightModal .lo-setting-sub { font-size: 0.8rem; color: var(--bs-secondary-color); }
#lightModal .lo-setting-sub.d-none { display: none !important; }
#lightModal .lo-setting-val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: center; }
#lightModal .lo-edit { min-height: 40px; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; flex-shrink: 0; background: #fff; }

/* מתג בכיוון RTL — כמו light-astro-switch */
#lightModal .lo-switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  margin: 0;
  min-height: 44px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
#lightModal .lo-switch .form-check-input { float: none; margin: 0; flex-shrink: 0; width: 2.5em; height: 1.35em; }
#lightModal .lo-switch .form-check-label { font-weight: 600; font-size: 0.9rem; }

/* ----- שורת יחידת תאורה בלוח הבקרה (טלפון) -----
   שומרת על הצפיפות של שאר השורות (5 שורות מלאות בגובה 844): מצב התקשורת עולה לצד הכותרת,
   ושני הערוצים מוצגים זה לצד זה — שם למעלה, מצב מתחת. */
#unitsGrid .compact-unit-row--light { grid-template-columns: 28px minmax(0, 1fr) auto; }
#unitsGrid .compact-unit-row--light .compact-unit-metrics { display: none; }
#unitsGrid .compact-unit-row--light .compact-unit-icon { grid-row: 1; }
#unitsGrid .compact-unit-row--light .compact-unit-state { grid-column: 3; grid-row: 1; align-self: start; text-align: end; max-width: 9.5rem; }
.compact-light-channels {
  grid-column: 2 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.compact-light-ch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  background: #f4f7fb;
  min-width: 0;
}
.compact-light-dot { grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.compact-light-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 1.3; color: #17365d; }
.compact-light-state { grid-column: 2; font-size: 12px; font-weight: 700; line-height: 1.3; color: #475569; }
.compact-light-ch[data-tone="lit"] { background: #fef7e0; }
.compact-light-ch[data-tone="lit"] .compact-light-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.compact-light-ch[data-tone="lit"] .compact-light-state { color: #b45309; }
.compact-light-ch[data-tone="active"] .compact-light-dot { background: #2563eb; }
.compact-light-ch[data-tone="active"] .compact-light-state { color: #1d4ed8; }
.compact-light-ch[data-tone="warn"] { background: #fff7ed; }
.compact-light-ch[data-tone="warn"] .compact-light-dot { background: #fff; border: 2px solid #d97706; }
.compact-light-ch[data-tone="warn"] .compact-light-state { color: #b45309; }
.compact-light-ch[data-tone="unknown"] .compact-light-dot { background: transparent; border: 1px dashed #94a3b8; }
.compact-light-ch[data-tone="unknown"] .compact-light-state { color: #94a3b8; font-weight: 600; }

/* ----- phone ----- */
@media (max-width: 767.98px) {
  #lightModal .lo-channels,
  #lightModal .lo-options { grid-template-columns: minmax(0, 1fr); }
  #lightModal .lo-meter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lightModal .lo-bulb { width: 3rem; height: 3rem; font-size: 1.35rem; }
  #lightModal .lo-option { min-height: 76px; }
  #lightModal .lo-head,
  #lightModal .lo-ch,
  #lightModal .lo-settings { padding: 0.7rem; }
}