/* AD-TD Reparaties — Huisstijl (blauw + paars) */

:root {
    --ad-blue:        #1E3A8A;   /* diep blauw (A in logo) */
    --ad-blue-light:  #3B82F6;   /* helder blauw */
    --ad-purple:      #7C3AED;   /* paars (D in logo) */
    --ad-purple-light:#A855F7;
    --ad-dark:        #1F2937;
    --ad-grey:        #6B7280;
    --ad-light:       #F8FAFC;
    --gradient-brand: linear-gradient(135deg, var(--ad-blue) 0%, var(--ad-purple) 100%);
    --gradient-soft:  linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
    --shadow-soft:    0 2px 8px rgba(30, 58, 138, 0.06);
    --shadow-med:     0 4px 16px rgba(30, 58, 138, 0.10);
    --shadow-strong:  0 8px 32px rgba(124, 58, 237, 0.18);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
    color: var(--ad-dark);
    background: var(--ad-light);
}

/* ─── Navigatie ─────────────────────────────────────────── */
.navbar-adtd {
    background: var(--gradient-brand) !important;
    box-shadow: var(--shadow-soft);
}
.navbar-adtd .navbar-brand,
.navbar-adtd .nav-link { color: #fff !important; font-weight: 600; letter-spacing: .01em; }
.navbar-adtd .nav-link:hover { color: #E0E7FF !important; }
.navbar-adtd .navbar-brand img { height: 38px; margin-right: 10px; }

/* ─── Hero ──────────────────────────────────────────────── */
.hero {
    background: var(--gradient-brand);
    color: #fff;
    padding: 72px 0 64px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08), transparent 50%);
    pointer-events: none;
}
.hero h1 { font-weight: 700; letter-spacing: -.02em; font-size: 2.5rem; }
.hero .lead { opacity: .92; font-weight: 400; }
.hero-logo { max-height: 180px; margin-bottom: 20px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); }
@media (max-width: 768px) {
    .hero-logo { max-height: 130px; }
}

/* ─── Formulierkaart ──────────────────────────────────── */
.form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-strong);
    padding: 44px;
    position: relative;
    z-index: 2;
}
/* Als er geen banner boven staat, laat form-card overlap maken met hero */
.col-lg-8 > .form-card:first-child { margin-top: -40px; }
.form-card h4 { color: var(--ad-blue); }

/* ─── Knoppen ───────────────────────────────────────────── */
.btn-adtd {
    background: var(--gradient-brand);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 10px;
    transition: transform .15s, box-shadow .2s;
    box-shadow: var(--shadow-soft);
}
.btn-adtd:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-med);
    filter: brightness(1.05);
}
.btn-adtd:active { transform: translateY(0); }

.btn-primary {
    background: var(--ad-blue) !important;
    border-color: var(--ad-blue) !important;
}
.btn-primary:hover { background: #1E40AF !important; border-color: #1E40AF !important; }

/* Form-control focus stijl in huisstijl */
.form-control:focus, .form-select:focus {
    border-color: var(--ad-purple-light);
    box-shadow: 0 0 0 .2rem rgba(124, 58, 237, 0.15);
}

/* Status badges (functioneel, niet brand-kleuren) */
.badge { font-size: .78rem; padding: .42em .8em; border-radius: 6px; font-weight: 600; }

/* ─── Cards algemeen ────────────────────────────────────── */
.card { border-radius: 12px; }
.card.shadow-sm { box-shadow: var(--shadow-soft) !important; }
.card.shadow { box-shadow: var(--shadow-med) !important; }

/* ─── Admin tabel ───────────────────────────────────────── */
.table-hover tbody tr:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.03), rgba(124, 58, 237, 0.03));
    cursor: pointer;
}

/* ─── Reparatie detail card ─────────────────────────────── */
.detail-card { border-left: 4px solid var(--ad-purple); }
.label-muted {
    color: var(--ad-grey); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}

/* ─── Stappen-indicator ─────────────────────────────────── */
.stappen { display: flex; gap: 0; overflow-x: auto; margin-bottom: 24px; padding: 4px 0; }
.stap {
    flex: 1; text-align: center; padding: 10px 4px;
    font-size: .75rem; border-bottom: 3px solid #E5E7EB; color: #9CA3AF;
    min-width: 84px; transition: all .2s;
}
.stap.actief {
    border-color: var(--ad-purple); color: var(--ad-purple);
    font-weight: 700; background: rgba(124, 58, 237, 0.04);
}
.stap.klaar { border-color: #10B981; color: #10B981; }

/* ─── Actie-paneel (Wat moet ik nu doen) ──────────────── */
.actie-paneel {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border-left: 5px solid #F59E0B;
}
.actie-paneel.klaar {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-left-color: #10B981;
}

/* ─── Footer ────────────────────────────────────────────── */
footer {
    background: var(--ad-dark);
    color: rgba(255,255,255,.75);
    padding: 32px 0 24px;
    font-size: .9rem;
    margin-top: 64px;
}
footer a { color: #C7D2FE; text-decoration: none; }
footer a:hover { color: #fff; }

/* ─── Modals ────────────────────────────────────────────── */
.modal-content { border-radius: 14px; }

/* ─── Toast ─────────────────────────────────────────────── */
.toast.text-bg-primary { background: var(--ad-blue) !important; }

/* ─── Stap pill (workflow) ──────────────────────────────── */
.stap-pill {
    background: #fff;
    border: 1px solid #E5E7EB;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    box-shadow: var(--shadow-soft);
}

/* ─── Hyperlinks ────────────────────────────────────────── */
a { color: var(--ad-blue); }
a:hover { color: var(--ad-purple); }

/* ─── Login pagina ──────────────────────────────────────── */
.card-header.bg-danger { background: var(--gradient-brand) !important; }

/* ─── Responsive aanpassingen ───────────────────────────── */
@media (max-width: 768px) {
    .hero h1 { font-size: 1.75rem; }
    .form-card { padding: 24px; }
    .stappen { font-size: .65rem; }
    .stap { min-width: 70px; }
}