/**
 * ============================================================
 *  D&D Brand Theme — MyDD / Group D&D
 * ============================================================
 *  Deze stylesheet bevat de D&D huisstijl (cheatsheet):
 *    - Kleurpalet (beige, dark, update, haircare, interior, gradient)
 *    - Typografie (Erode + Plus Jakarta Sans)
 *    - Utility classes voor auth-views (login, password, 2FA)
 *    - Kleine accent-utility voor backoffice/klantportaal
 *
 *  Let op (scope):
 *    - Rebrand regels zijn bewust GESCOPED op `body.login` (guest layout),
 *      zodat bestaande backoffice/klantportaal styling niet stilletjes
 *      wijzigt. Backoffice-knoppen, sidebars etc. worden hier NIET overruled.
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=erode@400,500,600,700&display=swap');

:root {
    --dd-beige:     #F1F1E5;
    --dd-dark:      #171B24;
    --dd-update:    #ED3841;
    --dd-haircare:  #FC707B;
    --dd-interior:  #FED440;

    --dd-gradient:  linear-gradient(90deg, #ED3841 0%, #FC707B 50%, #FED440 100%);

    --dd-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dd-font-serif:'Erode', Georgia, 'Times New Roman', serif;

    --dd-text:      #1f2937;
    --dd-muted:     #6b7280;
    --dd-border:    #e5e7eb;
    --dd-danger:    #ef4444;
    --dd-focus:     #f59e0b;
}


/* ============================================================
 *  1. GUEST / AUTH — body.login wordt meegeven door layouts.guest
 * ============================================================ */

body.login {
    background-color: var(--dd-beige) !important;
    font-family: var(--dd-font-sans);
    color: var(--dd-text);
    padding-top: 0;
}

/* Override: style.css heeft .login-header absolute + height 200px.
   Voor de nieuwe look zetten we hem static en centreren we het logo. */
body.login .login-header {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    height: auto;
    background: transparent;
    padding: 56px 16px 28px;
}

body.login .login-header .logo {
    margin: 0 auto;
    max-width: 260px;
    width: 60%;
}

/* Override: style.css heeft .login-wrapper width 300px, margin 215px, color #fff. */
body.login .login-wrapper {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px 60px;
    color: var(--dd-text);
}

body.login .login-wrapper a,
body.login .login-wrapper a:hover,
body.login .login-wrapper a:focus {
    color: var(--dd-muted);
}


/* ------------------------------------------------------------
 *  Auth card + form utilities (gebruik in blades)
 * ------------------------------------------------------------ */

.dd-auth-card {
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 32px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    font-family: var(--dd-font-sans);
    color: var(--dd-text);
}

.dd-auth-title {
    text-align: center;
    margin: 0 0 28px;
    font-size: 22px;
    font-weight: 600;
    color: var(--dd-text);
    font-family: var(--dd-font-serif);
    letter-spacing: .01em;
}

.dd-auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dd-field {
    position: relative;
}

.dd-field-icon {
    position: absolute;
    left: 14px;
    top: 24px;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
}

.dd-input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--dd-border);
    border-radius: 8px;
    font-size: 15px;
    color: #111827;
    background: #f9fafb;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .15s, background .15s;
}

.dd-input:focus {
    border-color: var(--dd-focus);
    background: #ffffff;
}

.dd-input.is-invalid {
    border-color: var(--dd-danger);
}

/* Variant zonder icon-prefix */
.dd-input.no-icon {
    padding-left: 16px;
}

.dd-error {
    margin: 6px 2px 0;
    color: var(--dd-danger);
    font-size: 12px;
}

.dd-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
}

.dd-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--dd-focus);
    cursor: pointer;
}

.dd-btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--dd-gradient);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(252, 112, 123, 0.35);
    transition: transform .1s, box-shadow .15s;
    font-family: inherit;
    text-decoration: none;
}

.dd-btn-gradient:hover,
.dd-btn-gradient:focus {
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(252, 112, 123, 0.45);
}

.dd-btn-gradient:active {
    transform: translateY(1px);
}

.dd-auth-footer {
    text-align: center;
    margin: 20px 0 0;
    font-size: 14px;
}

.dd-auth-footer a {
    color: var(--dd-muted) !important;
    text-decoration: none;
    font-weight: 500;
}

