/* ============================================================
   WOODCAM – Modul-CSS
   Ergänzt das aus /app übernommene Metronic-Theme um die
   schlanken Klassen der WOODCAM-Seiten (.wrap, .card, .input,
   .btn, .muted, .err, .badge). So bleiben die bestehenden
   Seiten unverändert und sehen trotzdem wie die App aus.
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
.wrap {
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Karten (Metronic-Card-Optik, aber mit Innenabstand) ─── */
#kt_app_content .card,
.wc-auth .card {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .03);
    padding: 1.75rem 2rem;
    margin-bottom: 1.75rem;
}

/* ── Überschriften ───────────────────────────────────────── */
#kt_app_content h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-heading-color);
    margin: 0 0 1.5rem;
}
#kt_app_content .card h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin: 0 0 1.1rem;
}
#kt_app_content .card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    margin: 1.4rem 0 .8rem;
}

/* ── Tabellen (Metronic table-row-dashed-Optik) ──────────── */
#kt_app_content table {
    width: 100%;
    border-collapse: collapse;
    color: var(--bs-body-color);
}
#kt_app_content th,
#kt_app_content td {
    text-align: left;
    padding: .85rem .6rem;
    border-bottom: 1px dashed var(--bs-border-color);
    vertical-align: middle;
}
#kt_app_content thead th {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-gray-500, #99a1b7);
    border-bottom: 1px solid var(--bs-border-color);
}
#kt_app_content tbody tr:last-child td { border-bottom: 0; }
#kt_app_content tbody tr:hover td { background: rgba(45, 106, 159, .04); }

/* ── Badges (online/offline) ─────────────────────────────── */
#kt_app_content .badge {
    display: inline-block;
    padding: .35em .75em;
    border-radius: var(--bs-border-radius-sm);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
}
#kt_app_content .badge.on  { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
#kt_app_content .badge.off { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger);  }

