/* GLPX ops-cockpit styling. Served as a static asset from
   $GITEA_CUSTOM/public/assets/css/cockpit.css (NOT parsed as a Gitea template);
   the header.tmpl hook links it with a content-hash query for cache busting.
   Scoped to #glpx-cockpit + the dashboard activity <details>. Uses Gitea theme
   vars so it tracks gitea-light/dark/auto. */
#glpx-cockpit{--gx-ac:var(--color-primary,#4183c4);margin:0 0 1.25rem}
#glpx-cockpit .gx-sec{margin-top:20px}
#glpx-cockpit .gx-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;padding:16px 0 4px;border-bottom:1px solid var(--color-secondary-alpha-30,rgba(128,128,128,.18))}
#glpx-cockpit .gx-kicker{display:flex;align-items:center;gap:8px;color:var(--color-text-light-1,#777);font-size:12px;font-weight:600}
#glpx-cockpit .gx-kicker .svg{color:var(--gx-ac)}
#glpx-cockpit .gx-hero h2{margin:6px 0 4px;font-size:24px;line-height:1.15;font-weight:650;color:var(--color-text,#111)}
#glpx-cockpit .gx-hero p{margin:0;max-width:68ch;color:var(--color-text-light-1,#777);line-height:1.45}
#glpx-cockpit .gx-hero p.gx-stale{opacity:.55}
#glpx-cockpit .gx-live{display:flex;align-items:center;gap:12px;justify-content:flex-end;min-width:180px}
#glpx-cockpit .gx-live .num{font-size:30px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums;color:var(--color-text,#111)}
#glpx-cockpit .gx-live .cap{font-size:12px;color:var(--color-text-light-1,#777);display:flex;align-items:center;gap:5px}
#glpx-cockpit .gx-mini-link.ui.button{margin:0;white-space:nowrap}
#glpx-cockpit .gx-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:600;color:var(--color-text,#111)}
#glpx-cockpit .gx-h .svg{color:var(--color-text-light-2,#888)}
#glpx-cockpit .gx-grid{display:grid;gap:10px}
#glpx-cockpit .gx-grid-stats{grid-template-columns:repeat(4,minmax(130px,1fr))}
#glpx-cockpit .gx-grid-visuals{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
#glpx-cockpit .gx-grid-work{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
#glpx-cockpit .gx-grid-tiles{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
#glpx-cockpit .gx-grid-watch{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#glpx-cockpit a.gx-tile.ui.button{display:flex;align-items:center;gap:9px;justify-content:flex-start;text-align:left;margin:0;font-weight:400;overflow:hidden}
#glpx-cockpit a.gx-tile.ui.button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#glpx-cockpit a.gx-tile .svg{color:var(--color-text-light-1,#777);flex:none}
#glpx-cockpit a.gx-tile.ui.button:hover .svg{color:var(--gx-ac)}
#glpx-cockpit a.gx-stat.ui.segment{margin:0;padding:14px 15px;text-decoration:none;color:var(--color-text,#111);min-height:96px;display:flex;flex-direction:column;justify-content:space-between}
#glpx-cockpit a.gx-stat.ui.segment:hover{border-color:var(--gx-ac)}
#glpx-cockpit .gx-stat .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#glpx-cockpit .gx-stat .num{font-size:28px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums;color:var(--color-text,#111)}
#glpx-cockpit .gx-stat .ic{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--color-hover,rgba(130,130,130,.12));color:var(--gx-ac);flex:none}
#glpx-cockpit .gx-stat .cap{font-size:13px;font-weight:600;line-height:1.25}
#glpx-cockpit .gx-stat .dd{margin-top:3px;color:var(--color-text-light-1,#777);font-size:12px;line-height:1.35}
#glpx-cockpit a.gx-work.ui.segment{display:flex;align-items:center;gap:12px;margin:0;padding:13px 15px;text-decoration:none;color:var(--color-text,#111)}
#glpx-cockpit a.gx-work.ui.segment:hover{border-color:var(--gx-ac)}
#glpx-cockpit .gx-work .ic{flex:none;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--color-hover,rgba(130,130,130,.12));color:var(--gx-ac)}
#glpx-cockpit .gx-work .tt{font-size:15px;font-weight:600;line-height:1.2}
#glpx-cockpit .gx-work .dd{color:var(--color-text-light-1,#777);font-size:12px;margin-top:2px}
#glpx-cockpit .gx-work .go{margin-left:auto;color:var(--color-text-light-3,#999);flex:none}
#glpx-cockpit .gx-viz.ui.segment{margin:0;padding:15px;min-height:214px}
#glpx-cockpit .gx-muted{color:var(--color-text-light-1,#777);font-size:12px;line-height:1.4}
#glpx-cockpit .gx-bar-row{display:grid;grid-template-columns:minmax(76px,110px) minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:10px}
#glpx-cockpit .gx-bar-label{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#glpx-cockpit .gx-bar-track{height:9px;border-radius:999px;background:var(--color-secondary-alpha-30,rgba(128,128,128,.18));overflow:hidden}
#glpx-cockpit .gx-bar-fill{height:100%;border-radius:999px;background:var(--gx-ac);min-width:2px}
#glpx-cockpit .gx-bar-value{font-size:12px;font-variant-numeric:tabular-nums;color:var(--color-text-light-1,#777);min-width:24px;text-align:right}
#glpx-cockpit .gx-risk-bars{margin-top:14px;padding-top:10px;border-top:1px solid var(--color-secondary-alpha-20,rgba(128,128,128,.12))}
#glpx-cockpit .gx-capacity{display:flex;align-items:center;gap:14px;margin-bottom:8px}
#glpx-cockpit .gx-ring{--gx-pct:0%;--gx-ring-color:var(--gx-ac);position:relative;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:conic-gradient(var(--gx-ring-color) var(--gx-pct),var(--color-secondary-alpha-30,rgba(128,128,128,.18)) 0);transition:background .3s ease}
#glpx-cockpit .gx-ring::before{content:"";position:absolute;width:54px;height:54px;border-radius:50%;background:var(--color-box-body,#fff)}
#glpx-cockpit .gx-ring span{position:relative;font-size:22px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--color-text,#111)}
#glpx-cockpit .gx-ring--warn{--gx-ring-color:var(--color-warning-text,#d29922)}
#glpx-cockpit .gx-ring--error{--gx-ring-color:var(--color-error-text,#e03e3e)}
#glpx-cockpit .gx-ring-title{font-size:15px;font-weight:650;color:var(--color-text,#111);line-height:1.25}
#glpx-cockpit .gx-bar-row--warn .gx-bar-fill{background:var(--color-warning-text,#d29922)}
#glpx-cockpit a.gx-watch.ui.segment{margin:0;padding:13px 14px;text-decoration:none;color:var(--color-text,#111);min-height:96px}
#glpx-cockpit a.gx-watch.ui.segment:hover{border-color:var(--gx-ac)}
#glpx-cockpit .gx-watch .tag{display:inline-flex;align-items:center;max-width:100%;padding:2px 6px;border-radius:4px;background:var(--color-secondary-alpha-20,rgba(128,128,128,.12));color:var(--color-text-light-1,#777);font-size:11px;font-weight:600;white-space:nowrap}
#glpx-cockpit .gx-watch .tt{margin-top:8px;font-size:14px;font-weight:650;line-height:1.25}
#glpx-cockpit .gx-watch .dd{margin-top:4px;color:var(--color-text-light-1,#777);font-size:12px;line-height:1.35}
#glpx-cockpit .svg{flex:none;vertical-align:middle}
#glpx-cockpit .svg.gx-oct{fill:currentColor}
.dashboard.feeds details.gx-activity{margin-top:20px}
.dashboard.feeds details.gx-activity>summary.gx-feed{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;color:var(--color-text-light-1,#777);font-size:14px;padding:11px 15px;user-select:none}
.dashboard.feeds details.gx-activity>summary.gx-feed:hover{color:var(--color-text,#111)}
.dashboard.feeds details.gx-activity>summary::-webkit-details-marker{display:none}
.dashboard.feeds details.gx-activity[open]>summary.gx-feed{margin-bottom:12px}
/* Loading/error/success messages injected by cockpit.js into the live panels
   (was inline in the footer hook before the assets were externalized). */
.gx-spin{animation:gx-spin 1s linear infinite}
@keyframes gx-spin{100%{transform:rotate(360deg)}}
@keyframes gx-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.gx-skeleton{animation:gx-pulse 2s cubic-bezier(.4,0,.6,1) infinite;background:var(--color-secondary-alpha-20,rgba(128,128,128,.12))}
.gx-msg{padding:16px;color:var(--color-text-light);display:flex;align-items:center;gap:8px;font-size:13px;grid-column:1/-1}
.gx-msg.error{color:var(--color-error-text)}
.gx-msg.success{color:var(--color-success-text)}
.gx-msg-retry{text-decoration:underline;cursor:pointer;font-weight:600;margin-left:2px}
.gx-msg-retry:hover,.gx-msg-retry:focus-visible{opacity:.75}
/* Fleet RAG pill (hero) + per-tile severity accents, set by cockpit.js from live
   sync/health status. Colors ride Gitea's own semantic vars so they track theme. */
#glpx-cockpit .gx-rag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap}
#glpx-cockpit .gx-rag::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
#glpx-cockpit .gx-rag--ok{color:var(--color-success-text);background:var(--color-success-bg,rgba(35,154,96,.12))}
#glpx-cockpit .gx-rag--warn{color:var(--color-warning-text);background:var(--color-warning-bg,rgba(210,153,34,.12))}
#glpx-cockpit .gx-rag--error{color:var(--color-error-text);background:var(--color-error-bg,rgba(224,62,62,.12))}
#glpx-cockpit a.gx-watch--error.ui.segment{border-left:3px solid var(--color-error-text)}
#glpx-cockpit a.gx-watch--warn.ui.segment{border-left:3px solid var(--color-warning-text)}
#glpx-cockpit a.gx-watch--ok.ui.segment{border-left:3px solid var(--color-success-text)}
#glpx-cockpit .gx-watch--error .tag{color:var(--color-error-text);background:var(--color-error-bg,rgba(224,62,62,.12))}
#glpx-cockpit .gx-watch--warn .tag{color:var(--color-warning-text);background:var(--color-warning-bg,rgba(210,153,34,.12))}
#glpx-cockpit .gx-watch--ok .tag{color:var(--color-success-text);background:var(--color-success-bg,rgba(35,154,96,.12))}
/* Manual refresh button — icon-only, spins while a fetch is in flight */
#glpx-cockpit #glpx-refresh.ui.button{margin:0;padding:6px}
#glpx-cockpit #glpx-refresh .svg{transition:transform .2s ease}
#glpx-cockpit #glpx-refresh.gx-loading .svg{animation:gx-spin 1s linear infinite}
@media (prefers-reduced-motion: reduce){
	.gx-spin, #glpx-cockpit #glpx-refresh.gx-loading .svg{animation:none}
	.gx-skeleton{animation:none;opacity:.65}
	#glpx-cockpit .gx-ring{transition:none}
}
@media (max-width: 991px){
	#glpx-cockpit .gx-grid-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
	#glpx-cockpit .gx-grid-visuals{grid-template-columns:1fr}
}
@media (max-width: 767px){
	#glpx-cockpit .gx-hero{grid-template-columns:1fr;align-items:start}
	#glpx-cockpit .gx-live{justify-content:space-between}
	#glpx-cockpit .gx-grid-stats{grid-template-columns:1fr}
	#glpx-cockpit .gx-bar-row{grid-template-columns:minmax(70px,94px) minmax(0,1fr) auto}
}