.dd-auth-footer a:hover,
.dd-auth-footer a:focus {
    color: #d97706 !important;
}

.dd-alert-info {
    padding: 12px 14px;
    margin: 0 0 16px;
    border-radius: 8px;
    background: rgba(254, 212, 64, 0.18);
    border-left: 3px solid var(--dd-interior);
    color: var(--dd-text);
    font-size: 14px;
}

.dd-alert-danger {
    padding: 12px 14px;
    margin: 0 0 16px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid var(--dd-danger);
    color: var(--dd-text);
    font-size: 14px;
}

/* Vervang de generieke Bootstrap alert warning bovenin de guest-wrapper
   (die wordt door layouts.guest gerenderd bij $errors). Alleen binnen login. */
body.login .login-wrapper .alert-warning {
    background: rgba(254, 212, 64, 0.18);
    border: none;
    border-left: 3px solid var(--dd-interior);
    color: var(--dd-text);
    border-radius: 8px;
    font-size: 14px;
    margin: 0 auto 16px;
    max-width: 420px;
    padding: 12px 14px;
}


/* ============================================================
 *  2. APP / CUSTOMER — kleine brand accents, GEEN herontwerp
 * ============================================================ */

/* Dunne gradient-strip die we veilig onder de top-navbar kunnen
   plaatsen zonder layout of kleuren in style.css aan te raken. */
.dd-brand-accent {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--dd-gradient);
}


/* ============================================================
 *  3. BACKOFFICE & KLANTPORTAAL — rebrand van legacy blauw
 *     - .btn-primary (was #2a6399) -> D&D update rood
 *     - .btn-link (was #2a6399)   -> D&D update rood
 *     - .logo-brand hoek (was #2a6399) -> D&D dark
 *     - body font Lato -> Plus Jakarta Sans
 *     - page title -> Erode serif
 *
 *  Andere knoppen (warning/success/danger/info) blijven ongemoeid:
 *  die zijn semantisch en zaten al in de buurt van het D&D palet.
 * ============================================================ */

/* ---- Knoppen ---- */

.btn-primary,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background-color: var(--dd-update);
    border-color: var(--dd-update);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #D32E37;
    border-color: #D32E37;
}

.btn-primary.btn-perspective {
    -webkit-box-shadow: 0px 3px 0px #A42530;
       -moz-box-shadow: 0px 3px 0px #A42530;
            box-shadow: 0px 3px 0px #A42530;
}

.btn-primary.btn-perspective:active {
    -webkit-box-shadow: 0px 1px 0px #A42530;
       -moz-box-shadow: 0px 1px 0px #A42530;
            box-shadow: 0px 1px 0px #A42530;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    background-color: #F5A3A7;
    border-color: #F5A3A7;
}

