/* Sizing calculator (docs/configuration/hardwareCalculator.md). Every rule is
   scoped under .hw-calc so the tool never restyles the Material chrome. */
.hw-calc {
  --hw-primary: var(--md-primary-fg-color);
  --hw-primary-dark: var(--md-primary-fg-color--dark);
  --hw-danger: #c62828;
  --hw-danger-hover: #b71c1c;
  --hw-success: #2e7d32;
  --hw-bg: var(--md-default-bg-color);
  --hw-bg-soft: var(--md-code-bg-color);
  --hw-text: var(--md-default-fg-color);
  --hw-muted: var(--md-default-fg-color--light);
  --hw-border: var(--md-default-fg-color--lightest);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--hw-text);
}
.hw-calc * { box-sizing: border-box; }
.hw-calc button { font: inherit; }

/* Start block under the page introduction */
.hw-calc.hw-start { display: flex; flex-wrap: wrap; align-items: center; gap: .75em 1em; }
.hw-calc .hw-start-hint { color: var(--hw-muted); }

/* Layout */
.hw-calc .hw-tool { margin-top: 1.5em; scroll-margin-top: 5.6em; }
.hw-calc .hw-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: 1.5em; padding-bottom: .75em; border-bottom: 2px solid var(--hw-border); }
.hw-calc .hw-header-text .hw-title { font-size: 1.35em; font-weight: 700; margin: 0; }
.hw-calc .hw-header-text p { color: var(--hw-muted); margin: .25em 0 0; }
.hw-calc .hw-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5em; }
@media (max-width: 1220px) { .hw-calc .hw-grid { grid-template-columns: 1fr; } }

.hw-calc .card { background: var(--hw-bg); border: 1px solid var(--hw-border); border-radius: 8px; padding: 1.25em; box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 1.25em; }
.hw-calc .card-title { font-size: 1.15em; font-weight: 700; margin: 0 0 1em; padding-bottom: .5em; border-bottom: 1px solid var(--hw-border); }

/* Form controls */
.hw-calc .form-group { margin-bottom: 1.25em; }
.hw-calc label { display: block; font-weight: 600; margin-bottom: .5em; font-size: .9em; }
.hw-calc .input-hint { display: block; font-size: .8em; color: var(--hw-muted); margin-bottom: .5em; }
.hw-calc .toggle-group { display: flex; background: var(--hw-bg-soft); padding: .25em; border-radius: 6px; gap: .25em; }
.hw-calc .toggle-btn { flex: 1; border: none; background: transparent; padding: .5em; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all .2s; font-size: .9em; color: var(--hw-muted); }
.hw-calc .toggle-btn.active { background: var(--hw-bg); box-shadow: 0 1px 2px rgba(0,0,0,.1); color: var(--hw-primary); }
.hw-calc .slider-container { display: flex; align-items: center; gap: 1em; }
.hw-calc input[type="range"] { flex: 1; height: 6px; background: var(--hw-border); border-radius: 3px; outline: none; cursor: pointer; }
.hw-calc .slider-value { font-weight: 700; min-width: 4em; text-align: right; }
.hw-calc .two-node-warning { display: none; margin-top: .5em; padding: .6em .75em; background: #fffbe6; border: 1px solid #f5d76e; border-radius: 6px; font-size: .82em; color: #6b4f00; }

/* Metrics */
.hw-calc .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; margin: 1em 0 1.5em; }
.hw-calc .metric-box { background: var(--hw-bg-soft); border: 1px solid var(--hw-border); border-radius: 6px; padding: 1em; text-align: center; }
.hw-calc .metric-label { font-size: .85em; color: var(--hw-muted); font-weight: 500; margin-bottom: .25em; }
.hw-calc .metric-value { font-size: 1.5em; font-weight: 700; }
.hw-calc .metric-sub { font-size: .78em; color: var(--hw-muted); margin-top: .2em; }

