/* ============================================================================
   مراقبة المستودعات: مكونات خاصة فوق fleetops.css (نظام تصميم FleetOps).
   كل الخصائص منطقية لأن الواجهة RTL. المقاييس والرسوم LTR كالعرف.
   ========================================================================== */

:root {
  --c-band: rgba(34, 197, 94, .16);
  --c-band-line: #22C55E;
  --c-temp: #C2334D;
  --c-hum: #2A4E9B;
}

.t-crit { color: var(--crit) !important; }
.t-warn { color: var(--warn) !important; }
.t-good { color: var(--good) !important; }
.inline { display: inline; }
.wrap-text { white-space: normal; max-width: 560px; }
.stat .l .stat-ic { width: 15px; height: 15px; stroke: var(--text-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted-card { opacity: .7; }

/* روابط داخل .seg تعمل كأزرار */
.seg a { display: inline-flex; align-items: center; padding: 6px 13px; font-size: 12.5px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.seg a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.seg a + a { border-inline-start: 1px solid var(--border); }
.seg a.on { background: var(--accent); color: #fff; font-weight: 600; }
.seg .num { opacity: .75; margin-inline-start: 4px; font-size: 11px; }

.tabs .tab { text-decoration: none; }
.tabs .tab .num { font-size: 11px; color: var(--text-3); margin-inline-start: 4px; }

/* رسائل بعد الحفظ */
.flash { border-radius: var(--radius-sm); padding: 9px 13px; font-size: 12.5px; font-weight: 500; border: 1px solid transparent; }
.flash.good { background: var(--good-soft); color: var(--good); border-color: #C5E3D5; }
.flash.crit { background: var(--crit-soft); color: var(--crit); border-color: #EFC9C1; }
.flash.warn { background: var(--warn-soft, #FBF1DD); color: var(--warn); border-color: #EBD7A8; }
.flash.info { background: #EAF2FB; color: #2A4E9B; border-color: #C9DAF0; }
.keybox { margin-top: 6px; padding: 7px 10px; background: var(--surface); border: 1px dashed var(--good); border-radius: 6px; font-family: var(--font-mono); user-select: all; word-break: break-all; color: var(--text); }
.code { font-family: var(--font-mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 3px 8px; margin-top: 4px; word-break: break-all; }

/* شريط الدخول نيابة */
.imp-bar {
  display: flex; align-items: center; gap: 12px; flex: none;
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid #EBD9B4; padding: 7px 24px; font-size: 12.5px; font-weight: 500;
}
.imp-bar form { margin-inline-start: auto; }

.form-err:empty, [data-hide-empty].validation-summary-valid { display: none; }
.form-err ul { margin: 0; padding-inline-start: 18px; }

/* ─────────────── المراقبة الحية: شريط حالة، لوحة لكل منطقة، صف لكل حساس
   اللون يحمل الخطورة فقط: أحمر إنذار، كهرماني خارج الحدود، رمادي منقطع. الطبيعي هادئ بلا لون. */

.lv-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.lv-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-good); box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.lv-live.paused .lv-live-dot { background: var(--c-idle); animation: none; }

.lv-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-toolbar .search { flex: 0 1 300px; }
.lv-toolbar .select { max-width: 240px; }

.lv-strip { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(190px, 1.3fr); gap: 9px; margin: 12px 0; }
@media (max-width: 900px) { .lv-strip { grid-template-columns: repeat(2, 1fr); } }
.lv-kpi {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; cursor: pointer; text-align: start; box-shadow: var(--shadow-xs);
  border-inline-start: 4px solid var(--border-strong); transition: box-shadow .12s, border-color .12s, background .12s;
}
.lv-kpi:hover { box-shadow: var(--shadow-sm); }
.lv-kpi-n { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lv-kpi-n small { font-size: 14px; color: var(--text-2); font-weight: 600; }
.lv-kpi-l { font-size: 12px; color: var(--text-2); font-weight: 600; }
.lv-kpi.crit { border-inline-start-color: var(--c-crit); }
.lv-kpi.crit .lv-kpi-n { color: var(--crit); }
.lv-kpi.crit.hot { background: var(--crit-soft); border-color: #EFC9C1; border-inline-start-color: var(--c-crit); }
.lv-kpi.warn { border-inline-start-color: var(--c-warn); }
.lv-kpi.warn .lv-kpi-n { color: var(--warn); }
.lv-kpi.idle { border-inline-start-color: var(--c-idle); }
.lv-kpi.idle .lv-kpi-n { color: var(--text-2); }
.lv-kpi.good { border-inline-start-color: var(--c-good); }
.lv-kpi.good .lv-kpi-n { color: var(--good); }
.lv-kpi.all { border-inline-start-color: var(--accent); padding-bottom: 18px; }
.lv-kpi-bar { position: absolute; inset-inline: 14px; bottom: 8px; height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.lv-kpi-bar i { display: block; height: 100%; background: var(--c-good); border-radius: 3px; }
.lv-kpi.on { box-shadow: 0 0 0 2px var(--accent); }

.lv-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 600px), 1fr)); gap: 12px; align-items: start; }

.lv-zone { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; }
.lv-zone-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.lv-zone-mark { width: 4px; align-self: stretch; border-radius: 3px; background: var(--c-good); flex: none; }
.lv-zone.sev-0 .lv-zone-mark { background: var(--c-crit); }
.lv-zone.sev-1 .lv-zone-mark { background: var(--c-warn); }
.lv-zone.sev-2 .lv-zone-mark { background: var(--c-idle); }
.lv-zone.sev-0 { border-color: #EBC2BA; }
.lv-zone-title { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.lv-zone-title b { font-size: 14.5px; }
.lv-zone-title span { font-size: 11.5px; color: var(--text-3); }
.lv-limit { font-size: 11.5px; font-family: var(--font-mono); color: var(--good); background: var(--good-soft); border-radius: 6px; padding: 2px 8px; }
.lv-zone-now { margin-inline-start: auto; display: flex; gap: 16px; }
.lv-zone-now span { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.lv-zone-now small { font-size: 10.5px; color: var(--text-3); }
.lv-zone-now b { font-size: 14px; font-variant-numeric: tabular-nums; }

/* الأعمدة نفسها لرأس اللوحة وصفوفها */
.lv-cols, .lv-row {
  display: grid; align-items: center; column-gap: 12px;
  grid-template-columns: minmax(120px, 1.4fr) 76px 52px minmax(90px, 1fr) 44px 120px 64px;
}
.lv-cols { padding: 6px 14px; font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.lv-row { padding: 8px 14px; color: var(--text); border-bottom: 1px solid var(--border-soft); position: relative; }
.lv-row:last-child { border-bottom: 0; }
.lv-row:hover { background: var(--surface-2); text-decoration: none; }
.lv-row.sev-0 { background: linear-gradient(270deg, transparent 40%, var(--crit-soft)); }
.lv-row.sev-0::before, .lv-row.sev-1::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--c-crit); }
.lv-row.sev-1::before { background: var(--c-warn); }

.lv-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lv-name-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.lv-name-t b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-name-t small { font-size: 10.5px; color: var(--text-3); }
.lv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-idle); flex: none; }
.lv-dot.good { background: var(--c-good); }
.lv-dot.warn { background: var(--c-warn); }
.lv-dot.crit { background: var(--c-crit); }

.lv-temp { direction: ltr; display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; }
.lv-temp .ltr { font-family: var(--font); font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lv-temp small { font-size: 11px; color: var(--text-3); }
.lv-temp.out .ltr { color: var(--crit); }

.lv-delta { font-size: 11px; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; }
.lv-delta.up { color: #B4532A; }
.lv-delta.down { color: #2A6BB4; }
.lv-delta.flat { color: var(--text-3); }

.lv-range svg { width: 100%; height: 14px; display: block; }
.lv-range .r-track { fill: var(--surface-3); }
.lv-range .r-band { fill: var(--c-band-line); opacity: .45; }
.lv-range .r-mark { fill: var(--text); }
.lv-range .r-mark.out { fill: var(--c-crit); }

.lv-hum { font-size: 12.5px; font-weight: 600; color: var(--c-hum); font-variant-numeric: tabular-nums; }
.lv-hum.out { color: var(--crit); }

.lv-spark svg { width: 120px; height: 28px; display: block; overflow: visible; }
.lv-spark .s-line { fill: none; stroke: var(--c-series); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lv-row.sev-0 .s-line, .lv-row.sev-1 .s-line { stroke: var(--c-crit); }
.lv-spark .s-lim { stroke: var(--c-band-line); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; vector-effect: non-scaling-stroke; }

.lv-ago { font-size: 11.5px; color: var(--text-3); text-align: end; white-space: nowrap; }
.lv-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; padding-inline-start: 17px; margin-top: 5px; }

/* قراءة قديمة: القيم باهتة وشرطات، فلا يقرأ رقم قديم كأنه الآن */
.lv-row.stale .lv-temp, .lv-row.stale .lv-range, .lv-row.stale .lv-spark, .lv-row.stale .lv-hum { opacity: .4; }

/* عرض البطاقات: بطاقة لكل حساس، الرقم في الصدارة والرسم بمساحة ملونة تحته */
.lv-cgroup + .lv-cgroup { margin-top: 18px; }
.lv-cgroup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12.5px; }
.lv-cgroup-head b { font-size: 14.5px; }
.lv-cgroup-head .lv-zone-mark { height: 18px; align-self: center; }
.lv-cgroup.sev-0 .lv-zone-mark { background: var(--c-crit); }
.lv-cgroup.sev-1 .lv-zone-mark { background: var(--c-warn); }
.lv-cgroup.sev-2 .lv-zone-mark { background: var(--c-idle); }
.lv-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }

.lv-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 13px 14px 11px; color: var(--text); box-shadow: var(--shadow-xs); overflow: hidden;
  transition: box-shadow .14s, transform .14s, border-color .14s;
}
.lv-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--c-good); opacity: .85; }
.lv-card.sev-0::before { background: var(--c-crit); opacity: 1; }
.lv-card.sev-1::before { background: var(--c-warn); opacity: 1; }
.lv-card.sev-2::before { background: var(--c-idle); }
.lv-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; border-color: var(--border-strong); }
.lv-card.sev-0 { border-color: #EBC2BA; background: linear-gradient(180deg, var(--crit-soft) 0, var(--surface) 55%); animation: lc-alarm 2.4s ease-in-out infinite; }
@keyframes lc-alarm { 50% { box-shadow: 0 0 0 3px rgba(194,51,77,.18), var(--shadow-xs); } }
.lv-card.sev-1 { border-color: #EBD9B4; }

.lc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lc-top b { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-top .pill { font-size: 10.5px; padding: 1px 8px; }
.lc-top .pill.idle { background: var(--surface-3); color: var(--text-2); }

/* الحرارة والرطوبة جنبا إلى جنب بالوزن نفسه، ولكل منهما شريط مداها */
.lc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-card.no-hum .lc-metrics { grid-template-columns: 1fr; }
.lc-metric { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px 6px; min-width: 0; }
.lc-metric.out { background: var(--crit-soft); border-color: #EFC9C1; }
.lc-m-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.lc-m-l svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.lc-metric.h .lc-m-l { color: var(--c-hum); }
.lc-m-v { direction: ltr; display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; }
.lc-m-v .ltr { font-family: var(--font); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lc-m-v small { font-size: 13px; color: var(--text-3); font-weight: 600; }
.lc-metric.h .lc-m-v .ltr { color: var(--c-hum); }
.lc-metric.out .lc-m-v .ltr { color: var(--crit); }
.lc-metric .lv-delta { text-align: end; min-height: 15px; }
.lc-metric .lc-range { margin-top: 3px; }

.lc-spark { height: auto; display: block; font-size: 11px; text-align: center; }
.lc-spark svg { width: 100%; height: 52px; display: block; overflow: visible; }
.lc-spark .s-hum { fill: none; stroke: #4A90D9; stroke-width: 1.3; stroke-dasharray: 4 2; opacity: .8; vector-effect: non-scaling-stroke; }
.lc-spark-l { display: flex; gap: 12px; justify-content: flex-end; margin-top: 4px; font-size: 10.5px; color: var(--text-2); direction: rtl; }
.lc-spark-l span { display: inline-flex; align-items: center; gap: 4px; }
.lc-spark-l .sw { width: 12px; height: 3px; border-radius: 2px; display: inline-block; background: var(--c-series); }
.lc-spark-l .sw.h { background: repeating-linear-gradient(90deg, #4A90D9 0 4px, transparent 4px 6px); }
.lv-card.sev-0 .lc-spark-l .sw.t, .lv-card.sev-1 .lc-spark-l .sw.t { background: var(--c-crit); }

/* بيانات الجهاز: صفوف تسمية وقيمة */
.lc-info { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 0; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 11.5px; align-items: center; }
.lc-info dt { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.lc-info dt svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lc-info dd { margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; min-width: 0; color: var(--text); font-weight: 600; }
.lc-info .pill { font-size: 10.5px; padding: 0 7px; }

/* البطارية: جسم وطرف، والتعبئة بالنسبة */
.lc-batt { position: relative; display: inline-block; width: 24px; height: 11px; border: 1.5px solid var(--text-2); border-radius: 3px; padding: 1px; flex: none; }
.lc-batt::after { content: ""; position: absolute; top: 2.5px; inset-inline-end: -4px; width: 2px; height: 4px; background: var(--text-2); border-radius: 0 1px 1px 0; }
.lc-batt i { display: block; height: 100%; border-radius: 1px; background: var(--c-good); }
.lc-batt.warn i { background: var(--c-warn); }
.lc-batt.crit i { background: var(--c-crit); }
.lc-batt.crit { border-color: var(--crit); }

.lc-net { display: inline-flex; align-items: center; gap: 4px; }
.lc-net.cell::before { content: "4G"; font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 3px; padding: 0 3px; line-height: 13px; }

.lv-card.stale .lc-metric, .lv-card.stale .lc-spark { opacity: .45; }
.lc-spark .s-line { fill: none; stroke: var(--c-series); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lc-spark .s-area { fill: var(--c-series); opacity: .08; stroke: none; }
.lc-spark .s-lim { stroke: var(--c-band-line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.lv-card.sev-0 .s-line, .lv-card.sev-1 .s-line { stroke: var(--c-crit); }
.lv-card.sev-0 .s-area, .lv-card.sev-1 .s-area { fill: var(--c-crit); }

.lc-range svg { width: 100%; height: 10px; display: block; }
.lc-range .r-track { fill: var(--surface-3); }
.lc-range .r-band { fill: var(--c-band-line); opacity: .45; }
.lc-range .r-mark { fill: var(--text); }
.lc-range .r-mark.out { fill: var(--c-crit); }
.lc-range-l { position: relative; height: 13px; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); margin-top: 2px; }
.lc-range-l span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }

.lc-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-soft); padding-top: 7px; font-size: 11px; color: var(--text-3); }
.lc-foot .ltr { font-size: 10.5px; }
.lc-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* العرض الجدولي، وتبديل العروض الثلاثة */
.lv-tablecard, .lv-cards { display: none; }
.lv-root[data-view="table"] .lv-panels, .lv-root[data-view="cards"] .lv-panels { display: none; }
.lv-root[data-view="table"] .lv-tablecard { display: flex; }
.lv-root[data-view="cards"] .lv-cards { display: block; }
.lv-table tr.sev-0 td { background: var(--crit-soft); }
.lv-table .pill.idle { background: var(--surface-3); color: var(--text-2); }

@media (max-width: 760px) {
  .lv-cols { display: none; }
  .lv-row { grid-template-columns: 1fr auto auto; row-gap: 6px; }
  .lv-range, .lv-spark { grid-column: 1 / -1; }
  .lv-spark svg { width: 100%; }
  .lv-hum, .lv-ago { display: none; }
  .lv-zone-now { margin-inline-start: 0; }
}

/* ─────────────── الرسوم */

.chart-box { position: relative; height: 320px; }
.chart-box.short { height: 220px; }
.legend .sw.band { background: var(--c-band); border: 1px solid var(--c-band-line); }
.now-values { display: flex; gap: 22px; align-items: baseline; margin-bottom: 6px; }
.now-values small { font-size: 14px; color: var(--text-2); margin-inline-start: 2px; }

/* ─────────────── التقرير */

.report { display: flex; flex-direction: column; gap: 12px; }
.report-head h2 { font-size: 18px; margin: 2px 0; }
.sub-head { border-top: 1px solid var(--border-soft); }
.sign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sign-line { border-bottom: 1px solid var(--border-strong); height: 34px; }
.small-note { font-size: 11px; padding-top: 0; }

/* ─────────────── تصفية الجداول: خانة تحت كل عمود وفرز من العنوان */

table.grid tr.filters th { padding: 4px 6px; background: var(--surface); position: sticky; top: 30px; }
table.grid tr.filters .input { min-height: 24px; font-size: 11.5px; padding: 1px 6px; }
table.grid th.sortable::after { content: ""; }
table.grid th .dir { margin-inline-start: 4px; font-size: 10px; }

@media print {
  .imp-bar, .flash, tr.filters, .lv-toolbar { display: none !important; }
  .view.pad { padding: 0; }
  .report-zone { break-inside: avoid-page; }
  .chart-box.short { height: 180px; }
}

/* القيم التقنية داخل الجداول لا تنكسر على سطرين */
table.grid .ltr, table.grid .num { white-space: nowrap; }

.now-values > div { direction: ltr; }
.now-values .hero-num { font-family: var(--font); }
.toolbar .input[type="date"] { width: auto; min-width: 0; }
.card-head > form.toolbar { flex: 1 1 420px; justify-content: flex-end; }

/* شاشة ضيقة: القائمة شريط أيقونات تلقائيا، والمحتوى يأخذ العرض */
@media (max-width: 900px) {
  .nav { width: var(--nav-w-collapsed); }
  .nav .nav-brand { height: auto; padding: 12px 0; gap: 10px; flex-direction: column-reverse; justify-content: center; }
  .nav .nav-brand b, .nav .nav-sec, .nav .nav-link span:not(.nav-count), .nav .nav-user .who, .nav .nav-user .av, .nav .nav-brand .nav-collapse { display: none; }
  .nav--collapsed #logout { display: block; }
  .nav .nav-link { justify-content: center; padding-inline: 0; gap: 0; }
  .nav .nav-link .nav-count { position: absolute; top: 2px; inset-inline-end: 10px; margin: 0; min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; padding-inline: 3px; }
  .nav .nav-foot { padding: 12px 0; }
  .nav .nav-user { justify-content: center; }
  .topbar { padding-inline: 14px; }
  .view.pad { padding: 12px; }
  .sign-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .topbar { height: auto; min-height: var(--top-h); flex-wrap: wrap; padding-block: 8px; }
  .crumb b { font-size: 14px; }
  .topbar-actions { flex-wrap: wrap; }
}
table.grid td { white-space: nowrap; }
table.grid td.wrap-text { white-space: normal; }

/* شاشة ضيقة: أدوات المراقبة الحية تنزل سطرا سطرا ولا تخرج عن العرض */
@media (max-width: 700px) {
  .lv-toolbar > *, .lv-toolbar .right { width: 100%; flex: 1 1 100%; margin-inline-start: 0; }
  .lv-toolbar .right { flex-wrap: wrap; }
  .lv-toolbar .seg { display: flex; width: 100%; }
  .lv-toolbar .seg button { flex: 1; padding-inline: 6px; }
  .lv-toolbar .select { max-width: none; }
  .lv-toolbar form .select { flex: 1; }
  .lv-cgroup-head { flex-wrap: wrap; row-gap: 4px; }
  .lv-cgrid { grid-template-columns: 1fr; }
}

/* الحرارة والرطوبة في مربع واحد: نصفان بفاصل، والمربع كله يحمر إذا خرجت أي منهما */
.lc-metrics { gap: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }
.lc-metrics:has(.lc-metric.out) { background: var(--crit-soft); border-color: #EFC9C1; }
.lc-metric, .lc-metric.out { background: none; border: 0; border-radius: 0; padding: 9px 12px 7px; }
.lc-metric + .lc-metric { border-inline-start: 1px solid var(--border); }
.lc-metrics:has(.lc-metric.out) .lc-metric + .lc-metric { border-inline-start-color: #EFC9C1; }

/* البطاقة المدمجة: نصف الارتفاع، والبيانات نفسها */
.lv-card { gap: 7px; padding: 11px 12px 9px; }
.lv-cgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lc-title b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-title .ltr { font-size: 10px; color: var(--text-3); align-self: flex-end; }
.lc-top { align-items: flex-start; }
.lc-top .lv-dot { margin-top: 5px; }

.lc-metric, .lc-metric.out { padding: 6px 10px 5px; gap: 0; }
.lc-m-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lc-m-row .lv-delta { font-size: 10.5px; min-height: 0; }
.lc-m-v .ltr { font-size: 25px; line-height: 1.15; }
.lc-metrics .lc-range { margin-top: 2px; }
.lc-metrics .lc-range-l { display: none; }

.lc-spark svg { height: 34px; }

.lc-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding-top: 7px; border-top: 1px solid var(--border-soft); }
.lc-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding-inline: 7px;
  border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border-soft);
  font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.lc-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lc-chip.good { background: var(--good-soft); border-color: transparent; color: var(--good); }
.lc-chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.lc-chip.crit { background: var(--crit-soft); border-color: transparent; color: var(--crit); }
.lc-chip.info { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.lc-chip .lc-batt { width: 18px; height: 9px; border-width: 1.3px; }
.lc-chip .lc-batt::after { top: 1.5px; height: 3px; inset-inline-end: -3.5px; }
.lc-ago { margin-inline-start: auto; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.lc-sub { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-3); }
.lc-sub > span + span::before { content: "·"; margin-inline-end: 6px; }
.lc-title .ltr { align-self: auto; }
.lc-chips { flex-wrap: nowrap; gap: 4px; }
.lc-chip { padding-inline: 5px; gap: 3px; }

/* ─────────────── شجرة المواقع والحساسات بجانب العرض */
.lv-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 12px; align-items: start; }
.lv-main { min-width: 0; }
.lv-tree { position: sticky; top: 0; max-height: calc(100vh - var(--top-h) - 36px); display: flex; flex-direction: column; overflow: hidden; }
.lt-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.lt-head b { font-size: 13.5px; flex: 1; }
.lt-search { padding: 0 10px 8px; }
.lt-search .input { min-width: 0; }
.lt-search > span { inset-inline-start: 19px; }
.lt-scroll { flex: 1; overflow: auto; padding: 4px 6px 10px; border-top: 1px solid var(--border-soft); }

.lt-node {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px;
  padding: 4px 8px; border: 0; background: none; border-radius: 7px; cursor: pointer;
  text-align: start; color: var(--text); font-size: 12.5px;
}
.lt-node:hover { background: var(--surface-2); }
.lt-node.on { background: var(--accent-soft); color: var(--accent); }
.lt-node svg { width: 15px; height: 15px; stroke: var(--text-3); fill: none; stroke-width: 1.8; flex: none; }
.lt-node.on svg { stroke: var(--accent); }
.lt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-all, .lt-d1 { font-weight: 700; }
.lt-loc { font-weight: 600; color: var(--text); }
.lt-d3, .lt-d4, .lt-d5 { color: var(--text-2); }
.lt-sensor { min-height: 27px; font-size: 12px; padding-inline-start: 10px; }
.lt-count { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 16px; text-align: end; }
.lt-badge { font-size: 10px; font-weight: 700; color: #fff; border-radius: 9px; padding: 0 6px; line-height: 16px; font-variant-numeric: tabular-nums; }
.lt-badge.crit { background: var(--c-crit); }
.lt-badge.warn { background: var(--c-warn); }
.lt-badge.idle { background: var(--c-idle); }
.lt-val { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.lt-sensor.sev-0 .lt-name { color: var(--crit); font-weight: 600; }

/* التفرع: سهم يدور، وخط عمودي يربط الأبناء بأبيهم */
.lt-chev { width: 14px; height: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
/* مثلث لا يعكسه اتجاه النص (بخلاف ‹ ›): مغلق يشير إلى داخل الفرع، ومفتوح لأسفل */
.lt-chev::before { content: "◂"; font-size: 11px; line-height: 1; color: var(--text-3); transition: transform .14s; }
[dir="ltr"] .lt-chev::before { content: "▸"; }
.lt-group.open > .lt-node .lt-chev::before { transform: rotate(-90deg); }
[dir="ltr"] .lt-group.open > .lt-node .lt-chev::before { transform: rotate(90deg); }
.lt-chev:hover { background: var(--surface-3); }
.lt-children { display: none; margin-inline-start: 13px; padding-inline-start: 6px; border-inline-start: 1px dashed var(--border); }
.lt-group.open > .lt-children { display: block; }

.lt-crumb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px 4px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.lt-crumb button { border: 0; background: none; color: inherit; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; }
.lt-crumb button:hover { background: rgba(14,124,107,.15); }

/* الشجرة تُرسم داخل اللوحة ثم تنقل؛ إن بقيت هناك لحظة فلا تظهر */
#liveBoard > [data-tree] { display: none; }

@media (max-width: 1000px) {
  .lv-layout { grid-template-columns: 1fr; }
  .lv-tree { position: static; max-height: 320px; }
}
.lt-count.part { color: var(--accent); font-weight: 700; }
.lt-sensor.lt-dim { opacity: .38; }

/* المعايرة مثبتة في البطاقة: تسمية، حالة، شريط ما بقي من الدورة السنوية، وتاريخ الانتهاء */
.lc-cal {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s;
}
.lc-cal:hover, .lc-cal:focus-visible { border-color: var(--accent-line); background: var(--accent-soft); outline: none; }
.lc-cal-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.lc-cal-l svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lc-cal .pill { font-size: 10.5px; padding: 0 8px; }
.lc-cal-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; min-width: 40px; }
.lc-cal-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c-good); }
.lc-cal.warn .lc-cal-bar i { background: var(--c-warn); }
.lc-cal.crit .lc-cal-bar i { background: var(--c-crit); }
.lc-cal-d { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.lc-cal-d .ltr { font-size: 11px; font-weight: 700; color: var(--text); }
.lc-cal-d small { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.lc-cal.warn .lc-cal-d small { color: var(--warn); }
.lc-cal.crit .lc-cal-d small { color: var(--crit); }

/* آخر تحديث بتاريخه ووقته في طرف سطر الشارات */
.lc-updated { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.lc-updated svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; }
.lv-card.stale .lc-updated { color: var(--crit); }

/* اللوحات: عمودا آخر تحديث (تاريخ ووقت) والمعايرة */
.lv-cols, .lv-row { grid-template-columns: minmax(120px, 1.4fr) 76px 52px minmax(80px, 1fr) 44px 110px 104px 196px; }
.lv-zone { overflow-x: auto; }
.lv-cols > span:nth-child(n+7), .lv-ago { text-align: start; }
.lv-ago .ltr { font-size: 11px; color: var(--text-2); }
.lv-row.stale .lv-ago .ltr { color: var(--crit); }
.lv-cal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 7px; cursor: pointer; }
.lv-cal:hover, .lv-cal:focus-visible { background: var(--accent-soft); outline: none; }
.lv-cal .pill { font-size: 10.5px; padding: 0 7px; }
.lv-cal .ltr { font-size: 11px; font-weight: 600; color: var(--text); }
.lv-cal.warn .lc-cal-bar i { background: var(--c-warn); }
.lv-cal.crit .lc-cal-bar i { background: var(--c-crit); }
@media (max-width: 760px) { .lv-cal { grid-column: 1 / -1; } }

/* صفحة الحساس: الإحصاءات الست في سطر واحد */
.stats.one-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats.one-row .stat .v { font-size: 19px; }
@media (max-width: 1250px) { .stats.one-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lv-table .lv-cal { min-width: 200px; }
.lv-loc { display: flex; flex-direction: column; line-height: 1.3; }
.lv-loc b { font-weight: 600; font-size: 12.5px; }
.lv-loc small { font-size: 10.5px; color: var(--text-3); }
.lv-table .lv-cal { min-width: 180px; }
.lv-st, .lv-dev { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.3; }
.lv-st small { font-size: 10.5px; font-weight: 600; color: var(--crit); }
.lv-dev small { font-size: 10.5px; color: var(--text-3); }
.lv-table .lv-cal { min-width: 165px; }

.lv-table .lv-cal { min-width: 0; grid-template-columns: auto 44px auto; gap: 5px; padding-inline: 4px; }
.lv-table .lv-cal .pill { padding: 0 6px; }
.lv-dev b { font-size: 12px; font-weight: 600; }
table.grid.lv-table td, table.grid.lv-table th { padding-inline: 6px; }
table.grid.lv-table td:first-child, table.grid.lv-table th:first-child { padding-inline-start: 12px; }

/* الشجرة: سطر ثان تحت اسم الحساس بوقت آخر تحديث وحالة المعايرة */
.lt-2l { display: flex; flex-direction: column; line-height: 1.3; }
.lt-2l > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-2l small { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-3); }
.lt-2l small .ltr { font-size: 10px; }
.lt-cal { font-weight: 700; }
.lt-cal.good { color: var(--good); }
.lt-cal.warn { color: var(--warn); }
.lt-cal.crit { color: var(--crit); }
.lt-sensor { min-height: 36px; align-items: center; }

/* شاشة المواقع: إزاحة بحسب المستوى ورقم المستوى في دائرة */
.loc-name { display: inline-flex; align-items: center; gap: 8px; }
.loc-lvl { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.loc-table tr td:first-child { border-inline-start: 0; }

/* الشجرة: إزاحة أصغر لكل مستوى حتى لا تأكل خمسة مستويات عرض العمود،
   وما زاد عن العرض يمرر أفقيا بشريط أسفل الشجرة بدل قص الأسماء */
.lt-children { margin-inline-start: 7px; padding-inline-start: 3px; }
.lt-scroll { overflow-x: scroll; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.lt-scroll::-webkit-scrollbar { height: 9px; width: 9px; }
.lt-body { width: max-content; min-width: 100%; }
.lt-scroll .lt-name, .lt-2l > span { overflow: visible; text-overflow: clip; }
.lt-node { gap: 5px; padding-inline: 6px; }
.lt-sensor { padding-inline-start: 6px; }

/* اللوحات: مسافات أصغر بين الأعمدة حتى يتسع الصف للشاشة بجانب الشجرة،
   وشريط تحريك أفقي ثابت أسفل كل لوحة لما زاد عن العرض */
.lv-cols, .lv-row {
  column-gap: 8px; padding-inline: 10px;
  grid-template-columns: minmax(104px, 1.4fr) 66px 44px minmax(60px, 1fr) 40px 84px 100px 176px;
}
.lv-spark svg { width: 84px; }
.lv-zone-head { padding: 8px 10px; gap: 10px; }
.lv-zone { overflow-x: scroll; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.lv-zone::-webkit-scrollbar { height: 9px; }
.lv-zone .lv-cal { gap: 5px; padding-inline: 4px; }
/* الصف لا يضيق عن مجموع أعمدته؛ ما زاد يمرر بشريط اللوحة */
.lv-zone .lv-cols, .lv-zone .lv-row { min-width: 748px; }
.lv-zone .lv-cal { grid-template-columns: auto minmax(14px, 1fr) auto; min-width: 0; }
/* سطر المعايرة: الحالة ملونة مكان التسمية، والعمود الثاني (كان الشارة) لم يعد موجودا */
.lc-cal { grid-template-columns: auto 1fr auto; }
.lc-cal-st { font-weight: 700; }
.lc-cal.good .lc-cal-st { color: var(--good); }
.lc-cal.warn .lc-cal-st { color: var(--warn); }
.lc-cal.crit .lc-cal-st { color: var(--crit); }

/* الجدول: شريط تحريك أفقي ثابت أسفله، والمعايرة بحالتها الملونة مثل البطاقة */
.lv-tablecard .table-wrap { overflow-x: scroll; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.lv-tablecard .table-wrap::-webkit-scrollbar { height: 9px; }
.lv-cal .lc-cal-st { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.lv-cal .lc-cal-st svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.lv-cal.good .lc-cal-st { color: var(--good); }
.lv-cal.warn .lc-cal-st { color: var(--warn); }
.lv-cal.crit .lc-cal-st { color: var(--crit); }
/* مسار الموقع بخمسة مستويات طويل: يلتف على سطرين بدل أن يمد الجدول */
.lv-table .lv-loc small { white-space: normal; max-width: 190px; line-height: 1.35; }

/* الشجرة: الشبكة الحالية وحالة المعايرة بأيقونتها، كالبطاقة والجدول */
.lt-cal { display: inline-flex; align-items: center; gap: 2px; }
.lt-cal svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
.lt-net { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); }
.lt-net:empty { display: none; }

/* ============================================================================
   لوحة المؤشرات منقولة من TM (wwwroot/assets/css/fleetops-theme.css، قسم .bi) كما هي.
   متغيرات TM (--fo-*) مربوطة بمتغيرات هذا النظام داخل .bi وحدها.
   ========================================================================== */
.bi { --fo-surface: var(--surface); --fo-border-soft: var(--border-soft); --fo-border: var(--border); --fo-text: var(--text); --fo-text-2: var(--text-2); --fo-text-3: var(--text-3); --fo-accent: var(--accent); }
.bi { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 16px; }
.bi-head { display: flex; align-items: center; gap: 12px; }
.bi-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--fo-text); }

.bi-row-4 { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bi-row-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bi-row-2 { display: grid; gap: 12px; grid-template-columns: 2fr minmax(0, 1fr); }
.bi-tiles { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1399px) { .bi-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .bi-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .bi-row-4, .bi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-row-3, .bi-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .bi-row-4, .bi-tiles { grid-template-columns: 1fr; } }

.bi-card, .bi-tile {
  background: var(--fo-surface); border: 1px solid var(--fo-border-soft);
  border-radius: 10px; padding: 14px 16px 16px;
  box-shadow: 0 1px 2px rgba(24, 32, 49, .04);
  min-width: 0;
}
.bi-card { display: flex; flex-direction: column; }
.bi-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bi-card-head h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--fo-text); }
.bi-tile .bi-card-head h4 { font-size: 12.5px; font-weight: 600; }

.bi-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fo-text-2); flex: none; }
.bi-badge i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.bi-card-filters { display: flex; align-items: center; gap: 10px; margin-block-start: 4px; flex-wrap: wrap; }
.bi-card-filters .grow { flex: 1; }
.bi-filter { font-size: 11.5px; color: var(--fo-text-2); }
.bi-group { font-size: 11.5px; color: var(--fo-text-3); border-inline-start: 1px solid var(--fo-border); padding-inline-start: 10px; }

.bi-card-body { margin-block-start: 12px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bi-none { margin: 18px 0; font-size: 12.5px; color: var(--fo-text-2); }

.bi-ring { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1; }
.bi-donut { flex: none; }
.bi-legend { flex: 1; min-width: min(130px, 100%); display: flex; flex-direction: column; gap: 7px; }
.bi-legend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.bi-legend-row b { font-weight: 600; font-variant-numeric: tabular-nums; }

.bi-mbars { display: flex; flex-direction: column; gap: 14px; }
.bi-mbar > span { display: block; font-size: 12.5px; font-weight: 600; margin-block-end: 6px; }
.bi-mbar-track { height: 13px; border-radius: 7px; }
.bi-mbar-track i { display: block; height: 100%; border-radius: 7px; min-width: 8px; }

.bi-tasks { display: flex; align-items: flex-end; gap: 10px; height: 180px; }
.bi-task { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 3px; min-width: 0; }
.bi-task-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  flex: none; max-height: 100%; overflow: hidden;
}
.bi-task-bar { flex: 1; min-width: 0; max-width: 34px; border-radius: 3px 3px 0 0; min-height: 4px; }

.bi-tile-body { display: flex; align-items: flex-start; gap: 10px; margin-block-start: 8px; }
.bi-tile-body > div:first-child { flex: 1; min-width: 0; }
.bi-tile-value { display: block; font-size: 25px; font-weight: 700; color: #1E9BD7; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bi-tile-missing { display: block; font-size: 25px; font-weight: 700; color: var(--fo-text-3); line-height: 1.15; }
.bi-tile-note { display: block; font-size: 11.5px; color: var(--fo-text-2); margin-block-start: 2px; }
.bi-tile-side { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 64px; }
.bi-tile-side b { font-size: 21px; font-weight: 600; color: var(--fo-text-3); font-variant-numeric: tabular-nums; }
.bi-tile-side span { font-size: 10.5px; color: var(--fo-text-3); white-space: nowrap; }
.bi-spark { width: 64px; height: 30px; display: block; }

.bi-speed { display: flex; align-items: center; justify-content: center; flex: 1; }
.bi-speed-foot { display: flex; gap: 20px; justify-content: center; text-align: center; margin-top: 8px; }
.bi-speed-foot > div { display: flex; flex-direction: column; gap: 2px; }
.bi-speed-foot b { font-size: 17px; font-weight: 700; color: var(--fo-text); }
.bi-speed-foot span { font-size: 11.5px; }

.bi-chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bi-unit { font-size: 11.5px; color: var(--fo-text-3); }
.bi-key { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.bi-key i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bi-chart { flex: 1; min-height: 210px; direction: ltr; }

.bi-stack { display: flex; flex-direction: column; gap: 10px; }
.bi-driver { display: flex; align-items: center; gap: 12px; color: var(--fo-text); text-decoration: none; }
.bi-driver:hover .bi-driver-name { color: var(--fo-accent); }
.bi-driver-name { width: 150px; flex: none; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-driver-track { flex: 1; min-width: 0; }
.bi-driver-fill { display: flex; height: 20px; border-radius: 3px; overflow: hidden; min-width: 54px; }
.bi-driver-fill span { display: flex; align-items: center; justify-content: center; min-width: 0; }
.bi-driver-fill b { font-size: 10.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* تحت اللوحة: يحتاج انتباها والبوابات (مقابل fx-attn و fx-gw-list في TM) */
.bi-row-below { display: grid; gap: 12px; grid-template-columns: 7fr 5fr; }
@media (max-width: 1100px) { .bi-row-below { grid-template-columns: 1fr; } }
.bi-attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bi-attn li + li { border-top: 1px solid var(--border-soft); }
.bi-attn a { display: flex; align-items: center; gap: 10px; padding: 8px 2px; color: var(--text); }
.bi-attn a:hover { background: var(--surface-2); text-decoration: none; }
.bi-attn-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bi-attn-id b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-attn-id small { font-size: 10.5px; color: var(--text-3); }
.bi-attn-val { display: flex; flex-direction: column; align-items: flex-end; min-width: 70px; line-height: 1.3; }
.bi-attn-val b { font-size: 12.5px; font-weight: 700; color: var(--crit); }
.bi-attn-val small { font-size: 10.5px; color: var(--text-3); }
.bi-attn-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-2); }
.bi-attn-meta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bi-more { font-size: 12px; font-weight: 600; margin-top: 8px; display: inline-block; }
.bi-card-head .bi-more { margin-top: 0; }
.bi-card-head .pill { flex: none; }
.dash-tabs { display: flex; align-items: center; }
.dash-tabs .seg button.on { background: var(--accent); color: #fff; }

/* ============================================================================
   لوحة الحساس منقولة من TM (fleetops-theme.css: fx-panel و fx-kpis و fx-segbar و fx-legend
   و fx-alert-empty) كما هي، ومتغيرات TM مربوطة بمتغيرات هذا النظام داخل .sd وحدها.
   ========================================================================== */
.sd { --fo-surface: var(--surface); --fo-surface-3: var(--border-soft); --fo-border-soft: var(--border-soft); --fo-border: var(--border); --fo-text: var(--text); --fo-text-2: var(--text-2); --fo-text-3: var(--text-3); --fo-accent: var(--accent); --fo-good: var(--good); --fo-radius: var(--radius); --fo-shadow-xs: var(--shadow-xs); --fo-font-mono: var(--font-mono); }
.sd { margin: 6px 0 16px; }
.sd-row { display: grid; gap: 12px; grid-template-columns: minmax(280px, 4fr) 8fr; align-items: start; }
.sd-row-alerts { grid-template-columns: 5fr 7fr; }
@media (max-width: 1100px) { .sd-row, .sd-row-alerts { grid-template-columns: 1fr; } }
.sd-side, .sd-main { min-width: 0; }
.sd-live { margin-bottom: 12px; }
.sd-live .lv-card { max-width: none; }

.fx-panel { margin-bottom: 12px; }
.fx-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid var(--fo-border-soft);
}
.fx-panel-head h5 { margin: 0; font-size: 14px; font-weight: 700; color: var(--fo-text); }
.fx-panel-hint { display: inline-flex; gap: 10px; font-family: var(--fo-font-mono); font-size: 11.5px; color: var(--fo-good); }
.fx-panel-body { padding: 12px 15px; }
.fx-lim { display: inline-flex; align-items: center; gap: 3px; }

.fx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 991px) { .fx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-kpi {
  background: var(--fo-surface); border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius); box-shadow: var(--fo-shadow-xs);
  padding: 12px 15px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.fx-kpi > span { font-size: 12px; color: var(--fo-text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-kpi > b {
  font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--fo-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.fx-kpi > b.t-good { color: var(--good); }
.fx-kpi > b.t-warn { color: var(--warn); }
.fx-kpi > b.t-crit { color: var(--crit); }
.fx-kpi > b.faint { color: var(--fo-text-3); }
.fx-kpi > b small { font-size: 14px; font-weight: 600; margin-inline-start: 2px; }

.fx-segbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--fo-surface-3); }
.fx-segbar i { display: block; height: 100%; }
.fx-segbar i.good { background: #0F8C64; }
.fx-segbar i.warn { background: #CF8B12; }
.fx-segbar i.crit { background: #CB3A2B; }
.fx-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fo-text-2); }
.fx-legend li b { margin-inline-start: auto; color: var(--fo-text); font-variant-numeric: tabular-nums; }
.fx-legend li small { min-width: 54px; text-align: end; font-family: var(--fo-font-mono); font-size: 11px; color: var(--fo-text-3); }

.fx-alert-card { margin-bottom: 0; }
.fx-alert-empty {
  min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; color: var(--fo-text-2); font-size: 12.5px; line-height: 1.7; padding: 0 24px;
}
.fx-alert-empty svg { width: 26px; height: 26px; stroke: var(--fo-text-3); fill: none; stroke-width: 1.6; }
#sdTabs { margin-bottom: 4px; }

/* ============================================================================
   تقرير الدراسة منقول من TM (StudyReport/PrintPdf.cshtml: الترويسة و h1 و table-normal و table-sm
   و custom-sub-list و text-large) كما هو، معكوسا للعربية.
   ========================================================================== */
.tmr { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 0 0 24px; margin: 6px 0 16px; color: #000; font-size: 14px; }
.tmr-header { display: flex; height: 30mm; border-bottom: solid #54af7a 2.25pt; padding: 10px; gap: 16px; }
.tmr-header-name { width: 30%; background: #006666; color: #fdde00; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 10px; }
.tmr-header-name span { font-size: 22pt; font-weight: 600; line-height: 1.3; }
.tmr-header-title { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tmr-header-title b { font-size: 18px; color: #006666; }
.tmr-header-title span { font-size: 13px; color: #333; }
.tmr-header-title small { font-family: var(--font-mono); font-size: 12px; color: #555; text-align: start; }
.tmr-section { padding-top: 10px; margin-inline: 20px; }
.tmr h1 { border-bottom: solid #fdde00 2.25pt; color: #2ba3cd; padding-bottom: .3cm; font-size: 16px; font-weight: 700; margin: 14px 0 10px; }
.tmr p { margin: 6px 0; }
.tmr-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.tmr-table th { background: #d9d9d9; border: solid #000 1pt; color: #000; padding: 0 5.4pt; height: 40px; font-weight: 600; }
.tmr-table td { border: solid #000 1pt; padding: 0 5.4pt; height: 40px; }
.tmr-left-th th { text-align: start; }
.tmr-sm, .tmr-sm td, .tmr-sm th { padding: 2px !important; font-size: 11px; letter-spacing: .1px; }
.tmr-sm th { font-size: 12px; }
.tmr-center td, .tmr-center th { text-align: center; }
.tmr-scroll { overflow-x: auto; margin-top: 4px; }
.tmr-lim { display: block; font-size: 9.5px; color: #666; font-family: var(--font-mono); }
.tmr-sub { counter-reset: sub-counter; list-style: none; padding-inline-start: 1.5em; margin: 0; }
.tmr-sub > li { margin-bottom: 14px; }
.tmr-sub > li::before { counter-increment: sub-counter; content: attr(data-prefix) "." counter(sub-counter) " "; font-weight: bold; padding-inline-end: 3px; }
.tmr-note { margin: 4px 0 0; padding-inline-start: 20px; }
.tmr-chart { position: relative; height: 400px; margin-top: 6px; }
.tmr td.tmr-hot { background: #c00000; color: #fff; }
.tmr td.tmr-cold { background: #006fc0; color: #fff; }
.tmr td.tmr-arid { background: #ffff00; }
.tmr td.tmr-humid { background: #00af50; color: #fff; }
.tmr th.tmr-zone { text-align: start; background: #e4eaed; }
.tmr-checks { display: flex; flex-direction: column; gap: 8px; padding-inline-start: 1.5cm; }
.tmr-checks label { display: flex; align-items: center; gap: 10px; }
.tmr-checks input { appearance: none; -webkit-appearance: none; width: 1.7em; height: 1.7em; border: .1em solid #000; border-radius: 0; margin: 0; display: grid; place-content: center; }
.tmr-checks input:checked::after { content: "✓"; font-size: 1.3em; color: #000; }
.tmr-text td { padding: 12px; height: 2.2cm; vertical-align: top; text-align: justify; border-color: #808080; }
.tmr-label { margin: 8px 0 0; font-weight: 600; }
.tmr-sign { margin: 12px 0; }
.tmr-sign th { width: 2.5cm; }
.tmr-sigbox { height: 1.5cm; width: 4cm; }
@media print {
  .no-print { display: none !important; }
  .tmr { border: 0; margin: 0; }
  .tmr-break { break-before: page; }
  .tmr-sub > li { break-inside: avoid; }
  .tmr-chart { height: 360px; }
  .tmr-text td { height: auto; min-height: 1cm; padding: 6px 10px; }
}
.tmr-sm td span[dir="ltr"] { white-space: nowrap; }

/* ─────────────── 21 CFR Part 11: السبب والتوقيع وقراءة المعايرة */
.reason-field { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.sign-box { border: 1px solid #C9DAF0; background: #F4F8FD; border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sign-head { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #2A4E9B; }
.sign-head svg, .sig-show svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.sig-show { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--text-2); background: var(--good-soft); border: 1px solid #C5E3D5; border-radius: 6px; padding: 6px 10px; }
.sig-show svg { color: var(--good); }
.cal-readonly { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--text-2); }
.cal-readonly b { color: var(--text); }
.cal-readonly .hint { flex-basis: 100%; }
.chain-ok { color: var(--good); font-weight: 600; }
.chain-bad { color: var(--crit); font-weight: 600; }
.chg { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
.chg li { white-space: nowrap; }
.chg .old { color: var(--crit); text-decoration: line-through; }
.chg .new { color: var(--good); }
.gap-row td { background: #FFF6E5; }
.idle-warn { position: fixed; inset-inline: 0; bottom: 18px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); z-index: 100; background: #182031; color: #fff; border-radius: 10px; padding: 10px 16px; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-lg); }
.tmr td.tmr-nodata { background: #FFF6E5; }
.draft-mark { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 90px; font-weight: 700; color: rgba(200, 40, 40, .09); transform: rotate(-24deg); pointer-events: none; z-index: 10; }
.print-meta { font-size: 10px; color: #666; text-align: end; margin-bottom: 4px; }
.audit-table td { max-width: 300px; }
.audit-table .chg li { white-space: normal; }
.audit-table td.wrap-text { min-width: 140px; }
.audit-table td:nth-child(5) { min-width: 280px; }
.audit-table td.wrap-text { word-break: break-word; }
.audit-table td:nth-child(4) { white-space: nowrap; }

/* مستويات الإنذار: Minor أصفر، Major برتقالي، Critical أحمر */
.pill.sev-minor { background: #FDF3C4; color: #7A5A00; }
.pill.sev-major { background: #FDE2C8; color: #A4490B; }
.pill.sev-critical { background: var(--crit); color: #fff; }
.sev-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-2, inherit); }
.sev-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; font-size: 11.5px; font-family: var(--font-mono); margin-top: 8px; }
.sev-bar > div { display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0 4px; min-width: 0; }
.sev-bar .b-crit { background: var(--crit); color: #fff; flex: 1; }
.sev-bar .b-major { background: #FDE2C8; color: #A4490B; flex: .7; }
.sev-bar .b-minor { background: #FDF3C4; color: #7A5A00; flex: 1.2; }
.sev-bar .b-ok { background: var(--good-soft); color: var(--good); flex: 3; }

/* قواعد التنبيه: خطوات مرقمة، أنواع كبطاقات، شجرة اختيار، وشبكة الجدولة من FleetOps */
.rf-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; flex-wrap: wrap; }
.rf-steps button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.rf-steps .n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--border); color: var(--text-2); font-size: 12px; font-weight: 600; }
.rf-steps button.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.rf-steps button.on .n { background: var(--accent); color: #fff; }
.rf-steps button.done .n { background: var(--good-soft); color: var(--good); }
.rf-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.rf-kind { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.rf-kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rf-ex { width: 70px; display: inline-block; }
.rf-scope-head { align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.rf-scope-head .input { width: 260px; }
.rf-tree { border: 1px solid var(--border); border-radius: 8px; max-height: 460px; overflow: auto; margin-top: 8px; padding: 4px 0; }
.rf-node { display: flex; align-items: center; gap: 10px; padding: 4px 12px; padding-inline-start: calc(12px + var(--d, 0) * 22px); }
.rf-node:hover { background: var(--surface-2, #f6f7f9); }
.rf-node .check { margin: 0; gap: 6px; display: inline-flex; align-items: center; }
.rf-node svg { width: 15px; height: 15px; opacity: .7; }
.rf-zone { font-weight: 600; }
.rf-node.covered { color: var(--text-3, #8a94a6); }
.rf-node.filtered { display: none; }
.rf-tree.all { opacity: .6; }
.rf-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }
.rf-delete { margin-top: 12px; padding: 12px 16px; align-items: center; }
.rf-delete .input { width: 260px; }
.rules-grid td.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-schedhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ar-schedhead .select { width: 220px; }
.ar-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.ar-legend .sw { width: 13px; height: 16px; border-radius: 2px; background: var(--border); display: inline-block; }
.ar-legend .sw.on { background: var(--accent); }
/* الشبكة LTR كمحور الزمن في أي نظام: الساعات تمشي من اليسار إلى اليمين، وأسماء الأيام عربية */
.ar-grid { direction: ltr; display: grid; grid-template-columns: 46px repeat(24, minmax(0, 1fr)); gap: 2px; user-select: none; max-width: 760px; }
.ar-hh { font-size: 9.5px; color: var(--text-3, #8a94a6); text-align: start; white-space: nowrap; }
.ar-dd { font-size: 11px; color: var(--text-2); padding-inline-end: 8px; display: flex; align-items: center; justify-content: flex-end; direction: rtl; }
.ar-cell { height: 20px; border-radius: 2px; background: var(--border); cursor: pointer; }
.ar-cell:hover { outline: 1px solid var(--accent); }
.ar-cell.on { background: var(--accent); }
.rf-lvl { display: flex; align-items: center; gap: 8px; }
.msg-test form { margin-top: 8px; } .msg-test .input { max-width: 280px; }
.test-send .btn { padding-inline: 8px; } .test-send svg { width: 13px; height: 13px; }
.test-send { display: inline-flex; vertical-align: middle; } td.actions:has(.test-send) { white-space: nowrap; }

/* اختيار بأزرار راديو داخل .seg: نفس شكل أزرار .seg */
.seg label { display: inline-flex; align-items: center; padding: 6px 13px; font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.seg label + label { border-inline-start: 1px solid var(--border); }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--accent); color: #fff; font-weight: 600; }

/* ───────── سجل القراءات: جدول زمني بعمود لكل حساس */
.lg-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.lg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
.lg-sw.max { background: #FCE3E8; border-color: #E9A3B1; } .lg-sw.min { background: #DDF0FB; border-color: #8DCBEE; }
.lg-out-s { color: #CC2F4B; font-weight: 800; }
.lg-maxt { color: #CC2F4B; font-weight: 700; } .lg-mint { color: #007DBA; font-weight: 700; }
.lg-wrap { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.lg-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lg-table thead { position: sticky; top: 0; z-index: 2; }
.lg-table th { background: var(--surface-2, #F4F6FA); color: var(--text); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: center; z-index: 1; }
.lg-table thead tr:nth-child(2) th { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.lg-table th.lg-time { text-align: start; vertical-align: bottom; }
.lg-group b { display: block; font-size: 12.5px; }
.lg-sub { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-3); }
.lg-serial { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--text-3); }
.lg-table th.lg-group, .lg-table th.lg-gend, .lg-table td.lg-gend { border-inline-end: 1px solid var(--border); }
.lg-table th.lg-group:last-child, .lg-table th.lg-gend:last-child, .lg-table td.lg-gend:last-child { border-inline-end: 0; }
.lg-table td { padding: 3px 10px; border-bottom: 1px solid var(--border-soft, #EEF1F5); text-align: center; white-space: nowrap; }
.lg-table td.lg-time { text-align: start; color: var(--text-2); border-inline-end: 1px solid var(--border); }
.lg-table th.lg-time { border-inline-end: 1px solid var(--border); }
.lg-table tbody tr:nth-child(even) td { background: #FAFBFD; }
.lg-table tbody tr.lg-day td { border-top: 2px solid #C9D1DE; }
.lg-table td.max { background: #FCE3E8 !important; font-weight: 800; color: #A32640; }
.lg-table td.min { background: #DDF0FB !important; font-weight: 800; color: #005F8F; }
.lg-table td.out { color: #CC2F4B; font-weight: 800; }
.lg-h { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.lg-h .hint { font-size: 11.5px; font-weight: 400; color: var(--text-3); margin-inline-start: 6px; }
/* عمود الوقت ثابت عند التمرير بالعرض: مع خمسين حساسا يبقى كل صف مقروءا بوقته */
.lg-table td.lg-time, .lg-table th.lg-time { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface, #fff); }
.lg-table thead th.lg-time { background: var(--surface-2, #F4F6FA); z-index: 3; }
.lg-table tbody tr:nth-child(even) td.lg-time { background: #FAFBFD; }
.lg-chunk + .lg-chunk { margin-top: 14px; }
.lg-part { padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--surface-2, #F4F6FA); border-bottom: 1px solid var(--border); }
/* اختيار حساسات السجل: قائمة ببحث مجمعة بالغرف، تتسع لخمسين حساسا دون أن تطول الصفحة */
.lg-pick { margin-top: 12px; }
.lg-pick-count { font-weight: 500; color: var(--text-3); margin-inline-start: 6px; }
.lg-pick-box { border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); }
.lg-pick-head { display: flex; gap: 6px; align-items: center; padding: 8px; border-bottom: 1px solid var(--border); }
.lg-pick-head .input { flex: 1; min-width: 0; }
.lg-pick-list { max-height: 240px; overflow: auto; padding: 4px 10px 10px; columns: 3 220px; column-gap: 18px; }
.lg-pick-grp { break-inside: avoid; padding-top: 6px; }
.lg-pick-place { font-size: 11px; font-weight: 700; color: var(--text-3); margin-bottom: 4px; }
.lg-pick-grp .check { padding: 3px 0; }
.lg-pick-grp .check .ltr { font-size: 10.5px; font-family: var(--font-mono); }

/* ───────── تقارير السجلات (المعايرات، التنبيهات، الانقطاع، الإشعارات) */
.lr-table td { vertical-align: top; }
.lr-table td.wrap { white-space: normal; min-width: 160px; max-width: 280px; }
.lr-sub { font-size: 10.5px; color: var(--text-3); margin-top: 1px; white-space: nowrap; }
.lr-table td.place { min-width: 130px; }
.lr-table td.lr-crit { color: #CC2F4B; font-weight: 700; }
.lr-table td.lr-warn { color: #C25E00; font-weight: 700; }
.pill.muted { background: var(--surface-2, #F1F4F8); color: var(--text-3); }

/* ───────── صفحة التقارير: نبض بأرقام قابلة للنقر، ثم ثلاثة مسارات مرتبة بالسؤال */
.rh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rh-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.rh-head .q { margin-top: 4px; font-size: 13.5px; color: var(--text-2); }
.rh-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rh-tools .input { width: 260px; }
.rh-pulse-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 2px 8px; }
.rh-pulse-head b { font-size: 13px; font-weight: 800; }
.rh-pulse-head span { font-size: 11.5px; color: var(--text-3); }
.rh-pulse { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.rh-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px; color: inherit; text-decoration: none; border-inline-start: 1px solid var(--border); min-width: 0; }
.rh-tile:first-child { border-inline-start: 0; }
.rh-tile:hover { background: var(--surface-2, #F6F8FB); }
.rh-tile::after { content: "←"; position: absolute; inset-inline-end: 12px; top: 10px; font-size: 13px; color: var(--text-3); opacity: 0; transition: opacity .15s; }
.rh-tile:hover::after { opacity: 1; }
.rh-tile .l { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-tile .v { font-size: 28px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rh-tile .v small { font-size: 13px; font-weight: 700; color: var(--text-3); }
.rh-tile .s { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-tile.crit .v { color: #CC2F4B; } .rh-tile.warn .v { color: #FF7900; } .rh-tile.ok .v { color: #16C75B; }
/* المسارات تحت بعض بعرض الصفحة، وتقارير كل مسار أربعة في السطر */
.rh-lanes { display: flex; flex-direction: column; gap: 14px; }
.rh-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: -1px; margin-inline-end: -1px; }
.rh-lane { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.rh-lane > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2, #F6F8FB); }
.rh-lane > header .no { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--lane); color: #fff; font-weight: 800; font-size: 13px; }
.rh-lane > header b { display: block; font-size: 14px; font-weight: 800; }
.rh-lane > header span { display: block; font-size: 11.5px; color: var(--text-3); }
.rh-row { display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border); min-width: 0; }
.rh-row[hidden] { display: none; }
.rh-main { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 14px 6px; color: inherit; text-decoration: none; }
.rh-main .ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; }
.rh-main .ic svg { width: 19px; height: 19px; stroke: #fff; }
.rh-main .t b { display: block; font-size: 14px; font-weight: 700; }
.rh-main .t span { display: block; font-size: 12px; color: var(--text-2); line-height: 1.6; margin-top: 2px; }
.rh-row:hover { background: #FAFBFD; }
.rh-row:hover .rh-main .t b { color: var(--accent); }
.rh-meta { display: flex; align-items: center; gap: 5px; padding: 0 14px 12px; flex-wrap: wrap; }
.rh-meta button { font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border: 1px dashed var(--border-strong, #C9D1DE); border-radius: 6px; color: var(--text-2); background: none; cursor: pointer; }
.rh-meta button:hover { border-color: var(--accent); color: var(--accent); }
.rh-main .t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rh-meta a { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); text-decoration: none; background: var(--surface, #fff); }
.rh-meta a:hover { border-color: var(--accent); color: var(--accent); }
.rh-sched { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #008F88; margin-inline-start: auto; }
.rh-sched svg { width: 13px; height: 13px; }
@media (max-width: 1200px) { .rh-pulse { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rh-tile:nth-child(4) { border-inline-start: 0; } .rh-tile:nth-child(n+4) { border-top: 1px solid var(--border); } .rh-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#rhAud button { white-space: nowrap; }
.rh-aud { font-size: 11px; color: var(--text-3); }
.rh-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; font-size: 12px; color: var(--text-2); }
.rh-foot a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.rh-foot svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .rh-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-tile:nth-child(n) { border-inline-start: 1px solid var(--border); border-top: 1px solid var(--border); }
  .rh-tile:nth-child(odd) { border-inline-start: 0; } .rh-tile:nth-child(-n+2) { border-top: 0; }
  .rh-tools, .rh-tools .input { width: 100%; }
  .rh-tools .seg { max-width: 100%; overflow-x: auto; }
  .rh-pulse-head { flex-wrap: wrap; }
  .rh-meta { padding-inline-start: 14px; }
}
@media (max-width: 640px) { .rh-items { grid-template-columns: 1fr; } }
/* تبويبا صفحة تصدير التقارير: العامة والجودة */
.rc-tabs { margin-bottom: 18px; }
.rc-tabs .tab { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.rc-tabs .tab svg { width: 16px; height: 16px; }

/* الفوترة والاشتراكات */
.bill-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; align-items: start; }
@media (max-width: 900px) { .bill-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 9px; margin-top: 12px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; border-bottom: 1px solid var(--border-soft); }
.inline-form .field { margin: 0; min-width: 130px; }
.inline-form .field.grow { flex: 1; }
.usage { display: grid; gap: 12px; }
.usage-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.usage-row .l { color: var(--text-2); }
/* نافذة صغيرة داخل الجدول بلا سكربت: details تفتح فوق السطر */
.pop { display: inline-block; position: relative; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop-body { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; width: 260px; display: grid; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-lg); text-align: start; }
.pop-body .field { margin: 0; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--border); }
.sub-bar.warn { background: var(--warn-soft); color: var(--warn); }
.sub-bar.info { background: var(--info-soft); color: var(--info); }
.sub-bar a { color: inherit; font-weight: 700; }
.nav-brand .mark.mark-img { background: #fff; padding: 3px; overflow: hidden; }
.nav-brand .mark.mark-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-logo-preview { max-height: 48px; max-width: 200px; border: 1px solid var(--border); border-radius: 6px; padding: 4px; background: #fff; }

/* صفحة التسجيل العامة */
.signup-page { min-height: 100vh; background: var(--bg); padding: 32px 16px; }
.signup-wrap { max-width: 1040px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.signup-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.signup-head .mark { width: 44px; height: 44px; border-radius: 11px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.signup-head h1 { font-size: 21px; margin: 0 0 4px; }
.signup-head p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.sp-cycle { display: inline-flex; gap: 14px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; margin-bottom: 12px; font-size: 13px; }
.sp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sp-plan input { position: absolute; opacity: 0; }
.sp-card { display: grid; gap: 8px; height: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; cursor: pointer; }
.sp-plan input:checked + .sp-card { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.sp-plan input:focus-visible + .sp-card { outline: 2px solid var(--accent); }
.sp-card b { font-size: 16px; }
.sp-price { font-size: 20px; font-weight: 700; }
.sp-price small { font-size: 12px; color: var(--text-2); font-weight: 500; }
.sp-desc { color: var(--text-2); font-size: 12.5px; }
.sp-list { display: grid; gap: 4px; font-size: 12.5px; }
.sp-list span::before { content: "✓"; color: var(--good); margin-inline-end: 6px; }
.sp-form { margin-top: 18px; }
.sp-actions { display: flex; gap: 9px; margin-top: 14px; }
.signup-done { color: var(--text-2); font-size: 14px; margin: 16px 0; }
@media (max-width: 640px) { .signup-wrap { padding: 18px; } .sp-form { grid-template-columns: 1fr; } }
.color-pair { display: flex; gap: 8px; align-items: center; }
.color-pair input[type=color] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); flex: none; }

/* الطرفية الجوية: منقولة من FleetOps (operator.css) وتخطيط Navixy: سجل خام وسطر الأمر تحته، و«حالة الجهاز» عمود جانبي.
   السجل LTR داخل الصفحة العربية: بايتات وأوامر بروتوكول لا يقلب اتجاهها. */
.air-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 12px; }
.air-head .row { display: flex; align-items: center; gap: 8px; }
.air-title { margin: 0; font-size: 15px; font-weight: 600; }
.air-grid { display: grid; grid-template-columns: 1fr 320px; gap: 12px; align-items: start; }
@media (max-width: 900px) { .air-grid { grid-template-columns: 1fr; } }
.air-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.air-log { height: 460px; overflow-y: auto; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75; }
.air-line { display: flex; gap: 8px; align-items: flex-start; }
.air-time { color: var(--text-3); flex: none; }
.air-text { word-break: break-all; white-space: pre-wrap; }
.air-open  .air-text { color: var(--c-crit); }
.air-out   .air-text { color: var(--accent); font-weight: 600; }
.air-reply .air-text { color: var(--c-good); }
.air-error .air-text { color: var(--c-crit); }
.air-note  .air-text { color: var(--text-2); font-family: var(--font-sans, inherit); }
.air-send { display: flex; gap: 8px; }
.air-send .input { flex: 1; }
.air-right { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.air-right-head { padding: 9px 12px; font-size: 12.5px; font-weight: 600; border-block-end: 1px solid var(--border); }
.air-status { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.air-status td { padding: 5px 12px; border-block-end: 1px solid var(--border); word-break: break-all; }
.air-status tr:last-child td { border-block-end: 0; }
.air-status .air-key { color: var(--text-2); width: 48%; }
.air-params { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.air-params .select { min-width: min(280px, 100%); max-width: 100%; }
.air-params { min-width: 0; }
.air-hint { font-size: 11.5px; color: var(--text-3); }

/* إعدادات النظام: فهرس الأقسام أعلى، وزر الحفظ ثابت أسفل الصفحة */
.sys-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sys-nav a { font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); text-decoration: none; background: var(--surface); }
.sys-nav a:hover { color: var(--accent); border-color: var(--accent-line); }
.sys-card { margin-bottom: 12px; scroll-margin-top: 12px; }
.sys-save { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* قائمة منسدلة بخانة بحث (WM.searchSelect): الخانة تعرض الاختيار، واللوحة فيها البحث ثم الخيارات */
.ss { position: relative; width: 100%; }
.ss-btn { width: 100%; display: flex; align-items: center; gap: 8px; text-align: start; cursor: pointer; overflow: hidden; white-space: nowrap; }
.ss.open .ss-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ss-panel { position: absolute; z-index: 40; inset-inline-start: 0; width: max(100%, min(380px, 92vw)); top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; }
.ss-search { width: 100%; margin-bottom: 6px; }
.ss-list { max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.ss-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ss-item:hover, .ss-item.hl { background: var(--surface-3); }
.ss-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ss-utc { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); flex: none; }
.ss-city { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-id { margin-inline-start: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); flex: none; }
.ss-btn .ss-id { display: none; }
.ss-empty { padding: 10px; text-align: center; color: var(--text-3); font-size: 13px; }
/* الـ select الأصلي يبقى للنموذج و required، مخفيا تحت الزر */
.ss-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.ss-inline { display: inline-block; width: auto; min-width: 140px; vertical-align: middle; }
.ss-inline .ss-panel { width: max(100%, 220px); }
.ss-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; color: var(--text-3); }
.ss-item.off { opacity: .45; cursor: not-allowed; }
.ss.up .ss-panel { top: auto; bottom: calc(100% + 4px); }
.ss-btn.ss-invalid { border-color: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 20%, transparent); }
.ss-btn:disabled { opacity: .6; cursor: not-allowed; }

/* مختار مشهد صفحة الدخول (_LoginScenePicker) */
.lsp { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.lsp-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.lsp-item:hover { border-color: var(--border-strong); }
.lsp-item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.lsp-item input { accent-color: var(--accent); margin: 0; }
.lsp-n { width: 26px; height: 26px; border-radius: 7px; background: var(--nav-bg); color: #fff; display: grid; place-items: center; font: 600 12px var(--font-mono); flex: none; }
.lsp-t { min-width: 0; flex: 1; }
.lsp-t b { display: block; font-size: 12.5px; }
.lsp-t small { display: block; font-size: 11px; color: var(--text-3); line-height: 1.4; }
.lsp-eye { font-size: 11.5px; font-weight: 600; flex: none; }

/* سجل للعرض فقط حتى «تعديل» (form[data-lock] في app.js) */
form.is-ro [data-when="edit"], form:not(.is-ro) [data-when="view"] { display: none !important; }
form.is-ro .input[readonly], form.is-ro .textarea[readonly] { background: var(--surface-2); border-color: var(--border-soft); color: var(--text); cursor: default; }
form.is-ro .input[readonly]:focus, form.is-ro .textarea[readonly]:focus { box-shadow: none; border-color: var(--border-soft); }
form.is-ro .ss-btn:disabled, form.is-ro .select:disabled { opacity: 1; background: var(--surface-2); border-color: var(--border-soft); color: var(--text); cursor: default; }
form.is-ro .check input:disabled { opacity: .85; }
form.is-ro .input[readonly]::placeholder { color: transparent; }

/* شهادة المعايرة المرفقة في إعدادات الحساس */
.cal-doc, .cal-hist { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cal-doc-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); flex-wrap: wrap; }
.cal-doc-head b { font-size: 13px; }
.cal-doc-head .btn { margin-inline-start: auto; }
.cal-doc-view { display: block; width: 100%; height: 720px; border: 0; background: #525659; }
.cal-doc-img { display: block; max-width: 100%; max-height: 640px; margin: 0 auto; }
.cal-doc .empty-state { padding: 26px 14px; }
.cal-hist table.grid td, .cal-hist table.grid th { white-space: nowrap; }
/* زرا القفل المضافان آليا */
.lock-edit-head { margin-inline-start: auto; }
.card-head .right + .lock-edit-head, .card-head .toolbar + .lock-edit-head { margin-inline-start: 8px; }
.lock-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
form.is-ro button[type=submit]:not([formaction]):not([data-lock-skip] *), form.is-ro .lock-cancel, form.is-ro .reason-field { display: none !important; }

/* أوامر الأجهزة حسب النوع */
.dc-types { flex-wrap: wrap; margin-bottom: 12px; }
.dc-types .tab .faint { font-weight: 400; margin-inline-start: 4px; }
.dc-types .tab.off { opacity: .55; }
.dc-group { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.dc-group + .dc-group { border-top: 1px dashed var(--border); }
.dc-group > b { min-width: 52px; font-size: 12.5px; color: var(--text-2); }
.dc-cmds { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-cmd.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dc-cmd.danger { color: var(--crit); border-color: var(--crit-soft); }
.dc-cmd.danger.on { background: var(--crit); border-color: var(--crit); color: #fff; }
.dc-send { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.dc-send .field { margin: 0; }
.dc-send .grow { flex: 1 1 260px; }
tr.dc-off td { color: var(--text-3); }

/* زرا تغيير كلمة المرور والخروج أسفل القائمة: الأيقونة خطية بلون القائمة (كانت تملأ بالأسود الافتراضي) */
.nav-user .nav-collapse svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-user form { display: contents; }
.nav-user .nav-collapse + form .nav-collapse { margin-inline-start: 0; }

/* ───────── مخزون الأجهزة: منقول من التصميم المعتمد (لقطة المالك) ───────── */
.ix-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ix-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ix-btn:hover { border-color: var(--text-3); }
.ix-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ix-btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.ix-btn.pri:hover { background: var(--accent-hover); }
.ix-find { position: relative; }
.ix-find input { width: 340px; height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); padding-inline: 38px 70px; font: inherit; font-size: 14px; color: var(--text); }
.ix-find svg { position: absolute; inset-inline-start: 13px; top: 13px; width: 15px; height: 15px; stroke: var(--text-3); fill: none; stroke-width: 2; }
.ix-find kbd { position: absolute; inset-inline-end: 10px; top: 9px; font: 11.5px 'IBM Plex Mono', monospace; color: var(--text-3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; background: var(--surface-2); }

.ix-health { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; margin-bottom: 16px; }
.ix-total { background: var(--nav-bg); color: #fff; padding: 28px 26px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ix-total .l { font-size: 15px; font-weight: 600; color: var(--nav-text); }
.ix-total .v { font: 700 42px 'IBM Plex Mono', monospace; line-height: 1.3; }
.ix-total .s { font-size: 14px; color: var(--nav-text); }
.ix-mid { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 26px; }
.ix-ring { position: relative; width: 150px; height: 150px; justify-self: center; }
.ix-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ix-ring .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ix-ring .c b { font: 700 22px 'IBM Plex Mono', monospace; }
.ix-ring .c span { font-size: 12px; color: var(--text-3); line-height: 1.3; max-width: 80px; }
.ix-legend { display: grid; gap: 14px; }
.ix-lg { display: grid; grid-template-columns: 150px minmax(0, 1fr) 60px; align-items: center; gap: 4px 18px; }
.ix-lg .k { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.ix-lg .k i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ix-lg .tr { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.ix-lg .tr i { display: block; height: 100%; border-radius: 5px; }
.ix-lg .n { font: 600 14px 'IBM Plex Mono', monospace; text-align: end; color: var(--text); }
.ix-lg .n small { color: var(--text-3); font-weight: 400; }
.ix-lg .cap { grid-column: 2; font-size: 12.5px; color: var(--text-3); margin-top: -2px; }
.ix-lg .cap.warn { color: var(--warn); }

.ix-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.ix-ch { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; }
.ix-ch h3 { margin: 0; font-size: 17px; font-weight: 800; }
.ix-ch p { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }
.ix-ch .grow { flex: 1; }
.ix-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.ix-seg a { padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.ix-seg a + a { border-inline-start: 1px solid var(--border); }
.ix-seg a.on { background: var(--nav-bg); color: #fff; }
.ix-seg .n { font: 500 11.5px 'IBM Plex Mono', monospace; opacity: .7; margin-inline-start: 5px; }
.ix-wrap { overflow-x: auto; }
.ix-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.ix-t thead th { text-align: start; font-size: 14px; font-weight: 700; color: var(--text-2); padding: 12px 12px 6px; white-space: nowrap; border-top: 1px solid var(--border); background: var(--surface-2); }
.ix-t thead tr.f th { padding: 4px 12px 12px; border-top: 0; border-bottom: 1px solid var(--border); font-weight: 400; }
.ix-t th.sort { cursor: pointer; user-select: none; }
.ix-t th.sort .ar { color: var(--accent); margin-inline-start: 4px; font-size: 13px; }
.ix-t th.sort .ar.idle { color: var(--text-3); }
.ix-t .f input { width: 100%; min-width: 120px; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding-inline: 30px 10px; font: inherit; font-size: 13px; background: var(--surface) no-repeat; color: var(--text); }
.ix-t .f .fi { position: relative; }
.ix-t .f .fi svg { position: absolute; inset-inline-start: 10px; top: 10px; width: 13px; height: 13px; stroke: var(--text-3); fill: none; stroke-width: 2; }
.ix-t .f .select, .ix-t .f .ss { min-width: 90px; }
.ix-t td { padding: 14px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
.ix-t tbody tr:hover { background: var(--surface-2); }
.ix-t tbody tr.sel { background: var(--accent-soft); }
.ix-t input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.ix-dev b { display: block; font-weight: 700; font-size: 14.5px; }
.ix-dev span { font: 13px 'IBM Plex Mono', monospace; color: var(--text-3); }
.ix-mono { font: 13px 'IBM Plex Mono', monospace; color: var(--text-2); }
.ix-co { color: var(--accent); text-decoration: none; font-weight: 500; }
.ix-co:hover { text-decoration: underline; }
.ix-co.none { color: var(--text-3); }
.ix-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 7px; font-size: 13.5px; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.ix-pill.good { background: var(--good-soft); color: var(--good); }
.ix-pill.info { background: var(--accent-soft); color: var(--accent); }
.ix-pill.crit { background: var(--crit-soft); color: var(--crit); }
.ix-pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ix-pill.mute { color: var(--text-2); }
.ix-pill.mute .d { background: var(--text-2); }
.ix-bat { font: 12px 'IBM Plex Mono', monospace; color: var(--text-3); margin-inline-end: 6px; }
.ix-ago { color: var(--text-2); }
.ix-rb { display: inline-flex; gap: 6px; }
.ix-rb button { height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); font: inherit; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }
.ix-rb button:hover { border-color: var(--text-3); }
.ix-empty { padding: 40px; text-align: center; color: var(--text-3); }
.ix-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 4px 0; font-size: 14px; color: var(--text-2); }
.ix-pg { display: flex; gap: 6px; }
.ix-pg button { min-width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font: 600 14px 'IBM Plex Mono', monospace; color: var(--text); cursor: pointer; }
.ix-pg button.on { background: var(--nav-bg); border-color: var(--nav-bg); color: #fff; }
.ix-pg button:disabled { opacity: .4; cursor: default; }

/* شريط التحديد العائم */
.ix-bar { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translate(50%, 140%); opacity: 0; pointer-events: none; transition: .2s; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; background: var(--nav-bg); color: #fff; box-shadow: 0 12px 32px rgba(13, 27, 42, .28); z-index: 40; }
.ix-bar.show { opacity: 1; transform: translate(50%, 0); pointer-events: auto; }
.ix-bar .cnt { padding: 0 12px; font-weight: 700; font-size: 13px; border-inline-end: 1px solid var(--nav-border); white-space: nowrap; }
.ix-bar button { border: 0; background: none; color: var(--nav-text); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.ix-bar button:hover { background: var(--nav-bg-2); color: #fff; }
.ix-bar .pri { background: var(--accent); color: #fff; }
.ix-bar svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* البطاقة: لوحة جانبية */
.ix-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: 420px; max-width: 92vw; background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: -16px 0 40px rgba(13, 27, 42, .12); transform: translateX(-105%); transition: transform .22s ease; z-index: 1001; display: flex; flex-direction: column; }
.ix-drawer.open { transform: none; }
.ix-dh { padding: 20px 22px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
.ix-dh b { display: block; font-size: 17px; }
.ix-dh span { font: 13px 'IBM Plex Mono', monospace; color: var(--text-3); }
.ix-dh .x { margin-inline-start: auto; }
.ix-db { padding: 18px 22px; overflow: auto; flex: 1; }
.ix-dp { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.ix-kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 12px; font-size: 14px; margin: 0; }
.ix-kv dt { color: var(--text-3); }
.ix-kv dd { margin: 0; }
.ix-df { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.ix-scrim { position: fixed; inset: 0; background: rgba(13, 27, 42, .25); opacity: 0; pointer-events: none; transition: .2s; z-index: 1000; }
.ix-scrim.open { opacity: 1; pointer-events: auto; }
@media (max-width: 1200px) {
  .ix-health { grid-template-columns: 1fr; }
  .ix-mid { grid-template-columns: 1fr; }
  .ix-find input { width: 220px; }
}