.btn-primary .badge { color: #F5A3A7; }

.btn-link {
    color: var(--dd-update);
}

.btn-link:hover,
.btn-link:focus {
    color: #D32E37;
}


/* ---- .btn-info (was cyan #3BAFDA) -> D&D haircare pink ---- */

.btn-info,
.btn-info.active,
.open .dropdown-toggle.btn-info {
    background-color: var(--dd-haircare);
    border-color: var(--dd-haircare);
    color: #ffffff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #E85A66;
    border-color: #E85A66;
    color: #ffffff;
}

.btn-info.btn-perspective {
    -webkit-box-shadow: 0px 3px 0px #B63F48;
       -moz-box-shadow: 0px 3px 0px #B63F48;
            box-shadow: 0px 3px 0px #B63F48;
}

.btn-info.btn-perspective:active {
    -webkit-box-shadow: 0px 1px 0px #B63F48;
       -moz-box-shadow: 0px 1px 0px #B63F48;
            box-shadow: 0px 1px 0px #B63F48;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
    background-color: #FBC3C8;
    border-color: #FBC3C8;
    color: #ffffff;
}

.btn-info .badge { color: var(--dd-haircare); }


/* ---- .btn-dribbble (was #2a6399) -> D&D update rood ----
   Gebruikt als "Filter"-knop op alle statistieken-pagina's. */

.btn-dribbble,
.btn-dribbble.active,
.open .dropdown-toggle.btn-dribbble {
    background-color: var(--dd-update);
    border-color: var(--dd-update);
    color: #ffffff;
}

.btn-dribbble:hover,
.btn-dribbble:focus,
.btn-dribbble:active {
    background-color: #D32E37;
    border-color: #D32E37;
    color: #ffffff;
}

.btn-dribbble.disabled,
.btn-dribbble[disabled],
fieldset[disabled] .btn-dribbble,
.btn-dribbble.disabled:hover,
.btn-dribbble[disabled]:hover,
fieldset[disabled] .btn-dribbble:hover,
.btn-dribbble.disabled:focus,
.btn-dribbble[disabled]:focus,
fieldset[disabled] .btn-dribbble:focus,
.btn-dribbble.disabled:active,
.btn-dribbble[disabled]:active,
fieldset[disabled] .btn-dribbble:active,
.btn-dribbble.disabled.active,
.btn-dribbble[disabled].active,
fieldset[disabled] .btn-dribbble.active {
    background-color: #F5A3A7;
    border-color: #F5A3A7;
    color: #ffffff;
}

.btn-dribbble .badge { color: #F5A3A7; }


/* ---- .cell-blue / .cell-yellow — stats tabellen jaar-highlights ----
   Legacy:
     .cell-blue   { background: #edfaff } (licht cyaan)
     .cell-yellow { background: #fbfae1 } (licht geel)

   Rebrand:
     .cell-blue  → rustige neutrale wash (editorial, "huidig jaar")
     .cell-yellow → D&D interior soft wash (warm, "vorig jaar") */

.cell-blue {
    background-color: rgba(23, 27, 36, 0.04);
}

.cell-yellow {
    background-color: rgba(254, 212, 64, 0.10);
}


/* ---- Typografie ---- */

body {
    font-family: var(--dd-font-sans);
}

/* Pagetitle in de main backoffice layout: @yield('title') wordt als
   een h1 gerenderd direct in .container-fluid. */
.page-content > .container-fluid > h1 {
    font-family: var(--dd-font-serif);
    font-weight: 600;
    letter-spacing: .005em;
}

/* Pagetitle in de klantportaal layout: @yield('title') staat daar
   als een h2 direct in .container-fluid. */
.page-content.no-left-sidebar > .container-fluid > h2 {
    font-family: var(--dd-font-serif);
    font-weight: 600;
    letter-spacing: .005em;
}


/* ---- Logo hoek (top-navbar > .logo-brand) ---- */

.top-navbar .logo-brand {
    background: var(--dd-dark);
}


/* ============================================================
 *  4. SIDEBAR LEFT — LIGHT variant met D&D update-rood accent
 *     Scope: alleen de default .sidebar-left (zonder modifier
 *     classes). Modifier varianten (.light-color / .primary-color
 *     / .success-color / …) blijven intact voor eventueel gebruik
 *     elders.
 *
 *     Alias gedefinieerd voor leesbaarheid (CSS kent @apply niet
 *     native; we herhalen de :not-keten in selectors hieronder).
 * ============================================================ */

/* Basis kleur — witte sidebar, subtiele rechter-border vs beige content */
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) {
    background: #ffffff;
    color: var(--dd-text);
    border-right: 1px solid var(--dd-border);
}

/* Profile summary (Welkom, GroupDD) — donkere tekst op wit */
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) .left-profile-summary h4,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) .left-profile-summary h4 strong {
    color: var(--dd-text);
}

/* Menu items — donkere tekst, subtiele divider tussen items */
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li a {
    color: var(--dd-text);
    border-bottom: 1px solid #f3f4f6;
}

.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li a:hover,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li a:focus {
    color: var(--dd-dark);
    background-color: rgba(23, 27, 36, 0.03);
    border-bottom: 1px solid #f3f4f6;
}

/* Icon-kleur in de menu-items — muted op wit */
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li a .icon-sidebar,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li a .chevron-icon-sidebar {
    color: var(--dd-muted);
}

