/* =============================================================================
   AP-CHROME.CSS — Nieuw frame: sidebar + header (herontwerp)
   =============================================================================
   Laadt NA ap-core.css / ap-tokens.css / ap-icons.css. Herpositioneert het
   bestaande frame (volle-hoogte sidebar links, lage header ernaast) en geeft
   sidebar + header hun nieuwe ontwerp. Gebruikt de tokens uit ap-tokens.css.
   Waar ap-core.css met !important forceert (o.a. sidebar-tekstkleur), gebruiken
   we hier ook !important — dat is bewust en wordt bij de eindopschoning weer
   teruggebracht.
   ============================================================================= */

/* ============================ FRAME ============================ */

.ap-platform{
    padding-top:0 !important;
    background:var(--ap-page);
    min-height:100vh;
}

/* Sidebar: vast, volledige hoogte, links */
.ap-sidebar{
    position:fixed;
    top:0;
    left:0;
    width:252px;
    height:100vh;
    padding:0 !important;
    border-right:1px solid rgba(255,255,255,.06);
    background:var(--ap-grad-sidebar) !important;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:50;
    transition:width var(--ap-t-menu);
}

/* Header: vast, begint naast de sidebar */
.ap-global-header{
    position:fixed;
    top:0;
    left:252px;
    right:0;
    height:60px;
    z-index:40;
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 32px;
    background:rgba(255,255,255,.85);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--ap-border);
    transition:left var(--ap-t-menu);
}

/* Inhoud: naast de sidebar, onder de header */
.ap-content{
    margin-left:252px !important;
    width:auto !important;
    max-width:none !important;
    padding:calc(60px + var(--ap-space-6)) var(--ap-space-8) var(--ap-space-8) !important;
    transition:margin-left var(--ap-t-menu);
}

/* WP-adminbalk: vaste elementen 32px (of 46px) lager */
body.admin-bar .ap-sidebar{ top:32px; height:calc(100vh - 32px); }
body.admin-bar .ap-global-header{ top:32px; }
@media screen and (max-width:782px){
    body.admin-bar .ap-sidebar{ top:46px; height:calc(100vh - 46px); }
    body.admin-bar .ap-global-header{ top:46px; }
}

/* Oude zwevende hamburger niet meer nodig (zit nu in de header) */
.ap-mobile-menu-fab{ display:none !important; }

/* ============================ SIDEBAR ============================ */

/* Logokop */
.ap-side__brand{
    flex:0 0 68px;
    height:68px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 14px 0 20px;
}
.ap-side__logo{ display:flex; align-items:center; }
.ap-side__logo img{ height:30px; width:auto; display:block; }
.ap-side__collapse{
    margin-left:auto;
    flex:0 0 30px;
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
    border-radius:9px;
    color:var(--ap-side-text) !important;
    cursor:pointer;
    transition:background var(--ap-t-fast), color var(--ap-t-fast);
}
.ap-side__collapse i{ font-size:15px; }
.ap-side__collapse:hover{ background:rgba(255,255,255,.13); color:#fff !important; }

/* Fade-scheidingslijn */
.ap-side__sep{
    height:1px; margin:0 14px; flex:0 0 auto;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));
}

/* Navigatie */
.ap-side__nav{
    flex:1 1 auto;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:16px 14px 20px;
}

/* Menu-item */
.ap-side__link{
    display:flex; align-items:center; gap:12px;
    flex:0 0 38px; height:38px; padding:0 12px;
    border-radius:10px;
    color:var(--ap-side-text) !important;
    font-size:13.5px; font-weight:450; letter-spacing:-.006em;
    text-decoration:none;
    position:relative;
    transition:background var(--ap-t-fast), color var(--ap-t-fast);
}
.ap-side__link i{ font-size:17px; color:var(--ap-side-icon) !important; flex:0 0 auto; }
.ap-side__link span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-side__link:hover{ background:rgba(255,255,255,.06); color:#fff !important; }
.ap-side__link:hover i{ color:#fff !important; }

/* Actief */
.ap-side__link.is-active{
    background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
    color:#fff !important;
    font-weight:550;
}
.ap-side__link.is-active i{ color:var(--ap-accent-light) !important; }
.ap-side__link.is-active::before{
    content:""; position:absolute; left:0; top:9px; bottom:9px;
    width:3px; border-radius:0 3px 3px 0; background:var(--ap-accent-light);
}

/* "Binnenkort"-item: niet klikbaar, gedimd */
.ap-side__link.is-soon{ cursor:default; opacity:.55; }
.ap-side__link.is-soon:hover{ background:transparent; color:var(--ap-side-text) !important; }
.ap-side__link.is-soon:hover i{ color:var(--ap-side-icon) !important; }
.ap-side__soon{
    margin-left:auto;
    font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ap-side-group) !important;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px; padding:2px 7px;
    font-style:normal;
}

/* Badge (bv. Berichten) */
.ap-side__badge{
    margin-left:auto;
    min-width:19px; height:19px; padding:0 6px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px;
    background:var(--ap-accent); color:#fff !important;
    font-size:10.5px; font-weight:600;
    box-shadow:0 1px 4px rgba(27,77,228,.5);
}

/* Groepskop */
.ap-side__group{
    flex:0 0 auto;
    display:flex; align-items:center; gap:10px;
    margin:auto 0 10px; padding:0 12px;
}
.ap-side__group span{
    font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
    color:var(--ap-side-group) !important; white-space:nowrap;
}
.ap-side__group::after{
    content:""; flex:1 1 auto; height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,.11), rgba(255,255,255,0));
}

