/* ==========================================================================
   datacenterManager — Oberflächen-Stil
   Grundhaltung: ruhig, dicht, werkzeughaft. Keine Verläufe, keine Schatten
   außer bei schwebenden Elementen, keine Animationen außer dort, wo sie
   Zustand vermitteln (Docs 8.1).
   Präfixe: dc- für Layout, wm- für wiederverwendete Bausteine.
   ========================================================================== */

/* --- Schrift: selbst gehostet, kein Google-Fonts-<link> (DSGVO) ----------- */

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400;
             font-display: swap; src: url("fonts/dmsans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500;
             font-display: swap; src: url("fonts/dmsans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600;
             font-display: swap; src: url("fonts/dmsans-600.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700;
             font-display: swap; src: url("fonts/dmsans-700.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800;
             font-display: swap; src: url("fonts/dmsans-800.woff2") format("woff2"); }

/* --- Farbvariablen -------------------------------------------------------- */

html {
  --primary: #6366f1;  --primary-hover: #4f46e5;
  --bg: #e5e5ea;       --surface: #ffffff;
  --border: #e8e8ec;   --border-light: #f4f4f5;
  --text: #18181b;     --text-secondary: #52525b;
  --text-muted: #71717a; --text-faint: #a1a1aa;
  --group-border: #9999a3; --group-bg: #c0c0c0;
  --teal: #0d9488;     --green: #10b981;  --red: #ef4444;
  --amber: #f59e0b;    --info: #3b82f6;

  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html.dark {
  --bg: #525252;       --surface: #2f2f2f;
  --border: #4a4a4a;   --border-light: #3a3a3a;
  --text: rgba(255,255,255,.70);
  --text-secondary: rgba(255,255,255,.60);
  --text-muted: rgba(255,255,255,.50);
  --text-faint: rgba(255,255,255,.30);
  --group-border: rgba(255,255,255,.35); --group-bg: #424242;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   8.2  Seitenaufbau
   ========================================================================== */

.dc-page { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

.dc-main {
  flex: 1;
  /* Ohne min-height:0 scrollt die ganze Seite statt der Spalten. */
  min-height: 0;
  display: flex; flex-direction: column;
  padding: 12px; gap: 8px;
}

.dc-split { display: flex; flex-direction: row; min-height: 0; flex: 1; overflow-x: auto; }

/* The width is dragged at the handle (item 102, app.js). A narrower WINDOW does not
   narrow it (104): the detail pane gives way, the tree stays as the operator left it. */
.dc-tree {
  flex: 0 0 auto; width: max(240px, var(--dc-tree-w, 340px));
  overflow: hidden auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 8px;
}

/* Three dots between the panes: drag to widen / narrow the tree, double click = factory width. */
.dc-split__handle {
  flex: 0 0 12px; align-self: stretch; cursor: col-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center; border-radius: 6px; outline: none;
}
.dc-split__handle::before {
  content: ""; width: 4px; height: 22px;
  background: radial-gradient(circle, var(--text-muted) 1.8px, transparent 2.2px) center top / 4px 8px repeat-y;
}
.dc-split__handle:hover::before, .dc-split__handle:focus-visible::before, .dc-resizing .dc-split__handle::before {
  background-image: radial-gradient(circle, var(--primary) 1.8px, transparent 2.2px);
}
.dc-split__handle:focus-visible { box-shadow: 0 0 0 2px var(--primary); }
.dc-resizing, .dc-resizing * { cursor: col-resize !important; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.dc-detail {
  flex: 1; min-width: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px;
}

/* ==========================================================================
   8.3  Kopfzeile
   ========================================================================== */

.dc-header {
  height: 60px; flex: 0 0 60px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}

/* The standby centre (107): on every page, above everything but the header. */
.dc-standby-banner {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 16px; font-size: 13px;
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 40%, var(--border));
  color: var(--text-primary);
}
.dc-standby-banner .mud-icon-root { color: var(--amber); }
.dc-standby-banner__last { color: var(--text-secondary); }

.dc-brand { display: flex; align-items: center; gap: 10px; }
.dc-brand__title { font-size: 16px; font-weight: 800; line-height: 1.15; }
.dc-brand__sub { font-size: 11px; color: var(--text-muted); }
.dc-header__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* ==========================================================================
   8.4  Systemwerte-Balken
   ========================================================================== */

.dc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 18px;
}

.dc-stats__group { display: flex; flex-direction: column; gap: 6px; }

.dc-stat { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dc-stat__name { font-weight: 700; min-width: 38px; color: var(--text-secondary); }
.dc-stat__bar { flex: 1; position: relative; height: 8px; border-radius: 4px; background: var(--border-light); overflow: hidden; }
html.dark .dc-stat__bar { background: rgba(0,0,0,.25); }
.dc-stat__fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.dc-stat__value { min-width: 60px; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Spitzenmarkierung im Netzwerkbalken */
.dc-stat__peak {
  position: absolute; top: -2px; width: 3px; height: 12px;
  background: var(--text-muted); border-radius: 1px;
}
html.dark .dc-stat__peak { background: rgba(255,255,255,.65); }

.dc-stats__empty { color: var(--text-muted); font-size: 13px; padding: 4px 2px; }

/* ==========================================================================
   8.5  Alarmleiste
   ========================================================================== */

.dc-alerts {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}

.dc-alerts__head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.dc-alerts__head:hover { background: rgba(99,102,241,.05); }

.dc-alerts__headline { font-size: 13px; font-weight: 600; }
.dc-alerts__rest { font-size: 12px; color: var(--text-muted); }
.dc-alerts__chev { margin-left: auto; color: var(--text-muted); transition: transform .15s ease; }
.dc-alerts__chev.open { transform: rotate(90deg); }

.dc-alerts__body { border-top: 1px solid var(--border); padding: 4px 0; }

.dc-alert {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; font-size: 13px;
}
.dc-alert--click { cursor: pointer; }
.dc-alert--click:hover { background: rgba(99,102,241,.08); }
.dc-alert__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-alert__go { color: var(--text-faint); }

.wm-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff;
}
.wm-count--err { background: var(--red); }
.wm-count--warn { background: var(--amber); }
.wm-count--info { background: var(--info); }

/* ==========================================================================
   8.6  Baum
   ========================================================================== */

.dc-tree__search { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; }

.dc-node {
  display: flex; align-items: center; gap: 6px;
  min-height: 30px; padding-right: 8px;
  border-radius: 8px; cursor: pointer;
  /* Sonst markiert ein Rechtsklick den Namen und das Menue sieht kaputt aus.
     Die Praefixe sind NICHT ueberfluessig: WebKit hoert erst seit Safari 17 auf
     die Eigenschaft ohne Praefix, und genau dort war der Name nach einem
     Rechtsklick blau markiert, waehrend in Chrome nie etwas zu sehen war.
     Gemeldet und behoben 31.08.2026. */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.dc-node:hover { background: rgba(99,102,241,.08); }
.dc-node.dc-sel { background: rgba(99,102,241,.14); }

.dc-node.dc-menu {
  font-weight: 700; color: var(--primary);
  background: rgba(99,102,241,.20);
  /* inset, kein aeusseres Leuchten: der Baum hat overflow:auto und wuerde es abschneiden. */
  box-shadow: inset 0 0 0 2px var(--primary);
}

.dc-node.dc-drop {
  background: rgba(99,102,241,.20);
  box-shadow: inset 0 0 0 2px var(--primary);
  animation: dc-pulse .85s ease-in-out infinite;
}

@keyframes dc-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--primary); }
  50%      { box-shadow: inset 0 0 0 2px rgba(99,102,241,.35); }
}

.dc-node[draggable="true"] { cursor: grab; }
.dc-node.dc-dragging { cursor: grabbing; opacity: .5; }

/* Eigener Klickbereich: NUR der Pfeil klappt auf und zu. */
.dc-chevron-btn {
  width: 20px; height: 20px; flex: 0 0 20px;
  display: grid; place-items: center;
  border: 0; background: transparent; padding: 0;
  border-radius: 5px; color: var(--text-muted); cursor: pointer;
}
.dc-chevron-btn:hover { background: rgba(99,102,241,.15); }
.dc-chevron-btn svg { transition: transform .15s ease; }
.dc-chevron-btn.open svg { transform: rotate(90deg); }
/* Keine Kinder -> kein Pfeil, aber der Platz bleibt. */
.dc-chevron-spacer { width: 20px; flex: 0 0 20px; }

.dc-node__label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px;
}

/* Die Zeile, die im Baum angeklickt wurde, in der Tabelle daneben. */
.dc-row--sel { background: var(--group-bg); }

/* Eine Zeile, die SAGT warum nichts da ist. Nicht anklickbar und nicht
   auswaehlbar: sie ist eine Antwort, kein Eintrag. */
.dc-node--hint { cursor: default; }
.dc-node--hint:hover { background: transparent; }
.dc-node--hint .dc-node__label {
  color: var(--text-muted); font-style: italic; font-size: 12px;
}

/* The context menu for a finger (137, RowMenuButton): hidden for a mouse, shown below for touch. */
.dc-node__more {
  display: none; flex: 0 0 auto; width: 32px; height: 32px; place-items: center;
  border: 0; background: transparent; padding: 0; border-radius: 8px;
  color: var(--text-muted); cursor: pointer;
}
.dc-node__more:active { background: rgba(99,102,241,.15); }

.dc-node__count {
  margin-left: auto;
  background: var(--group-bg); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
}

/* The ONE unlocked upload zone, marked on its row (19.09.2026): the lock stays open
   while its page is off screen, and an open lock nobody can see is a trap. Teal,
   like the HAZIR pill it stands for. */
.dc-node__armed { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--teal); }
.dc-node__armed .mud-icon-root { font-size: 15px; }
html.dark .dc-node__armed { color: #5eead4; }

/* 8.6.5 Beschraenkte Domains: gleich grosses Kreis-Abzeichen statt Globus. */
.dc-badge {
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%; border: 1.5px solid currentColor;
  display: grid; place-items: center;
  font-size: 8px; font-weight: 800; line-height: 1;
}

/* LiveKit's address among the domains (110): a small tag in LiveKit's colour. */
.dc-livekit-tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: 6px; color: #0369a1; background: rgba(14, 165, 233, .14);
}
html.dark .dc-livekit-tag { color: #7dd3fc; background: rgba(14, 165, 233, .22); }
/* Turn wears Videomeet's colours (126, the operator's wish). */
.dc-turn-tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: 6px; color: #0369a1; background: rgba(14, 165, 233, .14);
}
html.dark .dc-turn-tag { color: #7dd3fc; background: rgba(14, 165, 233, .22); }

/* ==========================================================================
   8.8  Domain-Detail
   ========================================================================== */

.dc-detail__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dc-detail__title { font-size: 20px; font-weight: 800; }
/* The machine's IP beside a default site's name (21.09.2026): the title's size AND its
   colour -- the operator asked for the whole title in the link's blue -- only lighter,
   so the NAME stays the name. No colour of its own: it inherits the link's. */
.dc-detail__address { font-weight: 600; white-space: nowrap; }
.dc-detail__server { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

/* The two state pills in the domain header (20.09.2026). Solid = a statement in the
   colour StatusFormatter chose; hollow = "no reading / nothing there". The solid
   pill is the colour washed towards white with dark text on it, in both themes. */
.dc-detail__pills { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dc-pill {
  --pill-ink: #10231b;
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 5px;
  border-radius: 999px; white-space: nowrap; cursor: default;
  background: color-mix(in srgb, var(--pill) 68%, white); color: var(--pill-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .01em;
}
.dc-pill__badge {
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pill-ink); color: color-mix(in srgb, var(--pill) 68%, white);
}
.dc-pill__badge .mud-icon-root { font-size: 12px; }
.dc-pill > .mud-icon-root { font-size: 16px; margin-left: 2px; }
.dc-pill--quiet { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-weight: 700; }
.dc-pill--quiet .dc-pill__badge { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }

.dc-offline {
  background: rgba(239,68,68,.10); color: var(--red);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px;
}

/* Same shape as .dc-offline, amber: "something is wrong here" rather than
   "nothing works right now". */
.dc-warn {
  background: rgba(245,158,11,.12); color: var(--amber);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px;
}

.dc-empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--text-muted); font-size: 14px;
}

/* --- 8.8.1 Aktionen-Akkordeon --------------------------------------------- */

.wm-acc { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

.wm-row {
  position: relative;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}

/* Der linke Farbstreifen ist die schnellste Statusanzeige der ganzen Seite. */
.wm-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--text-faint); opacity: .35;
}
.wm-row[data-status="ok"]::before { background: var(--green); }
.wm-row[data-status="warn"]::before { background: var(--amber); }
.wm-row[data-status="err"]::before { background: var(--red); }
.wm-row[data-status="neutral"]::before { background: var(--text-faint); }
.wm-row.open::before { opacity: 1; }

.wm-row__head {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px 8px 14px; cursor: pointer;
}
.wm-row__head:hover { background: rgba(99,102,241,.05); }
/* A row whose feature is ON draws its icon in colour, like the deploy-protection shield (105). */
.wm-row[data-on="1"] .wm-row__icon { color: var(--teal); }
.wm-row--readonly .wm-row__head { cursor: default; }
.wm-row--readonly .wm-row__head:hover { background: transparent; }

.wm-row__label {
  min-width: 150px; font-weight: 600; color: var(--text-secondary); font-size: 13px;
}
.wm-row__status {
  flex: 1; min-width: 0; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wm-row__chev { color: var(--text-muted); transition: transform .15s ease; }
.wm-row.open .wm-row__chev { transform: rotate(90deg); }

.wm-row__body {
  border-top: 1px dashed var(--border);
  padding: 12px 12px 14px 36px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
}
.wm-row__body .wm-full { flex: 1 0 100%; }

/* --- Chip-Editor ---------------------------------------------------------- */

.wm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.wm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--border-light);
  font-size: 12px; color: var(--text);
}
html.dark .wm-chip { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); }

