/* Operations-only rules on top of central.css, which is a byte copy of
   platform-cluster/services/central/internal/web/assets/central.css and
   styles every Cloud page as Central styles its project page. Nothing Central
   already styles is restyled here; each rule below is something the Cloud
   pages render that Central's project page does not, and says why. */
/* The account menu is a <details data-dismiss> (it opens without script and
   nodge-ui.js closes it), where Central's is a popover: the same rules as
   cluster-shell.css gives the cluster pages. */
.sidebar-avatar{list-style:none}
.sidebar-avatar::-webkit-details-marker{display:none}
.sidebar-avatar::marker{content:""}
.sidebar-user[open] .sidebar-popup{display:block}
/* Logs' toolbar holds Range and Level selects beside the search, and
   Monitoring's rail holds its Range select; Central's toolbars hold only a
   search, so a select takes the search field's look, filling the rail. */
.table-toolbar select,.nodge-action-rail select{padding:10px 13px;font:14px var(--font-ui);color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-control-border);border-radius:var(--radius-sm)}
.nodge-action-rail select{width:100%}
/* Logs' two downloads are the Fabric drilldown's icons, disabled while there
   are no lines to export; Central's project page disables no icon, so this
   is fabric.css's rule. */
.btn-icon:disabled{border-color:var(--color-border);color:var(--color-text-muted);cursor:not-allowed;opacity:.55}
/* Routing's New panel greys a rule type the environment already has (rate
   limit, CORS); Central's option cards are never disabled, so this is the
   disabled look central.css gives a disabled tickbox. */
.option-card-input:disabled+.option-card-label{opacity:.5;cursor:not-allowed}
.option-card-input:disabled+.option-card-label:hover{border-color:var(--color-control-border)}
/* Backups' Settings switches are central.css's .nodge-toggle, whose input is
   display:none there (the old tab saved on a click, out of the tab order); a
   panel form needs the switch reachable by keyboard, so it is hidden the way
   .option-card-input is, its track wears the focus ring, and a switch that
   cannot be used yet (block while backup is off) is greyed out. */
.nodge-toggle{position:relative}
.nodge-toggle input{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.nodge-toggle input:focus-visible+.nodge-toggle-track{outline:2px solid var(--color-primary);outline-offset:2px}
.nodge-toggle:has(input:disabled){opacity:.5;cursor:not-allowed}
/* Logs is the cluster Logs page's log pane (Leon, 27 Oct: an app's logs as
   the administrators' log views show them), which Central's project page has
   no part for: fabric.css's log-pane rules and cluster-logs.css's More
   windows, byte for byte. */
.log-pane{max-height:min(70vh,780px);overflow:auto;padding:10px 12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);font:12px/1.55 var(--font-code)}.log-line{display:flex;gap:12px;padding:2px 4px;border-radius:4px;white-space:pre-wrap;overflow-wrap:anywhere}.log-line:hover{background:var(--color-hover)}.log-time,.log-service{flex-shrink:0;color:var(--color-text-muted);user-select:none}.log-service{width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-secondary)}.log-text{flex:1;min-width:0;color:var(--color-text)}.log-line.is-error .log-text{color:var(--color-primary)}.log-line.is-warn .log-text{color:var(--color-warning)}.log-empty{padding:26px;color:var(--color-text-muted);font:13px/1.5 var(--font-ui);text-align:center}.log-more{display:flex;justify-content:center;margin-top:12px}.log-more .btn-secondary{width:auto}
.log-more-lines>summary{list-style:none;cursor:pointer}
.log-more-lines>summary::-webkit-details-marker{display:none}
.log-more-lines>summary::marker{content:""}
.log-more-lines[open]>summary{display:none}
@media(max-width:720px){.log-service{display:none}}
/* Monitoring is the cluster dashboard's card row and graph pair for one
   environment (Leon, 27 Oct), which Central's project page has no part for:
   fabric.css's card, gauge and graph rules, cluster-resources.css's colours
   and cluster-dashboard.css's grey card, byte for byte, without the status pip:
   every card's value already carries its colour (Leon, 27 Oct). */
.fabric-card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.fabric-card{position:relative;display:flex;min-height:148px;flex-direction:column;padding:16px;border:1px solid var(--color-border);border-radius:12px;color:var(--color-text);background:var(--color-surface);text-decoration:none;transition:border-color .15s}
.fabric-card:hover{color:var(--color-text);border-color:var(--color-primary)}
.fabric-card[data-availability=unavailable]{border-style:dashed}
.fabric-card-title{padding-right:18px;font-size:14px;font-weight:600}
.fabric-card-value{display:flex;flex:1;align-items:center;justify-content:center;text-align:center;color:var(--color-text);font-size:24px;font-weight:600;line-height:1.15}
.fabric-card[data-availability=unavailable] .fabric-card-value{color:var(--color-text-muted);font-size:16px}
/* The graphs sit under the cards with the intro card's 20px gap, where the
   cluster dashboard leaves 34px (Leon, 27 Oct). */
