/* ============================================================
   CRM – Custom Styles
   Farbkonzept: CI/CD-Guideline thorstenschwab.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700&display=swap');

/* ── Markenfarben ──────────────────────────────────────────── */
:root {
    --crm-primary:  #1C2735;   /* Blau-Grau: Headlines, Texte */
    --crm-accent:   #C3317D;   /* Magenta: Navbar, Buttons, Links */
    --crm-accent-d: #a8286b;   /* Magenta dunkel: Hover */
    --crm-accent-dd:#921f5d;   /* Magenta sehr dunkel: Active */
    --crm-light:    #F5F5F7;   /* Hellgrau: Hintergründe */
    --crm-neutral:  #D1D3D4;   /* Neutralgrau: Linien, Raster */
    --crm-teal:     #00BFA6;   /* Türkis: Icons, Highlights */
    --crm-yellow:   #F9C74F;   /* Warmgelb: Eyecatcher */

    /* Bootstrap-Variablen überschreiben */
    --bs-primary:        #C3317D;
    --bs-primary-rgb:    195, 49, 125;
    --bs-link-color:          #C3317D;
    --bs-link-hover-color:    #a8286b;
    --bs-link-color-rgb:      195, 49, 125;
}

/* ── Basis ─────────────────────────────────────────────────── */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--crm-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--crm-primary);
}

main {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ── Bootstrap Primärfarbe überschreiben (Magenta) ──────────── */
.btn-primary {
    background-color: #C3317D !important;
    border-color:     #C3317D !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #a8286b !important;
    border-color:     #a8286b !important;
    color: #fff !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #C3317D !important;
    border-color:     #C3317D !important;
}

.btn-outline-primary {
    color:        #C3317D !important;
    border-color: #C3317D !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    background-color: #C3317D !important;
    border-color:     #C3317D !important;
    color: #fff !important;
}

.bg-primary      { background-color: #C3317D !important; }
.text-primary    { color: #C3317D !important; }
.border-primary  { border-color: #C3317D !important; }
.badge.bg-primary { background-color: #C3317D !important; }

/* ── Navbar ────────────────────────────────────────────────── */
.crm-navbar {
    background-color: var(--crm-accent) !important;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* ── Links ─────────────────────────────────────────────────── */
a {
    color: var(--crm-accent);
}
a:hover {
    color: var(--crm-accent-d);
}

/* ── Seitentitel ───────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--crm-primary);
}

/* ── Karten ────────────────────────────────────────────────── */
.card {
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.card-header {
    background: #fff;
    font-weight: 600;
    border-bottom: 2px solid var(--crm-neutral);
    color: var(--crm-primary);
}

/* ── Tabellen & Listen ─────────────────────────────────────── */
.customer-row:hover {
    background-color: #f7eaf3;
    cursor: pointer;
}

.table > thead {
    color: var(--crm-primary);
}

/* ── Kontakt-Block ─────────────────────────────────────────── */
.contact-block {
    background: var(--crm-light);
    border: 1px solid var(--crm-neutral);
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.contact-block .contact-number {
    font-weight: 600;
    color: var(--crm-accent);
    margin-bottom: .5rem;
}

.btn-remove-contact {
    position: absolute;
    top: .75rem;
    right: .75rem;
}

/* ── Detail-Labels ─────────────────────────────────────────── */
.detail-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: .15rem;
}

.detail-value {
    color: var(--crm-primary);
}

/* ── Badges ────────────────────────────────────────────────── */
.badge-active   { background-color: #198754; }
.badge-inactive { background-color: #6c757d; }

/* ── Primärer Ansprechpartner ──────────────────────────────── */
.primary-star {
    color: var(--crm-yellow);
}

/* ── Such-Leiste ───────────────────────────────────────────── */
.search-form .input-group {
    max-width: 400px;
}

/* ── Login-Seite ───────────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--crm-primary) 0%, #2d3f55 60%, #C3317D 100%);
}

.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 1rem;
    overflow: hidden;
}

/* ── Responsive Tabelle ────────────────────────────────────── */
@media (max-width: 768px) {
    .hide-sm { display: none !important; }
}