/* ===== MESSAGE OF THE DAY (Dashboard) ===== */
.motd-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-d) 100%);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.motd-banner i { opacity: 0.85; flex-shrink: 0; }

/* ===== KPI-KARTEN (Dashboard) ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.kpi-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: var(--shadow);
    border-left: 4px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.kpi-green  { border-left-color: var(--color-success); }
.kpi-blue   { border-left-color: var(--color-primary); }
.kpi-orange { border-left-color: var(--color-warning); }
.kpi-yellow { border-left-color: var(--color-yellow, #ca8a04); }
.kpi-purple { border-left-color: var(--color-purple);  }
.kpi-red    { border-left-color: var(--color-danger);  }
.kpi-muted  { border-left-color: transparent; }

.kpi-yellow .kpi-icon { background: #fef9c3; color: var(--color-yellow, #ca8a04); }
[data-theme="dark"] .kpi-yellow .kpi-icon { background: rgba(202,138,4,0.15); }

/* Warn-Ring: nur für explizit markierte Warn-Tiles (z. B. Dashboard) */
.kpi-card.kpi-ring.kpi-orange { box-shadow: var(--shadow), 0 0 0 1px rgba(245,158,11,0.45); }
.kpi-card.kpi-ring.kpi-red    { box-shadow: var(--shadow), 0 0 0 1px rgba(239,68,68,0.45);  }
.kpi-card.kpi-ring.kpi-yellow { box-shadow: var(--shadow), 0 0 0 1px rgba(202,138,4,0.35);  }

