/* =========================================
   ROOT / DESIGN TOKENS
========================================= */
:root{
    --bg:#f5f7fb;
    --bg-soft:#eef3f8;

    --panel:#ffffff;
    --panel-2:#f8fafc;

    --border:#dbe3ee;

    --text:#1f2937;
    --muted:#6b7280;

    --accent:#2563eb;
    --accent-hover:#1d4ed8;
    --accent-soft:rgba(37,99,235,0.10);

    --danger:#dc2626;
    --success:#16a34a;

    --shadow-sm:0 1px 2px rgba(15,23,42,0.06);
    --shadow-md:0 8px 24px rgba(15,23,42,0.08);

    --radius:16px;
    --radius-sm:10px;

    --sidebar-width:240px;
    --topbar-height:60px;
}

/* =========================================
   RESET / BASE
========================================= */
*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
}

body{
    font-family:"Segoe UI",system-ui,sans-serif;
    color:var(--text);
    background:var(--bg);
    overflow-x:hidden;
}

img,
svg,
canvas,
video{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    color:inherit;
    text-decoration:none !important;
}

button,
input,
select,
textarea{
    font:inherit;
}

/* =========================================
   APP LAYOUT
========================================= */
.layout{
    display:flex;
    min-height:100vh;
    width:100%;
    background:var(--bg);
    overflow:hidden;
}

/* =========================================
   SIDEBAR
========================================= */
.sidebar{
    width:var(--sidebar-width);
    min-width:var(--sidebar-width);
    max-width:var(--sidebar-width);
    background:#1f2a37;
    color:#cbd5e1;
    border-right:1px solid rgba(255,255,255,0.05);
    padding:16px;
    position:relative;
    z-index:100;
    flex-shrink:0;
    overflow-y:auto;
    overflow-x:hidden;
    transition:transform .25s ease;
}

/* HEADER */
.sidebar-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.sidebar-logo{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:50%;
    overflow:hidden;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.sidebar-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.sidebar-brand{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    min-width:0;
}

.brand-title{
    font-size:14px;
    font-weight:700;
    color:#fff;
}

.brand-sub{
    font-size:12px;
    color:#94a3b8;
}

/* SECTION TITLES */
.sidebar-section{
    font-size:11px;
    text-transform:uppercase;
    color:#64748b;
    margin:18px 0 6px;
    letter-spacing:.04em;
}

/* MAIN LINKS */
.side-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    cursor:pointer;
    color:#cbd5e1;
    font-size:14px;
    position:relative;
    transition:all .15s ease;
    user-select:none;
}

.side-link:hover{
    background:rgba(255,255,255,0.05);
    color:#fff;
}

.side-link.active{
    background:linear-gradient(90deg,#3b82f6,#2563eb);
    color:#fff;
}

.side-link i{
    width:18px;
    min-width:18px;
    text-align:center;
}

/* BADGE */
.badge{
    margin-left:auto;
    background:#3b82f6;
    color:#fff;
    font-size:11px;
    font-weight:600;
    line-height:1;
    padding:4px 7px;
    border-radius:999px;
}

/* CHEVRON */
.chevron{
    margin-left:auto;
    transition:transform .2s ease;
}

.side-group.open .chevron{
    transform:rotate(90deg);
}

/* SUBMENU */
.sub-menu{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    margin:4px 0 0 8px;
    border-left:1px solid rgba(255,255,255,0.08);
}

.side-group.open .sub-menu{
    max-height:320px;
}

.sub-link{
    display:flex;
    align-items:center;
    padding:8px 12px 8px 18px;
    margin:2px 0;
    font-size:13px;
    color:#94a3b8;
    border-radius:8px;
    position:relative;
    transition:all .15s ease;
}

.sub-link::before{
    content:"";
    width:5px;
    height:5px;
    min-width:5px;
    border-radius:50%;
    background:#64748b;
    margin-right:10px;
}

.sub-link:hover{
    background:rgba(255,255,255,0.04);
    color:#e2e8f0;
    transform:translateX(2px);
}

.sub-link.active{
    background:rgba(37,99,235,0.15);
    color:#fff;
}

.sub-link.active::before{
    background:#3b82f6;
}

/* =========================================
   MOBILE SIDEBAR
========================================= */
.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.35);
    backdrop-filter:none;
    opacity:0;
    visibility:hidden;
    transition:all .2s ease;
    z-index:90;
}