.wm-chip__x {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 2px;
}
.wm-chip__x:hover { color: var(--red); }

/* ==========================================================================
   8.8.2  ZIP-Deploy-Zone
   ========================================================================== */

.dc-drop {
  position: relative;
  border: 2px dashed var(--border); border-radius: 14px;
  padding: 22px; text-align: center; color: var(--text-muted);
  transition: border-color .2s ease, background .2s ease;
}

/* Locked: the WHOLE zone is the lock (19.09.2026). It used to carry
   pointer-events:none, which swallowed a button placed inside it (02.09.2026), so
   the button lived outside. Nothing needs that any more: a drop on a locked zone
   is refused in JavaScript at DROP time (data-armed), which is also the only place
   that can say why. The real content stays in the DOM, blurred, so the zone does
   not jump when it opens. */
.dc-drop--locked {
  cursor: pointer; overflow: hidden;
  background-color: rgba(0,0,0,.05);
  background-image: repeating-linear-gradient(45deg,
      transparent, transparent 10px,
      rgba(120,120,130,.13) 10px, rgba(120,120,130,.13) 20px);
}
html.dark .dc-drop--locked {
  background-color: rgba(0,0,0,.22);
  background-image: repeating-linear-gradient(45deg,
      transparent, transparent 10px,
      rgba(0,0,0,.20) 10px, rgba(0,0,0,.20) 20px);
}
.dc-drop--locked:hover { border-color: var(--text-muted); }
.dc-drop--locked .dc-drop__body {
  filter: blur(3px); opacity: .22;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}

