/* =====================================================================
   gfxMedia CRM – Design-System  (Soft / Glas-Look, Markenfarben)
   Marke: Petrol #00506e  ·  Lime #bbd000  (aus dem Logo)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* --- Marke --- */
    --brand-petrol:      #00506e;
    --brand-petrol-700:  #013c53;
    --brand-petrol-300:  #2b86a5;
    --brand-lime:        #bbd000;
    --brand-lime-600:    #9fb100;

    /* --- Akzent (= Primaer) --- */
    --app-accent:        var(--brand-petrol);
    --app-accent-glow:   rgba(0, 80, 110, .25);

    --app-sidebar-width: 252px;

    /* --- Radien & Schatten (weich, modern) --- */
    --radius-card:   1rem;
    --shadow-soft:   0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -10px rgba(16, 24, 40, .16);
    --shadow-hover:  0 14px 34px -10px rgba(16, 24, 40, .26);

    /* --- Bootstrap-Tokens ueberschreiben → global moderner Look --- */
    --bs-primary:          #00506e;
    --bs-primary-rgb:      0, 80, 110;
    --bs-link-color:       #00506e;
    --bs-link-color-rgb:   0, 80, 110;
    --bs-link-hover-color: #013c53;
    --bs-border-radius:    .6rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-box-shadow-sm:    var(--shadow-soft);
    --bs-box-shadow:       0 14px 34px -12px rgba(16, 24, 40, .22);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Grundlayout / Hintergrund ===== */