.sidebar-overlay.show{
    opacity:1;
    visibility:visible;
}

@media (max-width: 900px){
    .sidebar{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        transform:translateX(-100%);
        box-shadow:0 10px 30px rgba(0,0,0,0.18);
    }

    .sidebar.open{
        transform:translateX(0);
    }
}

/* =========================================
   MAIN AREA
========================================= */
.main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    background:transparent;
}

/* =========================================
   TOPBAR
========================================= */
.topbar{
    height:var(--topbar-height);
    min-height:var(--topbar-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0 20px;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(4px);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:50;
}

.top-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.topbar-title{
    font-size:14px;
    font-weight:500;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.top-right{
    display:flex;
    gap:10px;
    align-items:center;
    flex-shrink:0;
}

@media (min-width: 901px){
    #menuToggle{
        display:none;
    }
}

/* =========================================
   CONTENT
========================================= */
.content{
    flex:1;
    min-width:0;
    padding:28px 30px;
    background:
        radial-gradient(circle at 10% 0%, rgba(37,99,235,0.08), transparent 35%),
        radial-gradient(circle at 90% 0%, rgba(16,185,129,0.06), transparent 30%),
        linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
    overflow-x:hidden;
}

.container{
    width:min(1400px,95vw);
    margin:0 auto;
}

/* =========================================
   PAGE HEADERS
========================================= */
.page-header{
    margin:0 0 18px;
}

.page-title{
    margin:0;
    font-size:28px;
    line-height:1.15;
    font-weight:800;
    color:var(--text);
}

.page-subtitle{
    margin-top:6px;
    font-size:14px;
    color:var(--muted);
}

.subtitle{
    font-size:13px;
    color:var(--muted);
}

/* =========================================
   GRID
========================================= */
.grid{
    display:grid;
    grid-template-columns:repeat(12, minmax(0,1fr));
    gap:18px;
}

.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}
.span-12{grid-column:span 12}

@media (max-width: 1100px){
    .span-3,
    .span-4,
    .span-8,
    .span-6{
        grid-column:span 6;
    }
}

@media (max-width: 900px){
    .span-3,
    .span-4,
    .span-6,
    .span-8,
    .span-12{
        grid-column:span 12;
    }

    .content{
        padding:20px 16px;
    }
}

