/* Inter Font für modernes SaaS-Look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* === CSS Custom Properties für Brand-Farben === */
:root {
    --brand-primary: #380aa4;
    --brand-secondary: #5f7285;
    --brand-primary-hover: #380aa4;
    --brand-primary-light: rgba(136,73,255,0.1);
    --brand-primary-soft: #ede9fe;
    --highlighted-cards-enabled: 1;
    --highlighted-cards-color: #d6edff;
}

/* Brand-CSS-Variablen direkt integriert */

/* === Global === */
body, .content-wrapper {
    background: #f9fafb !important;
    font-family: 'Inter','Segoe UI',sans-serif !important;
    color: #374151 !important;
}

/* -------------------------------------------------------------------------- */
/* Sidebar                                                                    */
/* -------------------------------------------------------------------------- */
.main-sidebar {
    background: #ffffff !important;
    color: #374151 !important;
    border-right: 1px solid #e5e7eb !important;
}
.main-sidebar .brand-link {
    background: #ffffff !important;
    border-bottom: none !important;
}

/* Sidebar Links + Active + Hover */
.main-sidebar .nav-link {
    margin: 2px 5px !important;        /* Abstand zum Sidebar-Rand reduziert */
    padding: 8px 12px !important;
    border-radius: 8px !important;     /* abgerundete Buttons */
    font-weight: 500 !important;
    color: #374151 !important;
    transition: all 0.2s ease !important;
}
.main-sidebar .nav-link.active {
    background: var(--brand-primary) !important;   /* HotSound Primärfarbe */
    color: #ffffff !important;
    box-shadow: none !important;
}
.main-sidebar .nav-link:hover {
    background: var(--brand-primary-light) !important;
    color: var(--brand-primary) !important;
}

/* Sidebar Header (z.B. "Repricing", "Insights") */
.nav-header {
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    color: #6b7280 !important;
    margin-top: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Top Navbar                                                                 */
/* -------------------------------------------------------------------------- */
.main-header.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    color: var(--brand-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Cards (KPI + Dashboard Widgets)                                            */
/* -------------------------------------------------------------------------- */
.card {
    border: none !important;
    border-radius: 14px !important;
}
.kpi-value {
    color: var(--brand-primary) !important;  /* Primärfarbe für Zahlen */
    font-weight: 700 !important;
    font-size: 28px !important;
}
.kpi-label {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin-top: 6px;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
}
.btn-primary {
    background: var(--brand-primary) !important;
    border: none !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: var(--brand-primary-hover) !important; /* dunkleres Lila beim Hover */
}
.btn-light {
    background: #f3f4f6 !important;
    border: none !important;
}
.btn-light:hover {
    background: #e5e7eb !important;
}

/* -------------------------------------------------------------------------- */
/* Badges                                                                     */
/* -------------------------------------------------------------------------- */
.badge-soft {
    border-radius: 20px !important;
    padding: 0.35rem 0.75rem !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}
.badge-success-soft { background: #dcfce7 !important; color: #166534 !important; }
.badge-warning-soft { background: #fef9c3 !important; color: #92400e !important; }
.badge-danger-soft  { background: #fee2e2 !important; color: #991b1b !important; }
.badge-primary-soft { background: #ede9fe !important; color: #5b21b6 !important; }

/* -------------------------------------------------------------------------- */
/* Tabellen                                                                   */
/* -------------------------------------------------------------------------- */
.table thead th {
    background: #f3f4f6 !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.table td {
    font-size: 14px !important;
    color: #374151 !important;
}
.table-hover tbody tr:hover {
    background: #f9fafb !important;
}

.login-page {
    background: #fff !important;
}

.login-box {
    width: 420px !important;
}

.login-card-body {
    border: none !important;
    border-radius: 16px !important;
    padding: 2rem !important;
}

/* Input Fields */
.login-card-body .form-control {
    border-radius: 8px !important;
    padding: .75rem 1rem !important;
    border: 1px solid #d1d5db !important;
}
.login-card-body .form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px var(--brand-primary-light) !important;
}

/* Buttons */
.login-card-body .btn-primary {
    background: var(--brand-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.login-card-body .btn-primary:hover {
    background: var(--brand-primary-hover) !important;
}
.login-card-body .btn-outline-primary {
    border: 2px solid var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.login-card-body .btn-outline-primary:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
}