.kpi-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.kpi-green  .kpi-icon { background: #dcfce7; color: var(--color-success); }
.kpi-blue   .kpi-icon { background: #dbeafe; color: var(--color-primary); }
.kpi-orange .kpi-icon { background: #fef3c7; color: var(--color-warning); }
.kpi-purple .kpi-icon { background: #ede9fe; color: var(--color-purple);  }
.kpi-red    .kpi-icon { background: #fee2e2; color: var(--color-danger);  }
[data-theme="dark"] .kpi-green  .kpi-icon { background: rgba(34,197,94,0.15); }
[data-theme="dark"] .kpi-blue   .kpi-icon { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .kpi-orange .kpi-icon { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .kpi-purple .kpi-icon { background: rgba(167,139,250,0.15); }
[data-theme="dark"] .kpi-red    .kpi-icon { background: rgba(239,68,68,0.15); }
.kpi-muted .kpi-icon { background: rgba(128,128,128,0.1); color: var(--color-muted); }
[data-theme="dark"] .kpi-muted .kpi-icon { background: rgba(255,255,255,0.05); }

.kpi-label { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 0.25rem; }
.kpi-value { font-size: 1.75rem; font-weight: 700; }

/* ===== KPI WIDE-CARDS (Dashboard — Umsatz & Verkäufe mit 4 Zeiträumen) ===== */
.kpi-grid-wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.kpi-wide-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    border-left: 4px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.kpi-wide-card.kpi-green  { border-left-color: var(--color-success); }
.kpi-wide-card.kpi-blue   { border-left-color: var(--color-primary); }

.kpi-wide-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-wide-header .kpi-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.kpi-wide-card.kpi-green .kpi-icon { background: #dcfce7; color: var(--color-success); }
.kpi-wide-card.kpi-blue  .kpi-icon { background: #dbeafe; color: var(--color-primary); }
[data-theme="dark"] .kpi-wide-card.kpi-green .kpi-icon { background: rgba(34,197,94,0.15); }
[data-theme="dark"] .kpi-wide-card.kpi-blue  .kpi-icon { background: rgba(59,130,246,0.15); }

@media (hover: hover) and (pointer: fine) {
    .kpi-card:hover,
    .kpi-wide-card:hover {
        transform: translateY(var(--hover-unified-lift, -2px));
        box-shadow: var(--hover-unified-shadow, var(--shadow-md)), 0 0 0 1px rgba(var(--color-primary-rgb, 59,130,246), 0.24);
    }
    .kpi-card.kpi-ring.kpi-orange:hover { box-shadow: var(--hover-unified-shadow, var(--shadow-md)), 0 0 0 1px rgba(245,158,11,0.55); }
    .kpi-card.kpi-ring.kpi-red:hover    { box-shadow: var(--hover-unified-shadow, var(--shadow-md)), 0 0 0 1px rgba(239,68,68,0.55);  }
    .kpi-card.kpi-ring.kpi-yellow:hover { box-shadow: var(--hover-unified-shadow, var(--shadow-md)), 0 0 0 1px rgba(202,138,4,0.45);  }
}

/* ===== Kompakte KPI-Leiste mit Hover-Fill-Effekt (z. B. /users, /customers) ===== */
.kpi-grid-compact {
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-grid-compact .kpi-card {
    padding: 0.7rem 1rem;
    gap: 0.75rem;
    align-items: center;
    box-shadow: none;
    border-left-width: 2px;
    opacity: 0.85;
    transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.kpi-grid-compact .kpi-icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.85rem;
    background: transparent !important;
    opacity: 0.55;
    transition: opacity 0.16s ease;
}

.kpi-grid-compact .kpi-label {
    font-size: 0.72rem;
    margin-bottom: 0.1rem;
    opacity: 0.85;
}

.kpi-grid-compact .kpi-value {
    font-size: 1.15rem;
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    .kpi-grid-compact .kpi-card:hover {
        opacity: 1;
        transform: translateY(var(--hover-unified-lift, -2px));
        box-shadow: var(--hover-unified-shadow, var(--shadow-md));
    }
    .kpi-grid-compact .kpi-card:hover .kpi-icon {
        opacity: 1;
    }
}

/* ===== Groesserer Compact-Modifier (Mitarbeiter/Customers-Variante) =====
   Baut auf .kpi-grid-compact auf, macht Karten etwas luftiger (groesseres
   Icon, groesserer Value) und erzwingt 4 Spalten nebeneinander.
   Responsive: 2 Spalten unter 1024px, 1 Spalte unter 600px. */
.kpi-grid-compact.kpi-grid-compact-lg {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Column-count-Overrides für Strips mit abweichender Kachelanzahl
   (3 auf Kundendetail, 5 auf Produktliste). Responsive-Breakpoints
   (≤1024 → 2 Spalten, ≤600 → 1 Spalte) unten greifen weiterhin. */
.kpi-grid-compact.kpi-grid-compact-lg.kpi-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi-grid-compact.kpi-grid-compact-lg.kpi-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1280px) {
    .kpi-grid-compact.kpi-grid-compact-lg.kpi-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kpi-grid-compact.kpi-grid-compact-lg .kpi-card {
    padding: 0.875rem 1rem;
    gap: 0.75rem;
}

/* Optionale Untertitel-Zeile unter dem Value (wie gehalt.php).
   Views, die den Untertitel nutzen, ergänzen ein .kpi-sub-Element;
   ohne bleiben die Kacheln zweizeilig. */
.kpi-grid-compact.kpi-grid-compact-lg .kpi-sub {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 0.1rem;
}

.kpi-grid-compact.kpi-grid-compact-lg .kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.kpi-grid-compact.kpi-grid-compact-lg .kpi-value {
    font-size: 1.2rem;
}

@media (max-width: 1024px) {
    .kpi-grid-compact.kpi-grid-compact-lg {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .kpi-grid-compact.kpi-grid-compact-lg {
        grid-template-columns: 1fr;
    }
}

/* 5-Spalten-Variante (z. B. Produktliste mit Ø-Marge). Erbt alle
   Proportionen von kpi-grid-compact-lg, setzt nur die Spaltenzahl
   um. Unter 1280 px klappt der Strip auf die kompakteren Raster. */
.kpi-grid-compact.kpi-grid-compact-lg.kpi-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1280px) {
    .kpi-grid-compact.kpi-grid-compact-lg.kpi-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .kpi-grid-compact.kpi-grid-compact-lg.kpi-grid-5 {
        grid-template-columns: 1fr;
    }
}

.kpi-wide-periods {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.kpi-wide-period {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    background: var(--color-bg);
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--color-border);
}

.kpi-wide-period-label {
    font-size: 0.7rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.kpi-wide-period-value {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .kpi-grid-wide { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .kpi-wide-periods { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .kpi-wide-period-label { font-size: 0.75rem; }
    .kpi-wide-period-value { font-size: 1.15rem; }
    .kpi-label { font-size: 0.85rem; }
    .kpi-value { font-size: 1.5rem; }
}

/* =====================================================
   _kpi.css
   Zweck:          Core-CSS-Modul (Components)
   Verwendet von:  Core-Basis auf allen Seiten (main.php/auth.php)
   Abhaengigkeiten: Reihenfolge base -> layout -> components
   Verantwortlich: Core-Styles
   ===================================================== */