/* Extracted legacy component styles from original inline <style> for completeness */
/* Service layout & grids */
.service-card { position: relative; max-width: 820px; margin: 0 auto 18px; background: var(--surface); border: 1px solid var(--card-border); box-shadow: 0 8px 24px rgba(2,6,23,0.06); padding: 8px; }
.service-card .list-group-item { background: transparent; color: var(--text); display: block; padding-top: 14px; padding-bottom: 14px; }
.service-card .list-group-item.down{ border-left: 4px solid var(--danger); background-image: linear-gradient(90deg, rgba(239,68,68,0.08), transparent); }
.service-grid{ display:grid; grid-template-columns: 240px 1fr 140px; align-items:center; column-gap: 12px; }
.service-grid .left{ min-width: 0; }
.service-grid .mid{ min-width: 0; position: relative; }
.service-grid .right{ min-width: 0; }
@media (max-width: 576px){ .service-grid{ grid-template-columns: 220px 1fr 120px; column-gap: 8px; } }
.service-left { width: 220px; min-width: 160px; }
.service-right { width: 140px; min-width: 120px; text-align: right; }
.service-name { font-weight: 600; }
.service-meta { color: var(--muted); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.motd { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* History bars */
.history-bar { width: 100%; margin: 0; height: 22px; display: flex; gap: 2px; position: relative; user-select: none; }
.history-bar .tick{ width: 5px; }
.history-inline { width: 100%; display:flex; gap:6px; align-items:center; justify-content:flex-start; height:22px; min-height:22px; }
.history-inline .tick { width: 6px; height: 100%; min-height: 18px; border-radius: 4px; display:inline-block; }
@media (max-width: 576px){ .history-bar{ max-width: 420px; height: 18px; gap: 2px; } .history-inline{ flex-basis: 200px; min-width: 180px; margin: 0 6px; } .history-bar .tick{ width: 3px; border-radius: 3px; } }
.tick { width:6px; height:100%; border-radius:2px; cursor:pointer; transition: transform .1s; }
.tick:hover { transform: scaleY(1.3); box-shadow: 0 0 8px #fff2; }
.tick.online{ background:#22c55e; }
.tick.offline{ background:#ef4444; }

/* History indicators */
.hist-ind{ position: static; font-size: .75rem; color: #9aa3ab; display: inline-flex; align-items: center; gap: 8px; }
.hist-ind .dot{ width: 8px; height: 8px; border-radius: 50%; background: #9aa3ab; opacity: .5; }
.hist-ind.active .dot{ background: #61dafb; opacity: 1; box-shadow: 0 0 8px #61dafb; animation: pulse 1.1s ease-in-out 1; }
.hist-progress{ display:inline-block; width: 88px; height: 4px; background: rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; vertical-align: middle; }
.hist-progress .fill{ display:block; height: 100%; width: 0%; background: linear-gradient(90deg, #10b981, #34d399); transition: width .25s ease; }
/* progress animation between status polls (5s matches UPDATE_PERIOD) */
/* Progress bar fill now driven by JS (width style). Dot turns blue via .hist-ind.active during fetch. */
.mid-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:4px; }
.uptime-center{ font-size:.75rem; font-weight:600; letter-spacing:.5px; color:#9aa3ab; }
.mid-head .hist-ind{ margin-left:auto; }
.mid-head .hist-ind{ display:inline-flex; }
.status-badge-slot{display:inline-block;}
.status-badge-slot.loaded .skeleton-badge{display:none;}

/* Ultra small phones: stack layout for service rows */
@media (max-width:520px){
	.service-grid{display:flex;flex-direction:column;row-gap:6px;}
	.service-grid .left{order:1;}
	.service-grid .mid{order:2;} /* history */
	.service-grid .right{order:3;display:flex;flex-direction:column;align-items:center;gap:6px;} /* badge + update */
	.mid-head{order:2;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;}
	.mid-head .hist-ind{display:none;} /* will be moved */
	.hist-ind.show-initial{display:flex;} /* visible before JS relocation */
	/* do not hide completely; relocation JS will add .mobile-moved to show it below badge */
	.uptime-center{font-size:.7rem;font-weight:600;letter-spacing:.4px;text-align:center;width:100%;}
	.status-badge-inline{display:none;} /* no inline badge now */
	.history-bar{height:18px;margin-top:0;}
	.history-bar .tick{width:3px;}
	.hist-ind.mobile-moved{display:flex!important;font-size:.6rem;gap:6px;opacity:.95;}
	.hist-ind.mobile-moved .hist-progress{width:90px;height:4px;}
}
.hist-progress.pending .fill{ background-color: #34d399; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 8px, rgba(255,255,255,0.1) 8px 16px); background-size: 16px 100%; animation: moveStripe .8s linear infinite; }
@keyframes moveStripe { from { background-position: 0 0 } to { background-position: 16px 0 } }

/* Skeleton */
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.skeleton-line, .skeleton-badge { background: #2a2e31; background-image: linear-gradient(90deg, #2a2e31 0px, #3a3f44 40px, #2a2e31 80px); background-size: 600px 100%; animation: shimmer 1.2s infinite linear; display: inline-block; border-radius: 6px; }
.skeleton-line { height: 12px; }
.skeleton-badge { height: 26px; width: 110px; border-radius: 999px; }
.skeleton-chart { height: 120px; border-radius: 10px; background: linear-gradient(90deg, rgba(2,6,23,0.03), rgba(2,6,23,0.01)); position: relative; overflow: hidden; border: 1px solid var(--card-border); }
.skeleton-chart::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation: shimmer 1.4s infinite linear; background-size: 600px 100%; }

/* Update widget */
.refresh-spinner{ width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); border-top-color: #61dafb; display:inline-block; margin-right: 6px; vertical-align: -2px; opacity: .5; }
.refresh-spinner.active{ animation: spin .9s linear infinite; opacity: 1; }
@keyframes spin { to { transform: rotate(360deg) } }
.refresh-progress { height: 6px; background: rgba(255,255,255,0.06); border-radius: 6px; margin: 6px auto 0; overflow: hidden; position: relative; }
.refresh-progress::before { content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, transparent 0 20px, rgba(255,255,255,0.06) 20px 22px); pointer-events:none; }
.refresh-progress span { display:block; height:100%; width:0%; background: linear-gradient(90deg, #10b981, #34d399); transition: width .25s ease; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); color: #9aa3ab; font-size: .85rem; }
.chip-next{ background: rgba(16,185,129,0.12); color: #a9e7cc; }

/* Tooltip */
.tooltip { position: fixed; pointer-events: none; background: var(--surface); color: var(--text); padding: 8px 12px; border-radius: 8px; font-size: 14px; box-shadow: 0 6px 20px rgba(2,6,23,0.08); opacity: 0; transition: opacity 0.12s ease, transform 0.12s; z-index: 9999; white-space: nowrap; border: 1px solid var(--card-border); }
.tooltip-status { font-weight: 700; }
.tooltip-status.online { color: #22c55e; }
.tooltip-status.offline { color: #ef4444; }

/* Maintenance styles (inline version) */
.maint-section{ margin: 10px 0 18px; }
.maint-head{ display:flex; align-items:center; gap:8px; margin: 8px 0 10px; }
.maint-head .maint-title{ font-weight:700; color:#ffd700; }
.maint-list{ display:flex; flex-direction:column; gap:10px; }
.maint-item{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid var(--card-border); background: var(--surface); border-radius:10px; }
.maint-item::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:10px 0 0 10px; background:#5eead4; }
.maint-item.state-active::before{ background: var(--danger, #ef4444); }
.maint-item.state-planned::before{ background: #3b82f6; }
.maint-item.state-done::before{ background: #8b949e; }
.maint-left{ min-width:0; }
.maint-msg{ font-weight:600; }
.maint-time{ font-size:.9rem; color: var(--muted, #9aa3ab); }
.maint-right{ text-align:right; display:flex; flex-direction:column; gap:6px; align-items: flex-end; }
.badge-maint{ border-radius:999px; padding:4px 10px; font-size:.8rem; font-weight:700; display:inline-block; }
.badge-planned{ background: rgba(59,130,246,.15); color:#9cc8ff; border:1px solid rgba(59,130,246,.35); }
.badge-active{ background: rgba(239,68,68,.18); color:#ffd1d1; border:1px solid rgba(239,68,68,.45); }
.badge-done{ background: rgba(148,163,184,.15); color:#cbd5e1; border:1px solid rgba(148,163,184,.30); }
.maint-empty{ border:1px dashed var(--card-border); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border-radius:10px; padding:14px 16px; color: var(--muted, #9aa3ab); display:flex; align-items:center; gap:10px; }
.ring{ position: relative; width: 44px; height: 44px; }
.ring-svg{ width: 44px; height: 44px; transform: rotate(-90deg); }
.ring-bg{ fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 6; }
.ring-fg{ fill: none; stroke: #3b82f6; stroke-linecap: round; stroke-width: 6; stroke-dasharray: 113.097; stroke-dashoffset: 113.097; transition: stroke-dashoffset .25s linear; }
.ring-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#9aa3ab; }