/* ── Buttons ohne Metronic-Variante (.btn allein) ────────── */
.btn:not([class*="btn-"]) {
    background: var(--bs-primary);
    color: #fff;
    border: 0;
    padding: .75rem 1.4rem;
    border-radius: var(--bs-border-radius);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.btn:not([class*="btn-"]):hover,
.btn:not([class*="btn-"]):focus {
    background: var(--wp-azure-500, #1B4F78);
    color: #fff;
    text-decoration: none;
}

/* ── Formularfelder (.input → form-control-Optik) ────────── */
.input {
    display: block;
    width: 100%;
    padding: .775rem 1rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
    outline: 0;
    border-color: var(--wp-azure-300, #5A92C0);
    box-shadow: 0 0 0 3px rgba(45, 106, 159, .15);
}
select.input { appearance: auto; }
label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: .4rem;
}

/* ── Hilfstexte & Meldungen ──────────────────────────────── */
.muted {
    color: var(--bs-gray-500, #99a1b7);
    font-size: .9rem;
}
.err {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border: 1px solid var(--bs-danger-border-subtle);
    padding: .8rem 1rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 1.25rem;
}
.ok {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border: 1px solid var(--bs-success-border-subtle);
    padding: .8rem 1rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 1.25rem;
}

/* ── Login (Seite ohne Chrome) ───────────────────────────── */
.wc-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gray-100, #f9f9f9);
    padding: 2rem 1rem;
}
.wc-auth .login-box { width: 100%; max-width: 420px; }
.wc-auth .login-logo { display: block; height: 48px; margin: 0 auto 1.75rem; }
.wc-auth .card { padding: 2.25rem 2.25rem 2rem; margin: 0; }

/* ── Sidebar-Rail (wie in der App) ───────────────────────── */
.wc-sidebar-divider {
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    margin: .35rem .25rem;
    opacity: 1;
}

/* ============================================================
   WOODCAM Marke: Schwarz + Icon-Gelb
   Überschreibt die aus /app übernommene Blau-Palette. Blau bleibt
   nur dort, wo es semantisch ist (Info/Feuchte-Kurve).
   ============================================================ */
:root {
    --wc-black:        #111111;
    --wc-black-soft:   #2A2A2A;
    --wc-black-hover:  #000000;
    --wc-yellow:       #FFED00;   /* aus dem Logo */
    --wc-yellow-dark:  #D4C500;
    --wc-yellow-soft:  #FFFBCC;

    /* ── Bootstrap Primary → Schwarz ─────────────────────── */
    --bs-primary:               #111111;
    --bs-primary-rgb:           17, 17, 17;
    --bs-primary-text-emphasis: #000000;
    --bs-primary-bg-subtle:     #FFFBCC;
    --bs-primary-border-subtle: #E5E5E5;

    --bs-link-color:            #111111;
    --bs-link-color-rgb:        17, 17, 17;
    --bs-link-hover-color:      #000000;
    --bs-link-hover-color-rgb:  0, 0, 0;

    --bs-nav-link-color:              #111111;
    --bs-nav-link-hover-color:        #000000;
    --bs-nav-pills-link-active-bg:    #111111;
    --bs-dropdown-link-active-bg:     #111111;
    --bs-dropdown-link-hover-bg:      #F5F5F3;
    --bs-list-group-active-bg:        #111111;
    --bs-list-group-active-border-color: #111111;
    --bs-pagination-color:            #111111;
    --bs-pagination-active-bg:        #111111;
    --bs-pagination-active-border-color: #111111;
    --bs-progress-bar-bg:             #111111;
    --bs-form-check-input-checked-bg-color:      #111111;
    --bs-form-check-input-checked-border-color:  #111111;
    --bs-form-check-input-indeterminate-bg-color:#111111;
    --bs-focus-ring-color:            rgba(255, 237, 0, .45);
    --bs-tooltip-bg:                  #111111;
    --bs-offcanvas-bg:                #111111;
    --bs-dark:                        #111111;
    --bs-dark-rgb:                    17, 17, 17;
    --bs-heading-color:               #111111;
    --bs-emphasis-color:              #111111;

    /* ── Akzent Gelb ─────────────────────────────────────── */
    --bs-warning:               #FFED00;
    --bs-warning-rgb:           255, 237, 0;
    --bs-warning-text-emphasis: #7A7100;
    --bs-warning-bg-subtle:     #FFFBCC;
    --bs-warning-border-subtle: #FFF17A;

    /* ── Metronic-Variablen ──────────────────────────────── */
    --kt-primary:            #111111;
    --kt-primary-active:     #000000;
    --kt-primary-light:      #FFFBCC;
    --kt-primary-light-dark: #000000;
    --kt-primary-clarity:    rgba(17, 17, 17, .2);
    --kt-primary-inverse:    #FFFFFF;

    --kt-warning:            #FFED00;
    --kt-warning-active:     #D4C500;
    --kt-warning-light:      #FFFBCC;
    --kt-warning-clarity:    rgba(255, 237, 0, .35);
    --kt-warning-inverse:    #111111;

    --kt-dark:               #111111;
    --kt-dark-active:        #000000;
    --kt-dark-light:         #F5F5F3;
    --kt-dark-inverse:       #FFFFFF;

    /* Kompatibilität: alte Azure-Variablen auf die Marke umbiegen */
    --wp-azure-300: #4A4A4A;
    --wp-azure-400: #111111;
    --wp-azure-500: #000000;
    --wp-gold-300:  #FFED00;
}

/* Tabellen-Hover neutral statt blau */
#kt_app_content tbody tr:hover td { background: rgba(17, 17, 17, .035); }

/* Aktiver Tab: schwarze Schrift, gelber Balken */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    border-bottom-color: var(--wc-yellow) !important;
    color: var(--wc-black) !important;
}
.nav-line-tabs .nav-item .nav-link.active { font-weight: 700; }

/* Fokus-Ring in Markengelb */
.form-control:focus, .form-select:focus, .input:focus,
.btn:focus-visible {
    border-color: var(--wc-black) !important;
    box-shadow: 0 0 0 3px rgba(255, 237, 0, .45) !important;
}
.btn:not([class*="btn-"]):hover,
.btn:not([class*="btn-"]):focus { background: var(--wc-black-hover); }

/* ── Verlauf (Breadcrumb) über dem Seitentitel ───────────── */
#kt_app_toolbar .breadcrumb {
    align-items: center;
    gap: .15rem;
    margin-bottom: .35rem;
}
#kt_app_toolbar .breadcrumb .breadcrumb-item a {
    color: var(--wc-black) !important;
    border-bottom: 2px solid transparent;
    padding-bottom: 1px;
    transition: border-color .15s ease, color .15s ease;
}
#kt_app_toolbar .breadcrumb .breadcrumb-item a:hover {
    color: var(--wc-black) !important;
    border-bottom-color: var(--wc-yellow);
}
/* Trenner-Chevrons zurücknehmen, aktueller Punkt bleibt grau */
#kt_app_toolbar .breadcrumb .breadcrumb-item i { color: var(--bs-gray-400) !important; }
#kt_app_toolbar .page-heading { letter-spacing: -.01em; }

/* Logo-Spalte: das WOODCAM-Logo ist breiter als das quadratische App-Icon –
   feste Sidebar-Breite aus wp-theme.css würde es über die Begrüßung schieben. */
@media (min-width: 992px) {
    #kt_app_header_wrapper .app-header-logo > a.wp-header-logo-link {
        width: auto !important;
        min-width: var(--bs-app-sidebar-width);
        margin-right: 1.5rem !important;
    }
}

/* Auth-Seite: schwarzer Hintergrund mit gelbem Akzent */
.wc-auth { background: var(--wc-black); }
.wc-auth .card { border-color: rgba(255, 255, 255, .08); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.wc-auth .login-logo { height: 56px; }

/* ── Brand-Verlauf am linken Rand (body::before aus wp-theme.css) ──
   In der App Blau mit rotem Kopf – hier Schwarz mit Logo-Gelb. */
body::before {
    background: linear-gradient(to top, var(--wc-black) 0%, var(--wc-black) 58%, var(--wc-yellow) 100%) !important;
    width: 6px !important;
}

/* ── Linke Icon-Leiste: aktives Icon im Logo-Grau ────────────
   Die Leiste selbst bleibt wie in der App transparent; nur der
   aktive Eintrag bekommt die Fläche im Mittelgrau des Icons. */
:root { --wc-gray: #9D9D9C; }

#kt_app_sidebar .nav-link.btn.active,
#kt_app_sidebar .nav-link.btn.active:hover,
#kt_app_sidebar .nav-link.btn.active:focus {
    background-color: var(--wc-gray) !important;
    color: #FFFFFF !important;
    border-color: var(--wc-gray) !important;
}
#kt_app_sidebar .nav-link.btn:not(.active):hover {
    background-color: rgba(157, 157, 156, .18) !important;
    color: var(--wc-gray) !important;
}