.dc-drop__lockbtn {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--text-secondary);
}
.dc-drop__lockbtn strong { font-size: 14px; font-weight: 700; }
.dc-drop__lockbtn small { font-size: 11px; color: var(--text-muted); }
/* Inside the zone it is the zone's face; the panels that use the same class for a
   standalone button (position:relative, inline) keep the smaller type. */
.dc-drop > .dc-drop__lockbtn { gap: 6px; border-radius: 12px; }
.dc-drop > .dc-drop__lockbtn strong { font-size: 16px; color: var(--text); }
.dc-drop > .dc-drop__lockbtn small { font-size: 13px; }
.dc-drop > .dc-drop__lockbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }

.dc-drop--armed {
  border-color: var(--teal); color: var(--text-secondary);
  background: rgba(13,148,136,.05);
  box-shadow: 0 0 0 4px rgba(13,148,136,.16);
  cursor: pointer;
  animation: dc-arm 2.4s ease-in-out infinite;
}
html.dark .dc-drop--armed { background: rgba(255,255,255,.10); }
@keyframes dc-arm {
  0%, 100% { border-color: var(--teal); }
  50%      { border-color: rgba(13,148,136,.35); }
}

.dc-drop__ready {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal); color: #fff; cursor: default;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 4px 5px 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(13,148,136,.35);
}
.dc-drop__ready .mud-icon-root { font-size: 15px; }
.dc-drop__ready button {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: rgba(255,255,255,.28); color: #fff;
  cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
}
.dc-drop__ready button:hover { background: rgba(255,255,255,.45); }
.dc-drop__title { font-size: 15px; font-weight: 600; margin-top: 6px; }
.dc-drop__chosen { margin-top: 10px; font-size: 13px; cursor: default; }

