/* ==========================================================
   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);
}

[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;
    grid-template-columns: repeat(auto-fill, 430px);
    justify-content: start;
    gap: 1rem;
}
@media (max-width: 493px) {
    .kt-sites { grid-template-columns: 1fr; }
}

.kt-site {
    width: 430px;
    max-width: 100%;
    height: 285px;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    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, border-color .18s ease;
}
.kt-site:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--tblr-primary-rgb), .35);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

/* ---------- Kopfzeile ---------- */
.kt-site__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    margin-bottom: .625rem;
}
.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;
}

.kt-site__status {
    flex: 0 0 auto;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---------- Vorschau und Kennzahlen nebeneinander ---------- */
.kt-site__main {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: .875rem;
    margin: auto 0;
}

.kt-site__shot {
    width: 240px;
    height: 135px;
    flex: 0 0 240px;
    overflow: hidden;
    border-radius: .5rem;
    background: var(--kt-body-bg);
    border: 1px solid var(--kt-border);
}
.kt-site__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.kt-site__facts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .875rem;
    min-width: 0;
    height: 135px;
}

.kt-site__label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tblr-secondary);
    opacity: .85;
    margin-bottom: .0625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kt-site__value {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kt-site__sub {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--tblr-secondary);
}

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

.kt-detail__shot {
    max-width: 480px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: .5rem;
    border: 1px solid var(--kt-border);
    background: var(--kt-body-bg);
}
.kt-detail__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.kt-fact__label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tblr-secondary);
    opacity: .85;
    margin-bottom: .125rem;
}
.kt-fact__value {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.kt-fact__sub {
    font-size: .8125rem;
    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; }