/* SPDX-License-Identifier: Apache-2.0
 * SPDX-FileCopyrightText: 2026 T-Systems International GmbH
 * SPDX-FileContributor: Stefan Othmer
 *
 * Maintained by the HCS Platform Engineering team.
 *
 * Styles of the capacity page. Linked from the shell's <head> today; moves into
 * PAGE_MODULES with the page's code when that is cut out.
 */

  .cap-headctl{display:flex;gap:8px;align-items:center}
  .cap-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:4px 0 18px}
  .cap-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:14px 15px;position:relative;overflow:hidden}
  .cap-stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:6px}
  .cap-stat .v{font-size:25px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
  .cap-stat .v small{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:3px}
  .cap-stat .sub{font-size:11.5px;color:var(--ink-3);margin-top:5px}
  .cap-stat.accent{border-color:color-mix(in srgb,var(--brand) 45%,var(--border))}
  .cap-stat .spark{position:absolute;right:10px;top:12px;height:26px}
  .cap-sec{margin:0 0 18px}
  .cap-sechead{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
  .cap-sechead h2{font-size:15px;margin:0}.cap-sechead span{font-size:11.5px;color:var(--ink-3)}
  .cap-grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
  @media(max-width:900px){.cap-grid2{grid-template-columns:1fr}}
  .cap-card{background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:14px 16px}
  .cap-ds{display:flex;flex-direction:column;gap:11px}
  .cap-dsrow{display:grid;grid-template-columns:1fr;gap:5px}
  .cap-dsrow .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}
  .cap-dsrow .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cap-dsrow .nm .ty{font-size:10px;color:var(--ink-3);border:1px solid var(--border);border-radius:5px;padding:0 4px;margin-left:6px}
  .cap-dsrow .rt{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
  .cap-bar{height:9px;border-radius:6px;background:color-mix(in srgb,var(--ink-3) 18%,transparent);overflow:hidden}
  .cap-bar>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2dd4bf,var(--brand))}
  .cap-bar>i.warn{background:linear-gradient(90deg,#fbbf24,#f08a82)}
  .cap-bar>i.crit{background:linear-gradient(90deg,#f08a82,#e11d48)}
  .cap-fc{font-size:11px;font-weight:600;padding:1px 7px;border-radius:20px;white-space:nowrap}
  .cap-fc.warn{color:#fbbf24;background:color-mix(in srgb,#fbbf24 15%,transparent)}
  .cap-fc.crit{color:#f08a82;background:color-mix(in srgb,#f08a82 15%,transparent)}
  .cap-cl{display:flex;flex-direction:column;gap:9px}
  .cap-clrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;font-size:12.5px}
  .cap-clrow .tags{display:flex;gap:5px}
  .cap-tag{font-size:10px;padding:1px 6px;border-radius:5px;border:1px solid var(--border);color:var(--ink-2)}
  .cap-tag.on{color:#2dd4bf;border-color:color-mix(in srgb,#2dd4bf 40%,var(--border))}
  .cap-vm{display:flex;flex-direction:column;gap:7px}
  .cap-vmrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:12.5px}
  .cap-vmrow .vbar{height:7px;border-radius:5px;background:color-mix(in srgb,var(--brand) 20%,transparent)}
  .cap-vmrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cap-vmrow .mt{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11.5px}
  .cap-off .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:inline-block;margin-right:7px;vertical-align:middle}
  .cap-riskstrip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
  .cap-risk{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 11px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2)}
  .cap-risk.high{border-color:color-mix(in srgb,#f08a82 45%,var(--border));background:color-mix(in srgb,#f08a82 8%,var(--surface-2))}
  .cap-risk.warning{border-color:color-mix(in srgb,#fbbf24 40%,var(--border))}
  .cap-risk .rd{width:8px;height:8px;border-radius:50%;background:var(--warn,#fbbf24)}
  .cap-risk.high .rd{background:#f08a82}
  .cap-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:900px){.cap-grid3{grid-template-columns:1fr}}
  .cap-chart{width:100%;height:auto;display:block}
  .cap-collect{color:var(--ink-3);font-size:12.5px;padding:26px 14px;text-align:center;line-height:1.5}
  .cap-run{display:flex;flex-direction:column;gap:10px}
  .cap-runrow .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}
  .cap-runrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .cap-runrow .rbar{height:7px;border-radius:5px;background:color-mix(in srgb,var(--ink-3) 18%,transparent);margin-top:5px;overflow:hidden}
  .cap-runrow .rbar>i{display:block;height:100%;border-radius:5px}
  .cap-donutwrap{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
  .cap-legend{display:flex;flex-direction:column;gap:6px;font-size:12px;min-width:120px;flex:1}
  .cap-legend .lg{display:flex;align-items:center;gap:7px}
  .cap-legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
  .cap-legend .lv{color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}
  .cap-chg{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .cap-chg.dn{color:#f08a82}.cap-chg.up{color:#2dd4bf}
  .cap-clbar{height:7px;border-radius:5px;background:linear-gradient(90deg,#2dd4bf,var(--brand));margin-top:6px}
  .cap-conc{font-size:11.5px;color:var(--ink-2);margin:-4px 0 10px}
  .cap-reclaim{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin:-4px 0 11px}
  .cap-reclaim b{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}