.dc-drop__hint { font-size: 12px; margin-top: 4px; }
.dc-drop input[type="file"] { display: none; }

/* --- "Yüklemeyi aç?" ----------------------------------------------------- */
.dc-arm { position: relative; width: 440px; text-align: center; padding: 28px 28px 24px; }
.dc-arm__x {
  position: absolute; top: 12px; right: 12px;
  border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0;
}
.dc-arm__x:hover { color: var(--text); background: var(--border-light); }
.dc-arm__icon {
  width: 72px; height: 72px; margin: 4px auto 14px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #2dd4bf, var(--teal));
  box-shadow: 0 8px 24px rgba(13,148,136,.35);
}
.dc-arm__icon .mud-icon-root { font-size: 34px; }
.dc-arm__title { font-size: 20px; font-weight: 700; color: var(--text); }
.dc-arm__name {
  display: inline-block; max-width: 100%; margin: 14px 0 12px; padding: 8px 14px;
  font-family: var(--mono); font-size: 17px; font-weight: 700; word-break: break-all;
  color: var(--teal); background: rgba(13,148,136,.10);
  border: 1px solid rgba(13,148,136,.45); border-radius: 8px;
}
html.dark .dc-arm__name { color: #5eead4; }
.dc-arm__body { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
/* "Opening this one closes that one" -- said in the question, not done silently. */
.dc-arm__other { margin-top: 10px; font-size: 13px; color: var(--amber); }
.dc-arm__other strong { font-family: var(--mono); }
.dc-arm__actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.dc-arm__cancel, .dc-arm__ok {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 9px;
}
.dc-arm__cancel { border: 1px solid var(--border); background: transparent; color: var(--text-secondary); }
.dc-arm__cancel:hover { background: var(--border-light); }
.dc-arm__ok {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; color: #fff; background: linear-gradient(145deg, #2dd4bf, var(--teal));
  box-shadow: 0 6px 16px rgba(13,148,136,.30);
}
.dc-arm__ok:hover { filter: brightness(1.06); }
.dc-arm__ok:focus-visible, .dc-arm__cancel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- "Deploy sırasında dosyaları koru" ----------------------------------- */
.dc-protect {
  margin-top: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.dc-protect__head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--text); text-align: left;
}
.dc-protect__head:hover { background: var(--border-light); }
.dc-protect__chev { line-height: 0; color: var(--text-muted); transition: transform .15s ease; }
.dc-protect__chev.open { transform: rotate(90deg); }
.dc-protect__shield { color: var(--teal); }
.dc-protect[data-active="0"] .dc-protect__shield { color: var(--text-faint); }
.dc-protect__title { font-size: 14px; font-weight: 600; }
.dc-protect__summary {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-protect__badge {
  margin-left: auto; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: rgba(13,148,136,.16); color: var(--teal);
}
html.dark .dc-protect__badge { background: rgba(45,212,191,.22); color: #99f6e4; }
.dc-protect__badge--off, html.dark .dc-protect__badge--off { background: var(--border-light); color: var(--text-muted); }
.dc-protect__body { border-top: 1px solid var(--border); padding: 10px 16px 14px 44px; }
.dc-protect__row { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; font-size: 13px; }
/* Drawn by hand: the native box is a white square in the dark theme, where an
   UNTICKED box has to read as "off", not as the brightest thing on the page. */
.dc-protect__row input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: 0 0 18px; margin: 0;
  display: grid; place-items: center;
  border: 2px solid #818cf8; border-radius: 4px; background: transparent; cursor: pointer;
}
.dc-protect__row input:checked { background: #818cf8; }
.dc-protect__row input:checked::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.dc-protect__row input:disabled { opacity: .5; cursor: default; }
.dc-protect__row input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dc-protect__row code { font-family: var(--mono); font-weight: 700; color: var(--text); }
.dc-protect__row span { color: var(--text-muted); }
.dc-protect__note { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.dc-protect__note code { font-family: var(--mono); }
.dc-protect__warn {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45;
  color: var(--text); background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.45);
}

.dc-progress { margin-top: 10px; }
.dc-progress__label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.dc-progress__track { height: 8px; border-radius: 4px; background: var(--border-light); overflow: hidden; }
.dc-progress__fill { height: 100%; background: var(--teal); transition: width .25s ease; }

/* ==========================================================================
   8.9  Domain-Tabelle
   ========================================================================== */

.dc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dc-table th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--text-secondary);
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; white-space: nowrap;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.dc-table th:hover { color: var(--primary); }
.dc-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); }
.dc-table tbody tr { cursor: pointer; }
.dc-table tbody tr:hover { background: rgba(99,102,241,.06); }
.dc-table__center { text-align: center; width: 70px; }
.dc-table__deploy { width: 160px; white-space: nowrap; }

