/* ==========================================================
   Kuratoron Static – Admin Theme
   ========================================================== */

:root,
[data-bs-theme="light"] {
    --tblr-primary:        #045089;
    --tblr-primary-rgb:    4, 80, 137;
    --tblr-primary-fg:     #ffffff;
    --kt-accent:           #f96d64;
    --kt-surface:          #ffffff;
    --kt-body-bg:          #f6f7fb;
    --kt-sidebar-bg:       #ffffff;
    --kt-border:           rgba(15, 23, 42, .08);

    /* Betriebszustände – für Schalter und Kachelrahmen */
    --kt-state-online:     #2fb344;
    --kt-state-problem:    #d63939;
    --kt-state-offline:    #e6e8ec;
    --kt-state-demo:       #206bc4;
}

[data-bs-theme="dark"] {
    --tblr-primary:        #3d8fd1;
    --tblr-primary-rgb:    61, 143, 209;
    --kt-accent:           #ff8479;
    --kt-surface:          #1a1d29;
    --kt-body-bg:          #12141c;
    --kt-sidebar-bg:       #171a24;
    --kt-border:           rgba(255, 255, 255, .08);
}

body {
    background-color: var(--kt-body-bg);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Marke ---------- */
.kt-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
}
.kt-brand__mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .625rem;
    background: linear-gradient(135deg, var(--tblr-primary), var(--kt-accent));
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.kt-brand__text { line-height: 1.15; }
.kt-brand__text small {
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    opacity: .6;
    letter-spacing: .02em;
}

/* ---------- Sidebar ---------- */
.navbar-vertical.navbar-expand-lg {
    background-color: var(--kt-sidebar-bg);
    border-right: 1px solid var(--kt-border);
}
.navbar-vertical .nav-link {
    border-radius: .5rem;
    margin: .0625rem .5rem;
    padding: .5rem .625rem;
    transition: background-color .15s ease, color .15s ease;
}
.navbar-vertical .nav-link:hover {
    background-color: rgba(var(--tblr-primary-rgb), .08);
}
.navbar-vertical .nav-link.active {
    background-color: rgba(var(--tblr-primary-rgb), .12);
    color: var(--tblr-primary);
    font-weight: 500;
}
.navbar-vertical .nav-link.active .nav-link-icon { color: var(--tblr-primary); }
.nav-section-title {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .45;
    padding: 1rem 1rem .375rem;
    margin: 0;
}

/* ---------- Karten ---------- */
.card {
    border-color: var(--kt-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.kt-stat__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.kt-stat__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    font-size: 1.25rem;
}

/* ---------- Sonstiges ---------- */
.kt-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}
.kt-dot--ok   { background: var(--tblr-green);  box-shadow: 0 0 0 3px rgba(47, 179, 68, .18); }
.kt-dot--warn { background: var(--tblr-yellow); box-shadow: 0 0 0 3px rgba(245, 159, 0, .18); }
.kt-dot--err  { background: var(--tblr-red);    box-shadow: 0 0 0 3px rgba(214, 57, 57, .18); }

.page-title { letter-spacing: -.02em; }
.table-kv td:first-child { width: 42%; color: var(--tblr-secondary); }

/* ---------- Theme-Umschalter ---------- */
[data-theme-icon-light] { display: none; }
[data-theme-icon-dark]  { display: inline-block; }
[data-bs-theme="dark"] [data-theme-icon-light] { display: inline-block; }
[data-bs-theme="dark"] [data-theme-icon-dark]  { display: none; }
[data-kt-theme-toggle] { color: var(--tblr-body-color); opacity: .75; }
[data-kt-theme-toggle]:hover { opacity: 1; }

/* ==========================================================
   Webseiten-Übersicht – Kacheln mit festem Maß 430 × 285 px
   ========================================================== */

.kt-sites {
    display: grid;
    /* Spalten zwischen 360 und 430 px: auf schmalen Geräten eine, sonst so
       viele wie hineinpassen, ohne Platz liegen zu lassen */
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 430px));
    justify-content: start;
    gap: 1rem;
}

.kt-site {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--kt-surface);
    border: 1px solid var(--kt-border);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: box-shadow .18s ease, transform .18s ease;
}
.kt-site:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

/* Rahmen in der Farbe des Betriebszustands */
.kt-site--online  { border-color: var(--kt-state-online); }
.kt-site--problem { border-color: var(--kt-state-problem); }
.kt-site--offline { border-color: var(--kt-state-offline); }
.kt-site--demo    { border-color: var(--kt-state-demo); }

/* ---------- Kopfzeile: Name und Betriebszustand ---------- */
.kt-site__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex: 0 0 auto;
    padding: .625rem .75rem .625rem 1rem;
}

