/* ================================================================
   BIE Suriname - Global Site Styles
   ================================================================ */
:root {
    /* Ministeriekleuren: blauw, geel, rood */
    --bie-navy:      #1B3A5C;
    --bie-blue:      #2E6DA4;
    --bie-blue-lt:   #EBF4FC;
    --bie-gold:      #FFC72C;   /* ministerie-geel */
    --bie-gold-lt:   #FFD65C;
    --bie-red:       #C8102E;   /* ministerie-rood */
    --bie-bg:        #F4F6F9;
    --bie-white:     #FFFFFF;
    --bie-border:    #DDE2EA;
    --bie-text:      #2D3748;
    --bie-muted:     #718096;
    --bie-success:   #276749;
    --bie-danger:    #C8102E;
    --bie-shadow:    0 2px 8px rgba(27,58,92,.10);
    --bie-shadow-lg: 0 8px 24px rgba(27,58,92,.14);
    --bie-tricolor:  linear-gradient(90deg,
                        var(--bie-blue) 0%,   var(--bie-blue) 33.33%,
                        var(--bie-gold) 33.33%, var(--bie-gold) 66.66%,
                        var(--bie-red)  66.66%, var(--bie-red)  100%);
    --radius:        10px;
    --radius-sm:     6px;
}
html, body { height: 100%; }
body { background:var(--bie-bg); font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--bie-text); font-size:15px; line-height:1.6; }

/* Navbar */
.navbar {
    background: linear-gradient(180deg, #1E4268 0%, #16304C 100%) !important;
    box-shadow: 0 2px 14px rgba(10, 25, 45, .45);
    min-height: 66px;
    padding: 4px 16px !important;
}
/* Ministerie-identiteitsstreep (blauw/geel/rood) onder de navbar. Ligt
   binnen de balk (bottom:0) i.p.v. eronder, zodat er geen kier ontstaat
   tussen balk en streep, en boven de inhoud zodat hij nooit half wegvalt. */
.navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--bie-tricolor);
    z-index: 2;
    pointer-events: none;
}
.navbar-brand { transition: opacity .15s; }
.navbar-brand:hover { opacity: .9; }
/* De balk zelf mag nooit omvallen naar een tweede regel; de linklijst krimpt
   mee en het rechterblok (Beheerpaneel + gebruikersmenu) houdt zijn breedte. */
.navbar > .container-xl { flex-wrap: nowrap; gap: 12px; }
/* Het logoblok is de ankerpunt links en mag niet meekrimpen; de linklijst
   krijgt wat ademruimte ervan gescheiden. */
.navbar .navbar-brand { flex-shrink: 0; margin-right: 4px; }
/* Rechterblok (Beheerpaneel + gebruikersmenu) krimpt niet mee en wordt met
   een subtiele scheidslijn losgetrokken van de navigatielinks, zodat de
   balk in twee leesbare zones uiteenvalt i.p.v. één rij losse knoppen. */
.navbar .navbar-collapse > .d-flex {
    flex-shrink: 0;
    padding-left: 14px;
    margin-left: 4px;
    border-left: 1px solid rgba(255,255,255,.14);
}
/* Nav links */
.navbar .navbar-nav { gap: 4px; align-items: center; }
.navbar .nav-link {
    position: relative;
    color: rgba(255,255,255,.82) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 14px !important;
    border-radius: 8px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: background .18s, color .18s;
}
.navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.10); }
.navbar .nav-link.active { color: #fff !important; background: rgba(255,255,255,.13); }
/* Subtiele gouden indicator onder de actieve tab */
.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--bie-gold);
}
/* Dienst-tabs: de twee diensten waarvoor men bij het BIE terechtkan. Ze krijgen
   hetzelfde gewicht (vet, omrand, gevulde achtergrond) zodat ze samen afsteken
   tegen de overige navigatie, maar elk een eigen tint zodat ze uit elkaar te
   houden zijn: goud voor merken, teal voor auteursrecht. Diezelfde tinten
   komen terug bij de iconen op het dashboard en de dienstenkaarten. */
.navbar .nav-service,
.navbar .nav-merken {
    font-weight: 700 !important;
    border: 1px solid transparent;
}
.navbar .nav-service.active::after,
.navbar .nav-merken.active::after { display: none; }

/* Merken — ministerie-geel */
.navbar .nav-service-gold,
.navbar .nav-merken {
    background: rgba(255,199,44,.16);
    color: #FFD65C !important;
    border-color: rgba(255,199,44,.35);
}
.navbar .nav-service-gold:hover, .navbar .nav-service-gold.active,
.navbar .nav-merken:hover, .navbar .nav-merken.active {
    background: rgba(255,199,44,.30) !important;
    color: #fff !important;
    border-color: rgba(255,199,44,.6);
}

/* Auteursrecht — teal; leest goed op de donkerblauwe balk en botst niet met
   de gouden accenten of met rood, dat als waarschuwing wordt gelezen. */