/* Voet */
.ap-side__foot{
    flex:0 0 auto;
    display:flex; flex-direction:column; gap:10px;
    padding:0 14px 14px;
}
.ap-side__perk{
    display:flex; align-items:flex-start; gap:10px;
    padding:11px 12px; border-radius:11px;
    background:linear-gradient(135deg, rgba(156,192,255,.11), rgba(156,192,255,.04));
    border:1px solid rgba(156,192,255,.16);
}
.ap-side__perk i{ font-size:16px; color:var(--ap-accent-light) !important; flex:0 0 auto; margin-top:1px; }
.ap-side__perk p{ margin:0; font-size:11.5px; line-height:1.4; color:#B8C9E4 !important; }

.ap-side__footrow{ display:flex; align-items:stretch; gap:0; }
.ap-side__footlink{
    flex:1 1 0;
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:34px;
    color:var(--ap-side-foot) !important;
    font-size:12px; text-decoration:none;
    border-radius:8px;
    transition:background var(--ap-t-fast), color var(--ap-t-fast);
}
.ap-side__footlink i{ font-size:15px; color:var(--ap-side-foot) !important; }
.ap-side__footlink:hover{ background:rgba(255,255,255,.06); color:#fff !important; }
.ap-side__footlink:hover i{ color:#fff !important; }
.ap-side__footlink.is-soon{ cursor:default; opacity:.55; }
.ap-side__footlink.is-soon:hover{ background:transparent; color:var(--ap-side-foot) !important; }
.ap-side__footlink.is-soon:hover i{ color:var(--ap-side-foot) !important; }
.ap-side__footdiv{ flex:0 0 1px; width:1px; height:16px; align-self:center; background:rgba(255,255,255,.10); }

/* ---- Ingeklapt (76px): alleen iconen ---- */
html[data-ap-menu="in"] .ap-sidebar{ width:76px; }
html[data-ap-menu="in"] .ap-global-header{ left:76px; }
html[data-ap-menu="in"] .ap-content{ margin-left:76px !important; }
html[data-ap-menu="in"] .ap-side__brand{ padding:0; justify-content:center; }
html[data-ap-menu="in"] .ap-side__logo{ display:none; }
html[data-ap-menu="in"] .ap-side__collapse{ margin:0; }
html[data-ap-menu="in"] .ap-side__link{ justify-content:center; padding:0; }
html[data-ap-menu="in"] .ap-side__link span,
html[data-ap-menu="in"] .ap-side__soon,
html[data-ap-menu="in"] .ap-side__badge{ display:none; }
html[data-ap-menu="in"] .ap-side__link.is-active::before{ display:none; }
html[data-ap-menu="in"] .ap-side__group{ justify-content:center; padding:0; }
html[data-ap-menu="in"] .ap-side__group span,
html[data-ap-menu="in"] .ap-side__group::after{ display:none; }
html[data-ap-menu="in"] .ap-side__perk{ display:none; }
html[data-ap-menu="in"] .ap-side__footrow{ flex-direction:column; gap:4px; }
html[data-ap-menu="in"] .ap-side__footlink span{ display:none; }
html[data-ap-menu="in"] .ap-side__footdiv{ display:none; }

/* ============================ HEADER ============================ */

.ap-topbar__left{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.ap-topbar__title{
    margin:0; font-size:14.5px; font-weight:600; letter-spacing:-.01em;
    color:var(--ap-text); line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ap-topbar__date{ margin:0; font-size:11.5px; color:#7B8CA6; line-height:1.3; }

.ap-topbar__spacer{ margin-left:auto; }

.ap-topbar__actions{ display:flex; align-items:center; gap:10px; }
.ap-topbar__btn{
    width:36px; height:36px; flex:0 0 36px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--ap-border-input-2);
    background:#fff; border-radius:9px;
    color:var(--ap-text-body-2);
    cursor:pointer; position:relative; text-decoration:none;
    transition:background var(--ap-t-fast), border-color var(--ap-t-fast);
}
.ap-topbar__btn i{ font-size:16px; }
.ap-topbar__btn:hover{ background:var(--ap-card-soft); border-color:var(--ap-border-hover); }
.ap-topbar__btn--bell::after{
    content:""; position:absolute; top:8px; right:8px;
    width:5px; height:5px; border-radius:50%;
    background:var(--ap-accent); box-shadow:0 0 0 2px #fff;
}

.ap-topbar__div{ width:1px; height:22px; background:var(--ap-border); flex:0 0 1px; }

.ap-topbar__account{
    display:flex; align-items:center; gap:10px;
    padding:4px 8px 4px 4px; border-radius:999px;
    text-decoration:none; max-width:220px;
    transition:background var(--ap-t-fast);
}
.ap-topbar__account:hover{ background:#F0F3F9; }
.ap-topbar__avatar{
    width:30px; height:30px; flex:0 0 30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--ap-accent), var(--ap-navy));
    color:#fff; font-size:11.5px; font-weight:600;
    overflow:hidden;
}
.ap-topbar__avatar img{ width:100%; height:100%; object-fit:cover; }
.ap-topbar__who{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ap-topbar__name{ font-size:12.5px; font-weight:550; color:var(--ap-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-topbar__company{ font-size:10.5px; color:#7B8CA6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-topbar__account > i{ font-size:12px; color:var(--ap-text-faint-2); flex:0 0 auto; }

/* Mobiele koppen (hamburger + beeldmerk): standaard verborgen op desktop */
.ap-topbar__burger,
.ap-topbar__mobilelogo{ display:none; }

/* ============================ MOBIEL (<=720px) ============================ */
@media (max-width:720px){
    .ap-sidebar{
        width:min(84vw, 300px);
        left:calc(-1 * min(84vw, 300px));
        top:0; height:100vh;
        z-index:70;
        transition:left var(--ap-t-menu);
    }
    body.admin-bar .ap-sidebar{ top:0; height:100vh; }
    .ap-platform.is-mobile-open .ap-sidebar{ left:0; }

    .ap-global-header{ left:0; padding:0 16px; }

    .ap-content{
        margin-left:0 !important;
        padding:calc(60px + var(--ap-space-4)) var(--ap-space-4) var(--ap-space-8) !important;
    }

    /* Op mobiel: titel/datum verbergen, hamburger + beeldmerk tonen */
    .ap-topbar__left{ display:none; }
    .ap-topbar__burger{
        display:flex; align-items:center; justify-content:center;
        width:40px; height:40px; flex:0 0 40px;
        border:1px solid var(--ap-border-input-2); background:#fff;
        border-radius:9px; color:var(--ap-text-body-2); cursor:pointer;
    }
    .ap-topbar__burger i{ font-size:20px; }
    .ap-topbar__mobilelogo{ display:flex; align-items:center; }
    .ap-topbar__mobilelogo img{ height:26px; width:auto; }

    /* Ingeklapt-gedrag uit op mobiel */
    html[data-ap-menu="in"] .ap-global-header{ left:0; }
    html[data-ap-menu="in"] .ap-content{ margin-left:0 !important; }

    /* Donkere overlay achter het open menu */
    .ap-mobile-overlay{
        display:none; position:fixed; inset:0;
        background:rgba(8,20,40,.5); z-index:60; border:0; cursor:pointer;
    }
    .ap-platform.is-mobile-open .ap-mobile-overlay{ display:block; }
}

/* ============================================================
   Gedeelde pagina-hero — zelfde start voor Mijn auto's,
   Auto's zoeken en Auto aanbieden (leidraad Auto aanbieden).
   Globaal geladen; hoge specificiteit + px !important tegen de themabasis.
   ============================================================ */
.ap-content .ap-pagehero{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:14px 20px; flex-wrap:wrap; margin:0 !important;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.ap-content .ap-pagehero__tekst{ min-width:0; }
.ap-content .ap-pagehero__titel{
    font-size:24px !important; font-weight:600 !important; letter-spacing:-.02em;
    line-height:1.2 !important; color:#0C1F3F !important; margin:0 !important;
}
.ap-content .ap-pagehero__sub{
    font-size:13px !important; font-weight:400 !important; line-height:1.5 !important;
    color:#6B7A93 !important; margin:6px 0 0 !important;
}
.ap-content a.ap-pagehero__actie{
    display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:9px;
    background:#1B4DE4 !important; border:0 !important; color:#fff !important;
    font-size:13px !important; font-weight:550 !important; text-decoration:none; white-space:nowrap;
    transition:background .15s, box-shadow .15s;
}
.ap-content a.ap-pagehero__actie i{ font-size:15px; }
.ap-content a.ap-pagehero__actie:hover{ background:#143BB0 !important; box-shadow:0 2px 10px rgba(27,77,228,.24); }
/* Secundaire actie (Concept opslaan op Auto aanbieden) blijft z'n eigen stijl. */
.ap-content .ap-pagehero__actie--sec{ flex:0 0 auto; }

@media (max-width:720px){
    .ap-content .ap-pagehero__titel{ font-size:21px !important; }
    .ap-content a.ap-pagehero__actie,
    .ap-content .ap-pagehero__actie--sec{ height:44px !important; }
}