.kt-site__name {
    margin: 0;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kt-site__link {
    color: var(--tblr-primary);
    text-decoration: none;
}
.kt-site__link:hover,
.kt-site__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* ---------- Betriebszustand ---------- */
.kt-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 7.25rem;
    height: 3.25rem;
    padding: 0 1rem;
    border-radius: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
}
.kt-state--online  { background: var(--kt-state-online);  color: #fff; }
.kt-state--problem { background: var(--kt-state-problem); color: #fff; }
.kt-state--offline { background: var(--kt-state-offline); color: #16181b; }
.kt-state--demo    { background: var(--kt-state-demo);    color: #fff; }

/* ---------- Vorschauen: Schreibtisch und Mobilgerät nebeneinander ---------- */
.kt-site__shots {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    flex: 0 0 auto;
    padding: 0;
    background: var(--kt-body-bg);
    border-top: 1px solid var(--kt-border);
    border-bottom: 1px solid var(--kt-border);
}

.kt-shot {
    display: block;
    min-width: 0;
    overflow: hidden;
    background: var(--kt-surface);
    cursor: pointer;
}
/* Anteile so gewählt, dass beide Aufnahmen bei jeder Breite gleich hoch sind:
   1920:1080 verhält sich zu 402:874 wie 79,45 % zu 20,55 % */
.kt-shot--desktop {
    flex: 0 0 calc((100% - .5rem) * 0.7945);
    aspect-ratio: 1920 / 1080;
}
.kt-shot--mobile {
    flex: 0 0 calc((100% - .5rem) * 0.2055);
    aspect-ratio: 402 / 874;
}

.kt-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity .18s ease;
}
.kt-shot:hover img {
    opacity: .88;
}

/* ---------- Ausgelieferte Version ---------- */
.kt-site__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: .625rem 1rem .75rem;
}

.kt-site__version {
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tblr-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kt-site__remark {
    margin: .0625rem 0 0;
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--tblr-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================
   Detailansicht einer Webseite
   ========================================================== */

/* ---------- Vorschauen nebeneinander ---------- */
.kt-detail__shots {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 600px;
}

.kt-detail__shot {
    position: relative;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    border-radius: .5rem;
    border: 1px solid var(--kt-border);
    background: var(--kt-body-bg);
}
/* Gleiche Anteile wie in der Übersicht, damit beide gleich hoch sind */
.kt-detail__shot--desktop {
    flex: 0 0 calc((100% - .75rem) * 0.7945);
    aspect-ratio: 1920 / 1080;
}
.kt-detail__shot--mobile {
    flex: 0 0 calc((100% - .75rem) * 0.2055);
    aspect-ratio: 402 / 874;
}

.kt-detail__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.kt-detail__shot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .25rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
    color: #fff;
    background: rgba(15, 23, 42, .6);
}

/* ---------- Ausgelieferte Version ---------- */
.kt-detail__version {
    margin-top: .25rem;
}
.kt-detail__version-line {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--tblr-body-color);
}
.kt-detail__version-remark {
    margin: .125rem 0 0;
    font-size: .875rem;
    line-height: 1.35;
    color: var(--tblr-secondary);
}

/* ---------- Abmelden am Fuß der Navigation ---------- */
.kt-nav-logout { margin-top: .75rem; }
.kt-nav-logout .nav-link { color: var(--tblr-secondary); }

/* ---------- Hostnamen-Zeilen im Formular ---------- */
.kt-hostname {
    padding: .875rem 1rem;
    border: 1px solid var(--kt-border);
    border-radius: .5rem;
    background: rgba(var(--tblr-primary-rgb), .025);
}
.kt-hostname .form-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tblr-secondary);
    margin-bottom: .25rem;
}
.kt-hostname .form-check-label { font-size: .8125rem; }

/* ---------- Formular allgemein ---------- */
.form-hint { font-size: .8125rem; }
.accordion-button:not(.collapsed) {
    background-color: rgba(var(--tblr-primary-rgb), .07);
    color: var(--tblr-primary);
}

/* ---------- Versionsliste ---------- */
.kt-version--active {
    background: rgba(var(--tblr-success-rgb, 47, 179, 68), .07);
}
.kt-version--active td { font-weight: 500; }

/* ==========================================================
   Schiebeschalter
   ========================================================== */

/* Tabler zeichnet den ausgeschalteten Schalter in hellem Grau,
   was wie „deaktiviert" wirkt. Aus wird deshalb schwarz mit weißem Knopf. */
:root,
[data-bs-theme="light"] {
    --kt-switch-off: #16181b;
}
[data-bs-theme="dark"] {
    --kt-switch-off: #495057;
}

.form-switch .form-check-input:not(:checked),
.form-switch .form-check-input:not(:checked):focus {
    background-color: var(--kt-switch-off);
    border-color: var(--kt-switch-off);
    --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:not(:checked):hover {
    background-color: #000;
    border-color: #000;
}
[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):hover {
    background-color: #5c6874;
    border-color: #5c6874;
}

/* ── Serverübersicht ─────────────────────────────────────────────── */

.kt-servers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}

.kt-server {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--kt-state-offline);
    border-radius: .5rem;
}