.navbar .nav-service-teal {
    background: rgba(45,212,191,.16);
    color: #5EEAD4 !important;
    border-color: rgba(45,212,191,.38);
}
.navbar .nav-service-teal:hover, .navbar .nav-service-teal.active {
    background: rgba(45,212,191,.30) !important;
    color: #fff !important;
    border-color: rgba(45,212,191,.65);
}
/* Compacte tussenmaat: tussen 1200px (waar het menu uitklapt) en 1400px past
   alles wél horizontaal, maar alleen met krappere padding en iets kleinere
   letters. Zo hoeft de gebruiker niet uit te zoomen om alle opties te zien. */
@media (min-width:1200px) and (max-width:1399.98px) {
    /* De balk mag in deze band de volle schermbreedte gebruiken; de
       1140px-cap van container-xl maakt het onnodig krap. */
    .navbar > .container-xl { max-width: 100%; gap: 8px; }
    .navbar .navbar-nav { gap: 1px; }
    .navbar .nav-link {
        font-size: 13px;
        padding: 8px 8px !important;
    }
    .navbar .nav-link.active::after { left: 8px; right: 8px; }
    .navbar-brand img { height: 40px !important; width: 58px !important; }
    .navbar-brand span span:first-child { font-size: 13px !important; }
    .navbar-brand span span:last-child  { font-size: 9px !important; }
    .btn-nav-login, .btn-nav-signup { font-size: 12px; padding-left: 10px; padding-right: 10px; }
}