/* Actief / selected — peach wash + 3px D&D brand gradient links */
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li.selected > a,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li.selected > a:hover,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li.selected > a:focus,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li.active > a,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li.active > a:hover,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li.active > a:focus {
    color: var(--dd-dark);
    background:
        linear-gradient(180deg, #ED3841 0%, #FC707B 50%, #FED440 100%) left center / 3px 100% no-repeat,
        rgba(254, 212, 64, 0.10);
    border-bottom: 1px solid #f3f4f6;
}

.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li.selected > a .icon-sidebar,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li.active > a .icon-sidebar {
    color: var(--dd-update);
}


/* Submenu — iets diepere beige dan de page-content, zodat het
   onderscheid houdt tussen witte sidebar-parent en beige content.
   !important op de achtergrondkleuren omdat style.css legacy
   #366a8c/#5b9fcc regels met identieke structuur heeft — we willen
   zonder raar gespecialiseer 100% winnen. */
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu {
    background: #E9E9DB !important;
}

.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li a {
    color: var(--dd-text);
    background-color: transparent !important;
}

.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li a:hover,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li a:focus {
    color: var(--dd-dark);
    background-color: rgba(23, 27, 36, 0.04) !important;
}

.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li.selected > a,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li.selected > a:hover,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li.selected > a:focus,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li.active > a,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li.active > a:hover,
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li.active > a:focus {
    color: var(--dd-dark);
    background:
        linear-gradient(180deg, #ED3841 0%, #FC707B 50%, #FED440 100%) left center / 3px 100% no-repeat,
        rgba(254, 212, 64, 0.14) !important;
}

/* Dash-arrow (\2014) voor submenu a — muted op beige */
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu li ul.submenu li a:before {
    color: var(--dd-muted);
}

/* Menu-badge (getal achter label) — dd-update rood met witte tekst,
   op zowel parent- als submenu-niveau. */
.sidebar-left:not(.light-color):not(.primary-color):not(.success-color):not(.info-color):not(.danger-color):not(.warning-color) ul.sidebar-menu .span-sidebar {
    background-color: var(--dd-update);
    color: #ffffff;
}


/* ============================================================
 *  5. BREADCRUMBS — alleen .breadcrumb.primary rebranden
 * ============================================================ */

.breadcrumb.primary {
    background-color: var(--dd-update);
}


/* ============================================================
 *  6. BADGES & LABELS — .label-info / .badge-info (cyan -> pink)
 * ============================================================ */

.label-info,
.badge-info,
.label-info[href]:hover,
.label-info[href]:focus,
.badge-info[href]:hover,
.badge-info[href]:focus {
    background-color: var(--dd-haircare);
}


/* ============================================================
 *  7. PAGE BACKGROUND — warm D&D beige
 *     style.css zet .page-content background op #E8E9EE (koel grijs).
 *     Overrulen naar D&D beige zodat de backoffice aansluit op de
 *     inlog-achtergrond en het warme D&D palet.
 *
 *     Panels zijn wit, dus blijven duidelijk zichtbaar boven beige.
 * ============================================================ */

.page-content {
    background: var(--dd-beige);
}


/* ============================================================
 *  8. DASHBOARD — Editorial / Premium
 *     Scope: ALLEEN panels met .dashboard-tile.
 *     Andere .panel-default varianten door de app blijven intact.
 * ============================================================ */

.dashboard-tile.panel {
    position: relative;
    background: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 24px;
}

/* Dunne D&D brand gradient bovenaan — merkaccent */
.dashboard-tile.panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dd-gradient);
}

/* Panel-heading: klein uppercase label, geen grijze band */
.dashboard-tile .panel-heading {
    background: transparent;
    border-bottom: none;
    padding: 22px 20px 4px;
}

.dashboard-tile .panel-title {
    font-family: var(--dd-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dd-muted);
    line-height: 1.3;
}

.dashboard-tile .panel-body {
    padding: 8px 20px 28px;
}

/* KPI-cijfer: Erode serif, dark, editorial.
   .text-danger (Bootstrap #a94442) wordt overruled binnen tiles. */
.dashboard-tile .panel-body > .tiles-number,
.dashboard-tile .panel-body > .tiles-number.text-danger {
    font-family: var(--dd-font-serif);
    font-weight: 600;
    font-size: 52px;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--dd-dark);
    margin: 6px 0 0;
}


/* -------- Follow-ups tabel -------- */

.dashboard-followups .panel-body {
    padding: 8px 20px 24px;
}

.dashboard-followups .table {
    margin-bottom: 0;
}

.dashboard-followups .table > thead > tr > th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dd-muted);
    border-bottom: 1px solid var(--dd-border);
    padding: 10px 12px;
}

