/* ============================================================
 * styles/connection-status.css — تنسيق شارة حالة الاتصال (components/connection-status.js) — منقول من V1 حرفيًا
 * Connection badge styles — moved verbatim from V1
 * ============================================================ */
.header-row-status{
  padding:0 32px 12px;
}
.conn-status-pill{
  display:flex;align-items:center;gap:14px;width:100%;
  border:1px solid var(--border-strong);border-radius:14px;
  padding:9px 16px;background:var(--bg-card);
  font-size:11.5px;color:var(--text-primary);
}
.status-bar-item{display:flex;align-items:center;gap:6px;}
/* تحميل متوقف قابل للمتابعة — a stopped load that can be continued */
.conn-status-pill .resume-load{cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-weight:700;}
.conn-refresh-group{display:flex;align-items:center;gap:8px;margin-right:auto;}
.conn-pill-div{width:1px;height:14px;background:var(--border-strong);}
.status-refresh-btn{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex-shrink:0;
  background:transparent;border:none;border-radius:50%;
  color:var(--text-secondary);cursor:pointer;transition:.2s;
}
.status-refresh-btn:hover{background:rgba(31,174,140,0.14);color:var(--teal);}
.status-refresh-btn.spinning #dataRefreshIcon{animation:spin .7s linear infinite;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.conn-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:#8FA3B8;
  transition:background .3s;
}
.conn-dot.checking{background:#C8A24E;box-shadow:0 0 6px rgba(200,162,78,.6);}
.conn-dot.online{background:#2ECC71;box-shadow:0 0 6px rgba(46,204,113,.6);}
.conn-dot.offline{background:#E0654F;box-shadow:0 0 6px rgba(224,101,79,.6);}
/* بدون اتصال مع بيانات محفوظة بالجهاز (البحث والأعطال تعمل) — Offline with on-device data (search and faults work) */
.conn-dot.saved{background:#E8A317;box-shadow:0 0 6px rgba(232,163,23,.6);}
@media (max-width:600px){
  .header-row-status{padding:0 14px 10px;}
  .conn-status-pill{padding:8px 12px;font-size:10.5px;gap:10px;flex-wrap:wrap;}
}

/* ===== إعادة التصميم: سطر حالة واحد مدمج بخط أوضح (ملاحظات محمد) — Redesign: one compact status line, clearer text ===== */
.header-row-status{padding:0 16px 10px;}
.conn-status-pill{padding:4px 6px 4px 12px;gap:12px;font-size:12.5px;font-weight:600;border-radius:var(--radius);flex-wrap:nowrap;min-height:42px;}
.conn-status-pill .status-bar-item{white-space:nowrap;min-width:0;}
.conn-status-pill [data-role="last-label"]{overflow:hidden;text-overflow:ellipsis;}
.conn-status-pill .status-bar-item:has([data-role="last-label"]){flex:1;min-width:0;}
@media (max-width:600px){
  .header-row-status{padding:0 16px 10px;}
  .conn-status-pill{padding:4px 6px 4px 12px;font-size:12.5px;gap:10px;flex-wrap:nowrap;}
}
.conn-status-pill{font-size:13.5px;}
@media (max-width:600px){ .conn-status-pill{font-size:13.5px;} }
@media (max-width:340px){ .conn-status-pill{font-size:12.5px;gap:8px;} }
/* يلتف فقط حين لا يتسع السطر (الصفحات التي يبقى التاريخ فيها داخل السطر)؛ الرئيسية سطر واحد لأن التاريخ نُقل منها
   Wraps only when the line doesn't fit (pages that keep the date inside it); home stays one line since its date moved out */
.conn-status-pill{flex-wrap:wrap;}
@media (max-width:600px){ .conn-status-pill{flex-wrap:wrap;} }

/* ===== لون حالة نسخة المحطات (طلب محمد 19 أكتوبر) — the stations copy state color =====
   الشريط كله بلون الحالة: أحمر انقطاع، رمادي بلا نسخة، أصفر توقف جزئي (والزر تحذير)، برتقالي متقطع تحديث جديد، أخضر مكتملة.
   The whole bar in the state color: red offline, gray no copy, yellow stopped partial (the button a warning),
   dashed orange a new update, green complete. */
.header-row-status[data-sync] .conn-status-pill{transition:background .3s ease,border-color .3s ease;border-width:1.5px;}
.header-row-status[data-sync="offline"] .conn-status-pill{background:var(--danger-bg);border-color:var(--danger);}
.header-row-status[data-sync="none"] .conn-status-pill{background:var(--c-info-bg);border-color:var(--c-info-line);}
.header-row-status[data-sync="partial"] .conn-status-pill{background:var(--c-ops-bg);border-color:var(--c-ops-fg);}
.header-row-status[data-sync="ready"] .conn-status-pill{background:var(--c-dist-bg);border-color:var(--c-dist-line);}
.header-row-status[data-sync="pending"] .conn-status-pill{background:var(--c-alert-bg);border:2px dashed var(--c-alert-fg);}
/* زر التحميل: تحذير في التوقف الجزئي، ونابض خفيف في التحديث الجديد — the load button: a warning when stopped, a soft pulse on a new update */
.status-refresh-btn[data-sync="partial"] [data-role="refresh-icon"]{display:none;}
.status-refresh-btn[data-sync="partial"]::after{content:'⚠';font-size:18px;line-height:1;color:var(--c-ops-fg);}
.status-refresh-btn[data-sync="partial"]{background:var(--bg-card);border:1.5px solid var(--c-ops-fg);border-radius:10px;}
.status-refresh-btn[data-sync="pending"]{color:var(--c-alert-fg);border:1.5px solid var(--c-alert-fg);border-radius:10px;animation:syncNudge 1.6s ease-in-out infinite;}
@keyframes syncNudge{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
@media (prefers-reduced-motion:reduce){ .status-refresh-btn[data-sync="pending"]{animation:none;} }
/* ألوان صريحة لكل حالة (الأحمر والبرتقالي والأصفر متميزة) — an explicit color per state (red, orange and yellow distinct) */
.header-row-status[data-sync="offline"] .conn-status-pill{background:var(--st-red-bg);border:2px solid var(--st-red);}
.header-row-status[data-sync="none"] .conn-status-pill{background:var(--st-gray-bg);border:2px solid var(--st-gray);}
.header-row-status[data-sync="partial"] .conn-status-pill{background:var(--st-yellow-bg);border:2px solid var(--st-yellow);}
.header-row-status[data-sync="ready"] .conn-status-pill{background:var(--st-green-bg);border:2px solid var(--st-green);}
.header-row-status[data-sync="pending"] .conn-status-pill{background:var(--st-orange-bg);border:2px dashed var(--st-orange);}
.status-refresh-btn[data-sync="partial"]{border-color:var(--st-yellow);}
.status-refresh-btn[data-sync="partial"]::after{color:var(--st-yellow);}
.status-refresh-btn[data-sync="pending"]{color:var(--st-orange);border-color:var(--st-orange);}
.status-refresh-btn[data-sync="offline"]{color:var(--st-red);}
/* نص الحالة يحل محل سطر الاتصال في كل لون عدا الأخضر (طلب محمد) — the state text replaces the connection line in every color but green */
.sync-text{flex:1;min-width:0;font-weight:700;line-height:1.5;white-space:normal;}
.sync-text:empty{display:none;}
.header-row-status[data-sync]:not([data-sync="ready"]) .conn-status-pill > .status-bar-item{display:none;}
.header-row-status[data-sync]:not([data-sync="ready"]) .conn-status-pill{flex-wrap:nowrap;}