/* Page styles: proxmox (views/dash/proxmox.ejs, views/dash/proxmox_vms*.ejs).
   Plain CSS, loaded by views/partials/header.ejs after panel.css. Only what
   Bootstrap and panel.css do not cover: hooks set by scripts, the dense
   Proxmox-style forms, the combo box and the hand-drawn graphs. */

/* ---------------------------------------------------------------------------
   OVERVIEW (views/dash/proxmox.ejs)
   --------------------------------------------------------------------------- */

/* The empty state spans the whole grid instead of one column */
.pmx-ganze-breite { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   PROXMOX GUEST (views/dash/proxmox_vms*.ejs)
   --------------------------------------------------------------------------- */

/* Status badge in the title bar: a dot in the badge's own colour.
   holeStatus() swaps the text-bg-* class, the dot follows via currentColor. */
.pmx-kopfpunkt { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }

/* The shutdown menu holds long entries ("Hart ausschalten") */
.pmx-menue-breit { min-width: 15rem; }

/* Section menu: the firewall sub-items. proxmox_vms_scripts.ejs sets .offen
   on the entry while they are expanded, the arrow turns. */
.pmx-gruppe .pmx-pfeil { font-size: var(--z-fs-xs); opacity: .6; transition: transform .2s ease; }
.pmx-gruppe.offen .pmx-pfeil { transform: rotate(180deg); }
.pmx-untermenue { display: flex; gap: .25rem; }
@media (min-width: 992px) {
  .pmx-untermenue { flex-direction: column; margin-left: 1rem; padding-left: .5rem; border-left: 1px solid var(--z-border); }
}

/* Grids of the overview: the cards of one row stay equally tall,
   so the graphs fill their card */
.pmx-raster { display: grid; gap: var(--z-gap); }
.pmx-raster > * { min-width: 0; }
@media (min-width: 1200px) {
  .pmx-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmx-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Selects in toolbars and headers keep their natural width */
.pmx-wahl { width: auto; min-width: 6.5rem; }
.pmx-wahl-breit { width: auto; min-width: 10rem; }

/* Key figures of the overview: icon column */
.pmx-symbol { width: 1rem; text-align: center; }

/* Notes from the configuration: free text keeps its line breaks,
   long addresses without spaces may wrap */
.pmx-hinweise { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Short values set off from the text (log levels, IP set members, own ID) */
.pmx-code { display: inline-block; padding: .1rem .4rem; border-radius: var(--z-radius-xs); background: var(--z-hover); color: var(--z-text); font-family: var(--z-mono); font-size: var(--z-fs-xs); }
.pmx-adressen { line-height: 1.8; }

/* ---- Graphs (zeichne() in proxmox_vms_scripts.ejs) ---- */
.pmx-graf-koerper { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 10rem; padding: .75rem .5rem; }
.pmx-graf { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pmx-graf-flaeche { position: relative; flex: 1 1 auto; min-height: 120px; }
.pmx-graf-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pmx-graf-hinweis { position: absolute; top: .375rem; z-index: 2; pointer-events: none; padding: .25rem .5rem; border: 1px solid var(--z-border); border-radius: var(--z-radius-xs); background: var(--z-surface); color: var(--z-text); font-size: var(--z-fs-xs); line-height: 1.4; white-space: nowrap; }
.pmx-graf-gitter { stroke: rgba(255, 255, 255, .1); }
.pmx-graf-achse { stroke: rgba(255, 255, 255, .25); }
.pmx-graf-text { fill: rgba(255, 255, 255, .55); font-size: 10px; }
.pmx-graf-text-y { dominant-baseline: middle; text-anchor: end; }
.pmx-graf-text-x { text-anchor: middle; }
.pmx-markerlinie { stroke: rgba(255, 255, 255, .45); stroke-dasharray: 3 3; }

/* Legend dots above the graphs - the same colours the script draws with */
.pmx-legende-punkt { display: inline-block; flex: none; width: .5rem; height: .5rem; border-radius: 50%; }
.pmx-farbe-cpu { background: #a3b83a; }
.pmx-farbe-ram { background: #2fa4b8; }
.pmx-farbe-aus { background: #4a9fe0; }

/* ---- Lists (hardware, options, host) ---- */

/* Label column of the key/value tables */
.pmx-schluessel { width: 34%; min-width: 190px; font-weight: 400; color: var(--z-muted); }
@media (max-width: 767.98px) { .pmx-schluessel { width: auto; min-width: 0; white-space: normal; } }
.pmx-hw-titel { width: 17rem; font-weight: 500; color: var(--z-muted); }
@media (max-width: 575.98px) { .pmx-hw-titel { width: auto; white-space: normal; } }

/* Rows that can only be viewed don't look clickable */
.pmx-fest { cursor: default; }

/* Task rows: running and failed tasks tint the whole row, as in Proxmox.
   Through Bootstrap's cell variable, so the selection (.table-active)
   still shows on top. */
tr.pmx-aufgabe-laeuft { --bs-table-bg-type: rgba(var(--z-warning-rgb), .1); }
tr.pmx-aufgabe-fehler { --bs-table-bg-type: rgba(var(--z-danger-rgb), .15); }

/* Firewall log: fixed height, the header stays visible while scrolling */
.pmx-log-tabelle { max-height: 30rem; overflow: auto; border: 1px solid var(--z-border); border-radius: var(--z-radius-sm); }
.pmx-log-tabelle thead th, .pmx-netz-liste thead th { position: sticky; top: 0; z-index: 1; background: var(--z-surface); }
.pmx-netz-liste { max-height: 60vh; overflow-y: auto; }

/* Console output in the task and backup dialogs */
.pmx-log { max-height: 55vh; overflow: auto; margin: 0; font-size: var(--z-fs-xs); line-height: 1.65; white-space: pre; }

/* FIREWALL RULES: DRAGGING
   The handle is the only place a drag starts. The script sets the classes
   below while a rule is dragged. The dragged row stays visible but recedes -
   otherwise one wonders while dropping which row one is holding. Where it
   would go is a line at the edge, not a shifted row: the table should not
   jump while dragging. */
.pmx-griff-zelle { width: 1.5rem; }
.pmx-griff { display: inline-block; padding: 0 .125rem; line-height: 1; color: var(--z-muted); cursor: grab; }
tr.pmx-regel:hover .pmx-griff { color: var(--z-text); }
.pmx-griff:active { cursor: grabbing; }
tr.pmx-regel.wird-gezogen { opacity: .4; }
tr.pmx-regel.einfuegen-davor > td { box-shadow: inset 0 2px 0 0 var(--z-accent); }
tr.pmx-regel.einfuegen-danach > td { box-shadow: inset 0 -2px 0 0 var(--z-accent); }

/* ---- Dialogs ---- */

/* Proxmox' dialogs are wider than Bootstrap's default modal */
.pmx-dialog { --bs-modal-width: 38rem; }
.pmx-dialog-breit { --bs-modal-width: 42rem; }

/* Form row as in the Proxmox dialogs: label on the left, field on the right.
   The label column is --pmx-hw-label wide (set on the surrounding
   .pmx-maske); on phones label and field stack. Used in the modals of
   proxmox_vms.ejs and by hwFeld() in proxmox_vms_scripts.ejs. */
.pmx-maske { display: grid; column-gap: 1.5rem; --pmx-hw-label: 175px; }
.pmx-maske-2 { display: grid; column-gap: 1.5rem; }
.pmx-maske-breit { --pmx-hw-label: 150px; }
@media (min-width: 576px) { .pmx-maske-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pmx-feld { display: grid; align-items: start; column-gap: .5rem; row-gap: .25rem; margin-bottom: .5rem; }
.pmx-feld-label { margin: 0; font-size: .85rem; color: var(--z-text); }
.pmx-feld-haken { justify-self: start; margin-top: 0; }
.pmx-feld-notiz { margin: 0; color: var(--z-muted); font-size: var(--z-fs-xs); }
@media (min-width: 576px) {
  .pmx-feld { grid-template-columns: var(--pmx-hw-label, 105px) minmax(0, 1fr); }
  .pmx-feld-label { padding-top: .3rem; }
  .pmx-feld-wert { padding-top: .4rem; }
  .pmx-feld-haken { margin-top: .45rem; }
  .pmx-feld-notiz { grid-column-start: 2; }
}

/* A hint below a row, aligned with the field column */
.pmx-feld-hinweis { margin: -.25rem 0 .5rem; color: var(--z-muted); font-size: var(--z-fs-xs); }
@media (min-width: 576px) { .pmx-feld-hinweis { padding-left: calc(var(--pmx-hw-label, 105px) + .5rem); } }

/* Line across the whole width (advanced part, rights) */
.pmx-trenner { grid-column: 1 / -1; margin: .5rem 0; border-top: 1px solid var(--z-border); }

/* The arrows of the boot order */
.pmx-pfeilknopf { --bs-btn-font-size: .65rem; }

/* "Erweitert" in the rule dialog: Bootstrap's collapse toggles .collapsed */
.pmx-aufklapper > .bi { font-size: var(--z-fs-xs); transition: transform .2s ease; }
.pmx-aufklapper:not(.collapsed) > .bi { transform: rotate(180deg); }

/* ---- Combo box (views/dash/proxmox_vms_combo.ejs) ----
   Select field with columns. The arrow sits inside the field; the menu's
   table has fixed column widths, overly long text is truncated instead of
   wrapped, so every row stays the same height. The rows are built by
   proxmox_vms_scripts.ejs, hence the rules on td/th. */
.pmx-kombo { position: relative; }
.pmx-kombo-feld { padding-right: 2rem; }
.pmx-kombo-auf { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 2rem; padding: 0; border: 0; background: none; color: var(--z-muted); font-size: var(--z-fs-xs); cursor: pointer; }
.pmx-kombo-auf:hover { color: var(--z-text); }
.pmx-kombo-menue { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: .125rem; max-height: 15rem; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--z-border); border-radius: var(--z-radius-sm); background: var(--z-surface); }
.pmx-kombo-menue table { width: 100%; table-layout: fixed; border-collapse: collapse; color: var(--z-text); font-size: var(--z-fs-xs); }
.pmx-kombo-menue th, .pmx-kombo-menue td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .25rem .5rem; border-bottom: 1px solid var(--z-border); }
.pmx-kombo-menue td:first-child { font-weight: 600; }
.pmx-kombo-menue th { position: sticky; top: 0; z-index: 1; background: var(--z-hover); color: var(--z-muted); text-align: left; font-size: .7rem; font-weight: 600; }
.pmx-kombo-menue tbody tr { cursor: pointer; }
.pmx-kombo-menue tbody tr:hover { background: var(--z-hover); }

@media (prefers-reduced-motion: reduce) {
  .pmx-gruppe .pmx-pfeil, .pmx-aufklapper > .bi { transition: none; }
}