/* ==========================================================
   AP26
   style.css
   Build 10.1
   Deel 1
   Layout + Sidebar + Dashboard
========================================================== */

:root{

    --primary:#0B4F9F;

    --primary-dark:#083B74;

    --primary-light:#EAF3FF;

    --background:#F4F7FB;

    --surface:#FFFFFF;

    --border:#E3E8EF;

    --text:#2D3748;

    --text-light:#718096;

    --success:#2F855A;

    --warning:#DD6B20;

    --danger:#C53030;

    --shadow:0 4px 18px rgba(0,0,0,.08);

    --radius:12px;

}

/* ==========================================================
   Reset
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    height:100%;

}

body{

    min-height:100vh;

    background:var(--background);

    color:var(--text);

    font-family:

        "Segoe UI",

        Arial,

        Helvetica,

        sans-serif;

}

/* ==========================================================
   Layout
========================================================== */

.layout{

    display:flex;

    min-height:100vh;

}

/* ==========================================================
   Sidebar
========================================================== */

.sidebar{

    width:260px;

    background: #2E9E44;
   /*background:linear-gradient(

        180deg,

        var(--primary),

        var(--primary-dark)

    );*/

    color:white;

    display:flex;

    flex-direction:column;

    flex-shrink:0;

    position:fixed;

    left:0;

    top:0;

    bottom:0;

    box-shadow:

        4px 0 20px rgba(0,0,0,.12);

    z-index:100;

}

/* ==========================================================
   Logo
========================================================== */

/* ==========================================
   Sidebar Logo
   ========================================== */

.sidebar-header {

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px 10px;

}

.sidebar-logo {

    width: 150px;
    height: auto;

    display: block;

}

.logo-subtitle{

    margin-top:6px;

    font-size:14px;

    opacity:.85;

}

.build{

    margin-top:20px;

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    background:rgba(255,255,255,.12);

    font-size:12px;

}

/* ==========================================================
   Menu
========================================================== */

