/* =========================================================
   Vrienda v7.6.2 - Header Balance Fix
   Plaats als ALLERLAATSTE stylesheet, na v7.6.1.
   Fix:
   - header niet meer te breed/uitgerekt
   - logo links netjes compact
   - zoekbalk gecentreerd en normaal formaat
   - acties rechts compact
   - content-layout blijft breed
   ========================================================= */

:root{
    --vrienda-header-width:1280px;
    --vrienda-header-height:80px;
}

/* Header bar */
html body header,
html body .topbar,
html body .navbar,
html body .site-header,
html body .app-header{
    height:var(--vrienda-header-height) !important;
    min-height:var(--vrienda-header-height) !important;
    max-height:var(--vrienda-header-height) !important;
    background:#fff !important;
    border-bottom:1px solid #ddd6cc !important;
    box-shadow:0 1px 2px rgba(0,0,0,.03) !important;
    overflow:visible !important;
}

/* Header inner wrapper */
html body header .container,
html body .topbar .container,
html body .navbar .container,
html body .site-header .container,
html body .app-header .container{
    max-width:var(--vrienda-header-width) !important;
    width:100% !important;
    height:var(--vrienda-header-height) !important;
    min-height:var(--vrienda-header-height) !important;

    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:16px !important;
    padding-right:16px !important;

    display:grid !important;
    grid-template-columns:260px minmax(320px,520px) 1fr !important;
    align-items:center !important;
    gap:18px !important;
    box-sizing:border-box !important;
}

/* Brand/logo block */
html body header .brand,
html body .topbar .brand,
html body .navbar .brand,
html body .site-header .brand,
html body .app-header .brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:0 !important;
    white-space:nowrap !important;
}

html body header .brand img,
html body .topbar .brand img,
html body .navbar .brand img,
html body .site-header .brand img,
html body .app-header .brand img,
html body header .logo img,
html body .topbar .logo img{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
    border-radius:12px !important;
    object-fit:cover !important;
}

html body header .brand strong,
html body .topbar .brand strong,
html body .navbar .brand strong{
    font-size:16px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
}

html body header .brand small,
html body .topbar .brand small,
html body .navbar .brand small,
html body header .brand .muted,
html body .topbar .brand .muted{
    display:block !important;
    font-size:12px !important;
    line-height:1.15 !important;
    color:#6b7280 !important;
}

/* Search */
html body header form,
html body .topbar form,
html body .navbar form,
html body .site-header form,
html body .app-header form{
    width:100% !important;
    max-width:520px !important;
    margin:0 !important;
}

html body header input[type="search"],
html body .topbar input[type="search"],
html body .navbar input[type="search"],
html body .site-header input[type="search"],
html body .app-header input[type="search"],
html body header .search-input,
html body .topbar .search-input,
html body .navbar .search-input{
    width:100% !important;
    max-width:520px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
    background:#fffaf5 !important;
    border:1px solid #d9d2c7 !important;
    padding:0 16px !important;
    font-size:14px !important;
    box-sizing:border-box !important;
}

/* Right actions */
html body header .actions,
html body .topbar .actions,
html body .navbar .actions,
html body .site-header .actions,
html body .app-header .actions,
html body header .header-actions,
html body .topbar .header-actions,
html body .navbar .header-actions{
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    min-width:0 !important;
    border-top:0 !important;
    margin:0 !important;
    padding:0 !important;
}

html body header .actions button,
html body .topbar .actions button,
html body .navbar .actions button,
html body header .header-actions button,
html body .topbar .header-actions button,
html body .navbar .header-actions button,
html body header .btn,
html body .topbar .btn,
html body .navbar .btn{
    min-height:36px !important;
    height:36px !important;
    padding:0 13px !important;
    border-radius:10px !important;
    font-size:13px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}

/* Uitloggen knop blijft prominent maar niet mega */
html body header a[href*="logout"],
html body .topbar a[href*="logout"],
html body .navbar a[href*="logout"],
html body header .logout,
html body .topbar .logout,
html body .navbar .logout{
    min-height:38px !important;
    height:38px !important;
    padding:0 18px !important;
    border-radius:12px !important;
    background:#ff7a18 !important;
    color:#fff !important;
    font-weight:900 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-decoration:none !important;
}

/* Keep page below header nicely spaced */
html body .layout,
html body .dashboard,
html body .app-layout,
html body .social-layout,
html body .main-layout,
html body .page-grid,
html body .content-grid{
    padding-top:18px !important;
}

/* Medium */
@media(max-width:1100px){
    html body header .container,
    html body .topbar .container,
    html body .navbar .container,
    html body .site-header .container,
    html body .app-header .container{
        grid-template-columns:220px minmax(260px,1fr) auto !important;
        gap:12px !important;
    }

    html body header input[type="search"],
    html body .topbar input[type="search"],
    html body .navbar input[type="search"],
    html body header .search-input,
    html body .topbar .search-input,
    html body .navbar .search-input{
        max-width:100% !important;
    }
}

/* Mobile */
@media(max-width:760px){
    :root{
        --vrienda-header-height:auto;
    }

    html body header,
    html body .topbar,
    html body .navbar,
    html body .site-header,
    html body .app-header{
        height:auto !important;
        max-height:none !important;
    }

    html body header .container,
    html body .topbar .container,
    html body .navbar .container,
    html body .site-header .container,
    html body .app-header .container{
        height:auto !important;
        min-height:58px !important;
        display:grid !important;
        grid-template-columns:1fr auto !important;
        grid-template-areas:
            "brand actions"
            "search search" !important;
        gap:10px !important;
        padding-top:8px !important;
        padding-bottom:10px !important;
    }

    html body header .brand,
    html body .topbar .brand,
    html body .navbar .brand{
        grid-area:brand !important;
    }

    html body header form,
    html body .topbar form,
    html body .navbar form,
    html body header .search,
    html body .topbar .search,
    html body .navbar .search{
        grid-area:search !important;
        max-width:100% !important;
    }

    html body header .actions,
    html body .topbar .actions,
    html body .navbar .actions,
    html body header .header-actions,
    html body .topbar .header-actions,
    html body .navbar .header-actions{
        grid-area:actions !important;
    }
}