body {
    font-family: var(--bs-body-font-family);
    background-color: #eef2f6;
    background-image:
        radial-gradient(900px circle at 0% -5%, rgba(0, 80, 110, .10), transparent 45%),
        radial-gradient(720px circle at 100% 0%, rgba(187, 208, 0, .12), transparent 42%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
[data-bs-theme="dark"] body {
    background-color: #0b1220;
    background-image:
        radial-gradient(900px circle at 0% -5%, rgba(0, 80, 110, .28), transparent 45%),
        radial-gradient(720px circle at 100% 0%, rgba(187, 208, 0, .08), transparent 42%);
}
[data-bs-theme="dark"] {
    --bs-link-color: #5cb4d2;
    --bs-link-color-rgb: 92, 180, 210;
    --bs-link-hover-color: #84cbe3;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.01em; }

/* ===== Shell ===== */
.app-shell { min-height: 100vh; }

@media (min-width: 992px) {
    .app-shell { display: flex; }
    .app-sidebar {
        position: fixed; top: 0; left: 0;
        width: var(--app-sidebar-width); height: 100vh;
        flex-shrink: 0;
    }
    .app-main {
        margin-left: var(--app-sidebar-width);
        flex-grow: 1; min-width: 0;
    }
}

/* ===== Sidebar ===== */
.app-sidebar {
    width: var(--app-sidebar-width);
    --app-sidebar-text: #9fb0bd;
    background: linear-gradient(185deg, #0a3446 0%, #06283a 60%, #04202f 100%);
    color: var(--app-sidebar-text);
    display: flex; flex-direction: column;
}
.app-brand {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    display: flex; align-items: center;
}
.app-brand-logo { height: 30px; width: auto; max-width: 100%; display: block; }
.app-nav { padding: .6rem .55rem; overflow-y: auto; }
.app-nav-heading {
    padding: 1rem 1rem .4rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #5d7689;
}
.app-nav-link {
    display: flex; align-items: center; gap: .8rem;
    padding: .62rem .85rem; margin: .12rem .2rem;
    color: var(--app-sidebar-text); text-decoration: none;
    border-radius: .65rem;
    transition: background .15s, color .15s, box-shadow .15s;
    font-size: .94rem; font-weight: 500;
}
.app-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-nav-link.active {
    background: linear-gradient(90deg, rgba(187, 208, 0, .20), rgba(187, 208, 0, .04));
    color: #fff; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-lime);
}
.app-nav-link.active i { color: var(--brand-lime); }
.app-nav-link.logout:hover { color: #fda4a4; background: rgba(248, 113, 113, .12); }
.app-sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .07); padding: .35rem .55rem .6rem; }
.app-sidebar-footer .form-check-label { color: var(--app-sidebar-text); }

/* Dark-Mode-Zeile: wie ein Menueintrag (Icon · Text · Switch, linksbuendig) */
.app-darkmode { cursor: default; }
.app-darkmode:hover { background: transparent; color: var(--app-sidebar-text); }
.app-darkmode .form-check { padding-left: 0; min-height: auto; margin: 0; }
.app-darkmode .form-check-input { margin: 0; float: none; cursor: pointer; }
.app-darkmode .form-check-label { cursor: pointer; }

/* ===== Topbar (mobil) / Header ===== */
.app-topbar { background: linear-gradient(90deg, #0a3446, #06283a); }
.app-topbar .navbar-brand { display: inline-flex; align-items: center; }
.app-topbar .navbar-brand img { height: 26px; width: auto; max-width: 60vw; display: block; }
.app-header {
    align-items: center;
    padding: .9rem 1.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    position: sticky; top: 0; z-index: 20;
}
[data-bs-theme="dark"] .app-header { background: rgba(17, 24, 39, .72); }
.app-search { width: 280px; }
.app-search .input-group-text { border-right: 0; color: var(--bs-secondary-color); }
.app-search .form-control { border-left: 0; }
.app-content { padding: 1.6rem 1.75rem; }
@media (max-width: 991.98px) { .app-content { padding: 1rem; } }

/* ===== Karten (Glas) ===== */
.card {
    border: 1px solid rgba(255, 255, 255, .55);
    background-color: rgba(255, 255, 255, .74);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}
[data-bs-theme="dark"] .card {
    background-color: rgba(30, 41, 59, .72);
    border-color: rgba(255, 255, 255, .07);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    padding: .85rem 1.1rem;
}
.card-header.bg-transparent { background: transparent !important; }

/* ===== Stat-Cards ===== */
.stat-card { transition: transform .16s ease, box-shadow .16s ease; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.stat-icon {
    width: 46px; height: 46px; border-radius: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; margin-bottom: .65rem;
    background: rgba(0, 80, 110, .10);
    background: color-mix(in srgb, currentColor 14%, transparent);
}
.stat-value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--bs-emphasis-color); }
.stat-label { color: var(--bs-secondary-color); font-size: .82rem; font-weight: 500; margin-top: .2rem; }

/* ===== Kundenprofil (Detailseite) ===== */
@media (min-width: 992px) {
    .customer-profile { position: sticky; top: 84px; }
}
.customer-avatar {
    width: 72px; height: 72px; border-radius: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.55rem; color: #fff;
    background: linear-gradient(135deg, var(--brand-petrol), var(--brand-lime));
    box-shadow: 0 8px 18px -6px var(--app-accent-glow);
}
.customer-avatar-sm {
    width: 40px; height: 40px; border-radius: .65rem;
    font-size: .92rem; box-shadow: none;
}
/* Variante "ohne Kunde" — neutraler Look statt Brand-Farbverlauf. */
.customer-avatar-muted {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

/* ===== Verträge-Liste: Akkordeon-Gruppen nach Kunde ===== */
.kunde-group {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    margin-bottom: .75rem;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: box-shadow .15s;
}
.kunde-group:hover { box-shadow: var(--shadow-hover); }
.kunde-group-header {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem 1rem;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(0, 80, 110, .04), rgba(0, 80, 110, .015));
}
[data-bs-theme="dark"] .kunde-group-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
}
.kunde-group-header:hover { background: rgba(0, 80, 110, .07); }
.kunde-group-header .btn-toggle {
    background: transparent; border: 0; color: var(--bs-secondary-color);
    padding: .25rem .35rem; cursor: pointer; border-radius: .35rem;
}
.kunde-group-header .btn-toggle:hover { background: rgba(0, 80, 110, .1); }
.kunde-group-header .chev { transition: transform .18s; }
.kunde-group.is-collapsed .chev { transform: rotate(-90deg); }
.kunde-group.is-collapsed .kunde-group-body { display: none; }
.kunde-group-body { border-top: 1px solid var(--bs-border-color); }

/* Vertrag-Zeile innerhalb einer Gruppe — Grid-Layout statt Tabelle */
.vertrag-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 130px);
    gap: 1rem;
    align-items: center;
    padding: .55rem 1rem .55rem 3.6rem;
    border-bottom: 1px solid rgba(0, 80, 110, .06);
    font-size: .9rem;
}
.vertrag-row:last-child { border-bottom: 0; }
.vertrag-row:hover { background: rgba(0, 80, 110, .035); }
.vertrag-row--ueberfaellig { background: rgba(192, 57, 43, .055); }
.vertrag-row--ueberfaellig:hover { background: rgba(192, 57, 43, .09); }
.vertrag-row--faellig { background: rgba(230, 167, 0, .07); }
.vertrag-row--faellig:hover { background: rgba(230, 167, 0, .11); }
.vertrag-row--gekuendigt { color: var(--bs-secondary-color); }
.vr-desc { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.vr-desc > .text-truncate { font-weight: 500; }
.typ-ico {
    width: 30px; height: 30px; border-radius: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
    background: color-mix(in srgb, currentColor 14%, transparent);
}
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.status-dot--aktiv        { background: #1e8c4a; }
.status-dot--faellig      { background: #e6a700; }
.status-dot--ueberfaellig { background: #c0392b; }
.status-dot--gekuendigt   { background: #999; }

/* Mobile-Stack: ab unter md die Zeilen in 2-Spalten umbrechen */
@media (max-width: 767.98px) {
    .vertrag-row {
        grid-template-columns: 1fr auto;
        padding-left: 1rem;
        gap: .35rem .8rem;
    }
    .vr-desc        { grid-column: 1 / 3; }
    .vr-preis       { grid-column: 1; text-align: left !important; }
    .vr-faellig     { grid-column: 1; }
    .vr-status      { grid-column: 2; }
    .vr-actions     { grid-column: 2; }
}

/* ===== Domain-Liste: gleiche Akkordeon-Struktur wie Verträge, eigene Zeile ===== */
.domain-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 160px);
    gap: 1rem;
    align-items: center;
    padding: .55rem 1rem .55rem 3.6rem;
    border-bottom: 1px solid rgba(0, 80, 110, .06);
    font-size: .9rem;
}
.domain-row:last-child { border-bottom: 0; }
.domain-row:hover { background: rgba(0, 80, 110, .035); }
.dr-name { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.dr-name > a { font-weight: 500; }

@media (max-width: 767.98px) {
    .domain-row {
        grid-template-columns: 1fr auto;
        padding-left: 1rem;
        gap: .35rem .8rem;
    }
    .dr-name        { grid-column: 1 / 3; }
    .dr-datum       { grid-column: 1; }
    .dr-actions     { grid-column: 2; }
}
.kpi-pill { background: rgba(0, 80, 110, .06); border-radius: .7rem; padding: .5rem .7rem; text-align: center; }
[data-bs-theme="dark"] .kpi-pill { background: rgba(255, 255, 255, .05); }
.kpi-pill-value { font-weight: 700; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.02em; }
.kpi-pill-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }

/* ===== Buttons ===== */
.btn { font-weight: 500; }
.btn-primary {
    --bs-btn-bg: #00506e; --bs-btn-border-color: #00506e;
    --bs-btn-hover-bg: #013c53; --bs-btn-hover-border-color: #013c53;
    --bs-btn-active-bg: #013c53; --bs-btn-active-border-color: #013c53;
    --bs-btn-disabled-bg: #00506e; --bs-btn-disabled-border-color: #00506e;
}
.btn-outline-primary {
    --bs-btn-color: #00506e; --bs-btn-border-color: #00506e;
    --bs-btn-hover-bg: #00506e; --bs-btn-hover-border-color: #00506e;
    --bs-btn-active-bg: #00506e; --bs-btn-active-border-color: #00506e;
}
.btn-success {
    --bs-btn-bg: #6f8400; --bs-btn-border-color: #6f8400;
    --bs-btn-hover-bg: #5c6e00; --bs-btn-hover-border-color: #5c6e00;
    --bs-btn-active-bg: #5c6e00; --bs-btn-active-border-color: #5c6e00;
}

/* ===== Formfelder / Fokus ===== */
.form-control, .form-select {
    border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-petrol-300);
    box-shadow: 0 0 0 .2rem var(--app-accent-glow);
}
.form-check-input:checked { background-color: var(--brand-petrol); border-color: var(--brand-petrol); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--app-accent-glow); }

/* ===== Tabellen ===== */
.table { --bs-table-bg: transparent; }
.table > thead th {
    font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--bs-secondary-color); font-weight: 600;
}
.table > :not(caption) > * > * { padding-top: .7rem; padding-bottom: .7rem; }

/* ===== Badges ===== */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .65em; }

/* ===== Alerts ===== */
.alert { border: 0; box-shadow: var(--shadow-soft); }

/* ===== Auth / Login ===== */
.auth-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(55% 55% at 82% 12%, rgba(187, 208, 0, .28), transparent 60%),
        linear-gradient(135deg, #00506e 0%, #042231 100%);
}
[data-bs-theme="dark"] .auth-body {
    background:
        radial-gradient(55% 55% at 82% 12%, rgba(187, 208, 0, .18), transparent 60%),
        linear-gradient(135deg, #042231 0%, #020d14 100%);
}
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card {
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
[data-bs-theme="dark"] .auth-card { background: rgba(23, 33, 48, .9); }
.auth-logo {
    width: auto; height: auto;
    max-width: min(70%, 220px); max-height: 58px;
    margin: 0 auto; display: block;
}
/* Login-Logo passend zum Theme (Petrol auf hell, Lime auf dunkel) */
.auth-logo-dark { display: none; }
[data-bs-theme="dark"] .auth-logo-light { display: none; }
[data-bs-theme="dark"] .auth-logo-dark { display: block; }
.auth-footnote { color: rgba(255, 255, 255, .8); }