/* Buttons */
.hw-calc .export-toolbar { display: flex; flex-wrap: wrap; gap: .75em; margin-bottom: 1.5em; }
.hw-calc .btn { padding: .5em 1em; font-weight: 600; border-radius: 6px; cursor: pointer; border: none; transition: background .2s; }
.hw-calc .btn-danger { background: var(--hw-danger); color: #fff; }
.hw-calc .btn-danger:hover { background: var(--hw-danger-hover); }
.hw-calc .btn-success { background: var(--hw-success); color: #fff; }
.hw-calc .btn-export { background: var(--hw-bg-soft); color: var(--hw-text); border: 1px solid var(--hw-border); white-space: nowrap; }
.hw-calc .hw-header .btn-export { flex-shrink: 0; }
.hw-calc .btn-export:hover { background: var(--hw-border); }
.hw-calc .btn-primary { background: var(--hw-primary); color: #fff; border: none; border-radius: 6px; padding: .65em 1.25em; font-size: 1em; font-weight: 600; cursor: pointer; transition: background .2s; }
.hw-calc .btn-primary:hover { background: var(--hw-primary-dark); }
.hw-calc .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.hw-calc .btn-skip { background: none; border: none; color: var(--hw-muted); font-size: .9em; cursor: pointer; text-decoration: underline; padding: .25em; }
.hw-calc .btn-skip:hover { color: var(--hw-text); }

/* Cluster visualiser */
.hw-calc .visualizer-header { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 1em; }
.hw-calc .visualizer-header .card-title { margin: 0; padding: 0; border: none; }
.hw-calc .legend { font-size: .85em; color: var(--hw-muted); margin: 0 0 1em; }
.hw-calc .cluster-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25em; margin-top: 1em; }
.hw-calc .node-card { border: 2px solid var(--hw-border); border-radius: 8px; padding: 1em; background: var(--hw-bg-soft); position: relative; transition: all .3s ease; }
.hw-calc .node-card.failed { border-color: var(--hw-danger); background: #fdecea; }
.hw-calc .node-card.failed .node-body { opacity: .2; }
.hw-calc .fail-overlay { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); color: var(--hw-danger); font-weight: 800; font-size: 1.35em; border: 3px solid var(--hw-danger); padding: .25em .5em; background: rgba(255,255,255,.9); border-radius: 4px; z-index: 10; text-align: center; white-space: nowrap; }
.hw-calc .node-card.failed .fail-overlay { display: block; }
.hw-calc .node-title { font-weight: 700; font-size: 1.05em; margin-bottom: .75em; display: flex; justify-content: space-between; align-items: center; }
.hw-calc .resource-section { margin-bottom: .75em; }
.hw-calc .resource-header { display: flex; justify-content: space-between; font-size: .8em; margin-bottom: .25em; font-weight: 500; }
.hw-calc .progress-bar-bg { background: var(--hw-border); height: 20px; border-radius: 4px; overflow: hidden; display: flex; position: relative; }
.hw-calc .bar-segment { height: 100%; transition: width .2s ease; }
.hw-calc .bar-active { background: var(--hw-primary); }
.hw-calc .bar-reserve { background: #93c5fd; border-left: 1px dashed #1e40af; }
.hw-calc .bar-overload { background: var(--hw-danger); }
.hw-calc .bar-label-embedded { position: absolute; width: 100%; text-align: center; font-size: .7em; font-weight: 700; line-height: 20px; color: #0f172a; text-shadow: 0 0 3px rgba(255,255,255,.9); pointer-events: none; }
.hw-calc .workload-container-box { margin-top: 1em; border-top: 1px dashed var(--hw-border); padding-top: .75em; }
.hw-calc .workload-title { font-size: .8em; font-weight: 700; color: var(--hw-muted); margin-bottom: .5em; }
.hw-calc .pod-list { display: flex; flex-wrap: wrap; gap: .4em; }
.hw-calc .pod-badge { font-size: .75em; padding: .2em .5em; background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; border-radius: 4px; font-weight: 500; }
.hw-calc .pod-badge.smf { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; font-weight: 600; }
.hw-calc .pod-badge.upf { background: #fef3c7; color: #92400e; border-color: #fde68a; font-weight: 700; }
.hw-calc .pod-badge.upf-migrated { background: #fde68a; color: #78350f; border: 2px solid #d97706; font-weight: 700; }
.hw-calc .pod-badge.db { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.hw-calc .pod-badge.cache { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.hw-calc .pod-badge.private-core { background: #ffe4e6; color: #9f1239; border-color: #fecdd3; font-style: italic; }
.hw-calc .pod-badge.reserve { background: #dbeafe; color: #1e40af; border-color: #93c5fd; font-style: italic; }

/* Banners */
.hw-calc .info-banner { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 6px; padding: 1em; margin-top: 1.5em; font-size: .9em; }
.hw-calc .info-banner .banner-title { font-weight: 700; margin-bottom: .25em; }
.hw-calc .info-banner p { margin: .25em 0 0; }
.hw-calc .error-banner { background: #fdecea; border: 1px solid #f5a3a3; color: #8a1c1c; border-radius: 6px; padding: 1em; margin-top: 1em; font-size: .9em; display: none; }
.hw-calc .cluster-alert-banner { background: #fdecea; border: 2px dashed var(--hw-danger); color: #8a1c1c; border-radius: 6px; padding: 1em; margin-bottom: 1.5em; font-size: .95em; display: none; }
.hw-calc .status-pill { font-size: .7em; padding: .15em .4em; border-radius: 20px; font-weight: 700; text-transform: uppercase; }
.hw-calc .status-ok { background: #dcfce7; color: #15803d; }
.hw-calc .status-warn { background: #fef3c7; color: #b45309; }
.hw-calc .status-crit { background: #fee2e2; color: #991b1b; }

/* Wizard overlay */
.hw-calc .wiz-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.6); align-items: center; justify-content: center; padding: 1em; overflow: hidden; }
.hw-calc .wiz-dialog { background: var(--hw-bg); color: var(--hw-text); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; }
.hw-calc .wiz-header { padding: 1.5em 1.75em 1.25em; border-bottom: 1px solid var(--hw-border); display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.hw-calc .wiz-header-text .wiz-title { font-size: 1.25em; font-weight: 700; margin: 0; }
.hw-calc .wiz-header-text p { color: var(--hw-muted); font-size: .9em; margin: .3em 0 0; }
.hw-calc .wiz-close { background: none; border: none; font-size: 1.4em; line-height: 1; color: var(--hw-muted); cursor: pointer; padding: .1em .25em; border-radius: 4px; flex-shrink: 0; }
.hw-calc .wiz-close:hover { color: var(--hw-text); background: var(--hw-bg-soft); }
.hw-calc .wiz-body { padding: 1.5em 1.75em; }
.hw-calc .wiz-section { margin-bottom: 1.25em; }
.hw-calc .wiz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-bottom: 1.25em; }
@media (max-width: 600px) { .hw-calc .wiz-row { grid-template-columns: 1fr; } }
.hw-calc .wiz-input-wrap { display: flex; align-items: center; gap: .5em; }
.hw-calc .wiz-input-wrap input { flex: 1; min-width: 0; border: 1px solid var(--hw-border); border-radius: 6px; padding: .5em .75em; font: inherit; background: var(--hw-bg); color: var(--hw-text); outline: none; transition: border-color .2s; }
.hw-calc .wiz-input-wrap input:focus { border-color: var(--hw-primary); box-shadow: 0 0 0 3px rgba(21,101,192,.15); }
.hw-calc .wiz-input-wrap .unit { font-size: .85em; color: var(--hw-muted); white-space: nowrap; }
.hw-calc .wiz-actions { display: flex; flex-direction: column; gap: .75em; margin-top: 1.5em; }
.hw-calc .wiz-result { margin-top: 1.5em; padding-top: 1.25em; border-top: 1px solid var(--hw-border); display: none; }
.hw-calc .wiz-result-title { font-weight: 700; font-size: 1em; margin-bottom: 1em; }
.hw-calc .wiz-result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75em; margin-bottom: 1em; }
@media (max-width: 600px) { .hw-calc .wiz-result-grid { grid-template-columns: repeat(2, 1fr); } }
.hw-calc .wiz-result-box { background: var(--hw-bg-soft); border: 1px solid var(--hw-border); border-radius: 6px; padding: .6em .5em; text-align: center; }
.hw-calc .wiz-result-box .r-label { font-size: .75em; color: var(--hw-muted); margin-bottom: .2em; }
.hw-calc .wiz-result-box .r-value { font-size: 1.2em; font-weight: 700; }
.hw-calc .wiz-shortfall { background: #fef3c7; border: 1px solid #fde047; border-radius: 6px; padding: .75em; font-size: .85em; color: #713f12; margin-bottom: 1em; }
.hw-calc .wiz-ok { background: #f0fdf4; border: 1px solid #86efac; border-radius: 6px; padding: .75em; font-size: .85em; color: #15803d; margin-bottom: 1em; }
.hw-calc .wiz-apply { width: 100%; }

/* Print report: hidden on screen, the only thing printed */
.hw-calc .print-report { display: none; }
@media print {
  .md-content .md-typeset > :not(.hw-calc) { display: none; }
  .hw-calc > :not(.print-report) { display: none; }
  .hw-calc .print-report { display: block; font-size: 11pt; color: #0f172a; }
  .hw-calc .pr-header { margin-bottom: 1.5em; padding-bottom: .75em; border-bottom: 2px solid #0f172a; }
  .hw-calc .pr-header .pr-title { font-size: 18pt; font-weight: 700; margin-bottom: .2em; }
  .hw-calc .pr-header p { font-size: 9pt; color: #475569; margin: 0; }
  .hw-calc .pr-section { margin-bottom: 1.5em; page-break-inside: avoid; }
  .hw-calc .pr-section .pr-section-title { font-size: 13pt; font-weight: 700; margin-bottom: .5em; padding-bottom: .25em; border-bottom: 1px solid #94a3b8; }
  .hw-calc .pr-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2em; margin-bottom: .5em; }
  .hw-calc .pr-kv { display: flex; justify-content: space-between; padding: .2em 0; border-bottom: 1px solid #e2e8f0; font-size: 10pt; }
  .hw-calc .pr-kv span:first-child { color: #475569; }
  .hw-calc .pr-kv span:last-child { font-weight: 600; }
  .hw-calc .pr-metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; margin-bottom: 1em; }
  .hw-calc .pr-metric { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: .6em 1em; text-align: center; }
  .hw-calc .pr-metric .label { font-size: 8pt; color: #64748b; margin-bottom: .2em; }
  .hw-calc .pr-metric .value { font-size: 14pt; font-weight: 700; }
  .hw-calc table.pr-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .hw-calc table.pr-table th { background: #1e293b; color: #fff; padding: .4em .5em; text-align: left; font-weight: 600; }
  .hw-calc table.pr-table td { padding: .35em .5em; border-bottom: 1px solid #e2e8f0; }
  .hw-calc table.pr-table tr:nth-child(even) td { background: #f8fafc; }
  .hw-calc table.pr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .hw-calc .pr-badge { display: inline-block; padding: .1em .4em; border-radius: 3px; font-size: 8pt; font-weight: 600; }
  .hw-calc .pr-badge-ok { background: #dcfce7; color: #15803d; }
  .hw-calc .pr-badge-warn { background: #fef3c7; color: #92400e; }
  .hw-calc .pr-badge-err { background: #fee2e2; color: #991b1b; }
  .hw-calc .pr-badge-cp { background: #eef2ff; color: #4338ca; }
  .hw-calc .pr-badge-dp { background: #f0fdf4; color: #166534; }
  .hw-calc .pr-footer { margin-top: 2em; padding-top: .5em; border-top: 1px solid #94a3b8; font-size: 8pt; color: #64748b; display: flex; justify-content: space-between; }
}