.wm-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff;
}
.wm-pill--on { background: var(--green); }
.wm-pill--off { background: var(--group-bg); }

/* ==========================================================================
   8.10  Kontextmenue
   ========================================================================== */

.dc-ctx-scrim { position: fixed; inset: 0; z-index: 1200; background: transparent; }

.dc-ctx {
  position: fixed; z-index: 1201; min-width: 210px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.dc-ctx__head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.dc-ctx__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--text);
  border-radius: 7px; cursor: pointer; text-align: left; justify-content: flex-start;
}
.dc-ctx__item:hover { background: rgba(99,102,241,.10); }
.dc-ctx__item--danger { color: var(--red); }
.dc-ctx__item--danger:hover { background: rgba(239,68,68,.10); }
.dc-ctx__sep { height: 1px; background: var(--border); margin: 4px 6px; }
.dc-ctx__note { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }
/* The one-line install in the "Ajan kodu" dialog (143). */
.dc-install__label { font-size: 12px; color: var(--text-secondary); margin: 8px 0 2px; }
.dc-install__tabs { display: flex; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--border); }
.dc-install__tab { font: inherit; font-size: 13px; padding: 6px 12px; background: transparent; color: var(--text-secondary);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.dc-install__pve input { font: inherit; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text-primary); }
.dc-install__std { font: inherit; font-size: 12px; padding: 5px 10px; background: transparent; color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.dc-install__kind--on { border-color: var(--accent, #4f7cff); font-weight: 600; }
.dc-install__tab--on { color: var(--text-primary); border-bottom-color: var(--accent, #4f7cff); font-weight: 600; }

/* ==========================================================================
   8.12  Dialoge — eigene, schlichte Overlays
   ========================================================================== */

.dc-scrim {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,.35);
  display: grid; place-items: center; padding: 16px;
}

.dc-dialog {
  width: 380px; max-width: 100%;
  background: var(--surface); border-radius: 14px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  /* A fleet list is as long as the fleet. Without a ceiling a fifty-machine
     table pushes the action buttons off the screen, and a dialog whose buttons
     cannot be reached is a dialog nobody can leave. Shorter dialogs are
     unaffected. */
  max-height: 86vh; overflow-y: auto;
}
.dc-dialog--wide { width: 720px; }
.dc-dialog--medium { width: 560px; }

/* "Yeni Domain" (21.09.2026, the operator's screenshot): the machine's suffix suggestions
   in a band of their own, and the options in a box with a header that folds it. */
.dc-newdomain { margin-top: 10px; }
.dc-newdomain__suffixes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 8px; background: var(--border-light);
}
.dc-newdomain__suffixes-label { font-size: 12px; color: var(--text-muted); }
.dc-newdomain__suffix {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text);
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer;
}
.dc-newdomain__suffix:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.dc-newdomain__suffix:disabled { opacity: .45; cursor: default; }
.dc-newdomain__suffix:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dc-newdomain__hint { font-size: 12px; color: var(--text-faint); padding: 2px 2px 0; }
.dc-newdomain__advanced { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dc-newdomain__advanced-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 9px 12px;
  border: 0; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left;
}
.dc-newdomain__advanced-head:hover { background: var(--border-light); }
.dc-newdomain__options { border-top: 1px solid var(--border); padding: 6px 12px 10px 28px; }
.dc-newdomain__option + .dc-newdomain__option { margin-top: 2px; }
.dc-newdomain__help { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.dc-newdomain__option .dc-newdomain__help { margin: -4px 0 4px 32px; }
.dc-newdomain__warn { display: block; color: var(--amber); }

/* "Ayarlar" on a machine's page (21.09.2026): the suffix list and its one input. */
.dc-machine-settings__title { font-size: 13px; font-weight: 700; }
.dc-machine-settings__note { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 2px 0 10px; }
.dc-machine-settings__note code, .dc-suffix code { font-family: var(--mono); }
.dc-suffixes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 28px; }
.dc-suffixes__none { font-size: 12px; color: var(--text-faint); }
.dc-suffix {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--border-light); font-size: 12px; font-weight: 600;
}
.dc-suffix__remove {
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 15px; line-height: 1; width: 20px; height: 20px; border-radius: 50%;
}
.dc-suffix__remove:hover:not(:disabled) { background: rgba(239,68,68,.12); color: var(--red); }
.dc-machine-settings__add { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.dc-machine-settings__input {
  width: 240px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.dc-machine-settings__input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.dc-machine-settings__error { font-size: 12px; color: var(--red); margin-top: 6px; }
/* Drive letter (88, dropdown since 89): "[C v]:\data\WEB" reads as ONE path, so no gap between the select and the suffix. */
.dc-drive__row { gap: 10px; font-size: 13px; }
.dc-drive__label { min-width: 118px; color: var(--text-secondary); }
.dc-drive__path { display: inline-flex; align-items: center; }
.dc-drive__path code, .dc-drive__vault { font-family: var(--mono); font-size: 13px; }
.dc-drive__select {
  padding: 4px 6px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-family: var(--mono); font-weight: 700;
}
.dc-drive__select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.dc-drive__fixed { font-size: 12px; color: var(--text-muted); }
.dc-dialog__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.dc-dialog__body { font-size: 13px; color: var(--text-secondary); }
.dc-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* Used by the fleet dialogs since 07.09.2026 and never styled until now: the
   skipped-machine block and the quiet text both rendered as ordinary body copy,
   so "atlananlar" read like part of the plan instead of an aside. */
.dc-muted { color: var(--text-muted); font-size: 13px; }
.dc-dialog__note {
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface-2, rgba(99,102,241,.06));
  border-left: 3px solid var(--border); border-radius: 8px;
  font-size: 12px; color: var(--text-secondary);
}
.dc-dialog__note ul { margin: 6px 0 0; padding-left: 18px; }
.dc-dialog__note li { margin-bottom: 3px; }
.dc-linkbtn {
  border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 12px; color: var(--primary);
  cursor: pointer; text-decoration: underline;
}

.dc-dialog__domain {
  font-size: 20px; font-weight: 800; text-align: center;
  margin: 14px 0; word-break: break-all;
}

.dc-folderpick { max-height: 320px; overflow-y: auto; margin-top: 6px; }
.dc-folderpick__item {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px; border: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--text);
  border-radius: 7px; cursor: pointer;
}
.dc-folderpick__item:hover { background: rgba(99,102,241,.10); }

/* ==========================================================================
   8.13 / 8.14  Unterseiten
   ========================================================================== */

.dc-sub { padding: 16px; max-width: 1200px; margin: 0 auto; }
.dc-sub__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dc-sub__title { font-size: 20px; font-weight: 800; }

.dc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px; margin-bottom: 12px;
}