.kt-server--ok        { border-color: var(--kt-state-online); }
.kt-server--fehler    { border-color: var(--kt-state-problem); }
.kt-server--warnung   { border-color: #f59f00; }
.kt-server--unbekannt { border-color: var(--kt-state-offline); }

.kt-server__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.kt-server__funktion {
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.2;
}

.kt-server__host {
    font-size: .82rem;
    color: var(--tblr-secondary, #667382);
    word-break: break-all;
}

.kt-serverstate {
    flex: none;
    padding: .16rem .55rem;
    border-radius: .25rem;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.kt-serverstate--ok        { background: var(--kt-state-online);  color: #fff; }
.kt-serverstate--fehler    { background: var(--kt-state-problem); color: #fff; }
.kt-serverstate--warnung   { background: #f59f00;                 color: #16181b; }
.kt-serverstate--unbekannt { background: var(--kt-state-offline);  color: #16181b; }

.kt-server__healthtext {
    font-size: .82rem;
    color: var(--tblr-secondary, #667382);
    margin-top: -.3rem;
}

.kt-server__adressen {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    gap: .1rem .5rem;
    margin: .2rem 0 0;
    font-size: .8rem;
}

.kt-server__adressen dt { color: var(--tblr-secondary, #667382); font-weight: 500; }
.kt-server__adressen dd { margin: 0; word-break: break-all; }

.kt-server__plattform {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
    font-weight: 500;
    padding-top: .35rem;
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
}

.kt-server__cpu {
    font-size: .76rem;
    color: var(--tblr-secondary, #667382);
    margin-top: -.35rem;
}

.kt-messwert { margin-top: .15rem; }

.kt-messwert__kopf {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    margin-bottom: .18rem;
}

.kt-balken {
    position: relative;
    height: .42rem;
    border-radius: .21rem;
    background: var(--tblr-border-color, #e6e7e9);
    overflow: hidden;
}

.kt-balken__fuellung {
    height: 100%;
    border-radius: .21rem;
    transition: width .3s ease;
}

.kt-balken__fuellung--ruhig    { background: var(--kt-state-online); }
.kt-balken__fuellung--hoch     { background: #f59f00; }
.kt-balken__fuellung--kritisch { background: var(--kt-state-problem); }

.kt-messwert__zahl {
    font-size: .72rem;
    color: var(--tblr-secondary, #667382);
    text-align: right;
    margin-top: .1rem;
    font-variant-numeric: tabular-nums;
}

.kt-server__hinweis {
    font-size: .8rem;
    color: var(--tblr-secondary, #667382);
    padding-top: .45rem;
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
}

.kt-server__fuss {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .5rem;
    font-size: .74rem;
    color: var(--tblr-secondary, #667382);
}

.kt-server__fehler {
    font-size: .76rem;
    color: var(--kt-state-problem);
    word-break: break-word;
}

/* ── Laufender Versionswechsel ───────────────────────────────────── */

.kt-detail__wechsel {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin: 0 0 .3rem;
    font-size: .82rem;
    color: var(--tblr-azure, #4299e1);
}

.kt-detail__wechsel--offen { color: #f59f00; }

.kt-server__aktionen {
    padding-top: .6rem;
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
    text-align: right;
}

/* ── Einrichtung einer Node ──────────────────────────────────────── */

.kt-schritte { padding-left: 1.2rem; margin: 0; }
.kt-schritte li { margin-bottom: 1.1rem; }
.kt-schritte li:last-child { margin-bottom: 0; }
.kt-schritte p { margin: .3rem 0 0; font-size: .85rem; }

.kt-befehl {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
    padding: .6rem .75rem;
    background: var(--tblr-bg-surface-secondary, #f6f7f9);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: .35rem;
}

.kt-befehl code {
    flex: 1;
    font-size: .8rem;
    word-break: break-all;
    color: var(--tblr-body-color, #16181b);
}

.kt-json {
    margin: 0;
    padding: .75rem;
    background: var(--tblr-bg-surface-secondary, #f6f7f9);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: .35rem;
    font-size: .78rem;
    overflow-x: auto;
}

/* ── Merkmale eines Zugangs ──────────────────────────────────────── */

.kt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.kt-tags .badge {
    font-weight: 500;
    font-size: .7rem;
}

/* Was bei der nächsten Anmeldung greift, hebt sich ab */
.kt-tag--offen {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* Noch nie kopiert: kein Fehler, sondern eine offene Aufgabe */
:root { --kt-state-einrichtung: #4299e1; }
.kt-site--einrichtung  { border-color: var(--kt-state-einrichtung); }
.kt-state--einrichtung { background: var(--kt-state-einrichtung); color: #fff; }

/* ── Fehlerhafte Pfade einer Kopie ───────────────────────────────── */

.kt-fehlerliste { margin-top: .3rem; font-size: .78rem; }

.kt-fehlerliste > summary {
    cursor: pointer;
    color: var(--tblr-secondary, #667382);
    user-select: none;
}

.kt-fehlerliste > summary:hover { color: var(--kt-state-problem, #d63939); }

.kt-fehlerliste__tabelle {
    margin-top: .35rem;
    max-height: 14rem;
    overflow-y: auto;
    display: block;
    width: 100%;
    border-left: 2px solid var(--tblr-border-color, #e6e7e9);
    padding-left: .6rem;
}

.kt-fehlerliste__tabelle td { padding: .1rem .5rem .1rem 0; vertical-align: top; }

.kt-fehlerliste__status {
    color: var(--kt-state-problem, #d63939);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}