.dashboard-section{margin-top:20px}
.graph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.graph-panel{min-width:0;padding:16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}
.graph-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.graph-panel h3{font-size:13px;font-weight:600}
.graph-panel h3 span{margin-left:4px;color:var(--color-text-muted);font-size:11px;font-weight:500}
.metric-graph{display:flex;flex-direction:column;min-height:210px;margin-top:12px}
.metric-graph svg{display:block;width:100%;height:210px;overflow:visible}
.metric-grid-line{stroke:var(--color-border);stroke-width:1}
.metric-series{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.metric-label{fill:var(--color-text-muted);font-size:10px}
.metric-axis-line{stroke:var(--color-border);stroke-width:1}
.metric-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px;color:var(--color-text-muted);font-size:11px}
.metric-legend span{display:inline-flex;align-items:center;gap:5px}
.metric-legend i{width:8px;height:8px;border-radius:50%;background:var(--series)}
.empty-copy{display:flex;flex:1;height:100%;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:13px}
.fabric-card.is-gauge{min-height:148px}
.fabric-card.is-gauge .fabric-card-value{position:relative;justify-content:center;overflow:hidden}
.gauge{position:relative;display:block;width:132px;height:72px;margin-top:4px}
.gauge svg{display:block;width:132px;height:73px;overflow:visible}
.gauge-track,.gauge-segment{fill:none;stroke-width:11;stroke-linecap:butt}
.gauge-track{stroke:var(--color-border)}
.gauge-segment{transition:stroke-dasharray .2s}
.gauge-segment.is-cache{stroke:var(--color-text-muted);stroke-opacity:.55}
.gauge-segment.is-committed{stroke:var(--color-secondary);stroke-opacity:.4}
.gauge-segment[data-tip]:hover{stroke-width:14}
.gauge-tip{position:fixed;left:0;top:0;z-index:300;padding:4px 10px;border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);background:var(--color-surface);box-shadow:0 8px 30px rgba(0,0,0,.28);font-size:13px;font-weight:500;white-space:nowrap;pointer-events:none}
.gauge-tip[hidden]{display:none}
.gauge strong{position:absolute;right:0;bottom:1px;left:0;pointer-events:none;font-size:18px;font-weight:600;text-align:center;white-space:nowrap}
.fabric-card.is-gauge .gauge strong{color:var(--color-accent)}
.fabric-card.is-gauge[data-severity=attention] .gauge strong{color:var(--color-primary)}
.fabric-card.is-gauge[data-severity=critical] .gauge strong{color:var(--color-error)}
.fabric-card.is-gauge[data-severity=unknown] .gauge strong{color:var(--color-text-muted)}
.fabric-card.is-gauge:is([data-card=cpu],[data-card=ram]) .gauge strong{color:var(--color-text)}
.fabric-card.is-big-number .fabric-card-value{justify-content:center;color:var(--color-accent);font-size:44px}
.fabric-card.is-big-number[data-severity=attention] .fabric-card-value{color:var(--color-warning)}
.fabric-card.is-big-number[data-severity=critical] .fabric-card-value{color:var(--color-error)}
.fabric-card.is-big-number[data-severity=unknown] .fabric-card-value{color:var(--color-text-muted)}
.fabric-card.is-status-word .fabric-card-value{justify-content:center;color:var(--color-accent);font-size:25px}
.fabric-card.is-status-word[data-severity=attention] .fabric-card-value{color:var(--color-warning)}
.fabric-card.is-status-word[data-severity=critical] .fabric-card-value{color:var(--color-error)}
.gauge-segment.is-healthy{stroke:var(--color-accent)}
.gauge-segment.is-unhealthy{stroke:var(--color-error)}
.gauge-segment.is-nodge{stroke:var(--color-primary)}
.gauge-segment.is-builds{stroke:var(--color-secondary)}
.gauge-segment.is-customer{stroke:var(--color-accent)}
.metric-series.series-0{stroke:var(--color-accent)}
.metric-series.series-1{stroke:var(--color-secondary)}
.metric-series.series-2{stroke:var(--color-primary)}
.metric-series.series-3{stroke:#d4a24e}
.metric-series.series-4{stroke:#6c9fbd}
.metric-series.series-5{stroke:#c7856a}
.metric-series.series-6{stroke:#96a3c2}
.metric-legend i.series-0{background:var(--color-accent)}
.metric-legend i.series-1{background:var(--color-secondary)}
.metric-legend i.series-2{background:var(--color-primary)}
.metric-legend i.series-3{background:#d4a24e}
.metric-legend i.series-4{background:#6c9fbd}
.metric-legend i.series-5{background:#c7856a}
.metric-legend i.series-6{background:#96a3c2}
.gauge-segment.is-critical{stroke:var(--color-error)}
.gauge-segment.is-high{stroke:var(--color-primary)}
.gauge-segment.is-medium{stroke:var(--color-warning)}
.gauge-segment.is-low{stroke:var(--color-accent)}
.fabric-card[data-availability=not_connected],.fabric-card[data-availability=not_configured]{border-style:dashed}
.fabric-card[data-availability=not_connected]:hover{border-color:var(--color-border)}
.fabric-card[data-availability=not_connected] .fabric-card-value,.fabric-card[data-availability=not_configured] .fabric-card-value,.fabric-card.is-calm .fabric-card-value{color:var(--color-text-muted);font-size:16px}
@media(max-width:1500px){.fabric-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.graph-grid{grid-template-columns:1fr}.fabric-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.fabric-card-grid{grid-template-columns:1fr}}
/* Monitoring of a free app whose month's hours are used up is one centred
   page instead of the dashboard (Leon, 28 Oct), which Central's project page
   has no part for: the approved design D's own rules, byte for byte, on
   central.css's tokens. */
.hd-stage{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 230px);padding:8px 0 40px}
.hd{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center;width:100%;max-width:1080px}
.hd-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;min-width:0;text-align:center}
.hd-art{display:block;width:250px;height:auto;margin:0 auto 14px;overflow:visible}
.hd-glow{fill:color-mix(in srgb,var(--color-warning) 8%,transparent)}
.hd-moon{fill:var(--color-warning)}
.hd-star{fill:color-mix(in srgb,var(--color-warning) 75%,transparent)}
.hd-dot{fill:var(--color-text-muted);opacity:.45}
.hd-window{fill:var(--color-surface);stroke:var(--color-control-border);stroke-width:1.5}
.hd-bar{stroke:var(--color-border);stroke-width:1.5}
.hd-light{fill:var(--color-border)}
.hd-face{fill:none;stroke:var(--color-text-muted);stroke-width:2.6;stroke-linecap:round}
.hd-z{fill:var(--color-secondary);font-family:var(--font-ui);font-weight:700}
.hd-cal{fill:var(--color-surface);stroke:var(--color-warning);stroke-width:1.5}
.hd-cal-top{fill:var(--color-warning)}
.hd-cal-day{fill:var(--color-text-strong);font:700 17px var(--font-ui);text-anchor:middle}
.hd-cal-month{fill:var(--color-on-primary);font:700 8px var(--font-ui);letter-spacing:.08em;text-anchor:middle}
@media (prefers-reduced-motion:no-preference){.hd-zz{animation:hd-float 3.2s ease-in-out infinite}.hd-zz:nth-of-type(2){animation-delay:.6s}@keyframes hd-float{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-5px);opacity:1}}}
.hd-display{margin:16px 0 0;color:var(--color-text-strong);font-size:56px;font-weight:700;letter-spacing:-.035em;line-height:1.02}
.hd-display em{color:var(--color-warning);font-style:normal}
.hd-lead{max-width:430px;margin:18px auto 0;color:var(--color-text-muted);font-size:16px;line-height:1.6}
.hd-compare{overflow:hidden;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}
.hd-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.hd-table col.hd-c1{width:27%}.hd-table col.hd-c2{width:31%}
.hd-table th,.hd-table td{padding:12px 16px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.hd-table thead th{padding-top:16px;padding-bottom:14px;color:var(--color-text-muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hd-table thead th.hd-paid{color:var(--color-accent)}
.hd-table tbody th{color:var(--color-text-muted);font-weight:500}
.hd-table td{color:var(--color-text-muted)}
.hd-table .hd-paid{background:color-mix(in srgb,var(--color-accent) 7%,transparent)}
.hd-table td.hd-paid{color:var(--color-text);font-weight:600}
.hd-paid-in{display:flex;gap:8px;align-items:flex-start}
.hd-paid-in svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--color-accent)}
.hd-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px}
.hd-foot-text{color:var(--color-text);font-size:15px;font-weight:600}
.hd-foot .btn-primary{min-width:140px}
.hd-ask{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:0;color:var(--color-text);font-size:13px;line-height:1.5}
.hd-ask svg{width:16px;height:16px;flex:none;color:var(--color-secondary)}
@media (max-width:1100px){.hd{grid-template-columns:1fr;gap:32px}.hd-display{font-size:44px}}