.dc-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dc-metric { display: flex; align-items: center; gap: 12px; }
.dc-metric__icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
}
.dc-metric__value { font-size: 22px; font-weight: 800; line-height: 1.1; }
.dc-metric__label { font-size: 12px; color: var(--text-muted); }

/* 8.7 Die drei Bloecke der Maschinenseite: dieselbe Reihenfolge, dieselben
   Symbole und Farben wie die drei festen Knoten im Baum darunter. */
.dc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.dc-summary__block { margin: 0; }
.dc-summary__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.dc-summary__count {
  margin-left: auto;
  background: var(--group-bg); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
}

.dc-kv { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 6px 16px; font-size: 13px; margin-top: 8px; }
.dc-kv__k { color: var(--text-muted); }
.dc-kv__v { word-break: break-word; }

/* ==========================================================================
   8.15  Login
   ========================================================================== */

.dc-login {
  min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 16px;
  /* The track, not the card, caps the width: an auto track grows to the card's 420 px (137, measured on a 393 px phone). */
  grid-template-columns: minmax(0, 420px); justify-content: center;
}
.dc-login__card {
  width: 100%;
  background: var(--surface); border-radius: 18px; padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,.10);
}
.dc-login__title { color: var(--primary); font-weight: 800; font-size: 28px; }
.dc-login__sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.dc-login__error {
  background: rgba(239,68,68,.10); color: var(--red);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px;
}
.dc-login__field { margin-bottom: 14px; }
.dc-login__field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.dc-login__field input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
.dc-login__field input:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; }
.dc-login__submit {
  width: 100%; padding: 11px; border: 0; border-radius: 10px;
  background: var(--primary); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.dc-login__submit:hover { background: var(--primary-hover); }

/* ==========================================================================
   8.17  Schmale Fenster
   ========================================================================== */

/* No overlay any more (104, the operator's request): the tree keeps its width at every window
   size and stays beside the detail pane; only the detail pane narrows. Below its floor the
   split scrolls sideways instead of the two panes overlapping. */

@media (max-width: 640px) {
  .dc-stats { grid-template-columns: 1fr; }
  .dc-table__deploy, .dc-table th.dc-table__ssl, .dc-table td.dc-table__ssl { display: none; }

  /* A phone (137, iPhone 14 Pro = 393 px): the 104 rule (tree beside the detail, the split
     scrolls sideways) left the detail off screen -- a tap changed nothing visible. Here the
     two panes stack, the page scrolls as one, and a selection scrolls to the detail (dc.revealDetail). */
  .dc-page { height: auto; min-height: 100vh; }
  .dc-main { flex: none; padding: 8px; }
  .dc-split { flex-direction: column; flex: none; overflow: visible; gap: 8px; }
  .dc-tree { width: auto !important; overflow: visible; }
  .dc-split__handle { display: none; }
  .dc-detail { min-width: 0; overflow: visible; padding: 14px; }
  /* A wide table scrolls inside itself, not the page. */
  .dc-detail .dc-table { display: block; overflow-x: auto; }
  .dc-brand__sub { display: none; }
  .dc-login__card { padding: 28px 20px; }
}

/* Touch as the primary pointer: the menu button on every tree row, and rows a finger can hit. */
@media (hover: none) and (pointer: coarse) {
  .dc-node__more { display: grid; }
  .dc-node { min-height: 40px; }
}

/* ==========================================================================
   MudBlazor-Korrekturen
   ========================================================================== */

/* Gefuellte und umrandete Chips brauchen getrennte Regeln. Eine pauschale Regel
   "Chip-Text dunkel" macht umrandete Chips auf dunklem Grund unlesbar (8.1). */
html.dark .mud-chip.mud-chip-filled { color: #1a1a1a; }
html.dark .mud-chip.mud-chip-text,
html.dark .mud-chip.mud-chip-outlined { color: var(--text); background-color: transparent; }

.mud-button-root { text-transform: none; font-family: var(--font); }

/* Kopieren-Rueckfall: sichtbares textarea, dessen Markierung stehen bleibt (8.12). */
.dc-copyfallback { width: 100%; font-family: var(--mono); font-size: 12px; }
.dc-copybox__btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font: inherit; font-size: 13px;
  color: var(--text-primary); background: transparent; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.dc-copybox__btn:hover { background: var(--hover, rgba(127,127,127,.08)); }

/* --- Benutzermenü in der Kopfzeile (Docs 8.3) ------------------------------ */

.dc-user {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 10px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500;
}

.dc-user:hover { background: var(--border-light); color: var(--text); }
.dc-user:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Never let the name push the header apart on a narrow window (Docs 8.17). */
.dc-user__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) { .dc-user__name { display: none; } }

.dc-user-wrap { position: relative; display: inline-block; }

.dc-user-menu__scrim { position: fixed; inset: 0; z-index: 40; }

.dc-user-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 41;
  min-width: 190px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.dc-user-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; text-align: left;
  color: var(--text); font: inherit; font-size: 13px;
}