.dashboard-followups .table > tbody > tr > td,
.dashboard-followups .table > tr > td {
    padding: 14px 12px;
    border-top: 1px solid #f3f4f6;
    color: var(--dd-text);
    vertical-align: middle;
}

.dashboard-followups .table a {
    color: var(--dd-text);
    font-weight: 500;
    text-decoration: none;
}

.dashboard-followups .table a:hover {
    color: var(--dd-update);
    text-decoration: none;
}

/* Overdue rij — warm peach wash + D&D gradient streep links + dot */
.dashboard-followups .table tr.is-overdue > td {
    background-color: rgba(254, 212, 64, 0.12);
}

.dashboard-followups .table tr.is-overdue > td:first-child {
    background:
        linear-gradient(180deg, #ED3841 0%, #FC707B 50%, #FED440 100%) left center / 3px 100% no-repeat,
        rgba(254, 212, 64, 0.12);
    position: relative;
    padding-left: 28px;
}

.dashboard-followups .table tr.is-overdue > td:first-child::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: var(--dd-update);
    border-radius: 50%;
}

.dashboard-followups .table tr.is-overdue a {
    color: var(--dd-dark);
    font-weight: 600;
}


/* -------- Verantwoordelijke extra tuning voor dashboard -------- */

/* De "grote iconenbar" onderin (dashboardiconen_groot_*) staat nu in
   een inline white container. Die laten we ongemoeid, maar geven hem
   dezelfde card-look via een kleine utility. */
.page-content > .container-fluid > div[style*="background: white"] {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}


/* ============================================================
 *  9. LINKS IN CONTENT — rebrand legacy #2a6399 naar D&D update
 *     style.css zet `a { color: #2a6399 }` globaal. We scopen de
 *     rebrand op `.page-content` zodat top-navbar / sidebar hun
 *     eigen kleur houden. Meer specifieke regels (dashboard-followups,
 *     nav-tabs, breadcrumb, customer-buttons) blijven via hun eigen
 *     selectors behouden.
 * ============================================================ */

.page-content a,
.page-content a:hover,
.page-content a:focus {
    color: var(--dd-update);
}

/* Uitzondering: knoppen als <a class="btn ..."> kregen door bovenstaande
   regel rode tekst op een rode/gekleurde knop (onleesbaar). Gekleurde
   knoppen houden witte tekst, lichte knoppen (default/grey) donkere tekst. */
.page-content a.btn,
.page-content a.btn:hover,
.page-content a.btn:focus,
.page-content a.btn:active {
    color: #fff;
}

.page-content a.btn-default,
.page-content a.btn-default:hover,
.page-content a.btn-default:focus,
.page-content a.btn-default:active,
.page-content a.btn-grey,
.page-content a.btn-grey:hover,
.page-content a.btn-grey:focus,
.page-content a.btn-grey:active {
    color: var(--dd-text);
}


/* ============================================================
 *  10. LIST-GROUP ITEM ACTIVE — editorial side-panel headers
 *     Patroon in views:
 *       <ul class="list-group">
 *         <li class="list-group-item active">Titel</li>
 *         <li class="list-group-item">…</li>
 *       </ul>
 *
 *     Legacy style.css (2697): blauwe fill #2a6399.
 *     Scope: default .list-group (geen success/info/danger/warning variant).
 * ============================================================ */

