/* ===================================================================
   Pfotenwerk CRM – Ergänzungen zu Bootstrap 5.3
   Markenfarben und Layout der Seitenleiste.
   =================================================================== */

:root {
    --pw-forest:      #24433a;
    --pw-forest-deep: #182f28;
    --pw-moss:        #4a7a5c;
    --pw-sand:        #d8b26e;
    --pw-paper:       #f7f5f0;
    --pw-line:        #e2ddd2;

    /* Bootstrap-Variablen überschreiben */
    --bs-primary:      #4a7a5c;
    --bs-primary-rgb:  74, 122, 92;
    --bs-body-bg:      #f7f5f0;
    --bs-body-color:   #1d2521;
    --bs-border-color: #e2ddd2;
    --bs-link-color:   #3d6a4d;
    --bs-link-hover-color: #2c5138;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--pw-paper);
}

/* --- Buttons in Markenfarbe --- */
.btn-primary {
    --bs-btn-bg: var(--pw-moss);
    --bs-btn-border-color: var(--pw-moss);
    --bs-btn-hover-bg: #3f6a4f;
    --bs-btn-hover-border-color: #3f6a4f;
    --bs-btn-active-bg: #365a44;
    --bs-btn-active-border-color: #365a44;
    --bs-btn-disabled-bg: var(--pw-moss);
    --bs-btn-disabled-border-color: var(--pw-moss);
}
.btn-outline-primary {
    --bs-btn-color: var(--pw-moss);
    --bs-btn-border-color: var(--pw-moss);
    --bs-btn-hover-bg: var(--pw-moss);
    --bs-btn-hover-border-color: var(--pw-moss);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--pw-moss);
    box-shadow: 0 0 0 .2rem rgba(74, 122, 92, .18);
}
.form-check-input:checked {
    background-color: var(--pw-moss);
    border-color: var(--pw-moss);
}

/* --- Grundlayout --- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: 236px;
    flex-shrink: 0;
    background: var(--pw-forest);
    color: #dfe8e2;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .7rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.brand-mark {
    width: 36px; height: 36px; border-radius: .6rem;
    background: var(--pw-sand); color: var(--pw-forest-deep);
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.2rem; flex-shrink: 0;
}
.brand-name { font-weight: 700; color: #fff; line-height: 1.2; }
.brand-sub {
    font-size: .68rem; color: #9db5a9;
    text-transform: uppercase; letter-spacing: .05em;
}

.sidebar-nav { padding: .8rem .7rem; flex: 1; overflow-y: auto; }
.nav-item-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .75rem; margin-bottom: .15rem;
    border-radius: .5rem;
    color: #c4d3ca; text-decoration: none;
    font-size: .92rem; font-weight: 500;
    transition: background .12s, color .12s;
}
.nav-item-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item-link.active { background: var(--pw-moss); color: #fff; }
.nav-item-link i { font-size: 1rem; width: 1.1rem; text-align: center; }

.sidebar-foot {
    padding: .9rem 1.25rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: .82rem;
}
.user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--pw-moss); color: #fff;
    display: grid; place-items: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.user-name { color: #c4d3ca; font-size: .85rem; }
.logout-link { color: #9db5a9; text-decoration: none; font-size: .8rem; }
.logout-link:hover { color: #fff; }

/* --- Hauptbereich --- */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.75rem;
    background: #fffefb;
    border-bottom: 1px solid var(--pw-line);
    position: sticky; top: 0; z-index: 1020;
}
.topbar-crumb { font-size: .75rem; color: #6c757d; }
.topbar-title { font-size: 1.35rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }

.app-content { padding: 1.5rem 1.75rem; flex: 1; max-width: 1240px; width: 100%; }

.app-footer {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--pw-line);
    font-size: .82rem; color: #6c757d;
}

/* --- Karten & Tabellen --- */
.card {
    border-color: var(--pw-line);
    box-shadow: 0 1px 2px rgba(24,47,40,.05), 0 8px 24px -14px rgba(24,47,40,.16);
}
.card-header {
    background: #fffefb;
    border-bottom-color: var(--pw-line);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    font-weight: 600;
}
.table > :not(caption) > * > * { padding: .7rem .9rem; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: #6c757d; font-weight: 650; background: var(--pw-paper);
}

/* Kennzahlen-Kacheln */
.stat-card .stat-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: #6c757d; font-weight: 600;
}
.stat-card .stat-value {
    font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}

.empty-state { padding: 2.5rem 1rem; text-align: center; color: #6c757d; }
.empty-state i { font-size: 2rem; opacity: .45; display: block; margin-bottom: .5rem; }

/* --- Mobile --- */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed; left: -236px; top: 0; z-index: 1050;
        transition: left .2s ease;
    }
    .app-sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.35); }
    .app-content, .app-topbar, .app-footer { padding-left: 1rem; padding-right: 1rem; }
}

/* --- Login --- */
.login-page {
    min-height: 100vh; display: grid; place-items: center;
    background: var(--pw-forest); padding: 1rem;
}
.login-card { width: 100%; max-width: 390px; }