.dc-user-menu__item:hover  { background: var(--border-light); }
.dc-user-menu__item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dc-user-menu__sep { height: 1px; margin: 4px 6px; background: var(--border); }

/* Dragging over the ZIP zone. Deliberately NOT data-droptarget: that belongs to
   the tree, whose own highlighter would then also grab this element. */
.dc-drop--over { border-color: var(--primary); background: rgba(99,102,241,.08); }
.dc-drop--locked.dc-drop--over { border-color: var(--amber); background: rgba(245,158,11,.10); }

/* --- Erişilebilirlik (uptime, 24.09.2026): the domain page's availability chart ----
   Status colours are the app's own tokens; the legend names every colour that is
   drawn, and every segment carries its tooltip, so colour never stands alone. */
.dc-uptime { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dc-uptime__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.dc-uptime__views, .dc-uptime__nav { display: flex; align-items: center; gap: 4px; }
.dc-uptime__view, .dc-uptime__prev, .dc-uptime__next, .dc-uptime__today {
  font: inherit; font-size: 12px; line-height: 1.2; padding: 4px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer;
}
.dc-uptime__view.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.dc-uptime__next:disabled { opacity: .4; cursor: default; }
.dc-uptime__anchor { font-size: 13px; font-weight: 600; min-width: 112px; text-align: center; color: var(--text); font-variant-numeric: tabular-nums; }
.dc-uptime__strip { position: relative; height: 22px; border-radius: 4px; overflow: hidden; background: var(--border-light); }
.dc-uptime__seg { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border-right: 2px solid var(--surface); }
.dc-uptime__seg:last-child { border-right: 0; }
.dc-uptime__seg--online { background: var(--green); }
.dc-uptime__seg--planned { background: var(--info); }
.dc-uptime__seg--unplanned { background: var(--red); }
.dc-uptime__seg--internet { background: var(--amber); }
.dc-uptime__seg--unknown { background: var(--text-faint); }
.dc-uptime__ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dc-uptime__grid { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
.dc-uptime__axis { display: flex; flex-direction: column; justify-content: space-between; height: 120px; font-size: 11px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.dc-uptime__cols { display: flex; gap: 2px; align-items: stretch; height: 120px; }
.dc-uptime__col { flex: 1 1 0; min-width: 0; position: relative; border-radius: 3px; overflow: hidden; background: var(--border-light); }
.dc-uptime__col .dc-uptime__seg { left: 0; right: 0; top: auto; border-right: 0; border-top: 2px solid var(--surface); }
.dc-uptime__col .dc-uptime__seg:first-child { border-top: 0; }
.dc-uptime__labels { display: flex; gap: 2px; margin-top: 4px; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dc-uptime__labels span { flex: 1 1 0; min-width: 0; text-align: center; overflow: hidden; }
.dc-uptime__stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-secondary); }
.dc-uptime__stats strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-uptime__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-muted); }
.dc-uptime__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; position: static; border: 0; }
.dc-uptime__tz { margin-left: auto; }
.dc-uptime__note { font-size: 12px; color: var(--text-muted); }
.dc-uptime__error { color: var(--red); }

/* Root page tabs and fleet lists (item 101). */
.dc-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 14px; border-bottom: 1px solid var(--border); }
.dc-tabs__tab {
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-secondary); cursor: pointer;
}
.dc-tabs__tab:hover { color: var(--primary); }
.dc-tabs__tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.dc-tabs__count { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.dc-root-list, .dc-root-summary { margin-top: 16px; }
.dc-server-cell__offline { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* The certificate provider selects (121, 124): the theme's colours instead of the browser's white box;
   color-scheme makes the opened list dark too. Disabled (an active certificate, 123) stays readable. */
.dc-ssl__provider-select, .dc-acme__default, .dc-repl-standby {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit;
}
html.dark .dc-ssl__provider-select, html.dark .dc-acme__default, html.dark .dc-repl-standby { color-scheme: dark; }
.dc-ssl__provider-select:disabled, .dc-acme__default:disabled { color: var(--text-secondary); opacity: 1; cursor: not-allowed; }