/* =========================================
   CARDS
========================================= */
.card{
    background:linear-gradient(180deg,#fff,#f9fbff);
    border:1px solid rgba(0,0,0,0.06);
    border-radius:18px;
    padding:20px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 10px 30px rgba(15,23,42,0.08);
    transition:transform .2s ease, box-shadow .2s ease;
    min-width:0;
}

.card:hover{
    /**transform:translateY(-3px);**/
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 18px 40px rgba(15,23,42,0.12);
}

.card-title{
    font-size:14px;
    font-weight:700;
    color:var(--text);
    margin:0 0 4px;
}

/* =========================================
   KPI
========================================= */
.kpi-title{
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
    margin-bottom:6px;
    letter-spacing:.04em;
}

.kpi-value{
    font-size:30px;
    font-weight:900;
    color:var(--text);
    line-height:1.1;
}

/* =========================================
   BUTTONS / NAV
========================================= */
.nav-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:9px 14px;
    min-height:40px;
    border-radius:12px;
    background:linear-gradient(#fff,#f3f6fb);
    border:1px solid rgba(0,0,0,0.08);
    color:var(--text);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:all .15s ease;
}

.nav-btn:hover{
    background:linear-gradient(#f8fbff,#eef4ff);
    border-color:#c7d6ee;
    color:var(--text);
}

.nav-btn.danger{
    color:var(--danger);
}

/* =========================================
   FORMS
========================================= */
label{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    margin-bottom:6px;
}

input.form-control,
select.form-select,
textarea.form-control{
    width:100%;
    border-radius:12px !important;
    border:1px solid var(--border) !important;
    min-height:44px;
    background:#fff !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

input.form-control::placeholder,
textarea.form-control::placeholder{
    color:#9ca3af;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#93c5fd !important;
    box-shadow:0 0 0 4px var(--accent-soft) !important;
    outline:none;
}

/* =========================================
   SWITCHES
========================================= */
.form-check.form-switch .form-check-input{
    width:2.5em;
    height:1.4em;
    background-color:#cbd5e1;
    border-radius:999px;
    position:relative;
    transition:background-color .2s ease;
}

/* bolletje */
.form-check.form-switch .form-check-input::before{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:1em;
    height:1em;
    border-radius:50%;
    background:#fff;
    transition:transform .2s ease;
}

/* checked state */
.form-check.form-switch .form-check-input:checked{
    background-color:var(--accent);
}

/* bolletje verplaatsen */
.form-check.form-switch .form-check-input:checked::before{
    transform:translateX(1.1em);
}

/* =========================================
   MODALS
========================================= */
.modal{
    z-index:1055;
}

.modal-dialog{
    margin:1.75rem auto;
    will-change:transform, opacity;
}

.modal-content{
    border-radius:18px;
    border:1px solid var(--border);
    box-shadow:0 12px 30px rgba(15,23,42,0.12);
    overflow:hidden;
}

.modal-header,
.modal-footer{
    border-color:#e5e7eb;
}

.modal-title{
    font-size:16px;
    font-weight:700;
    color:var(--text);
}

.modal-body{
    color:var(--text);
}

/* ===== MODAL PERFORMANCE FIX ===== */
.modal.fade .modal-dialog{
    transform:none !important;
    transition:opacity .15s ease !important;
}

.modal.fade{
    transition:opacity .15s ease !important;
}

.modal-backdrop{
    transition:none !important;
}

/* =========================================
   LIST GROUP
========================================= */
.list-group{
    border-radius:12px;
    overflow:hidden;
}

.list-group-item{
    background:#fff;
    border:1px solid #e5e7eb;
    color:var(--text);
}

.list-group-item + .list-group-item{
    border-top:none;
}

/* =========================================
   STATES
========================================= */
.text-success{color:var(--success)!important}
.text-danger{color:var(--danger)!important}

/* =========================================
   LOADER
========================================= */
.spinner-border{
    width:40px;
    height:40px;
    border:4px solid #dbe3ee;
    border-top:4px solid var(--accent);
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    100%{transform:rotate(360deg);}
}

/* =========================================
   HELPERS
========================================= */
.section-gap{
    margin-top:18px;
}

.no-results{
    text-align:center;
    color:var(--muted);
}

/* =========================================
   WIZARD
========================================= */
.step{
    display:none;
}
.step.active{
    display:block;
}

/* =========================================
   STATS NAV
========================================= */
.stats-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.stats-page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}

.stats-cache-pill,
.stats-mini-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:7px 11px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    box-shadow:var(--shadow-sm);
}

.stats-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}

.stats-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin:0;
}

.stats-control-select{
    width:130px !important;
}

.stats-control-date{
    width:160px !important;
}

.stats-control-days{
    width:105px !important;
}

.nav-btn.active,
.stats-primary-btn{
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    border-color:transparent;
}

.nav-btn.active:hover,
.stats-primary-btn:hover{
    color:#fff;
    border-color:transparent;
}

.stats-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.chart-container{
    height: 380px;
    padding: 10px 10px 0;
}

.stats-chart-card .chart-container{
    padding:0;
}

.stats-top-domain{
    margin-top:18px;
    font-size:20px;
    line-height:1.25;
    font-weight:800;
    word-break:break-word;
}

.stats-breakdown{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
    margin-top:18px;
}

.stats-breakdown div{
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:12px;
}

.stats-breakdown span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:4px;
}

.stats-breakdown strong{
    font-size:18px;
}

.stats-table{
    margin-bottom:0;
}

.stats-table td,
.stats-table th{
    vertical-align:middle;
}

@media (max-width: 700px){
    .stats-controls,
    .stats-nav,
    .stats-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .stats-control-select,
    .stats-control-date,
    .stats-control-days,
    .stats-controls .nav-btn{
        width:100% !important;
    }
}