/* OnlineBouwers CMS - moderne skin (2025)
   Laadt alleen op admin-pagina's. De site draait op Foundation (andere class-namen),
   dus de Bootstrap-gerichte regels hieronder raken de site-inhoud niet.
   Kleuren staan als variabelen: pas ze hier centraal aan. */

:root {
    --ob-primary: #250188;        /* hoofdkleur */
    --ob-primary-dark: #1a0166;
    --ob-primary-soft: #efeafb;
    --ob-success: #16a34a;
    --ob-success-dark: #15803d;
    --ob-danger: #e2483d;
    --ob-danger-dark: #c53a30;
    --ob-text: #1c1c2b;
    --ob-muted: #6b6b80;
    --ob-surface: #f6f6fa;
    --ob-border: #e7e7f0;
    --ob-radius: 8px;
}

/* Knoppen: strak, plat, compact, nooit een schaduw */
.btn {
    border: 1px solid transparent;
    border-radius: var(--ob-radius);
    padding: 7px 15px;
    font-weight: 500;
    box-shadow: none !important;
    text-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus,
.btn:active:focus { outline: 2px solid rgba(37, 1, 136, .35); outline-offset: 2px; box-shadow: none !important; }

.btn-primary { background: var(--ob-primary); border-color: var(--ob-primary); color: #fff; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background: var(--ob-primary-dark); border-color: var(--ob-primary-dark); color: #fff; }

.btn-success { background: var(--ob-success); border-color: var(--ob-success); color: #fff; }
.btn-success:hover,
.btn-success:focus,
.btn-success:active { background: var(--ob-success-dark); border-color: var(--ob-success-dark); color: #fff; }

.btn-danger { background: var(--ob-danger); border-color: var(--ob-danger); color: #fff; }
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active { background: var(--ob-danger-dark); border-color: var(--ob-danger-dark); color: #fff; }

.btn-default { background: #fff; border-color: var(--ob-border); color: var(--ob-text); }
.btn-default:hover,
.btn-default:focus { background: var(--ob-surface); border-color: #d7d7e6; color: var(--ob-text); }

/* Formuliervelden */
.form-control { border-radius: var(--ob-radius); border-color: var(--ob-border); box-shadow: none; }
.form-control:focus { border-color: var(--ob-primary); box-shadow: 0 0 0 3px rgba(37, 1, 136, .12); }

/* Modals / popups: zachter, meer lucht (kaart mag een zachte schaduw) */
.modal-content { border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(20, 10, 60, .18); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--ob-border); padding: 20px 24px; background: #fff; }
.modal-title { color: var(--ob-text); font-weight: 600; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--ob-border); padding: 16px 24px; }

/* Bovenbalk */
.navbar-default { background: #fff; border: none; border-bottom: 1px solid var(--ob-border); }
.navbar-default .navbar-nav > li > a { color: var(--ob-text); }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a { color: var(--ob-primary); background: var(--ob-primary-soft); }

/* Dropdown menu's (o.a. "Mijn modules"): afgeronde, opgevulde regels met paarse hover */
.dropdown-menu {
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: 0 12px 32px rgba(20, 10, 60, .12);
    padding: 6px;
}
.dropdown-menu > li > a {
    border-radius: 6px;
    padding: 8px 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--ob-primary-soft);
    color: var(--ob-primary);
}

/* Pagina-dropdown (grote dropdown met kolommen): nette regelafstand en uitlijning */
.dropdown-menu-large .dropdown-header { padding: 6px 12px; }
.dropdown-menu-large li a {
    display: block;
    padding: 5px 12px;
    border-radius: 6px;
    line-height: 1.35;
}
.dropdown-menu-large li a:hover,
.dropdown-menu-large li a:focus {
    background: var(--ob-primary-soft);
    color: var(--ob-primary);
}
/* Actief item: strak paars-zacht blokje, uitgelijnd met de rest */
.dropdown-menu-large li.active,
.dropdown-menu li.active { background: transparent; }
.dropdown-menu-large li.active > a,
.dropdown-menu li.active > a {
    background: var(--ob-primary-soft);
    color: var(--ob-primary);
    font-weight: 600;
}

/* Tabellen: lichter, meer lucht */
.table > thead > tr > th { border-bottom: 2px solid var(--ob-border); color: var(--ob-muted); font-weight: 600; }
.table > tbody > tr > td { border-top: 1px solid var(--ob-border); padding: 12px 10px; }