.sidebar-menu{

    flex:1;

    padding:20px 15px;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.sidebar-menu button{

    display:flex;

    align-items:left;

    gap:14px;

    width:100%;

    border:none;

    border-radius:10px;

    background:transparent;

    color:white;

    padding:14px 18px;

    font-size:15px;

    cursor:pointer;

    transition:.2s;

}

.sidebar-menu button span{

    font-size:20px;

}

.sidebar-menu button:hover{

    background:rgba(255,255,255,.12);

    transform:translateX(4px);

}

.sidebar-menu button.active{

    background:white;

    color:var(--primary);

    font-weight:600;

}

/* ==========================================================
   Footer
========================================================== */

.sidebar-footer{

    padding:22px;

    border-top:

        1px solid rgba(255,255,255,.12);

    text-align:center;

    font-size:13px;

    opacity:.9;

}

/* ==========================================================
   Main
========================================================== */

.main{

    flex:1;

    margin-left:260px;

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   Header
========================================================== */

.topbar{

    height:90px;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 35px;

    border-bottom:

        1px solid var(--border);

    box-shadow:

        0 2px 10px rgba(0,0,0,.04);

}

.topbar h1{

    font-size:30px;

    color:var(--primary);

    margin-bottom:4px;

}

.topbar p{

    color:var(--text-light);

    font-size:14px;

}

.topbar-right{

    color:var(--text-light);

    font-size:14px;

}

/* ==========================================================
   Pagina
========================================================== */

.page{

    flex:1;

    padding:35px;

}

/* ==========================================================
   Dashboard
========================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:

        repeat(

            4,

            1fr

        );

    gap:20px;

    margin-bottom:24px;

}

/* ==========================================================
   Kaarten
========================================================== */

.card{

    background:white;

    border-radius:12px;

    padding:14px;

    min-height:120px;

    box-shadow:

        0 2px 8px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

    justify-content:center;

    transition:.2s;

    cursor: pointer;

}

.card:hover{

    transform:translateY(-2px);

}

.card-title{

    color:var(--text-light);

    font-size:14px;

    margin-bottom:8px;

}

.card-icon{

    font-size:28px;

    margin-bottom:8px;

}

.card-value{

    color:var(--primary);

    font-size:34px;

    font-weight:700;

}

.card-footer{

    margin-top:12px;

    font-size:12px;

    color:var(--text-light);

}

/* ==========================================================
   Panel
========================================================== */

.panel{

    background:white;

    border-radius:var(--radius);

    padding:25px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

.panel-title{

    font-size:20px;

    color:var(--primary);

    margin-bottom:20px;

}

/* ==========================================================
   AP26
   style.css
   Build 10.1
   Deel 2
   Toolbar + Tabellen + Formulieren + Modals
========================================================== */

/* ==========================================================
   Toolbar
========================================================== */

.toolbar{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

.toolbar-left{

    display:flex;

    gap:10px;

}

.toolbar-right{

    margin-left:auto;

}

.toolbar input{

    width:300px;

    max-width:100%;

    padding:10px 14px;

    border:1px solid var(--border);

    border-radius:8px;

    background:white;

    outline:none;

    transition:.2s;

}

.toolbar input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(11,79,159,.12);

}

/* ==========================================================
   Buttons
========================================================== */

button{

    cursor:pointer;

    font-family:inherit;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 18px;

    border:none;

    border-radius:8px;

    font-size:14px;

    font-weight:600;

    transition:.2s;

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-success{

    background:var(--success);

    color:white;

}

.btn-warning{

    background:var(--warning);

    color:white;

}

.btn-danger{

    background:var(--danger);

    color:white;

}

.btn-secondary{

    background:#E8EDF5;

    color:#333;

}

.btn-icon{

    width:36px;

    height:36px;

    border:none;

    border-radius:8px;

    background:#EEF4FF;

    color:var(--primary);

    cursor:pointer;

    transition:.2s;

}

.btn-icon:hover{

    background:var(--primary);

    color:white;

}

/* ==========================================================
   Tables
========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

}

.table thead{

    background:var(--primary);

    color:white;

}

.table th{

    padding:14px 16px;

    text-align:left;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}

.table td{

    padding:14px 16px;

    border-bottom:1px solid var(--border);

    vertical-align:middle;

}

.table tbody tr{

    transition:.15s;

}

.table tbody tr:nth-child(even){

    background:#FBFCFE;

}

.table tbody tr:hover{

    background:#EEF5FF;

}

.table tbody tr.selected{

    background:#DCEBFF;

    font-weight:600;

}

.table td.actions{

    width:90px;

    white-space:nowrap;

}

.table td.actions button{

    margin-right:6px;

}

/* ==========================================================
   Forms
========================================================== */

form{

    width:100%;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#555;

}

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    padding:11px 14px;

    border:1px solid var(--border);

    border-radius:8px;

    background:white;

    font-size:14px;

    transition:.2s;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(11,79,159,.12);

    outline:none;

}

.form-group textarea{

    resize:vertical;

    min-height:120px;

}

/* ==========================================================
   Checkbox groep
========================================================== */

.checkbox-group{

    display:flex;

    gap:24px;

    flex-wrap:wrap;

}

.checkbox-group label{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:500;

}

.checkbox-group input{

    width:18px;

    height:18px;

}

/* ==========================================================
   Modal
========================================================== */

.modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(3px);

    z-index:9999;

}

.modal.hidden{

    display:none;

}

.modal-content{

    width:700px;

    max-width:95%;

    max-height:90vh;

    overflow:auto;

    background:white;

    border-radius:14px;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

    animation:modalOpen .25s ease;

}

.modal-header{

    padding:20px 24px;

    border-bottom:1px solid var(--border);

}

.modal-header h2{

    color:var(--primary);

    font-size:24px;

}

.modal-body{

    padding:24px;

}

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    padding:20px 24px;

    border-top:1px solid var(--border);

}

/* ==========================================================
   Meldingen
========================================================== */

.alert{

    padding:14px 18px;

    border-radius:8px;

    margin-bottom:18px;

}

.alert-success{

    background:#E8F7EE;

    color:#2F855A;

}

.alert-warning{

    background:#FFF7E8;

    color:#DD6B20;

}

.alert-danger{

    background:#FCECEC;

    color:#C53030;

}

/* ==========================================================
   Loading
========================================================== */

.loading{

    text-align:center;

    padding:50px;

    color:var(--text-light);

    font-size:16px;

}

/* ==========================================================
   Empty state
========================================================== */

.empty{

    padding:60px;

    text-align:center;

    color:var(--text-light);

}

/* ==========================================================
   Animaties
========================================================== */

@keyframes modalOpen{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   AP26
   style.css
   Build 10.1
   Deel 3
   Responsive + Utilities + Dashboard+
========================================================== */


/* ==========================================================
   Dashboard kleuren
========================================================== */

.card.primary{

    border-left:6px solid var(--primary);

}

.card.success{

    border-left:6px solid var(--success);

}

.card.warning{

    border-left:6px solid var(--warning);

}

.card.danger{

    border-left:6px solid var(--danger);

}


/* ==========================================================
   Badges
========================================================== */

.badge{

    display:inline-block;

    padding:4px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}

.badge-primary{

    background:#EAF3FF;

    color:var(--primary);

}

.badge-success{

    background:#E9F8EF;

    color:var(--success);

}

.badge-warning{

    background:#FFF5E5;

    color:var(--warning);

}

.badge-danger{

    background:#FDECEC;

    color:var(--danger);

}


/* ==========================================================
   Status kleuren
========================================================== */

.text-primary{

    color:var(--primary);

}

.text-success{

    color:var(--success);

}

.text-warning{

    color:var(--warning);

}

.text-danger{

    color:var(--danger);

}

.text-muted{

    color:var(--text-light);

}


/* ==========================================================
   Helpers
========================================================== */

.hidden{

    display:none !important;

}

.center{

    text-align:center;

}

.right{

    text-align:right;

}

.left{

    text-align:left;

}

.w100{

    width:100%;

}

.mt10{

    margin-top:10px;

}

.mt20{

    margin-top:20px;

}

.mt30{

    margin-top:30px;

}

.mb10{

    margin-bottom:10px;

}

.mb20{

    margin-bottom:20px;

}

.mb30{

    margin-bottom:30px;

}

.p10{

    padding:10px;

}

.p20{

    padding:20px;

}

.round{

    border-radius:var(--radius);

}

.shadow{

    box-shadow:var(--shadow);

}


/* ==========================================================
   Scrollbar
========================================================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

    background:#B8C4D4;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8EA2BF;

}


/* ==========================================================
   Fade animatie
========================================================== */

.fade-in{

    animation:fadeIn .25s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ==========================================================
   Slide animatie
========================================================== */

.slide-up{

    animation:slideUp .30s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1200px){

    .dashboard-grid{

        grid-template-columns:

            repeat(2,1fr);

    }

}

@media (max-width:900px){

    .layout{

        flex-direction:column;

    }

    .sidebar{

        position:relative;

        width:100%;

        height:auto;

    }

    .main{

        margin-left:0;

    }

    .topbar{

        padding:20px;

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

        height:auto;

    }

    .toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .toolbar-right{

        margin-left:0;

    }

    .toolbar input{

        width:100%;

    }

    .form-row{

        grid-template-columns:1fr;

    }

}

@media (max-width:700px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .page{

        padding:20px;

    }

    .table{

        font-size:14px;

    }

    .modal-content{

        width:96%;

    }

}


/* ==========================================================
   Print
========================================================== */

@media print{

    .sidebar,

    .toolbar,

    .modal,

    button{

        display:none !important;

    }

    .main{

        margin:0;

    }

    body{

        background:white;

    }

}


/* ==========================================================
   Build 10.1
========================================================== */