.list-group:not(.success):not(.info):not(.danger):not(.warning):not(.success-block):not(.info-block):not(.danger-block):not(.warning-block) > .list-group-item.active,
.list-group:not(.success):not(.info):not(.danger):not(.warning):not(.success-block):not(.info-block):not(.danger-block):not(.warning-block) > .list-group-item.active:hover,
.list-group:not(.success):not(.info):not(.danger):not(.warning):not(.success-block):not(.info-block):not(.danger-block):not(.warning-block) > .list-group-item.active:focus,
.list-group:not(.success):not(.info):not(.danger):not(.warning):not(.success-block):not(.info-block):not(.danger-block):not(.warning-block) > a.list-group-item.active,
.list-group:not(.success):not(.info):not(.danger):not(.warning):not(.success-block):not(.info-block):not(.danger-block):not(.warning-block) > a.list-group-item.active:hover,
.list-group:not(.success):not(.info):not(.danger):not(.warning):not(.success-block):not(.info-block):not(.danger-block):not(.warning-block) > a.list-group-item.active:focus {
    background:
        linear-gradient(90deg, #ED3841 0%, #FC707B 50%, #FED440 100%) left top / 48px 3px no-repeat,
        #ffffff;
    border: 1px solid var(--dd-border);
    color: var(--dd-dark);
    font-family: var(--dd-font-sans);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    padding-top: 18px;
    padding-bottom: 12px;
}


/* ============================================================
 *  11. CUSTOMER ACTION ICONS — donkere iconen, D&D hover accent
 *     Patroon: .customer-buttons > div.col-lg-4 > a > .fa.fa-3x
 * ============================================================ */

.customer-buttons a,
.customer-buttons a:visited {
    color: var(--dd-text);
    text-decoration: none;
}

.customer-buttons .fa {
    color: var(--dd-dark);
    transition: color .15s ease;
}

.customer-buttons a:hover,
.customer-buttons a:focus {
    color: var(--dd-update);
    text-decoration: none;
}

.customer-buttons a:hover .fa,
.customer-buttons a:focus .fa {
    color: var(--dd-update);
}


/* ============================================================
 *  12. NAV-TABS — rustige tabs, D&D gradient op active tab
 *     Scope: alleen .nav-tabs binnen .page-content (backoffice +
 *     klantportaal), niet sidebar-right-heading of andere contexts.
 * ============================================================ */

.page-content .nav-tabs {
    border-bottom: 1px solid var(--dd-border);
}

.page-content .nav-tabs > li > a {
    color: var(--dd-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    margin-right: 2px;
    margin-bottom: -1px;
    font-family: var(--dd-font-sans);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .02em;
    padding: 10px 16px;
    transition: color .15s ease;
}

.page-content .nav-tabs > li > a:hover,
.page-content .nav-tabs > li > a:focus {
    color: var(--dd-dark);
    background-color: transparent;
    border-color: transparent;
}

.page-content .nav-tabs > li.active > a,
.page-content .nav-tabs > li.active > a:hover,
.page-content .nav-tabs > li.active > a:focus {
    color: var(--dd-dark);
    font-weight: 600;
    border: 1px solid transparent;
    /* 3px D&D brand gradient onder de actieve tab */
    background:
        linear-gradient(90deg, #ED3841 0%, #FC707B 50%, #FED440 100%) left bottom / 100% 3px no-repeat,
        transparent;
}

.page-content .nav-tabs > li.disabled > a,
.page-content .nav-tabs > li.disabled > a:hover,
.page-content .nav-tabs > li.disabled > a:focus {
    color: #c4c7ce;
    cursor: not-allowed;
}


/* ============================================================
 *  13. BREADCRUMBS — rustige grijze links, donkere active crumb
 *     Diglactic render ->  <ol class="breadcrumb">…</ol>
 *     Overrult de globale .page-content a (§9) naar muted, zodat
 *     breadcrumb rustig hiërarchisch blijft en niet met CTA's botst.
 * ============================================================ */

.page-content .breadcrumb,
.page-content ol.breadcrumb {
    background-color: transparent;
    padding: 8px 0 12px;
    margin-bottom: 12px;
    font-family: var(--dd-font-sans);
    font-size: 13px;
}

.page-content .breadcrumb a,
.page-content .breadcrumb a:hover,
.page-content .breadcrumb a:focus,
.page-content ol.breadcrumb a,
.page-content ol.breadcrumb a:hover,
.page-content ol.breadcrumb a:focus {
    color: var(--dd-muted);
    text-decoration: none;
}

.page-content .breadcrumb a:hover,
.page-content ol.breadcrumb a:hover {
    color: var(--dd-update);
}

.page-content .breadcrumb > .active,
.page-content ol.breadcrumb > .active,
.page-content .breadcrumb > li.active,
.page-content ol.breadcrumb > li.active {
    color: var(--dd-dark);
    font-weight: 600;
}


/* ============================================================
 *  14. TABLE-LIST NAVBAR — rebrand legacy .navbar-inverse
 *     Patroon in resources/views/partials/table.blade.php:
 *       <nav class="navbar square navbar-inverse">
 *         <a class="navbar-brand">Tabel</a>
 *         <ul class="nav navbar-nav">
 *           <li class="add-table-row"><a>Toevoegen</a></li>
 *         </ul>
 *         <form class="navbar-form navbar-left search_table">
 *           <input class="form-control search">
 *           <button class="btn btn-default">Submit</button>
 *         </form>
 *       </nav>
 *
 *     Legacy style.css (5605): background #2a6399 (diepblauw).
 *     Scope: alleen .navbar-inverse binnen .page-content .table-div,
 *     andere .navbar-inverse usages blijven intact.
 * ============================================================ */

.page-content .table-div > .navbar-inverse {
    background-color: var(--dd-dark);
    border: none;
    border-radius: 0;
    min-height: 52px;
    position: relative;
}

/* Dunne D&D gradient-stripe onderaan de bar als merkaccent */
.page-content .table-div > .navbar-inverse::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--dd-gradient);
}

.page-content .table-div > .navbar-inverse .navbar-brand,
.page-content .table-div > .navbar-inverse .navbar-brand:hover,
.page-content .table-div > .navbar-inverse .navbar-brand:focus {
    color: #ffffff;
    font-family: var(--dd-font-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-content .table-div > .navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
    font-family: var(--dd-font-sans);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .02em;
    transition: background-color .15s ease, color .15s ease;
}

.page-content .table-div > .navbar-inverse .navbar-nav > li > a:hover,
.page-content .table-div > .navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: rgba(252, 112, 123, 0.18);
}

.page-content .table-div > .navbar-inverse .navbar-nav > .active > a,
.page-content .table-div > .navbar-inverse .navbar-nav > .active > a:hover,
.page-content .table-div > .navbar-inverse .navbar-nav > .active > a:focus,
.page-content .table-div > .navbar-inverse .navbar-nav > .open > a,
.page-content .table-div > .navbar-inverse .navbar-nav > .open > a:hover,
.page-content .table-div > .navbar-inverse .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: rgba(252, 112, 123, 0.18);
}