/* Teller-badge in navigatie (bv. Mijn aanvragen) */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,.22);
    color: #fff;
}
.nav-badge.nav-badge-warning { background: var(--bie-gold); color: #1B3A5C; }
/* Right-side nav buttons */
.btn-nav-login {
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.04);
    opacity: .92;
    transition: background .15s, opacity .15s, border-color .15s;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-nav-login:hover { opacity: 1; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff !important; }
.btn-nav-signup {
    background: var(--bie-gold);
    color: #1B3A5C !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background .15s, transform .15s, box-shadow .15s;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.btn-nav-signup:hover { background: var(--bie-gold-lt); color: #1B3A5C !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.32); }
/* Beheerpaneel-knop (alleen voor staff-rollen zichtbaar) */
.btn-nav-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255,199,44,.14);
    border: 1px solid rgba(255,199,44,.45);
    border-radius: 8px;
    color: #FFD65C !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.btn-nav-admin:hover { background: rgba(255,199,44,.28); border-color: rgba(255,199,44,.7); color: #fff !important; }
/* 2FA-status in de gebruikersknop. "Aan" is de gewenste toestand en mag
   ingetogen zijn; alleen het ontbreken van 2FA verdient de aandacht. */
.badge-2fa-on  { background:rgba(154,230,180,.22); color:#9AE6B4; font-size:10px; padding:2px 7px; border-radius:20px; font-weight:700; }
.badge-2fa-off { background:#FED7D7; color:#742A2A; font-size:10px; padding:2px 7px; border-radius:20px; font-weight:700; }
.dropdown-menu { border:1px solid var(--bie-border); box-shadow:var(--bie-shadow-lg); border-radius:var(--radius-sm); padding:6px; min-width:200px; }
.dropdown-item { border-radius:5px; padding:9px 14px; font-size:14px; color:var(--bie-text); }
.dropdown-item:hover { background:var(--bie-bg); }

/* Main */
main { margin-top:92px; padding-bottom:48px; }
main > .container, main > .container-fluid { padding-top:32px; }

/* Pagination — Yii2 LinkPager genereert generieke <ul class="pagination"><li><a>
   markup (geen Bootstrap 5 page-item/page-link classes), dus die tags zelf
   worden hier gestyled i.p.v. .page-item/.page-link. */
.pagination {
    display:flex;
    width:100%;
    justify-content:center;
    gap:4px;
    flex-wrap:wrap;
    list-style:none;
    padding:0;
    margin:16px 0 0;
}
.pagination > li > a,
.pagination > li > span {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 12px;
    border:1.5px solid var(--bie-border);
    border-radius:var(--radius-sm);
    color:var(--bie-navy);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    background:#fff;
    transition:background .15s,border-color .15s,color .15s;
}
.pagination > li > a:hover { background:var(--bie-blue-lt); border-color:var(--bie-blue); color:var(--bie-blue); }
.pagination > li > a:focus { box-shadow:0 0 0 3px rgba(46,109,164,.15); outline:none; }
.pagination > li.active > a,
.pagination > li.active > span { background:var(--bie-navy); border-color:var(--bie-navy); color:#fff; }
.pagination > li.disabled > a,
.pagination > li.disabled > span { color:var(--bie-muted); background:var(--bie-bg); border-color:var(--bie-border); cursor:default; }

/* Auth pages */
.auth-wrapper { min-height:calc(100vh - 68px - 80px); display:flex; align-items:center; justify-content:center; padding:40px 16px; }
.auth-card { background:var(--bie-white); border-radius:var(--radius); box-shadow:var(--bie-shadow-lg); width:100%; max-width:460px; overflow:hidden; }
.auth-card-header { background:linear-gradient(135deg,var(--bie-navy),var(--bie-blue)); padding:36px 40px 30px; text-align:center; color:#fff; }
.auth-card-header .auth-icon { width:66px; height:66px; background:rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:28px; }
.auth-card-header h2 { font-size:22px; font-weight:700; margin:0 0 5px; }
.auth-card-header p  { margin:0; opacity:.75; font-size:13px; }
.auth-card-body { padding:36px 40px; }

/* Forms */
.form-label { font-weight:600; font-size:13px; color:var(--bie-text); margin-bottom:5px; }
.form-control, .form-select { border:1.5px solid var(--bie-border); border-radius:var(--radius-sm); padding:10px 14px; font-size:14px; background:#FAFBFC; transition:border-color .2s,box-shadow .2s; color:var(--bie-text); }
.form-control:focus, .form-select:focus { border-color:var(--bie-blue); box-shadow:0 0 0 3px rgba(46,109,164,.15); background:#fff; outline:none; }
.form-control.is-invalid { border-color:var(--bie-danger); }
.help-block.text-danger, .invalid-feedback { font-size:12px; color:var(--bie-danger); margin-top:4px; }
.input-group-text { background:var(--bie-bg); border:1.5px solid var(--bie-border); color:var(--bie-muted); }

/* Buttons */
.btn { border-radius:var(--radius-sm); font-weight:600; font-size:14px; padding:10px 22px; transition:all .2s; }
.btn-primary   { background:var(--bie-navy);    color:#fff; border:none; }
.btn-primary:hover   { background:var(--bie-blue); color:#fff; }
.btn-secondary { background:var(--bie-bg);      color:var(--bie-text); border:1.5px solid var(--bie-border); }
.btn-secondary:hover { background:var(--bie-border); }
.btn-success   { background:var(--bie-success); color:#fff; border:none; }
.btn-success:hover   { background:#2F855A; color:#fff; }
.btn-danger    { background:var(--bie-danger);  color:#fff; border:none; }
.btn-danger:hover    { background:#9B2C2C; color:#fff; }
.btn-gold      { background:var(--bie-gold);    color:var(--bie-navy); border:none; font-weight:700; }
.btn-gold:hover      { background:var(--bie-gold-lt); }
.btn-lg { padding:12px 28px; font-size:15px; }
.btn-sm { padding:6px 14px;  font-size:13px; }

/* Alerts */
.alert { border:none; border-left:4px solid; border-radius:var(--radius-sm); font-size:14px; padding:14px 18px; }
.alert-success { background:#F0FFF4; border-color:#38A169; color:#22543D; }
.alert-danger  { background:#FFF5F5; border-color:#E53E3E; color:#742A2A; }
.alert-warning { background:#FFFAF0; border-color:#D69E2E; color:#744210; }
.alert-info    { background:#EBF8FF; border-color:#3182CE; color:#2C5282; }

/* Footer */
footer { background:var(--bie-navy); color:rgba(255,255,255,.7); font-size:13px; padding:28px 0; position:relative; }
/* Ministerie-identiteitsstreep boven de footer */
footer::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--bie-tricolor); }
footer a { color:var(--bie-gold-lt); text-decoration:none; }
footer a:hover { color:#fff; }
footer hr { border-color:rgba(255,255,255,.12); margin:16px 0; }

/* Tables */
.table { font-size:14px; }
.table thead th { background:var(--bie-navy); color:#fff; font-weight:600; border:none; padding:12px 16px; }
.table tbody tr:hover { background:var(--bie-blue-lt); }
.table td, .table th { vertical-align:middle; padding:11px 16px; }

/* Error summary */
.error-summary { background:#FFF5F5; border-left:4px solid var(--bie-danger); color:var(--bie-danger); padding:14px 18px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; }

/* Spinner */
@keyframes spin { to { transform:rotate(360deg); } }
.spinner-sm { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle; margin-right:6px; }

/* Uitgeklapte (hamburger)menu: geldt tot aan de expand-xl-grens, dus overal
   waar de balk niet horizontaal past. */
@media (max-width:1199.98px) {
    .navbar-toggler { align-self:center; }

    /* Uitgeklapt menu: nette donkere container i.p.v. losse links. Scrollt
       mee wanneer het langer is dan het scherm hoog is. */
    .navbar .navbar-collapse {
        background: rgba(0,0,0,.18);
        border-radius: 10px;
        padding: 10px;
        margin-top: 8px;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }
    .navbar .navbar-nav { gap: 2px; align-items: stretch; }
    .navbar .nav-link { border-radius: 8px; }
    .navbar .nav-link.active::after { display: none; }
    .navbar .navbar-collapse > .d-flex {
        flex-wrap: wrap;
        gap: 8px !important;
        padding-top: 10px;
        padding-left: 0;
        margin-top: 8px;
        margin-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }
}

@media (max-width:768px) {
    .auth-card-header, .auth-card-body { padding:24px 20px; }
    .navbar-brand img { height:36px !important; width:54px !important; }
    .navbar-toggler { margin-top:10px; }
    main { margin-top:110px; }
    main > .container { padding-top:20px; }
}