/* Toggle (mobile) */
.page-content .table-div > .navbar-inverse .navbar-toggle {
    border-color: rgba(255, 255, 255, 0.25);
}

.page-content .table-div > .navbar-inverse .navbar-toggle:hover,
.page-content .table-div > .navbar-inverse .navbar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.08);
}

.page-content .table-div > .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.page-content .table-div > .navbar-inverse .navbar-collapse,
.page-content .table-div > .navbar-inverse .navbar-form {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Search input op donkere bar */
.page-content .table-div > .navbar-inverse .navbar-form .form-control,
.page-content .table-div > .navbar-inverse .navbar-form .form-control.search {
    background-color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--dd-dark);
    border-radius: 6px;
    height: 34px;
    font-family: var(--dd-font-sans);
    font-size: 13px;
}

.page-content .table-div > .navbar-inverse .navbar-form .form-control::placeholder {
    color: var(--dd-muted);
}

.page-content .table-div > .navbar-inverse .navbar-form .form-control:focus {
    border-color: var(--dd-interior);
    outline: none;
    box-shadow: 0 0 0 2px rgba(254, 212, 64, 0.25);
}

/* Submit-knop (legacy .btn-default) op donkere bar — ghost stijl */
.page-content .table-div > .navbar-inverse .navbar-form .btn-default {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: 6px;
    font-family: var(--dd-font-sans);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .02em;
    height: 34px;
    padding: 0 14px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.page-content .table-div > .navbar-inverse .navbar-form .btn-default:hover,
.page-content .table-div > .navbar-inverse .navbar-form .btn-default:focus,
.page-content .table-div > .navbar-inverse .navbar-form .btn-default:active {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--dd-dark);
}


/* ============================================================
 *  15. ALERTS — Bootstrap .alert-info/-success/-warning/-danger
 *      Legacy .alert-info.alert-block heeft hard blauw #2a6399.
 *      Scope onder .page-content zodat customer-portal/guest
 *      pages onveranderd blijven.
 * ============================================================ */

/* ---- Light info (gebruikt o.a. bij Mollie "betaallink verstuurd") ---- */
.page-content .alert-info {
    background-color: var(--dd-beige);
    border-color: rgba(23, 27, 36, 0.08);
    color: var(--dd-dark);
    border-left: 3px solid var(--dd-update);
}
.page-content .alert-info .alert-link {
    color: var(--dd-update);
}

/* ---- Solid info-block (de grote CTA-omhulsels op order/customer pages)
       Editorial card-stijl: lichte achtergrond + 4px D&D brand-accent links,
       knop binnenin krijgt D&D update red (scoped, geen impact buiten deze bar). */
.page-content .alert-info.alert-block {
    background-color: #ffffff;
    border: 1px solid rgba(23, 27, 36, 0.10);
    border-left: 4px solid var(--dd-update);
    color: var(--dd-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    padding: 14px 18px;
}
.page-content .alert-info.alert-block .alert-link,
.page-content .alert-info.alert-block a:not(.btn) {
    color: var(--dd-update);
    text-decoration: none;
}
.page-content .alert-info.alert-block .alert-link:hover,
.page-content .alert-info.alert-block a:not(.btn):hover {
    text-decoration: underline;
}

/* Scoped knop-rebrand alleen binnen de CTA-bar */
.page-content .alert-info.alert-block .btn-success {
    background-color: var(--dd-update);
    border-color: var(--dd-update);
    color: #ffffff;
}
.page-content .alert-info.alert-block .btn-success:hover,
.page-content .alert-info.alert-block .btn-success:focus,
.page-content .alert-info.alert-block .btn-success:active {
    background-color: #D2202A;
    border-color: #D2202A;
    color: #ffffff;
}
.page-content .alert-info.alert-block .btn-success.disabled,
.page-content .alert-info.alert-block .btn-success[disabled] {
    background-color: #F5A3A7;
    border-color: #F5A3A7;
    color: #ffffff;
    opacity: 1;
}

/* ---- Light success ---- */
.page-content .alert-success {
    background-color: #EAF5E1;
    border-color: #C8E2A8;
    color: #3F6B1E;
}

/* ---- Solid success-block (bv. "Online betaald op …") ---- */
.page-content .alert-success.alert-block {
    background-color: var(--dd-dark);
    border-color: var(--dd-dark);
    border-left: 4px solid #76AD3E;
    color: #ffffff;
}
.page-content .alert-success.alert-block .alert-link,
.page-content .alert-success.alert-block a:not(.btn) {
    color: #ffffff;
    text-decoration: underline;
}

/* ---- Light warning ---- */
.page-content .alert-warning {
    background-color: #FFF6D6;
    border-color: var(--dd-interior);
    color: #6E5A0E;
}

/* ---- Solid warning-block (credit-compensaties etc.) ---- */
.page-content .alert-warning.alert-block {
    background-color: var(--dd-interior);
    border-color: var(--dd-interior);
    color: var(--dd-dark);
}
.page-content .alert-warning.alert-block .alert-link,
.page-content .alert-warning.alert-block a:not(.btn) {
    color: var(--dd-dark);
    text-decoration: underline;
}
.page-content .alert-warning.alert-block .close {
    color: var(--dd-dark);
    opacity: .6;
}

/* ---- Light danger ---- */
.page-content .alert-danger {
    background-color: #FDE6E8;
    border-color: rgba(237, 56, 65, 0.35);
    color: #8A1B22;
}

/* ---- Solid danger-block (Exact export-failures e.d.) ---- */
.page-content .alert-danger.alert-block {
    background-color: var(--dd-update);
    border-color: var(--dd-update);
    color: #ffffff;
}
.page-content .alert-danger.alert-block .alert-link,
.page-content .alert-danger.alert-block a:not(.btn) {
    color: #ffffff;
    text-decoration: underline;
}

/* ---- Bold-border varianten — left accent in D&D tokens ---- */
.page-content .alert-info.alert-bold-border    { border-left-color: var(--dd-update); }
.page-content .alert-success.alert-bold-border { border-left-color: #76AD3E; }
.page-content .alert-warning.alert-bold-border { border-left-color: var(--dd-interior); }
.page-content .alert-danger.alert-bold-border  { border-left-color: var(--dd-update); }

/* ---- Badges in tabellen (picklist: badge-info / badge-danger) ---- */
.page-content .badge-danger {
    background-color: var(--dd-update);
    color: #ffffff;
}
.page-content .badge-info {
    background-color: rgba(23, 27, 36, 0.08);
    color: var(--dd-dark);
}