@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Mio v2.3 Poppins + mini grafieken */
*{
    font-family:'Poppins', Arial, sans-serif;
}
body, input, select, button, textarea{
    font-family:'Poppins', Arial, sans-serif;
}

*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f4f6f8;color:#111827;display:flex}
aside{width:245px;min-height:100vh;background:#0b1b34;color:#fff;padding:24px;position:fixed;left:0;top:0;bottom:0}
aside h1{margin:0 0 28px;font-size:26px}
aside a{display:block;color:#dbeafe;text-decoration:none;padding:11px 12px;border-radius:8px;margin-bottom:4px}
aside a:hover{background:#123a70}
.admin-main{margin-left:245px;padding:34px;width:calc(100% - 245px)}
h2{font-size:30px;margin:0 0 22px}
h3{font-size:20px;margin:30px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px}
.card strong{display:block;font-size:34px}
.card span{color:#6b7280}
.notice{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin:0 0 18px}
.notice.ok{border-color:#b7e3a7;background:#f6fff2}
.notice.bad{border-color:#f3b1aa;background:#fff6f4}
pre{white-space:pre-wrap;background:#f1f5f9;border-radius:8px;padding:12px;overflow:auto}
code{background:#eef2f7;padding:2px 6px;border-radius:5px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;margin-bottom:18px}
th,td{text-align:left;padding:13px 15px;border-bottom:1px solid #e5e7eb}
th{background:#f9fafb}
@media(max-width:800px){body{display:block}aside{position:relative;width:auto;min-height:auto}.admin-main{margin-left:0;width:auto;padding:20px}}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-head h2{margin:0 0 6px}.page-head p{margin:0;color:#6b7280}
.button,.small-button{display:inline-flex;align-items:center;justify-content:center;background:#4d9c29;color:#fff;text-decoration:none;border:0;border-radius:8px;font-weight:700;cursor:pointer}
.button{min-height:42px;padding:0 18px}.button.secondary{background:#10233f}.small-button{min-height:32px;padding:0 12px;font-size:13px}
.form-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px;max-width:680px}
.form-card label{display:block;font-weight:700;margin-bottom:18px}.form-card input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #d1d5db;border-radius:8px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:24px}
.step{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:20px}
.step>strong{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#e7f6df;color:#4d9c29;border-radius:50%;margin-bottom:12px}.step h3{margin:0 0 10px}.step label{display:block;font-weight:700;margin:12px 0 6px}
.copy-row{display:flex;gap:8px}.copy-row input{flex:1;padding:11px;border:1px solid #d1d5db;border-radius:8px}.copy-row button{border:0;background:#10233f;color:#fff;border-radius:8px;padding:0 12px;font-weight:700;cursor:pointer}
@media(max-width:800px){body{display:block}aside{position:relative;width:auto;min-height:auto}.admin-main{margin-left:0;width:auto;padding:20px}.page-head{display:block}}

.mini-form label{display:block;font-weight:700;margin:10px 0 6px}
.mini-form input{width:100%;padding:11px;border:1px solid #d1d5db;border-radius:8px;margin-bottom:10px}

.search-card{display:flex;align-items:end;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin-bottom:18px}
.search-card label{display:block;font-weight:700}
.search-card input,.search-card select{display:block;margin-top:6px;padding:11px;border:1px solid #d1d5db;border-radius:8px;min-width:220px}
.search-card input{min-width:420px}
.pagination{display:flex;gap:10px;align-items:center;margin:18px 0}
.notice.bad{border-color:#f3b1aa;background:#fff6f4;color:#9f1d16}
@media(max-width:800px){.search-card{display:block}.search-card input,.search-card select{min-width:0;width:100%;margin-bottom:12px}}

.form-card textarea{
    display:block;
    width:100%;
    margin-top:8px;
    padding:12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-family:Arial,sans-serif;
    min-height:130px;
}

.button-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}
.button.secondary{
    background:#10233f;
}
.button.secondary:hover{
    background:#17395f;
}

.button.danger,
button.danger{
    background:#c0392b!important;
    color:#fff!important;
    border:0;
}
.button.danger:hover,
button.danger:hover{
    background:#962d22!important;
}
.notice.ok{
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    color:#14532d;
    border-radius:12px;
    padding:14px 16px;
    margin:16px 0;
}



/* Mio v0.6 look-overrides gebaseerd op aangeleverde beheer.css */
body{
    background:#f4f7fb;
    color:#00173d;
}
aside{
    background:#fff;
    color:#00173d;
    border-right:1px solid #dfe7f2;
    box-shadow:0 0 28px rgba(15,31,58,.05);
}
.logo-wrap{
    padding:4px 6px 18px;
    margin-bottom:18px;
    border-bottom:1px solid #e7edf5;
}
.logo-wrap img{
    display:block;
    width:145px;
    height:auto;
}
aside a{
    color:#00173d;
    border:1px solid #dce5f2;
    background:#fff;
    margin-bottom:10px;
}
aside a:hover{
    background:#eef5ff;
    border-color:#bcd2f2;
}
.admin-main{
    background:#f4f7fb;
}
.topbar{
    background:#fff;
    border:1px solid #dce5f2;
    border-radius:14px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.eyebrow{
    color:#42618f;
    font-weight:700;
    font-size:13px;
}
.page-head{
    align-items:center;
}
.page-head h2{
    color:#2f5fb3;
    font-size:30px;
}
.cards{
    grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
}
.card{
    border-radius:16px;
    border-color:#dce5f2;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.card span{
    color:#2f5fb3;
    font-weight:700;
}
.card strong{
    color:#00173d;
}
.card small{
    color:#42618f;
}
.table-card,
.form-card,
.notice,
table{
    border:1px solid #dce5f2;
    border-radius:16px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.table-card{
    background:#fff;
    padding:22px;
    margin-bottom:22px;
}
.table-card table{
    box-shadow:none;
    border-radius:12px;
}
.form-card{
    margin-bottom:24px;
}
.form-card.wide{
    max-width:none;
}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr auto;
    gap:14px;
    align-items:end;
}
.form-card select,
select{
    display:block;
    width:100%;
    margin-top:8px;
    padding:12px;
    border:1px solid #d1d9e8;
    border-radius:8px;
    background:#fff;
}
.button,.small-button{
    background:#71c248;
    border-radius:9px;
}
.button.secondary,.small-button.secondary{
    background:#3b61ac;
}
.small-button.ghost{
    background:#fff;
    border:1px solid #d1d9e8;
    color:#00173d;
}
.inline-form{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:8px;
}
.inline-form select{
    margin-top:0;
    min-width:230px;
    padding:9px;
}
.muted{
    color:#7a8aa5;
}
.pill{
    display:inline-block;
    padding:4px 9px;
    border-radius:999px;
    background:#eef2f7;
    font-weight:700;
    font-size:12px;
}
.pill.ok{
    background:#edf9e9;
    color:#2f7b17;
}
.notice.bad{
    color:#9f1d16;
}
@media(max-width:900px){
    .form-row{display:block}
    .form-row label{margin-bottom:12px}
    .topbar{display:block}
}



/* Mio v0.7 polish */
:root{
    --mio-blue:#3B61AC;
    --mio-green:#71C248;
    --mio-orange:#F69220;
    --mio-ink:#00173d;
    --mio-muted:#486081;
    --mio-line:#dce6f3;
    --mio-bg:#f4f7fb;
    --mio-card:#ffffff;
}

body{
    background:
        radial-gradient(circle at top right, rgba(59,97,172,.07), transparent 32%),
        var(--mio-bg);
    color:var(--mio-ink);
}

aside{
    width:250px;
    padding:26px 18px;
    background:rgba(255,255,255,.96);
}

.logo-wrap{
    padding:0 6px 24px;
    margin-bottom:18px;
}

.logo-wrap img{
    width:150px;
}

aside nav a{
    min-height:43px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-radius:10px;
    border:1px solid var(--mio-line);
    font-weight:600;
    transition:.15s ease;
}

aside nav a:first-child{
    background:#eef5ff;
    border-color:#bfd3f2;
    color:var(--mio-blue);
}

aside nav a:hover{
    transform:translateX(2px);
    background:#f6f9ff;
}

.admin-main{
    margin-left:250px;
    width:calc(100% - 250px);
    padding:34px;
}

.topbar{
    min-height:62px;
    padding:13px 18px;
    border-radius:16px;
    border-color:var(--mio-line);
}

.topbar strong{
    color:var(--mio-blue);
}

.small-button.ghost{
    min-height:38px;
    border-radius:10px;
    padding:0 16px;
    font-weight:700;
}

.page-head{
    margin:24px 0 20px;
}

.eyebrow{
    display:block;
    margin-bottom:3px;
    color:var(--mio-muted);
}

.page-head h2{
    margin:0 0 5px;
    font-size:34px;
    line-height:1;
    color:var(--mio-blue);
    letter-spacing:-.8px;
}

.page-head p{
    color:var(--mio-muted);
    font-size:15px;
}

.cards{
    gap:16px;
    margin-bottom:24px;
}

.card{
    min-height:124px;
    padding:22px;
    border-radius:18px;
    position:relative;
    overflow:hidden;
}

.card:after{
    content:"";
    position:absolute;
    right:-22px;
    bottom:-26px;
    width:88px;
    height:88px;
    border-radius:50%;
    background:rgba(59,97,172,.06);
}

.card:nth-child(2):after{background:rgba(113,194,72,.10)}
.card:nth-child(5):after{background:rgba(246,146,32,.10)}

.card span{
    display:block;
    margin-bottom:7px;
    color:var(--mio-blue);
    font-size:14px;
}

.card strong{
    font-size:38px;
    line-height:1;
    letter-spacing:-1px;
}

.card small{
    display:block;
    margin-top:9px;
    color:var(--mio-muted);
}

.notice{
    border-radius:16px;
    padding:16px 18px;
    margin-bottom:22px;
    border-color:var(--mio-line);
}

.notice strong{
    color:var(--mio-ink);
}

code{
    background:#eef3fa;
    color:var(--mio-blue);
    border:1px solid #dce6f3;
}

.table-card{
    border-radius:18px;
    padding:24px;
}

.table-card h3,
.form-card h3,
h3{
    margin:0 0 16px;
    color:var(--mio-ink);
    font-size:22px;
}

table{
    border:1px solid var(--mio-line);
    border-radius:14px;
    overflow:hidden;
}

th{
    background:#f7faff;
    color:var(--mio-ink);
    font-size:14px;
    padding:14px 16px;
}

td{
    padding:16px;
    vertical-align:middle;
}

td strong{
    color:var(--mio-ink);
}

td small{
    font-size:12px;
    color:var(--mio-muted);
    line-height:1.5;
}

.pill{
    padding:5px 10px;
    font-size:12px;
    border-radius:999px;
}

.pill.ok{
    background:#edf9e9;
    color:#2e7d1c;
}

.inline-form{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 9px;
}

.inline-form select{
    min-width:265px;
    border-radius:10px;
    border-color:#cdd9eb;
    height:39px;
}

button,
.button,
.small-button{
    border-radius:10px;
    font-weight:700;
    box-shadow:none;
}

.small-button{
    min-height:36px;
    padding:0 14px;
}

.small-button.secondary,
.button.secondary{
    background:var(--mio-blue);
}

button:hover,
.button:hover,
.small-button:hover{
    filter:brightness(.96);
}

.form-card{
    max-width:none;
    border-radius:18px;
    padding:24px;
}

.form-card input,
.form-card select,
input,
select{
    border-radius:10px;
    border-color:#cdd9eb;
    min-height:42px;
}

.form-card label{
    color:var(--mio-ink);
}

.form-row{
    grid-template-columns:1fr 1fr 1fr auto;
}

.muted{
    color:#8291a8;
}

@media(max-width:800px){
    aside{
        width:auto;
        position:relative;
    }
    .admin-main{
        margin-left:0;
        width:auto;
        padding:20px;
    }
}


/* Mio v0.8 clickthrough */
.row-link{
    color:var(--mio-blue,#3B61AC);
    text-decoration:none;
    font-weight:700;
}
.row-link:hover{
    text-decoration:underline;
}
table tr:hover td{
    background:#fbfdff;
}


/* Mio v0.9 icon buttons */
.icon-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    white-space:nowrap;
}

.icon-button .icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    font-size:13px;
    line-height:1;
    font-weight:900;
}

.small-button.secondary.icon-button .icon{
    background:rgba(255,255,255,.18);
}

.inline-form{
    align-items:center;
}

.inline-form select{
    height:42px;
}

td:last-child{
    min-width:390px;
}

@media(max-width:900px){
    td:last-child{
        min-width:0;
    }
    .inline-form{
        flex-wrap:wrap;
    }
    .inline-form select{
        min-width:100%;
    }
}


/* Mio v1.0 - alleen knopjes aangepast naar icon-only */
.icon-only{
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    border:0;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    color:#fff;
}

.icon-only.success{
    background:#71C248;
}

.icon-only.secondary{
    background:#3B61AC;
}

.icon-only:hover{
    filter:brightness(.95);
}

.inline-form{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 6px 0 0;
    vertical-align:middle;
}

.inline-form select{
    height:40px;
}

td:last-child{
    min-width:340px;
}


/* Mio v1.1 lokale monitoring */
.monitor-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-bottom:24px;
}
.monitor-card{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.monitor-card.primary{
    border-left:5px solid #3B61AC;
}
.monitor-card span{
    display:block;
    color:#3B61AC;
    font-weight:700;
    font-size:14px;
    margin-bottom:8px;
}
.monitor-card strong{
    display:block;
    font-size:28px;
    line-height:1.1;
    color:#00173d;
}
.monitor-card small{
    display:block;
    color:#486081;
    margin-top:8px;
}
.meter{
    height:10px;
    background:#edf2f8;
    border-radius:999px;
    overflow:hidden;
    margin:8px 0 8px;
}
.meter span{
    display:block;
    height:100%;
    background:#71C248;
    border-radius:999px;
}
.table-card.compact table{
    margin-bottom:0;
}
.pill.bad{
    background:#fff1f0;
    color:#a33127;
}


/* Mio v1.2 - topbar verwijderd */
.page-head{
    margin-top:0;
}
.admin-main{
    padding-top:28px;
}


/* Mio v1.3 monitoring page */
.table-card.compact{
    margin-bottom:22px;
}


/* Mio v1.4 alerts */
.alert-summary{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:16px 18px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.alert-summary strong{
    display:block;
    color:#00173d;
    margin-bottom:5px;
}
.alert-status{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 11px;
    border-radius:999px;
    font-weight:700;
    font-size:13px;
}
.alert-status.ok{
    background:#edf9e9;
    color:#2e7d1c;
}
.alert-status.warn{
    background:#fff8e5;
    color:#8a5a00;
}
.alert-status.bad{
    background:#fff1f0;
    color:#a33127;
}
.alerts{
    display:grid;
    gap:12px;
    margin-bottom:20px;
}
.alert{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:14px;
    padding:14px 16px;
}
.alert strong{
    display:block;
    margin-bottom:4px;
}
.alert span{
    color:#486081;
}
.alert.warn{
    border-color:#f4d27a;
    background:#fffaf0;
}
.alert.bad{
    border-color:#f0aaaa;
    background:#fff6f4;
}


/* Mio v1.6 - IP alleen op Monitoring + subtielere monitoring typografie */
.monitor-card strong{
    font-size:24px;
    font-weight:700;
    letter-spacing:-0.3px;
}

.monitor-card.primary strong{
    font-size:23px;
    font-weight:700;
}

.monitor-card span{
    font-size:13px;
}

.monitor-card small{
    font-size:13px;
    line-height:1.45;
}

.monitor-card{
    padding:18px;
}


/* Mio v1.8 smooth navigation */
aside nav a.active{
    background:#eef5ff;
    border-color:#bfd3f2;
    color:#3B61AC;
}
.admin-main{
    transition:opacity .12s ease;
}
.admin-main.is-loading{
    opacity:.55;
}


/* Mio v2.1 complete monitoring */
.meter.warn-meter span{
    background:#F69220;
}
.meter.bad-meter span{
    background:#c0392b;
}
.table-card.compact th{
    width:auto;
}


/* Mio v2.2 monitoring tabs */
.tabs{
    margin-top:18px;
}
.tab-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px;
}
.tab-nav button{
    background:#fff;
    color:#00173d;
    border:1px solid #dce6f3;
    border-radius:10px;
    min-height:40px;
    padding:0 14px;
    font-weight:700;
    cursor:pointer;
}
.tab-nav button.active{
    background:#3B61AC;
    color:#fff;
    border-color:#3B61AC;
}
.tab-panel{
    display:none;
}
.tab-panel.active{
    display:block;
}


.mini-charts{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:16px;
    margin:0 0 20px;
}
.chart-card{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.chart-card span{
    display:block;
    color:#3B61AC;
    font-weight:700;
    font-size:13px;
    margin-bottom:6px;
}
.chart-card strong{
    display:block;
    font-size:26px;
    line-height:1.1;
    color:#00173d;
    font-weight:700;
    margin-bottom:12px;
}
.chart-card small{
    display:block;
    color:#486081;
    font-size:12px;
    margin-top:10px;
}
.chart-line{
    height:9px;
    background:#edf2f8;
    border-radius:999px;
    overflow:hidden;
}
.chart-line i{
    display:block;
    height:100%;
    background:#71C248;
    border-radius:999px;
}
.chart-bars{
    height:44px;
    display:flex;
    align-items:end;
    gap:5px;
}
.chart-bars i{
    display:block;
    width:12px;
    background:#3B61AC;
    border-radius:6px 6px 0 0;
    opacity:.9;
}





/* Mio v2.6 - typografie hiërarchie */
body{
    font-size:14px;
    font-weight:400;
    line-height:1.5;
}

.eyebrow{
    font-size:12px !important;
    font-weight:600 !important;
    color:#486081;
    margin-bottom:2px;
}

.page-head h2{
    font-size:28px !important;
    line-height:1.15;
    font-weight:600 !important;
    color:#3B61AC;
    letter-spacing:-0.4px;
    margin:0 0 4px;
}

.page-head p{
    font-size:14px;
    font-weight:400;
    color:#243f66;
}

.table-card h3,
.form-card h3,
h3{
    font-size:20px !important;
    font-weight:600 !important;
    line-height:1.25;
    color:#00173d;
}

.card strong,
.monitor-card strong,
.chart-card strong{
    font-size:24px !important;
    font-weight:600 !important;
    line-height:1.15;
}

.card span,
.monitor-card span,
.chart-card span{
    font-size:13px;
    font-weight:600;
}

th{
    font-size:13px;
    font-weight:600;
}

td{
    font-size:14px;
    font-weight:400;
}

td strong,
.card small,
.monitor-card small,
.chart-card small{
    font-weight:400;
}

aside nav a{
    font-size:14px;
    font-weight:600;
}

button,
.button,
.small-button,
.icon-only{
    font-weight:600;
}


/* Mio v2.7 monitoring strak trekken */
.alert-summary{
    margin:18px 0 26px;
    padding:18px 20px;
}

.mini-charts{
    gap:22px;
    margin:0 0 32px;
}

.chart-card{
    min-height:170px;
    padding:22px;
}

.chart-card strong{
    margin-bottom:16px;
}

.chart-line{
    height:10px;
    margin:12px 0 12px;
}

.chart-bars{
    height:54px;
    margin-top:10px;
}

.tabs{
    margin-top:8px;
}

.tab-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 24px;
    padding:8px;
    background:#eef3fa;
    border:1px solid #dce6f3;
    border-radius:16px;
}

.tab-nav button{
    min-height:42px;
    padding:0 16px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#243f66;
    font-size:13px;
    font-weight:600;
    box-shadow:none;
}

.tab-nav button:hover{
    background:#fff;
}

.tab-nav button.active{
    background:#3B61AC;
    color:#fff;
    box-shadow:0 8px 18px rgba(59,97,172,.22);
}

.tab-panel{
    margin-top:0;
}

.tab-panel .table-card{
    margin-top:0;
}

.monitor-grid{
    gap:22px;
    margin-bottom:30px;
}

.monitor-card{
    padding:22px;
    min-height:145px;
}

.table-card{
    padding:24px;
}

.table-card.compact{
    padding:24px;
}

.table-card h3{
    margin-bottom:20px;
}

@media(max-width:900px){
    .mini-charts{
        gap:14px;
    }
    .tab-nav{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .tab-nav button{
        width:100%;
    }
}


/* Mio v2.8 - formulieren klanten/resellers strak trekken */
.form-card.wide{
    max-width:none;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr auto;
    gap:14px;
    align-items:end;
}

.reseller-form-row{
    grid-template-columns:1fr 1fr auto;
}

.form-row label{
    margin-bottom:0;
}

.form-row .button,
.reseller-form-row .button{
    height:46px;
    align-self:end;
    margin-top:0;
    white-space:nowrap;
}

.form-card input,
.form-card select{
    height:46px;
}

@media(max-width:900px){
    .form-row,
    .reseller-form-row{
        display:block;
    }

    .form-row label,
    .reseller-form-row label{
        margin-bottom:14px;
    }

    .form-row .button,
    .reseller-form-row .button{
        width:100%;
    }
}


/* Mio v2.9 detailpagina's */
.row-link{
    color:#3B61AC;
    text-decoration:none;
    font-weight:600;
}
.row-link:hover{
    text-decoration:underline;
}


/* Mio v3.0 login */
.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at top right, rgba(59,97,172,.09), transparent 34%),
        #f4f7fb;
    padding:24px;
}

.login-card{
    width:100%;
    max-width:420px;
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:20px;
    padding:34px;
    box-shadow:0 18px 45px rgba(15,31,58,.08);
}

.login-logo{
    margin-bottom:22px;
}

.login-logo img{
    width:150px;
    height:auto;
}

.login-card h1{
    font-size:28px;
    line-height:1.1;
    font-weight:600;
    margin:0 0 8px;
    color:#3B61AC;
}

.login-card p{
    margin:0 0 22px;
    color:#486081;
}

.login-card label{
    display:block;
    margin-bottom:16px;
    font-weight:600;
}

.login-card input{
    display:block;
    width:100%;
    height:46px;
    margin-top:7px;
    border:1px solid #cdd9eb;
    border-radius:10px;
    padding:0 12px;
}

.login-card .button{
    width:100%;
    height:46px;
    margin-top:4px;
}

.login-help{
    display:block;
    margin-top:18px;
    color:#8291a8;
}


/* Mio v3.1 install/stability */
.install-card{
    max-width:620px;
}
.install-card table{
    margin:18px 0;
}
.install-card .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}
.notice.ok{
    background:#f0fdf4;
    border-color:#bbf7d0;
    color:#14532d;
}


/* Mio v3.2 WeFact */
.settings-form{
    display:grid;
    gap:16px;
}
.settings-form label{
    display:block;
}
.tabs{
    margin-top:18px;
}
.tab-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 20px;
    padding:8px;
    background:#eef3fa;
    border:1px solid #dce6f3;
    border-radius:16px;
}
.tab-nav button{
    min-height:40px;
    padding:0 14px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#243f66;
    font-size:13px;
    font-weight:600;
}
.tab-nav button.active{
    background:#3B61AC;
    color:#fff;
}
.tab-panel{display:none}
.tab-panel.active{display:block}


/* Mio v3.3 klant bewerken */
.button.secondary{
    text-decoration:none;
}
.page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}
@media(max-width:900px){
    .page-head{
        display:block;
    }
    .page-head > div:last-child{
        margin-top:14px;
    }
}


/* Mio v3.7 WeFact openstaand */
.card span{
    white-space:nowrap;
}


/* Mio v3.7.3 definitieve klantenlijst */
table th:last-child,
table td:last-child{
    white-space:nowrap;
}


/* Mio v3.8 domain backup */
.button-row{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}
.notice.ok{
    background:#f0fdf4;
    border-color:#bbf7d0;
    color:#14532d;
}


/* Mio v3.9 domain tabs */
.tabs{
    margin-top:22px;
}
.tab-nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 20px;
    padding:8px;
    background:#eef3fa;
    border:1px solid #dce6f3;
    border-radius:16px;
}
.tab-nav button{
    min-height:40px;
    padding:0 14px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#243f66;
    font-size:13px;
    font-weight:600;
}
.tab-nav button.active{
    background:#3B61AC;
    color:#fff;
}
.tab-panel{display:none}
.tab-panel.active{display:block}


/* Mio v4.0 async backup */
.backup-status{
    margin:0 0 16px;
    padding:14px 16px;
    border:1px solid #dce6f3;
    border-radius:14px;
    background:#f7faff;
}
.backup-status.running{
    border-color:#f4d27a;
    background:#fffaf0;
}
.backup-status.done{
    border-color:#bbf7d0;
    background:#f0fdf4;
}
.backup-status.error{
    border-color:#f0aaaa;
    background:#fff6f4;
}
button[disabled]{
    opacity:.55;
    cursor:not-allowed;
}


/* Mio v4.1 backup progress */
.backup-status-line{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:space-between;
    margin-bottom:10px;
}
.backup-percent{
    font-weight:600;
    color:#3B61AC;
}
.backup-progress{
    height:12px;
    background:#e8eef7;
    border-radius:999px;
    overflow:hidden;
    margin-bottom:8px;
}
.backup-progress span{
    display:block;
    height:100%;
    width:0;
    background:#71C248;
    border-radius:999px;
    transition:width .25s ease;
}
.backup-status.running .backup-progress span{
    background:#F69220;
}
.backup-status.error .backup-progress span{
    background:#c0392b;
}


/* Mio v4.3 backup cancel */
.backup-actions form{
    display:inline-flex;
    margin:0;
}
.button.secondary{
    background:#3B61AC;
    color:#fff;
}
.backup-status.cancelled{
    border-color:#dce6f3;
    background:#f7faff;
}


/* Mio v4.4 beheerpagina */
.action-bar{
    display:flex;
    gap:10px;
    margin:20px 0;
    flex-wrap:wrap;
}
.action-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:12px;
    background:#eef3fa;
    border:1px solid #dce6f3;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}
.action-btn:hover{
    background:#e4ebf7;
}


/* Mio v4.5 breadcrumbs */
.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 18px;
    color:#486081;
    font-size:13px;
    line-height:1.4;
}

.breadcrumb a{
    color:#3B61AC;
    text-decoration:none;
    font-weight:500;
}

.breadcrumb a:hover{
    text-decoration:underline;
}

.breadcrumb span{
    color:#486081;
}

.breadcrumb .breadcrumb-sep{
    color:#9aa8bb;
}

.page-head{
    margin-top:0;
}


/* Mio v4.6 domeinen overzicht */
.domain-toolbar{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:18px;
    margin:22px 0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.domain-toolbar strong{
    display:block;
    color:#00173d;
    font-weight:600;
}
.domain-toolbar span{
    display:block;
    color:#486081;
    font-size:13px;
}
.domain-toolbar input{
    width:min(420px,100%);
    height:44px;
    border:1px solid #cdd9eb;
    border-radius:12px;
    padding:0 14px;
}
.domain-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px;
    margin-bottom:26px;
}
.domain-tile{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.domain-tile-head{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-bottom:16px;
}
.domain-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef5ff;
    color:#3B61AC;
    font-weight:600;
}
.domain-title{
    color:#00173d;
    font-weight:600;
    text-decoration:none;
}
.domain-title:hover{
    text-decoration:underline;
}
.domain-tile small{
    color:#486081;
    font-size:12px;
}
.domain-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-top:1px solid #edf2f8;
}
.domain-meta span{
    color:#486081;
    font-size:12px;
}
.domain-meta strong{
    color:#00173d;
    font-size:13px;
    text-align:right;
}
.domain-actions{
    display:flex;
    gap:8px;
    margin-top:14px;
}
.domain-actions a{
    flex:1;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#f7faff;
    border:1px solid #dce6f3;
    border-radius:12px;
    color:#243f66;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}
.domain-actions a:hover{
    background:#eef5ff;
    color:#3B61AC;
}
.compact-table td,
.compact-table th{
    padding:13px 14px;
}
@media(max-width:900px){
    .domain-toolbar{
        display:block;
    }
    .domain-toolbar input{
        margin-top:14px;
        width:100%;
    }
}


/* Mio v4.7 - panelbrede overzichtsblokken */
.panel-sections{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:18px;
    margin:22px 0;
}

.panel-section{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}

.panel-section h3{
    margin:0 0 14px;
    font-size:18px !important;
    font-weight:600 !important;
    color:#00173d;
}

.panel-tools{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.panel-tool{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:62px;
    padding:12px;
    border:1px solid #dce6f3;
    border-radius:14px;
    background:#f7faff;
    color:#00173d;
    text-decoration:none;
}

.panel-tool:hover{
    background:#eef5ff;
    border-color:#bfd3f2;
}

.panel-tool-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#fff;
    border:1px solid #dce6f3;
    font-size:18px;
    flex:0 0 auto;
}

.panel-tool strong{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#00173d;
}

.panel-tool small{
    display:block;
    color:#486081;
    font-size:12px;
    line-height:1.35;
    margin-top:2px;
}

.panel-tool.disabled{
    opacity:.55;
    cursor:not-allowed;
}

.panel-tool.disabled:hover{
    background:#f7faff;
    border-color:#dce6f3;
}

.quick-panel{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:18px;
    margin:20px 0;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}

.quick-panel h3{
    margin:0 0 12px;
    font-size:18px !important;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px;
}

.quick-tile{
    display:flex;
    gap:12px;
    align-items:center;
    min-height:70px;
    padding:14px;
    border:1px solid #dce6f3;
    border-radius:14px;
    background:#f7faff;
    text-decoration:none;
    color:#00173d;
}

.quick-tile:hover{
    background:#eef5ff;
    border-color:#bfd3f2;
}

.quick-tile .panel-tool-icon{
    width:38px;
    height:38px;
}

.quick-tile strong{
    font-size:14px;
    font-weight:600;
}

.quick-tile small{
    display:block;
    font-size:12px;
    color:#486081;
    margin-top:2px;
}


/* Mio v4.8 cache legen */
.panel-tool-form{
    margin:0;
}

.panel-tool-form .panel-tool{
    width:100%;
    text-align:left;
    cursor:pointer;
    font-family:inherit;
}

.panel-tool-form button.panel-tool{
    border:1px solid #dce6f3;
}


/* v4.9 Dashboard strak */
.dashboard-actions{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;
    margin:20px 0;
}

.dashboard-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:16px;
    border-radius:14px;
    border:1px solid #dce6f3;
    background:#f7faff;
    text-decoration:none;
    color:#00173d;
}

.dashboard-action .icon{
    font-size:22px;
    margin-bottom:6px;
}

.dashboard-action strong{
    font-size:13px;
    font-weight:600;
}

.dashboard-status{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
    margin:20px 0;
}

.status-card{
    padding:12px;
    border-radius:12px;
    background:#fff;
    border:1px solid #e3ebf5;
}

.status-card span{
    font-size:12px;
    color:#486081;
}

.status-card strong{
    font-size:16px;
    font-weight:600;
    color:#00173d;
}

.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:10px;
    margin-top:20px;
}

.stat-box{
    text-align:center;
    padding:14px;
    border-radius:12px;
    background:#fff;
    border:1px solid #e3ebf5;
}

.stat-box strong{
    display:block;
    font-size:18px;
    font-weight:600;
}

.stat-box span{
    font-size:12px;
    color:#486081;
}


/* Mio v4.9.1 dashboard data-fix */
.status-card,
.stat-box{
    text-decoration:none;
    color:inherit;
}
.status-card small{
    display:block;
    margin-top:4px;
    font-size:12px;
    color:#486081;
}
.status-card:hover,
.stat-box:hover{
    background:#f7faff;
    border-color:#bfd3f2;
}


/* Mio v5.0.2 consistente headers */
.page-head-actions{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.page-head-actions h2{
    margin-top:0;
}

.page-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    padding-top:4px;
}

.page-actions .button,
.page-actions .small-button{
    white-space:nowrap;
}

@media(max-width:800px){
    .page-head-actions{
        display:block;
    }
    .page-actions{
        margin-top:14px;
    }
}


/* Backup throttle + verwijderen */
.backup-row-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.backup-row-actions form{
    margin:0;
}
.small-button.danger{
    background:#fff5f5;
    color:#b42318;
    border:1px solid #f3b4ad;
}
.small-button.danger:hover{
    background:#ffe7e5;
}


/* Plesk-achtige bestandsbeheerder */
.fm-layout{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:22px;
    align-items:start;
}

.fm-tree{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:16px;
    padding:14px;
    max-height:70vh;
    overflow:auto;
}

.fm-tree a{
    display:block;
    color:#00173d;
    text-decoration:none;
    padding:7px 8px;
    border-radius:8px;
    font-size:13px;
}

.fm-tree a:hover,
.fm-tree a.active{
    background:#eef5ff;
    color:#3B61AC;
}

.fm-tree ul{
    list-style:none;
    margin:0;
    padding-left:14px;
}

.fm-root{
    font-weight:600;
    margin-bottom:8px;
}

.fm-main{
    min-width:0;
}

.fm-toolbar{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:16px;
    padding:14px;
    margin-bottom:12px;
    display:flex;
    gap:10px;
    align-items:center;
}

.fm-upload{
    margin:0;
}

.fm-search{
    margin-left:auto;
}

.fm-search input{
    min-width:300px;
    height:40px;
    border:1px solid #cdd9eb;
    border-radius:10px;
    padding:0 12px;
}

.fm-path{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin:12px 0;
    color:#486081;
    font-size:13px;
}

.fm-path a{
    color:#3B61AC;
    text-decoration:none;
}

.fm-table{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:16px;
    overflow:hidden;
}

.fm-table th,
.fm-table td{
    padding:12px 14px;
    vertical-align:middle;
}

.fm-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.fm-actions form{
    margin:0;
}

.small-button.danger{
    background:#fff5f5;
    color:#b42318;
    border:1px solid #f3b4ad;
}

.small-button.danger:hover{
    background:#ffe7e5;
}

@media(max-width:900px){
    .fm-layout{
        grid-template-columns:1fr;
    }
    .fm-search{
        margin-left:0;
        width:100%;
    }
    .fm-search input{
        width:100%;
        min-width:0;
    }
}


/* Filemanager UI polish */
.fm-layout{
    grid-template-columns:250px minmax(0,1fr) !important;
    gap:18px !important;
}

.fm-tree{
    padding:10px !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 8px 22px rgba(15,31,58,.035);
}

.fm-tree ul{
    list-style:none !important;
    margin:0 !important;
    padding-left:10px !important;
}

.fm-tree li{
    list-style:none !important;
    margin:3px 0 !important;
    padding:0 !important;
}

.fm-tree li::marker{
    content:"" !important;
}

.fm-tree a,
.fm-root{
    min-height:34px;
    display:flex !important;
    align-items:center;
    gap:7px;
    padding:7px 10px !important;
    border-radius:10px !important;
    color:#00173d !important;
    font-size:13px !important;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.fm-tree a:hover,
.fm-tree a.active{
    background:#eef5ff !important;
    color:#3B61AC !important;
}

.fm-main{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:16px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}

.fm-toolbar{
    border:0 !important;
    background:transparent !important;
    padding:0 0 14px !important;
    margin:0 0 10px !important;
    border-bottom:1px solid #edf2f8 !important;
    border-radius:0 !important;
}

.fm-upload-button{
    background:#3B61AC !important;
    color:#fff !important;
    border-color:#3B61AC !important;
    min-height:38px;
    display:inline-flex;
    align-items:center;
}

.fm-toolbar .small-button.ghost{
    min-height:38px;
    display:inline-flex;
    align-items:center;
}

.fm-search input{
    height:38px !important;
    min-width:330px !important;
    border-radius:10px !important;
    background:#fff !important;
}

.fm-path{
    padding:0 0 12px;
    margin:0 0 4px !important;
    border-bottom:1px solid #edf2f8;
}

.fm-path a{
    font-weight:500;
}

.fm-table{
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    width:100%;
}

.fm-table thead th{
    background:#f6f9fd !important;
    color:#00173d !important;
    font-size:12px !important;
    font-weight:600 !important;
    padding:11px 12px !important;
    border-bottom:1px solid #dce6f3 !important;
}

.fm-table tbody td{
    padding:10px 12px !important;
    border-bottom:1px solid #edf2f8 !important;
    font-size:13px !important;
    vertical-align:middle !important;
}

.fm-table tbody tr:hover{
    background:#f9fbff;
}

.fm-name-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#00173d !important;
    text-decoration:none;
}

.fm-name-link:hover{
    color:#3B61AC !important;
    text-decoration:underline;
}

.fm-table code{
    display:inline-block;
    padding:3px 7px;
    border-radius:7px;
    background:#eef5ff;
    color:#3B61AC;
    font-size:12px;
}

.fm-actions{
    justify-content:flex-start;
}

.fm-actions .small-button,
.backup-row-actions .small-button{
    min-height:32px;
    padding:7px 10px;
    font-size:12px;
}

.small-button.danger{
    background:#fff !important;
    color:#b42318 !important;
    border:1px solid #f0b8b0 !important;
}

.small-button.danger:hover{
    background:#fff2f0 !important;
}

.page-head .eyebrow + h2{
    line-height:1.15;
}

@media(max-width:1000px){
    .fm-layout{
        grid-template-columns:1fr !important;
    }
    .fm-tree{
        max-height:260px !important;
    }
    .fm-toolbar{
        flex-wrap:wrap;
    }
    .fm-search{
        margin-left:0 !important;
        width:100%;
    }
    .fm-search input{
        width:100%;
        min-width:0 !important;
    }
}


/* Filemanager UI v2 - strakker en breder */
.fm-layout{
    display:grid !important;
    grid-template-columns:220px minmax(0,1fr) !important;
    gap:22px !important;
    width:100% !important;
}

.fm-tree{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 10px 0 0 !important;
    border-right:1px solid #dce6f3 !important;
    border-radius:0 !important;
    max-height:calc(100vh - 170px) !important;
}

.fm-tree a,
.fm-root{
    min-height:30px !important;
    padding:5px 8px !important;
    border-radius:8px !important;
    background:transparent !important;
    border:0 !important;
    font-size:13px !important;
}

.fm-tree a:hover,
.fm-tree a.active{
    background:#eef5ff !important;
}

.fm-tree ul{
    padding-left:14px !important;
}

.fm-main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    background:#fff !important;
    border:1px solid #dce6f3 !important;
    border-radius:18px !important;
    padding:16px !important;
    box-sizing:border-box !important;
}

.fm-toolbar{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    box-sizing:border-box !important;
}

.fm-search{
    margin-left:auto !important;
    flex:0 0 360px !important;
}

.fm-search input{
    width:100% !important;
    min-width:0 !important;
}

.fm-table{
    width:100% !important;
    table-layout:auto !important;
}

.fm-table th:first-child,
.fm-table td:first-child{
    width:38%;
}

.fm-table th:nth-child(2),
.fm-table td:nth-child(2){
    width:150px;
}

.fm-table th:nth-child(3),
.fm-table td:nth-child(3){
    width:110px;
}

.fm-table th:nth-child(4),
.fm-table td:nth-child(4){
    width:90px;
}

.fm-table th:last-child,
.fm-table td:last-child{
    width:180px;
}

.fm-table tbody td{
    height:40px !important;
}

.fm-table .small-button{
    border-radius:9px !important;
}

.fm-actions{
    display:flex !important;
    gap:8px !important;
    justify-content:flex-start !important;
    white-space:nowrap !important;
}

@media(max-width:1100px){
    .fm-layout{
        grid-template-columns:1fr !important;
    }
    .fm-tree{
        border-right:0 !important;
        border-bottom:1px solid #dce6f3 !important;
        padding:0 0 12px !important;
    }
    .fm-toolbar{
        flex-wrap:wrap !important;
    }
    .fm-search{
        flex:1 1 100% !important;
        margin-left:0 !important;
    }
}


/* Filemanager v2.1 full width + uitklappen + chmod */
body.filemanager-page .sidebar{
    display:none !important;
}

body.filemanager-page .content,
body.filemanager-page main,
body.filemanager-page .main,
body.filemanager-page #content{
    margin-left:0 !important;
    width:100% !important;
    max-width:none !important;
}

body.filemanager-page{
    overflow-x:hidden;
}

body.filemanager-page .page-wrap,
body.filemanager-page .container{
    max-width:none !important;
}

body.filemanager-page .content{
    padding-left:28px !important;
    padding-right:28px !important;
}

.filemanager-page .fm-layout{
    grid-template-columns:270px minmax(0,1fr) !important;
    width:100% !important;
    max-width:none !important;
}

.filemanager-page .fm-main{
    width:100% !important;
    max-width:none !important;
}

.filemanager-page .fm-table{
    width:100% !important;
    min-width:980px;
}

.filemanager-page .fm-main{
    overflow-x:auto;
}

.fm-tree details{
    margin:0 !important;
    padding:0 !important;
}

.fm-tree summary{
    list-style:none !important;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:4px;
}

.fm-tree summary::-webkit-details-marker{
    display:none;
}

.fm-tree summary:before{
    content:"›";
    color:#8ca0bd;
    font-weight:600;
    width:10px;
    transform:rotate(0deg);
}

.fm-tree details[open] > summary:before{
    transform:rotate(90deg);
}

.fm-tree summary a{
    flex:1;
}

.fm-tree li{
    margin:1px 0 !important;
}

.fm-tree a,
.fm-root{
    border-radius:7px !important;
    min-height:28px !important;
    padding:4px 7px !important;
}

.chmod-form{
    display:inline-flex;
    gap:6px;
    align-items:center;
    margin:0;
}

.chmod-form input{
    width:58px;
    height:32px;
    border:1px solid #cdd9eb;
    border-radius:8px;
    padding:0 7px;
    font-size:12px;
    font-family:inherit;
}

.filemanager-page .fm-actions{
    flex-wrap:nowrap !important;
}

.filemanager-page .fm-table th:first-child,
.filemanager-page .fm-table td:first-child{
    min-width:260px;
}

.filemanager-page .fm-table th:last-child,
.filemanager-page .fm-table td:last-child{
    min-width:310px;
}

.filemanager-page .fm-toolbar{
    width:100% !important;
}

.filemanager-page .fm-search{
    flex:1 1 auto !important;
    max-width:520px;
}

.filemanager-page .fm-search input{
    width:100% !important;
}

@media(max-width:1100px){
    body.filemanager-page .content{
        padding-left:18px !important;
        padding-right:18px !important;
    }
    .filemanager-page .fm-layout{
        grid-template-columns:1fr !important;
    }
    .filemanager-page .fm-table{
        min-width:920px;
    }
}


/* Filemanager fullscreen fallback */
html.filemanager-page body .sidebar,
html.filemanager-page body .app-sidebar{
    display:none !important;
}
html.filemanager-page body .content{
    margin-left:0 !important;
    width:100vw !important;
    max-width:none !important;
}


/* Mio V007 - Plesk-achtig domeinbeheer met duidelijke tegels */
.mio-domain-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    background:#f7faff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:24px;
    margin-bottom:22px;
}
.mio-domain-hero h2{
    margin:4px 0 6px;
    color:#2f5fb3;
    font-size:32px;
    line-height:1.1;
}
.mio-domain-hero p{
    margin:0 0 12px;
    color:#18345f;
}
.mio-domain-meta-line{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.mio-domain-meta-line span{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:4px 10px;
    border-radius:999px;
    background:#fff;
    border:1px solid #dce6f3;
    color:#42618f;
    font-size:12px;
    font-weight:600;
}
.mio-domain-status-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-bottom:24px;
}
.mio-status-card{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
    min-height:118px;
}
.mio-status-card span{
    display:block;
    color:#2f5fb3;
    font-size:13px;
    font-weight:700;
    margin-bottom:8px;
}
.mio-status-card strong{
    display:block;
    color:#00173d;
    font-size:24px;
    line-height:1.15;
    margin-bottom:8px;
}
.mio-status-card small{
    color:#486081;
}
.mio-tool-section{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:22px;
    margin-bottom:20px;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}
.mio-tool-section h3{
    margin:0 0 16px;
    color:#00173d;
    font-size:21px;
}
.mio-tool-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:14px;
}
.mio-tool-card,
button.mio-tool-card{
    display:flex !important;
    align-items:center;
    gap:14px;
    min-height:86px;
    padding:16px;
    border:1px solid #dce6f3;
    border-radius:16px;
    background:#f7faff;
    color:#00173d !important;
    text-decoration:none !important;
    width:100%;
    text-align:left;
    font-family:inherit;
    cursor:pointer;
}
.mio-tool-card:hover,
button.mio-tool-card:hover{
    background:#eef5ff;
    border-color:#b7cdf0;
    transform:translateY(-1px);
}
.mio-tool-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 48px;
    border-radius:14px;
    background:#fff;
    border:1px solid #dce6f3;
    font-size:23px;
}
.mio-tool-card strong{
    display:block;
    color:#00173d;
    font-size:16px;
    font-weight:700;
    margin-bottom:4px;
}
.mio-tool-card small{
    display:block;
    color:#486081;
    font-size:13px;
    line-height:1.35;
}
.mio-tool-card-form{
    margin:0;
}
.mio-tool-card.is-disabled{
    opacity:.52;
    cursor:not-allowed;
}
.mio-tool-card.is-disabled:hover{
    transform:none;
    background:#f7faff;
    border-color:#dce6f3;
}
.domain-title,
.row-link{
    font-weight:700;
}
@media(max-width:900px){
    .mio-domain-hero{display:block}
    .mio-domain-hero .page-actions{margin-top:16px}
    .mio-tool-grid{grid-template-columns:1fr}
}


/* Mio V011 - nette formulieren voor database en WordPress */
.mio-form{
    display:grid;
    gap:18px;
    margin-top:18px;
}

.mio-form-2col{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
}

.mio-form-section{
    display:grid;
    gap:14px;
    padding:18px;
    background:#f8fbff;
    border:1px solid #dbe6f5;
    border-radius:16px;
}

.mio-form-section h4{
    margin:0 0 4px;
    font-size:16px;
    color:var(--mio-ink,#07162f);
}

.mio-field{
    display:grid;
    gap:7px;
    margin:0;
    font-weight:700;
    color:var(--mio-ink,#07162f);
}

.mio-field span{
    display:flex;
    align-items:baseline;
    gap:8px;
    line-height:1.25;
}

.mio-field small{
    font-weight:500;
    color:#6f7f96;
}

.mio-field input,
.mio-field select,
.mio-field textarea{
    width:100%;
    box-sizing:border-box;
    min-height:46px;
    padding:10px 13px;
    border:1px solid #cdd9eb;
    border-radius:10px;
    background:#fff;
    color:var(--mio-ink,#07162f);
    font:inherit;
}

.mio-field input:focus,
.mio-field select:focus,
.mio-field textarea:focus{
    outline:none;
    border-color:#3B61AC;
    box-shadow:0 0 0 3px rgba(59,97,172,.14);
}

.mio-field-wide,
.mio-form-actions{
    grid-column:1 / -1;
}

.mio-form-actions{
    display:flex;
    justify-content:flex-start;
    gap:12px;
    margin-top:2px;
}

.mio-form-actions .button{
    min-height:46px;
}

@media(max-width:900px){
    .mio-form-2col{
        grid-template-columns:1fr;
    }

    .mio-form-actions .button{
        width:100%;
    }
}


/* Mio V012 - formulierfix: labels boven velden en rustige breedtes */
.table-card .mio-form{
    max-width:980px;
}
.table-card .mio-form-2col{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px;
}
.table-card .mio-form > .mio-field{
    grid-column:1 / -1;
    max-width:560px;
}
.table-card .mio-form-section .mio-field{
    max-width:none;
}
.mio-field span{
    display:block;
}
.mio-field span small{
    display:block;
    margin-top:3px;
}
.mio-field input,
.mio-field select,
.mio-field textarea{
    display:block;
    width:100%;
}
@media(max-width:980px){
    .table-card .mio-form-2col{
        grid-template-columns:1fr;
    }
}


.check-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}
.check-row input {
    width: auto;
    margin-top: 4px;
}
.check-row span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-tile {
    border: 1px solid #e5e7eb;
    width: 100%;
    text-align: left;
}
.form-tile button {
    margin-left: auto;
}
pre {
    white-space: pre-wrap;
    background: #111827;
    color: #f9fafb;
    padding: 14px;
    border-radius: 12px;
    overflow: auto;
}

/* Mio V026.5 serverbescherming registratieflow */
.form-grid.two{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.settings-form label small{
    display:block;
    margin-top:6px;
    color:#5b6f93;
    font-size:12px;
}
.register-form{
    margin-top:14px;
    max-width:680px;
}
.compact-cards{
    margin-top:14px;
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.compact-cards .card strong{
    font-size:18px;
    line-height:1.35;
    overflow-wrap:anywhere;
}
@media (max-width: 820px){
    .form-grid.two,
    .compact-cards{
        grid-template-columns:1fr;
    }
}


/* Mio V041 - mail UI polish (CSS-only)
   Doel: bestaande mail.php netjes uitlijnen zonder PHP-logica te wijzigen. */
.btn,
button.btn,
a.btn,
input[type="submit"].btn,
button.small,
.btn.small{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border:0;
    border-radius:10px;
    background:var(--mio-green,#71C248);
    color:#fff;
    font-weight:700;
    font-size:14px;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    box-shadow:none;
    vertical-align:middle;
    white-space:nowrap;
}

.btn:hover,
button.btn:hover,
a.btn:hover{
    filter:brightness(.96);
    text-decoration:none;
}

.btn.primary,
button.btn.primary,
a.btn.primary{
    background:var(--mio-blue,#3B61AC);
    color:#fff;
}

.btn.danger,
button.btn.danger,
a.btn.danger{
    background:#d64a3a!important;
    color:#fff!important;
}

.btn.small,
button.btn.small,
a.btn.small{
    min-height:34px;
    padding:0 12px;
    border-radius:9px;
    font-size:13px;
}

.quick-panel form .btn{
    margin-right:8px;
}

.quick-panel .notice{
    border-color:#dce6f3;
    background:#f8fbff;
    color:var(--mio-ink,#00173d);
}

.quick-panel .notice.success,
.quick-panel .notice.ok{
    border-color:#bbf7d0;
    background:#f0fdf4;
    color:#14532d;
}

.quick-panel input,
.quick-panel select,
.quick-panel textarea{
    min-height:44px;
    border:1px solid #cbd7ea;
    border-radius:10px;
    padding:10px 12px;
    background:#fff;
    color:var(--mio-ink,#00173d);
    font-size:14px;
    outline:none;
}

.quick-panel input:focus,
.quick-panel select:focus,
.quick-panel textarea:focus{
    border-color:var(--mio-blue,#3B61AC);
    box-shadow:0 0 0 3px rgba(59,97,172,.12);
}

.quick-panel label{
    color:var(--mio-ink,#00173d);
    font-weight:600;
    font-size:14px;
}

/* Mailbox-aanmaakformulier in mail.php: inline stijl blijft bestaan, CSS trekt het recht. */
.quick-panel h3 + p + div[style*="background:#f8fafc"],
.quick-panel div[style*="background:#f8fafc"][style*="dbe3ef"]{
    background:#f8fbff!important;
    border:1px solid #dce6f3!important;
    border-radius:16px!important;
    padding:18px!important;
    margin:16px 0 20px!important;
}

.quick-panel div[style*="grid-template-columns:2fr 2fr 1fr auto"]{
    display:grid!important;
    grid-template-columns:minmax(220px, 1.4fr) minmax(220px, 1.4fr) minmax(130px,.7fr) auto!important;
    gap:16px!important;
    align-items:end!important;
}

.quick-panel div[style*="grid-template-columns:2fr 2fr 1fr auto"] label{
    display:block!important;
    margin:0!important;
}

.quick-panel div[style*="grid-template-columns:2fr 2fr 1fr auto"] input{
    width:100%!important;
    margin-top:7px!important;
}

.quick-panel div[style*="grid-template-columns:2fr 2fr 1fr auto"] .btn{
    height:44px;
    margin:0!important;
}

/* Mailbox-overzicht */
.quick-panel table{
    border:1px solid #e4ebf5;
    border-radius:14px;
    overflow:hidden;
    box-shadow:none;
    margin-top:14px;
}

.quick-panel table th{
    background:#f6f9fe;
    color:var(--mio-ink,#00173d);
    font-weight:700;
    font-size:13px;
}

.quick-panel table td{
    vertical-align:middle;
}

.quick-panel table td:last-child{
    white-space:nowrap;
}

.quick-panel table td:last-child form,
.quick-panel table td:last-child details{
    display:inline-flex!important;
    align-items:center;
    margin:0 6px 0 0!important;
}

.quick-panel table details summary.btn{
    list-style:none;
}

.quick-panel table details summary.btn::-webkit-details-marker{
    display:none;
}

.quick-panel .pill{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 11px;
    border-radius:999px;
}

.quick-panel pre{
    background:#101827;
    color:#f8fafc;
    border-radius:12px;
    padding:16px;
}

@media(max-width:1050px){
    .quick-panel div[style*="grid-template-columns:2fr 2fr 1fr auto"]{
        grid-template-columns:1fr 1fr!important;
    }
    .quick-panel div[style*="grid-template-columns:2fr 2fr 1fr auto"] .btn{
        width:100%;
    }
}

@media(max-width:720px){
    .quick-panel div[style*="grid-template-columns:2fr 2fr 1fr auto"]{
        grid-template-columns:1fr!important;
    }
    .quick-panel table td:last-child{
        white-space:normal;
    }
}



/* Mio V042 - mailpagina opschoning */
.mail-domain-panel .mail-domain-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 22px;
}
.mail-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin:22px 0 14px;
}
.mail-section-head h3{
    margin:0 0 6px;
}
.mail-section-head p{
    margin:0;
    color:#51627d;
}
.mail-create-card{
    background:#f8fbff;
    border:1px solid #dce6f3;
    border-radius:16px;
    padding:18px;
    margin:14px 0 20px;
}
.mail-create-form{
    margin:0;
}
.mail-create-grid{
    display:grid;
    grid-template-columns:minmax(220px,1.5fr) minmax(220px,1.5fr) minmax(120px,.7fr) auto;
    gap:16px;
    align-items:end;
}
.mail-create-grid label{
    display:block;
    margin:0;
    font-weight:600;
    color:#00173d;
}
.mail-create-grid input{
    display:block;
    width:100%;
    min-height:46px;
    margin-top:7px;
    padding:10px 12px;
    border:1px solid #cbd7ea;
    border-radius:10px;
    background:#fff;
    color:#00173d;
}
.mail-create-grid input:focus{
    outline:none;
    border-color:#3B61AC;
    box-shadow:0 0 0 3px rgba(59,97,172,.12);
}
.mail-submit{
    min-height:46px!important;
    padding:0 18px!important;
}
.mail-domain-panel .btn,
.mail-domain-panel button.btn,
.mail-domain-panel a.btn,
.mail-domain-panel summary.btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    padding:0 16px!important;
    border:0!important;
    border-radius:10px!important;
    background:#3B61AC!important;
    color:#fff!important;
    font-weight:700!important;
    font-size:14px!important;
    line-height:1!important;
    text-decoration:none!important;
    cursor:pointer!important;
    box-shadow:none!important;
    vertical-align:middle!important;
    white-space:nowrap!important;
    appearance:none!important;
}
.mail-domain-panel .btn:hover,
.mail-domain-panel button.btn:hover,
.mail-domain-panel a.btn:hover,
.mail-domain-panel summary.btn:hover{
    filter:brightness(.96);
}
.mail-domain-panel .btn.primary,
.mail-domain-panel button.btn.primary{
    background:#3B61AC!important;
}
.mail-domain-panel .btn.muted,
.mail-domain-panel button.btn.muted{
    background:#edf3fb!important;
    color:#16325f!important;
}
.mail-domain-panel .btn.secondary,
.mail-domain-panel summary.btn.secondary{
    background:#eef4ff!important;
    color:#2f57a5!important;
    border:1px solid #c8d8f3!important;
}
.mail-domain-panel .btn.danger,
.mail-domain-panel button.btn.danger{
    background:#d84a3a!important;
    color:#fff!important;
}
.mailbox-table{
    border:1px solid #e3ebf6;
    border-radius:16px;
    overflow:hidden;
    margin-top:16px;
}
.mailbox-table th{
    background:#f6f9fe;
    color:#00173d;
    font-weight:700;
}
.mailbox-table td{
    vertical-align:middle;
}
.mailbox-table .mail-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.mailbox-table .mail-actions form,
.mailbox-table .mail-actions details{
    display:inline-flex!important;
    align-items:center;
    margin:0!important;
}
.mail-password-action{
    position:relative;
}
.mail-password-action summary{
    list-style:none;
}
.mail-password-action summary::-webkit-details-marker{
    display:none;
}
.mail-password-action[open] form{
    position:absolute;
    right:0;
    top:46px;
    z-index:20;
    display:grid!important;
    grid-template-columns:220px auto;
    gap:8px;
    align-items:center;
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:12px;
    padding:12px;
    box-shadow:0 10px 30px rgba(10,31,68,.12);
}
.mailbox-table .pill.ok{
    background:#eaf8df;
    color:#2f7d16;
}
.mail-alias-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:16px;
    padding:16px 18px;
    border:1px solid #e3ebf6;
    border-radius:16px;
    background:#f8fbff;
}
.mail-alias-card strong{
    display:block;
    color:#00173d;
}
.mail-alias-card p{
    margin:4px 0 0;
    color:#51627d;
}
.mail-alias-card span{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 14px;
    border-radius:10px;
    background:#edf3fb;
    color:#51627d;
    font-weight:700;
}
@media(max-width:1100px){
    .mail-create-grid{
        grid-template-columns:1fr 1fr;
    }
    .mail-create-grid .mail-submit{
        width:100%;
    }
}
@media(max-width:720px){
    .mail-create-grid{
        grid-template-columns:1fr;
    }
    .mail-domain-panel .mail-domain-actions,
    .mailbox-table .mail-actions{
        align-items:stretch;
    }
}


/* Mio V043 - mail UX cleanup */
.mail-domain-panel{
    padding:24px!important;
}
.mail-domain-toolbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
    margin:0 0 24px!important;
    padding:18px 20px!important;
    border:1px solid #dbe6f5!important;
    border-radius:16px!important;
    background:#f8fbff!important;
}
.mail-domain-toolbar h3{
    margin:2px 0 8px!important;
    font-size:24px!important;
    line-height:1.1!important;
    color:#00173d!important;
}
.mail-status-pill{
    display:inline-flex!important;
    align-items:center!important;
    min-height:30px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    background:#fff3d8!important;
    color:#8a5a00!important;
    font-weight:700!important;
    font-size:13px!important;
}
.mail-status-pill.ok{
    background:#e9f9ed!important;
    color:#176b32!important;
}
.mail-domain-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    flex-wrap:wrap!important;
}
.mail-domain-actions form{
    margin:0!important;
    display:inline-flex!important;
}
.mail-create-card{
    background:#f8fbff!important;
    border:1px solid #dbe6f5!important;
    border-radius:16px!important;
    padding:18px!important;
    margin:14px 0 20px!important;
}
.mail-create-grid{
    display:grid!important;
    grid-template-columns:minmax(220px,1.2fr) minmax(260px,1.4fr) minmax(130px,.55fr) auto!important;
    gap:14px!important;
    align-items:end!important;
}
.mail-create-grid label{
    display:block!important;
    margin:0!important;
    color:#00173d!important;
    font-weight:700!important;
    font-size:14px!important;
}
.mail-create-grid input{
    width:100%!important;
    box-sizing:border-box!important;
    height:46px!important;
    min-height:46px!important;
    margin-top:8px!important;
    padding:0 14px!important;
    border:1px solid #cbd8ea!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#00173d!important;
    font-size:15px!important;
}
.mail-submit{
    height:46px!important;
    min-height:46px!important;
    padding:0 18px!important;
}
.mail-domain-panel .btn,
.mail-domain-panel button.btn,
.mail-domain-panel a.btn,
.mail-domain-panel summary.btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    padding:0 16px!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
    background:#3B61AC!important;
    color:#fff!important;
    font-weight:700!important;
    font-size:14px!important;
    line-height:1!important;
    text-decoration:none!important;
    cursor:pointer!important;
    box-shadow:none!important;
    appearance:none!important;
    white-space:nowrap!important;
}
.mail-domain-panel .btn.secondary,
.mail-domain-panel a.btn.secondary,
.mail-domain-panel button.btn.secondary,
.mail-domain-panel summary.btn.secondary{
    background:#eef4ff!important;
    color:#2f57a5!important;
    border-color:#c8d8f3!important;
}
.mail-domain-panel .btn.muted,
.mail-domain-panel button.btn.muted{
    background:#eef4ff!important;
    color:#17345f!important;
}
.mail-domain-panel .btn.danger,
.mail-domain-panel button.btn.danger{
    background:#dc4438!important;
    color:#fff!important;
}
.mailbox-table{
    width:100%!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    overflow:hidden!important;
    border:1px solid #dfe8f5!important;
    border-radius:14px!important;
    background:#fff!important;
}
.mailbox-table th{
    background:#f6f9fe!important;
    color:#00173d!important;
    font-weight:800!important;
    padding:14px 16px!important;
}
.mailbox-table td{
    padding:14px 16px!important;
    vertical-align:middle!important;
    border-top:1px solid #edf2f8!important;
}
.mailbox-table .mail-actions{
    display:flex!important;
    gap:10px!important;
    align-items:center!important;
    flex-wrap:wrap!important;
}
.mailbox-table .mail-actions form,
.mailbox-table .mail-actions details{
    margin:0!important;
}
.mailbox-table .btn.small,
.mailbox-table button.btn.small,
.mailbox-table summary.btn.small{
    min-height:36px!important;
    padding:0 14px!important;
    border-radius:9px!important;
}
.mail-password-action summary{
    list-style:none!important;
}
.mail-password-action summary::-webkit-details-marker{
    display:none!important;
}
.mail-password-action[open] form{
    position:absolute!important;
    z-index:30!important;
    display:grid!important;
    grid-template-columns:220px auto!important;
    gap:8px!important;
    background:#fff!important;
    border:1px solid #dbe6f5!important;
    border-radius:12px!important;
    padding:12px!important;
    margin-top:8px!important;
    box-shadow:0 14px 32px rgba(0,23,61,.16)!important;
}
.mail-alias-card{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
    margin-top:18px!important;
    padding:16px 18px!important;
    border:1px solid #dbe6f5!important;
    border-radius:16px!important;
    background:#f8fbff!important;
}
.mail-alias-card p{
    margin:4px 0 0!important;
    color:#596b86!important;
}
.mail-alias-card span{
    display:inline-flex!important;
    align-items:center!important;
    min-height:34px!important;
    padding:0 14px!important;
    border-radius:10px!important;
    background:#eef4ff!important;
    color:#2f57a5!important;
    font-weight:700!important;
}
@media(max-width:1100px){
    .mail-create-grid{grid-template-columns:1fr 1fr!important}
    .mail-submit{width:100%!important}
}
@media(max-width:760px){
    .mail-domain-toolbar{align-items:flex-start!important;flex-direction:column!important}
    .mail-domain-actions{justify-content:flex-start!important}
    .mail-create-grid{grid-template-columns:1fr!important}
}


/* V044 - Plesk-logica: domein centraal */
.mio-domain-tabs{
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    border-bottom:1px solid #c8d5e6!important;
    margin:0 0 22px!important;
    padding:0!important;
    overflow-x:auto!important;
}
.mio-domain-tabs a{
    display:inline-flex!important;
    align-items:center!important;
    min-height:44px!important;
    padding:0 18px!important;
    color:#18345f!important;
    text-decoration:none!important;
    font-weight:700!important;
    border-bottom:3px solid transparent!important;
    white-space:nowrap!important;
}
.mio-domain-tabs a:hover,
.mio-domain-tabs a.active{
    color:#00173d!important;
    border-bottom-color:#2f5fb3!important;
    background:#f7faff!important;
}
.mail-domain-statusbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    border:1px solid #dbe6f5!important;
    background:#f8fbff!important;
    border-radius:14px!important;
    padding:14px 16px!important;
    margin:0 0 18px!important;
}
.mail-domain-statusbar form{margin:0!important}
.mail-domain-statusbar .btn{min-height:42px!important}
.mail-create-card{
    background:#f8fbff!important;
    border:1px solid #dbe6f5!important;
    border-radius:14px!important;
    padding:16px!important;
    margin-bottom:18px!important;
}
.mail-create-grid{
    display:grid!important;
    grid-template-columns:minmax(220px,1.3fr) minmax(220px,1.3fr) minmax(130px,.7fr) auto!important;
    gap:14px!important;
    align-items:end!important;
}
.mail-create-grid label{
    font-weight:700!important;
    color:#00173d!important;
}
.mail-create-grid input{
    width:100%!important;
    height:46px!important;
    box-sizing:border-box!important;
}
.mail-submit{
    height:46px!important;
    white-space:nowrap!important;
    padding:0 22px!important;
}
.mailbox-table{
    width:100%!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    border:1px solid #dbe6f5!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:#fff!important;
}
.mailbox-table th{
    background:#f4f7fb!important;
    color:#00173d!important;
    text-align:left!important;
    padding:14px 16px!important;
    font-weight:800!important;
}
.mailbox-table td{
    padding:14px 16px!important;
    border-top:1px solid #e5edf7!important;
    vertical-align:middle!important;
}
.mail-actions{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex-wrap:wrap!important;
}
.mail-actions form,.mail-actions details{margin:0!important}
.mail-actions .btn.small,.mail-actions button.btn.small,.mail-actions summary.btn.small{
    border-radius:10px!important;
    min-height:38px!important;
    padding:0 14px!important;
    font-weight:800!important;
}
@media(max-width:980px){
    .mail-domain-statusbar{align-items:flex-start!important;flex-direction:column!important}
    .mail-create-grid{grid-template-columns:1fr!important}
    .mail-submit{width:100%!important}
}


/* V046 - Plesk-achtige domeinenlijst */
.mio-domains-table-v046 { margin-top: 18px; background:#fff; border:1px solid #d8e2f0; border-radius:14px; overflow:hidden; }
.mio-domains-table-v046 table { width:100%; border-collapse:collapse; }
.mio-domains-table-v046 th { background:#f5f8fc; text-align:left; font-weight:700; color:#001b44; padding:14px 16px; border-bottom:1px solid #d8e2f0; }
.mio-domains-table-v046 td { padding:14px 16px; border-bottom:1px solid #edf2f7; vertical-align:middle; }
.mio-domains-table-v046 tr:last-child td { border-bottom:0; }
.mio-domain-link { font-weight:700; color:#245db5; text-decoration:none; }
.mio-domain-link:hover { text-decoration:underline; }
.btn.small { display:inline-flex; align-items:center; min-height:34px; padding:7px 12px; border-radius:9px; font-weight:700; text-decoration:none; }


/* V047 - Plesk-achtige domeinenlijst zonder kaarten */
.mio-compact-head{margin-bottom:18px}
.mio-compact-head h2{margin-bottom:4px}
.mio-list-panel{background:#fff;border:1px solid #d8e2f0;border-radius:14px;overflow:hidden}
.mio-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border-bottom:1px solid #d8e2f0;background:#fff}
.mio-list-toolbar input[type="search"]{max-width:380px;width:100%;height:42px;border:1px solid #c8d6ea;border-radius:10px;padding:0 14px}
.mio-domain-table{width:100%;border-collapse:collapse}
.mio-domain-table th{background:#f5f8fc;text-align:left;font-weight:700;color:#001b44;padding:13px 16px;border-bottom:1px solid #d8e2f0;white-space:nowrap}
.mio-domain-table td{padding:13px 16px;border-bottom:1px solid #edf2f7;vertical-align:middle}
.mio-domain-table tr:last-child td{border-bottom:0}
.mio-domain-mainlink{font-weight:800;color:#1f5fbf;text-decoration:none}
.mio-domain-mainlink:hover{text-decoration:underline}
.mio-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#60a917;margin-right:7px;vertical-align:middle}
.small-text{font-size:12px;margin-top:4px}
.btn.small{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 13px;border-radius:9px;font-weight:700;text-decoration:none}


/* V048 - klantenpagina in dezelfde lijn als domeinen */
.mio-form-panel{margin-top:22px}
.mio-customer-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:18px}
.mio-customer-form label{display:block;font-weight:700;color:#001b44}
.mio-customer-form input,.mio-customer-form select{box-sizing:border-box;width:100%;height:44px;margin-top:7px;border:1px solid #c8d6ea;border-radius:10px;padding:0 12px;background:#fff}
.mio-form-submit{display:flex;align-items:end}
.mio-form-submit .small-button{width:100%;height:44px;display:flex;align-items:center;justify-content:center}
@media(max-width:1000px){.mio-customer-form{grid-template-columns:1fr}}


/* V049 - nieuwe klant op aparte pagina */
.mio-form-panel{margin-top:22px}
.mio-customer-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:18px}
.mio-customer-form label{display:block;font-weight:700;color:#001b44}
.mio-customer-form input,.mio-customer-form select{box-sizing:border-box;width:100%;height:44px;margin-top:7px;border:1px solid #c8d6ea;border-radius:10px;padding:0 12px;background:#fff}
.mio-form-submit{display:flex;align-items:end}
.mio-form-submit .small-button{width:100%;height:44px;display:flex;align-items:center;justify-content:center}
@media(max-width:1000px){.mio-customer-form{grid-template-columns:1fr}}


/* V050 klantenpagina */
.mio-domain-table th,
.mio-domain-table td{
    padding:18px 16px !important;
}

.mio-list-panel{
    padding:0 !important;
    overflow:hidden;
}

.mio-list-toolbar{
    padding:16px 18px !important;
}

.mio-domain-table{
    width:100%;
}

.mio-domain-mainlink{
    font-weight:700;
}

.customer-link-row{
    display:flex;
    align-items:center;
    gap:12px;
}


/* V051 - klantenlijst gelijkgetrokken met domeinen */
.mio-customers-panel{
    margin-top:18px;
    border-radius:14px;
}
.mio-customers-panel .mio-list-toolbar{
    padding:18px 20px !important;
}
.mio-customers-panel .mio-domain-table th{
    padding:16px 18px !important;
}
.mio-customers-panel .mio-domain-table td{
    padding:16px 18px !important;
}
.mio-customers-panel .mio-domain-table td:first-child,
.mio-customers-panel .mio-domain-table th:first-child{
    padding-left:22px !important;
}
.mio-customers-panel .mio-domain-table td:last-child,
.mio-customers-panel .mio-domain-table th:last-child{
    padding-right:22px !important;
}
.mio-inline-select{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
}
.mio-inline-select select{
    min-width:220px;
    height:38px;
    border:1px solid #c8d6ea;
    border-radius:9px;
    padding:0 10px;
    background:#fff;
}


/* V052 - klanten exact als domeinen opgebouwd met betere padding */
.mio-unified-list{
    background:#fff !important;
    border:1px solid #d8e2f0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
}
.mio-unified-list .mio-list-toolbar{
    padding:18px 24px !important;
}
.mio-unified-list .mio-domain-table th{
    padding:16px 24px !important;
}
.mio-unified-list .mio-domain-table td{
    padding:18px 24px !important;
}
.mio-unified-list .mio-domain-table td:first-child,
.mio-unified-list .mio-domain-table th:first-child{
    padding-left:28px !important;
}
.mio-unified-list .mio-domain-table td:last-child,
.mio-unified-list .mio-domain-table th:last-child{
    padding-right:28px !important;
}
.mio-unified-list .mio-domain-table tr{
    min-height:68px;
}
.mio-inline-select{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
}
.mio-inline-select select{
    min-width:240px !important;
    height:40px !important;
    border:1px solid #c8d6ea !important;
    border-radius:9px !important;
    padding:0 10px !important;
    background:#fff !important;
}


/* V053 - klantdetail als Plesk-achtig klantoverzicht */
.mio-unified-list .mio-domain-table th{
    width:auto;
}
.mio-unified-list .mio-domain-table tbody th{
    background:#f5f8fc;
    color:#001b44;
    font-weight:700;
    border-bottom:1px solid #edf2f7;
}


/* V054 - klantdetail domeinen exact gelijkgetrokken met domeinenoverzicht */
.mio-domain-like-panel{
    background:#fff !important;
    border:1px solid #d8e2f0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    padding:0 !important;
}
.mio-domain-like-panel .mio-list-toolbar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    padding:16px 18px !important;
    border-bottom:1px solid #d8e2f0 !important;
    background:#fff !important;
}
.mio-domain-like-panel .mio-list-toolbar input[type="search"]{
    max-width:380px !important;
    width:100% !important;
    height:42px !important;
    border:1px solid #c8d6ea !important;
    border-radius:10px !important;
    padding:0 14px !important;
}
.mio-domain-like-panel .mio-domain-table{
    width:100% !important;
    border-collapse:collapse !important;
}
.mio-domain-like-panel .mio-domain-table th{
    background:#f5f8fc !important;
    text-align:left !important;
    font-weight:700 !important;
    color:#001b44 !important;
    padding:13px 16px !important;
    border-bottom:1px solid #d8e2f0 !important;
    white-space:nowrap !important;
}
.mio-domain-like-panel .mio-domain-table td{
    padding:13px 16px !important;
    border-bottom:1px solid #edf2f7 !important;
    vertical-align:middle !important;
}
.mio-domain-like-panel .mio-domain-table tr:last-child td{
    border-bottom:0 !important;
}
.mio-domain-like-panel .mio-domain-mainlink{
    font-weight:800 !important;
    color:#1f5fbf !important;
    text-decoration:none !important;
}
.mio-domain-like-panel .btn.small{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:7px 13px !important;
    border-radius:9px !important;
    font-weight:700 !important;
    text-decoration:none !important;
}


/* V055 - klantdetail domeinregel exact als domeinenoverzicht */
.mio-domain-like-panel .mio-inline-select{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
}
.mio-domain-like-panel .mio-inline-select select{
    min-width:260px !important;
    height:40px !important;
    border:1px solid #c8d6ea !important;
    border-radius:9px !important;
    padding:0 10px !important;
    background:#fff !important;
}
.mio-domain-like-panel .icon-only.success{
    background:#68c443 !important;
    color:#fff !important;
    border:0 !important;
    width:40px !important;
    height:40px !important;
    border-radius:10px !important;
    font-weight:800 !important;
}
.mio-domain-like-panel .icon-only.secondary{
    background:#3f66b5 !important;
    color:#fff !important;
    border:0 !important;
    width:40px !important;
    height:40px !important;
    border-radius:10px !important;
    font-weight:800 !important;
}


/* V056 - Bestandsbeheer rustiger en professioneler */
.filemanager-layout,
.file-manager-layout{
    display:grid !important;
    grid-template-columns:280px minmax(0,1fr) !important;
    gap:20px !important;
    align-items:start !important;
}

.file-sidebar,
.file-tree,
.folder-tree{
    background:#fff !important;
    border:1px solid #d8e2f0 !important;
    border-radius:14px !important;
    padding:14px !important;
}

.file-main,
.file-panel,
.file-list-panel{
    background:#fff !important;
    border:1px solid #d8e2f0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
}

.file-toolbar,
.filemanager-toolbar,
.files-toolbar{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:16px 18px !important;
    border-bottom:1px solid #e4ebf5 !important;
    background:#fff !important;
}

.file-toolbar input,
.filemanager-toolbar input,
.files-toolbar input{
    height:42px !important;
    border:1px solid #c8d6ea !important;
    border-radius:10px !important;
    padding:0 13px !important;
}

.mio-file-table,
.file-table,
.files-table{
    width:100% !important;
    border-collapse:collapse !important;
}

.mio-file-table th,
.file-table th,
.files-table th{
    background:#f5f8fc !important;
    color:#001b44 !important;
    font-weight:700 !important;
    text-align:left !important;
    padding:13px 16px !important;
    border-bottom:1px solid #d8e2f0 !important;
}

.mio-file-table td,
.file-table td,
.files-table td{
    padding:14px 16px !important;
    border-bottom:1px solid #edf2f7 !important;
    vertical-align:middle !important;
}

.mio-file-actions,
.file-actions,
.actions{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
}

.mio-file-actions form,
.file-actions form,
.actions form{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
}

.mio-file-actions input,
.file-actions input,
.actions input{
    height:36px !important;
    border:1px solid #c8d6ea !important;
    border-radius:9px !important;
    padding:0 10px !important;
    max-width:145px !important;
}

.mio-file-actions button,
.file-actions button,
.actions button,
.file-toolbar button,
.filemanager-toolbar button,
.files-toolbar button{
    min-height:36px !important;
    border-radius:9px !important;
    border:1px solid #b9cae3 !important;
    background:#fff !important;
    color:#001b44 !important;
    font-weight:700 !important;
    padding:7px 12px !important;
}

.file-toolbar .primary,
.filemanager-toolbar .primary,
.files-toolbar .primary,
.mio-file-actions .primary{
    background:#3f66b5 !important;
    color:#fff !important;
    border-color:#3f66b5 !important;
}

.mio-file-actions .danger,
.file-actions .danger,
.actions .danger,
button.danger{
    background:#fff !important;
    color:#d93025 !important;
    border-color:#ffb4a8 !important;
}

@media(max-width:1100px){
    .filemanager-layout,
    .file-manager-layout{
        grid-template-columns:1fr !important;
    }
}


/* V057 - Bestandsbeheer compact met iconknoppen */
.mio-fm-actions,
.file-actions,
.actions{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px !important;
    max-width:560px !important;
}
.mio-fm-actions form,
.file-actions form,
.actions form{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    margin:0 !important;
}
.mio-icon-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:9px !important;
    border:1px solid #c8d6ea !important;
    background:#fff !important;
    color:#001b44 !important;
    font-size:15px !important;
    line-height:1 !important;
    text-decoration:none !important;
    font-weight:700 !important;
}
.mio-icon-btn:hover{
    background:#eef5ff !important;
}
.mio-fm-actions input,
.file-actions input,
.actions input{
    height:36px !important;
    max-width:115px !important;
    border:1px solid #c8d6ea !important;
    border-radius:9px !important;
    padding:0 9px !important;
}
.mio-fm-actions input::placeholder{
    color:#8090a8 !important;
}
.mio-file-table td:last-child,
.file-table td:last-child,
.files-table td:last-child{
    width:560px !important;
}
.mio-file-table td,
.file-table td,
.files-table td{
    vertical-align:middle !important;
}
.mio-file-table tr,
.file-table tr,
.files-table tr{
    min-height:58px !important;
}


/* V058 - Bestandsbeheer: acties inklapbaar per regel */
.mio-file-actions-cell{
    width:130px !important;
    min-width:130px !important;
    position:relative !important;
}
.mio-actions-dropdown{
    position:relative !important;
    display:inline-block !important;
}
.mio-actions-toggle{
    list-style:none !important;
    cursor:pointer !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:36px !important;
    padding:0 14px !important;
    border-radius:9px !important;
    background:#3f66b5 !important;
    color:#fff !important;
    font-weight:800 !important;
    border:1px solid #3f66b5 !important;
    user-select:none !important;
}
.mio-actions-toggle::-webkit-details-marker{display:none !important}
.mio-actions-panel{
    position:absolute !important;
    right:0 !important;
    top:42px !important;
    z-index:50 !important;
    width:420px !important;
    max-width:calc(100vw - 40px) !important;
    background:#fff !important;
    border:1px solid #c8d6ea !important;
    border-radius:12px !important;
    box-shadow:0 18px 45px rgba(15,35,70,.18) !important;
    padding:12px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
}
.mio-actions-dropdown:not([open]) .mio-actions-panel{
    display:none !important;
}
.mio-actions-panel form{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    margin:0 !important;
}
.mio-actions-panel input{
    min-width:0 !important;
    width:100% !important;
    height:36px !important;
    border:1px solid #c8d6ea !important;
    border-radius:9px !important;
    padding:0 9px !important;
}
.mio-actions-panel button,
.mio-actions-panel a,
.mio-actions-panel .mio-icon-btn{
    height:36px !important;
    min-width:36px !important;
    border-radius:9px !important;
    white-space:nowrap !important;
}
.mio-file-table td:last-child,
.file-table td:last-child,
.files-table td:last-child{
    width:130px !important;
}
.mio-file-table tr,
.file-table tr,
.files-table tr{
    min-height:54px !important;
}


/* V059 filemanager overzichtelijker */
tbody tr:nth-child(even){
    background:#f7f9fc !important;
}
tbody tr:nth-child(odd){
    background:#ffffff !important;
}
.mio-actions-dropdown,
details{
    display:block !important;
}
.mio-actions-panel{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:10px !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important;
}
td{
    padding:14px 12px !important;
}
tr{
    min-height:72px !important;
}
.mio-actions-toggle{
    width:100% !important;
    max-width:180px !important;
}


/* V060 - Bestandsbeheer echt ruimer en leesbaarder */
.mio-fm-table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 8px !important;
}
.mio-fm-table thead tr{
    background:#f5f8fc !important;
}
.mio-fm-table th{
    padding:14px 18px !important;
    background:#f5f8fc !important;
    border-bottom:1px solid #d8e2f0 !important;
}
.mio-fm-table tbody tr:nth-child(odd){
    background:#ffffff !important;
}
.mio-fm-table tbody tr:nth-child(even){
    background:#f7faff !important;
}
.mio-fm-table tbody td{
    padding:18px 18px !important;
    border-top:1px solid #edf2f7 !important;
    border-bottom:1px solid #edf2f7 !important;
    vertical-align:top !important;
}
.mio-fm-table tbody td:first-child{
    border-left:1px solid #edf2f7 !important;
    border-radius:10px 0 0 10px !important;
}
.mio-fm-table tbody td:last-child{
    border-right:1px solid #edf2f7 !important;
    border-radius:0 10px 10px 0 !important;
}
.mio-fm-table td:last-child{
    width:360px !important;
}
.mio-fm-table .mio-actions-dropdown,
.mio-fm-table details{
    display:block !important;
    width:100% !important;
}
.mio-fm-table .mio-actions-toggle,
.mio-actions-toggle{
    list-style:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:140px !important;
    height:38px !important;
    padding:0 14px !important;
    border-radius:9px !important;
    background:#3f66b5 !important;
    color:#fff !important;
    font-weight:800 !important;
    border:1px solid #3f66b5 !important;
    cursor:pointer !important;
}
.mio-fm-table .mio-actions-toggle::-webkit-details-marker,
.mio-actions-toggle::-webkit-details-marker{
    display:none !important;
}
.mio-fm-table .mio-actions-panel,
.mio-actions-panel{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:12px !important;
    padding:14px !important;
    background:#f8fafc !important;
    border:1px solid #d8e2f0 !important;
    border-radius:12px !important;
    box-shadow:none !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
}
.mio-fm-table details:not([open]) .mio-actions-panel,
details:not([open]) .mio-actions-panel{
    display:none !important;
}
.mio-actions-panel form{
    display:flex !important;
    gap:8px !important;
    align-items:center !important;
    margin:0 !important;
}
.mio-actions-panel input{
    height:38px !important;
    min-width:0 !important;
    width:100% !important;
    border:1px solid #c8d6ea !important;
    border-radius:9px !important;
    padding:0 10px !important;
}
.mio-actions-panel button,
.mio-actions-panel a,
.mio-actions-panel .mio-icon-btn{
    height:38px !important;
    min-width:38px !important;
    border-radius:9px !important;
}


/* V061 - Bestandsbeheer als rustige control-panel lijst */
.mio-filemanager-final{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
}
.mio-filemanager-final thead th{
    background:#f5f8fc !important;
    color:#001b44 !important;
    font-weight:800 !important;
    padding:16px 18px !important;
    border-top:1px solid #d8e2f0 !important;
    border-bottom:1px solid #d8e2f0 !important;
    text-align:left !important;
}
.mio-filemanager-final tbody tr:nth-child(odd){
    background:#fff !important;
}
.mio-filemanager-final tbody tr:nth-child(even){
    background:#f7faff !important;
}
.mio-filemanager-final tbody td{
    padding:16px 18px !important;
    border-bottom:1px solid #e6edf7 !important;
    vertical-align:middle !important;
}
.mio-filemanager-final tbody tr:hover{
    background:#eef5ff !important;
}
.mio-filemanager-final td:first-child,
.mio-filemanager-final th:first-child{
    width:42px !important;
}
.mio-filemanager-final td:last-child,
.mio-filemanager-final th:last-child{
    width:150px !important;
    text-align:right !important;
}
.mio-filemanager-final details{
    position:static !important;
    display:block !important;
    width:100% !important;
}
.mio-filemanager-final summary,
.mio-filemanager-final .mio-fm-summary,
.mio-actions-toggle{
    list-style:none !important;
    cursor:pointer !important;
    margin-left:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:104px !important;
    height:40px !important;
    padding:0 16px !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#001b44 !important;
    border:1px solid #c8d6ea !important;
    font-weight:800 !important;
}
.mio-filemanager-final summary::-webkit-details-marker,
.mio-actions-toggle::-webkit-details-marker{
    display:none !important;
}
.mio-filemanager-final details[open] summary,
.mio-filemanager-final details[open] .mio-fm-summary{
    background:#3f66b5 !important;
    border-color:#3f66b5 !important;
    color:#fff !important;
}
.mio-filemanager-final details[open] summary::after,
.mio-filemanager-final details[open] .mio-fm-summary::after{
    content:"  ×";
    margin-left:8px;
}
.mio-filemanager-final details:not([open]) .mio-actions-panel{
    display:none !important;
}
.mio-filemanager-final .mio-actions-panel{
    position:absolute !important;
    left:calc(50% - 430px) !important;
    right:auto !important;
    top:auto !important;
    z-index:60 !important;
    width:860px !important;
    max-width:calc(100vw - 80px) !important;
    margin-top:12px !important;
    padding:16px !important;
    background:#fff !important;
    border:1px solid #d8e2f0 !important;
    border-radius:14px !important;
    box-shadow:0 18px 45px rgba(15,35,70,.16) !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
    text-align:left !important;
}
.mio-filemanager-final .mio-actions-panel form{
    min-height:84px !important;
    background:#f8fafc !important;
    border:1px solid #e4ebf5 !important;
    border-radius:12px !important;
    padding:10px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:8px !important;
    margin:0 !important;
}
.mio-filemanager-final .mio-actions-panel input{
    width:100% !important;
    height:36px !important;
    border:1px solid #c8d6ea !important;
    border-radius:9px !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
}
.mio-filemanager-final .mio-actions-panel button,
.mio-filemanager-final .mio-actions-panel a,
.mio-filemanager-final .mio-actions-panel .mio-icon-btn{
    width:100% !important;
    min-height:36px !important;
    border-radius:9px !important;
    border:1px solid #c8d6ea !important;
    background:#fff !important;
    color:#001b44 !important;
    font-weight:800 !important;
    padding:8px 10px !important;
    text-decoration:none !important;
}
.mio-filemanager-final .mio-actions-panel button:hover,
.mio-filemanager-final .mio-actions-panel a:hover{
    background:#eef5ff !important;
}
.mio-filemanager-final .mio-actions-panel button.danger,
.mio-filemanager-final .mio-actions-panel .danger{
    color:#d93025 !important;
    border-color:#ffb4a8 !important;
}
.mio-filemanager-final .pill,
.mio-filemanager-final .badge{
    border-radius:9px !important;
    padding:6px 10px !important;
}

/* Mio V067 webmail */
.quick-tile-form{margin:0;}
.quick-tile-button{width:100%;border:1px solid #dce6f3;cursor:pointer;font:inherit;text-align:left;}
.webmail-panel .quick-tile{min-height:86px;}
.terminal-input{width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;padding:14px;border:1px solid #cdd9ea;border-radius:12px;background:#fff;box-sizing:border-box;margin:8px 0 14px;}
.terminal-output{background:#0f172a;color:#e5e7eb;border-radius:14px;padding:16px;overflow:auto;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.45;}
.badge.good{display:inline-block;background:#dcfce7;color:#166534;border-radius:999px;padding:5px 10px;font-weight:700;font-size:12px;}
.badge.warn{display:inline-block;background:#fee2e2;color:#991b1b;border-radius:999px;padding:5px 10px;font-weight:700;font-size:12px;}
.notice.danger{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;padding:12px 14px;border-radius:12px;margin:14px 0;}
.danger-panel{border-color:#fecaca;background:#fffafa;}
.btn.danger{background:#dc2626;color:#fff;border-color:#dc2626;}

/* Mio V157 dashboard grafieken */
.dashboard-graphs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:20px 0 22px;
}
.dashboard-graph-card{
    background:#fff;
    border:1px solid var(--mio-line,#dce6f3);
    border-radius:14px;
    padding:16px;
    min-height:210px;
    box-shadow:0 10px 24px rgba(15,31,58,.035);
}
.graph-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:16px;
}
.graph-head span{
    display:block;
    color:var(--mio-blue,#3B61AC);
    font-size:13px;
    font-weight:700;
    margin-bottom:4px;
}
.graph-head strong{
    display:block;
    color:var(--mio-ink,#00173d);
    font-size:26px;
    line-height:1.05;
    letter-spacing:-.4px;
}
.graph-head small{
    color:var(--mio-muted,#486081);
    font-size:12px;
    white-space:nowrap;
    padding-top:3px;
}
.mio-bar-chart{
    height:92px;
    display:flex;
    align-items:flex-end;
    gap:6px;
    padding:10px 0 0;
    border-bottom:1px solid #edf2f8;
}
.mio-bar-chart i{
    flex:1;
    min-width:6px;
    display:block;
    border-radius:8px 8px 0 0;
    background:linear-gradient(180deg,var(--mio-blue,#3B61AC),#8aa5d8);
}
.mio-bar-chart.soft i{
    background:linear-gradient(180deg,var(--mio-green,#71C248),#c8eeb7);
}
.graph-foot{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:13px;
    color:var(--mio-muted,#486081);
    font-size:12px;
}
.mio-mix-chart{
    display:grid;
    gap:12px;
    margin-top:6px;
}
.mio-mix-chart div{
    display:grid;
    grid-template-columns:80px 1fr 34px;
    align-items:center;
    gap:10px;
}
.mio-mix-chart span,
.mio-mix-chart em{
    color:var(--mio-muted,#486081);
    font-size:12px;
    font-style:normal;
}
.mio-mix-chart b{
    display:block;
    height:12px;
    background:#edf2f8;
    border-radius:999px;
    overflow:hidden;
}
.mio-mix-chart i{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--mio-orange,#F69220),#ffd09d);
}
@media(max-width:1100px){
    .dashboard-graphs{grid-template-columns:1fr;}
    .graph-head small{white-space:normal;}
}

/* Mio V158 professionele dashboard grafieken */
.mio-live-graphs{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px !important;
    margin:22px 0 16px !important;
}
.mio-domain-graphs{
    display:grid !important;
    grid-template-columns:2fr 1fr !important;
    gap:16px !important;
    margin:0 0 24px !important;
}
.chart-card-modern{
    position:relative !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
    border:1px solid #d7e4f5 !important;
    border-radius:18px !important;
    padding:18px !important;
    min-height:228px !important;
    box-shadow:0 14px 34px rgba(15,31,58,.06) !important;
}
.chart-card-modern:before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:4px;
    background:linear-gradient(90deg,#3B61AC,#71C248,#F69220);
    opacity:.85;
}
.chart-card-modern .graph-head{
    position:relative;
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    gap:14px !important;
    margin:0 0 14px !important;
}
.chart-card-modern .graph-head span{
    display:block !important;
    color:#3B61AC !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    margin:0 0 6px !important;
}
.chart-card-modern .graph-head strong{
    display:block !important;
    color:#00173d !important;
    font-size:30px !important;
    line-height:1 !important;
    letter-spacing:-.7px !important;
}
.chart-card-modern .graph-head small{
    color:#60728f !important;
    font-size:12px !important;
    background:#eef5ff !important;
    border:1px solid #d8e8fb !important;
    border-radius:999px !important;
    padding:6px 9px !important;
    white-space:nowrap !important;
}
.mio-line-chart{
    position:relative !important;
    height:126px !important;
    border-radius:14px !important;
    background:linear-gradient(180deg,#f8fbff,#ffffff) !important;
    border:1px solid #edf3fb !important;
    padding:0 !important;
    overflow:hidden !important;
}
.mio-line-svg{
    display:block !important;
    width:100% !important;
    height:100% !important;
}
.mio-line-svg .grid{
    stroke:#e8eff8;
    stroke-width:1;
}
.mio-line-svg .area{
    fill:#3B61AC;
    opacity:.12;
}
.mio-line-svg .line{
    fill:none;
    stroke:#3B61AC;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.mio-line-svg .dot{
    fill:#fff;
    stroke:#3B61AC;
    stroke-width:3;
}
.chart-traffic .mio-line-svg .area{fill:#71C248;opacity:.15;}
.chart-traffic .mio-line-svg .line{stroke:#5ca93a;}
.chart-traffic .mio-line-svg .dot{stroke:#5ca93a;}
.chart-memory .mio-line-svg .area{fill:#F69220;opacity:.14;}
.chart-memory .mio-line-svg .line{stroke:#F69220;}
.chart-memory .mio-line-svg .dot{stroke:#F69220;}
.graph-pills{
    display:flex !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-top:14px !important;
    color:#425778 !important;
    font-size:12px !important;
}
.graph-pills span{
    background:#f1f6fd !important;
    border:1px solid #dfeaf7 !important;
    border-radius:999px !important;
    padding:7px 10px !important;
    line-height:1 !important;
}
.modern-mix{
    display:grid !important;
    gap:14px !important;
    margin-top:12px !important;
}
.modern-mix div{
    display:grid !important;
    grid-template-columns:110px 1fr 42px !important;
    align-items:center !important;
    gap:12px !important;
}
.modern-mix span,.modern-mix em{
    color:#425778 !important;
    font-size:13px !important;
    font-style:normal !important;
}
.modern-mix b{
    display:block !important;
    height:14px !important;
    background:#edf3fb !important;
    border-radius:999px !important;
    overflow:hidden !important;
}
.modern-mix i{
    display:block !important;
    height:100% !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,#3B61AC,#71C248) !important;
}
.compact-insight{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-height:170px !important;
}
.compact-insight .insight-label{
    color:#3B61AC !important;
    font-weight:800 !important;
    font-size:13px !important;
    margin-bottom:8px !important;
}
.compact-insight strong{
    color:#00173d !important;
    font-size:28px !important;
    line-height:1.1 !important;
    margin-bottom:8px !important;
}
.compact-insight p{
    margin:0 !important;
    color:#60728f !important;
    font-size:13px !important;
}
@media(max-width:1200px){
    .mio-live-graphs,.mio-domain-graphs{grid-template-columns:1fr !important;}
    .chart-card-modern .graph-head small{white-space:normal !important;}
}

/* Mio V159 dashboard minder saai */
.mio-dashboard-pulse{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:18px;
    align-items:center;
    margin:22px 0 18px;
    padding:22px;
    border:1px solid #d6e4f4;
    border-radius:24px;
    background:
        radial-gradient(circle at 8% 20%,rgba(59,97,172,.20),transparent 28%),
        radial-gradient(circle at 72% 8%,rgba(113,194,72,.18),transparent 28%),
        radial-gradient(circle at 100% 82%,rgba(246,146,32,.16),transparent 32%),
        linear-gradient(135deg,#ffffff 0%,#f5f9ff 60%,#fff7ef 100%);
    box-shadow:0 20px 55px rgba(15,31,58,.08);
    overflow:hidden;
    position:relative;
}
.mio-dashboard-pulse:after{
    content:"";
    position:absolute;
    inset:auto -10% -35% 35%;
    height:140px;
    background:linear-gradient(90deg,rgba(59,97,172,.16),rgba(113,194,72,.16),rgba(246,146,32,.16));
    filter:blur(24px);
    transform:rotate(-4deg);
}
.pulse-main,.pulse-rings{position:relative;z-index:1;}
.pulse-main{display:flex;align-items:center;gap:18px;}
.pulse-orb{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#3B61AC,#71C248,#F69220,#3B61AC);box-shadow:0 14px 30px rgba(59,97,172,.25);}
.pulse-orb span{width:54px;height:54px;border-radius:50%;background:#fff;display:block;position:relative;}
.pulse-orb span:after{content:"";position:absolute;inset:15px;border-radius:50%;background:#71C248;box-shadow:0 0 0 10px rgba(113,194,72,.18);animation:mio-pulse 1.8s ease-in-out infinite;}
.pulse-label{display:block;color:#3B61AC;font-weight:800;font-size:13px;margin-bottom:4px;}
.pulse-main strong{display:block;font-size:34px;line-height:1.05;color:#00173d;letter-spacing:-.8px;}
.pulse-main p{margin:7px 0 0;color:#566b8b;font-size:14px;}
.pulse-rings{display:flex;justify-content:flex-end;gap:16px;}
.mini-ring{--ring:#3B61AC;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ring) calc(var(--value)*1%),#e9f1fb 0);position:relative;}
.mini-ring:after{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px #e6eef9;}
.mini-ring b,.mini-ring span{position:relative;z-index:1;display:block;text-align:center;}
.mini-ring b{font-size:20px;color:#00173d;line-height:1;}
.mini-ring span{font-size:12px;color:#5b6f8e;margin-top:4px;font-weight:700;}
.mini-ring.green{--ring:#71C248}.mini-ring.orange{--ring:#F69220}.mini-ring.blue{--ring:#3B61AC}
.mio-v159-graphs{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important;}
.big-live-card{min-height:300px !important;border-radius:24px !important;padding:20px !important;}
.big-live-card:before{height:6px !important;}
.big-live-card .graph-head strong{font-size:38px !important;}
.mio-line-chart.expressive{height:145px !important;border-radius:20px !important;background:linear-gradient(180deg,#f4f8ff,#fff) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);}
.mio-line-chart.expressive.small{height:100px !important;margin-top:14px;}
.mio-line-chart.expressive .line{stroke-width:5 !important;filter:drop-shadow(0 7px 7px rgba(59,97,172,.16));}
.mio-line-chart.expressive .area{opacity:.20 !important;}
.traffic-meter{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 12px;}
.traffic-meter div{border:1px solid #e2ecf8;background:#fff;border-radius:18px;padding:14px;position:relative;overflow:hidden;}
.traffic-meter div:after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:linear-gradient(90deg,#3B61AC,#71C248);}
.traffic-meter span{display:block;color:#60728f;font-size:12px;font-weight:700;margin-bottom:6px;}
.traffic-meter strong{font-size:20px;color:#00173d;}
.memory-stack{display:grid;gap:14px;margin:10px 0 6px;}
.memory-stack div{display:grid;grid-template-columns:62px 1fr 70px;align-items:center;gap:10px;color:#425778;font-size:13px;}
.memory-stack b{height:18px;border-radius:999px;background:#eaf1fa;overflow:hidden;display:block;}
.memory-stack i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3B61AC,#71C248,#F69220);}
.memory-stack em{font-style:normal;text-align:right;color:#60728f;}
.mio-v159-domain{grid-template-columns:1.5fr 1fr !important;gap:18px !important;}
.website-stage,.live-insight{border-radius:24px !important;min-height:210px !important;}
.lively-mix b{height:20px !important;box-shadow:inset 0 0 0 1px rgba(59,97,172,.04);}
.lively-mix i{background:linear-gradient(90deg,#3B61AC,#5caec0,#71C248,#F69220) !important;position:relative;}
.lively-mix i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:mio-shine 2.4s linear infinite;}
.live-insight{background:linear-gradient(135deg,#ffffff,#eef6ff 55%,#fff7ed) !important;}
.status-dots{display:flex;gap:8px;margin-top:22px;}
.status-dots i{width:12px;height:12px;border-radius:50%;background:#71C248;box-shadow:0 0 0 6px rgba(113,194,72,.12);}
.status-dots i:nth-child(2){background:#8cc7e8}.status-dots i:nth-child(3){background:#3B61AC}.status-dots i:nth-child(4){background:#F69220}.status-dots i:nth-child(5){background:#71C248}
@keyframes mio-pulse{0%,100%{transform:scale(.86);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes mio-shine{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media(max-width:1200px){.mio-dashboard-pulse,.mio-v159-graphs,.mio-v159-domain{grid-template-columns:1fr !important}.pulse-rings{justify-content:flex-start;flex-wrap:wrap}}


/* Mio V160 dashboard rustiger en professioneler */
.mio-dashboard-pulse{display:none !important;}
.mio-v159-graphs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px !important;
    margin:22px 0 24px !important;
}
.big-live-card{
    min-height:255px !important;
    border-radius:18px !important;
    padding:18px !important;
    background:#fff !important;
    border:1px solid #dbe7f5 !important;
    box-shadow:0 10px 28px rgba(20,45,80,.055) !important;
}
.big-live-card:before{
    height:3px !important;
    background:#3B61AC !important;
    opacity:.9 !important;
}
.chart-traffic.big-live-card:before{background:#71A84F !important;}
.chart-memory.big-live-card:before{background:#F69220 !important;}
.chart-card-modern .graph-head{margin-bottom:14px !important;}
.chart-card-modern .graph-head span{
    color:#365da6 !important;
    font-size:13px !important;
    font-weight:750 !important;
}
.chart-card-modern .graph-head strong,
.big-live-card .graph-head strong{
    font-size:34px !important;
    letter-spacing:-1px !important;
}
.chart-card-modern .graph-head small{
    background:#f6f9fd !important;
    border-color:#dfeaf6 !important;
    color:#667892 !important;
    font-weight:500 !important;
}
.mio-line-chart.expressive,
.mio-line-chart.expressive.small{
    height:118px !important;
    margin-top:0 !important;
    border-radius:16px !important;
    background:linear-gradient(180deg,#fbfdff 0%,#f7faff 100%) !important;
    border:1px solid #e7eff8 !important;
    box-shadow:none !important;
}
.mio-line-chart.expressive.small{height:88px !important;}
.mio-line-svg .grid{stroke:#edf3fa !important;stroke-width:1 !important;}
.mio-line-svg .area{opacity:.10 !important;}
.mio-line-svg .line{stroke-width:3.2 !important;filter:none !important;}
.mio-line-svg .dot{r:3px !important;stroke-width:2.5 !important;}
.graph-pills{margin-top:13px !important;}
.graph-pills span{
    background:#f7fafd !important;
    border-color:#e2ebf6 !important;
    color:#536987 !important;
    font-size:12px !important;
}
.traffic-meter{gap:10px !important;margin:0 0 12px !important;}
.traffic-meter div{
    border-radius:14px !important;
    padding:12px 13px !important;
    background:#fbfdff !important;
    border-color:#e1eaf5 !important;
}
.traffic-meter div:after{height:3px !important;background:#71A84F !important;}
.traffic-meter strong{font-size:19px !important;}
.memory-stack{gap:12px !important;margin:2px 0 12px !important;}
.memory-stack b{height:12px !important;background:#edf3fa !important;}
.memory-stack i{background:#F69220 !important;}
.memory-stack div{font-size:13px !important;}
.mio-v159-domain,.website-stage,.live-insight{display:none !important;}
@media(max-width:1200px){.mio-v159-graphs{grid-template-columns:1fr !important;}}

.mio-logo-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #d7e5f7;
    border-radius: 14px;
    background: #f8fbff;
}
.mio-logo-preview span {
    font-weight: 700;
    color: #0b234d;
}
.mio-logo-preview img {
    max-width: 180px;
    max-height: 70px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e3edf9;
    border-radius: 10px;
    padding: 8px;
}
.form-section-title {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-weight: 800;
    color: #2f5fb8;
}


/* V175 - klantenlijst acties compacter en verwijderknop netjes */
.icon-only.danger{
    background:#df4b3f !important;
    color:#fff !important;
}
.mio-unified-list .mio-domain-table th:nth-child(8),
.mio-unified-list .mio-domain-table td:nth-child(8){
    width:300px;
}
.mio-unified-list .mio-domain-table th:nth-child(9),
.mio-unified-list .mio-domain-table td:nth-child(9){
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    text-align:center !important;
    padding-left:10px !important;
    padding-right:14px !important;
}
.mio-unified-list .mio-domain-table td:nth-child(9) .inline-form{
    margin:0 !important;
    display:flex !important;
    justify-content:center !important;
}
.mio-unified-list .mio-domain-table td:nth-child(9) .icon-only{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    border-radius:9px !important;
    font-size:15px !important;
}
.mio-unified-list .mio-domain-table th:last-child,
.mio-unified-list .mio-domain-table td:last-child{
    min-width:62px !important;
}
.mio-unified-list .mio-domain-table th,
.mio-unified-list .mio-domain-table td{
    vertical-align:middle !important;
}


/* V217 subtiele dashboardmelding */
.dashboard-alert-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:14px 0 18px;
    padding:11px 14px;
    border:1px solid #dce6f3;
    border-left:4px solid #f2b84b;
    border-radius:14px;
    background:rgba(255,248,229,.62);
    color:#00173d;
    box-shadow:0 8px 20px rgba(15,31,58,.035);
}
.dashboard-alert-line-main{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
}
.dashboard-alert-line-main strong{
    font-size:14px;
    font-weight:700;
}
.dashboard-alert-line-main span:not(.dashboard-alert-dot){
    color:#334b70;
    font-size:14px;
}
.dashboard-alert-line-main small{
    color:#6a7d99;
    font-weight:700;
}
.dashboard-alert-line a{
    flex:0 0 auto;
    color:#2f5fb8;
    font-weight:700;
    font-size:13px;
    text-decoration:none;
}
.dashboard-alert-dot{
    width:9px;
    height:9px;
    border-radius:999px;
    background:#f2b84b;
    flex:0 0 auto;
}
.dashboard-alert-dot.bad{
    background:#d95f4e;
}
.dashboard-alert-line:has(.dashboard-alert-dot.bad){
    border-left-color:#d95f4e;
    background:rgba(255,241,240,.62);
}
@media (max-width: 760px){
    .dashboard-alert-line{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* V218 - snelle website-open knop in domeinenoverzicht */
.mio-domain-name-row{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}
.mio-domain-open-site{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    min-width:26px;
    border:1px solid #d8e2f0;
    border-radius:8px;
    background:#fff;
    text-decoration:none;
    font-size:14px;
    line-height:1;
}
.mio-domain-open-site:hover{
    background:#eef5ff;
    border-color:#b7c9e5;
    text-decoration:none;
}


/* Mio V222 - Serverbescherming overzichtelijker */
.sp-page-head{
    margin-bottom:14px;
}

.sp-hero{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:18px;
    padding:18px;
    margin:18px 0;
    box-shadow:0 10px 24px rgba(15,31,58,.04);
}

.sp-hero.is-ok{
    border-color:#c8efbf;
    background:#fbfff9;
}

.sp-hero.is-warn{
    border-color:#ffd4c9;
    background:#fffaf7;
}

.sp-hero-main{
    min-width:260px;
}

.sp-kicker{
    display:block;
    font-size:12px;
    font-weight:600;
    color:#486081;
    margin-bottom:4px;
}

.sp-hero-main strong{
    display:block;
    font-size:22px;
    color:#00173d;
}

.sp-hero-main small{
    display:block;
    color:#486081;
    margin-top:4px;
}

.sp-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.sp-actions form{
    margin:0;
}

.sp-health-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin:16px 0;
}

.sp-health-card{
    background:#fff;
    border:1px solid #dce6f3;
    border-radius:16px;
    padding:14px 16px;
    min-height:94px;
}

.sp-health-card.ok{
    border-color:#c8efbf;
    background:linear-gradient(135deg,#fff 0%,#f8fff5 100%);
}

.sp-health-card.warn{
    border-color:#ffd4c9;
    background:linear-gradient(135deg,#fff 0%,#fff7f4 100%);
}

.sp-health-card span{
    display:block;
    font-size:12px;
    color:#486081;
    font-weight:600;
    margin-bottom:6px;
}

.sp-health-card strong{
    display:block;
    font-size:20px;
    color:#00173d;
    line-height:1.2;
}

.sp-health-card small{
    display:block;
    color:#486081;
    font-size:12px;
    margin-top:6px;
    overflow-wrap:anywhere;
}

.sp-last-event{
    display:flex;
    gap:12px;
    align-items:flex-start;
    background:#f7faff;
    border:1px solid #dce6f3;
    border-radius:14px;
    padding:12px 14px;
    margin:14px 0;
    color:#00173d;
}

.sp-last-event strong{
    white-space:nowrap;
}

.sp-last-event span{
    color:#486081;
}

.sp-two-col{
    display:grid;
    grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);
    gap:16px;
    align-items:start;
}

.sp-panel-title{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
    margin-bottom:12px;
}

.sp-panel-title h3{
    margin-bottom:4px !important;
}

.sp-panel-title p{
    margin:0;
    color:#486081;
    font-size:13px;
}

.sp-def-list{
    display:grid;
    gap:10px;
    margin:0;
}

.sp-def-list div{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #edf2f7;
}

.sp-def-list div:last-child{
    border-bottom:0;
}

.sp-def-list dt{
    color:#486081;
    font-size:12px;
    font-weight:600;
}

.sp-def-list dd{
    margin:0;
    color:#00173d;
    overflow-wrap:anywhere;
}

.sp-compact-table{
    width:100%;
    border-collapse:collapse;
}

.sp-compact-table th,
.sp-compact-table td{
    padding:10px 12px;
    border-bottom:1px solid #e7eef7;
    text-align:left;
    vertical-align:top;
    font-size:13px;
}

.sp-compact-table th{
    color:#00173d;
    background:#f4f8fd;
    font-weight:600;
}

.sp-compact-table td{
    color:#00173d;
    overflow-wrap:anywhere;
}

.sp-details{
    margin-top:12px;
}

.sp-details summary{
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border-radius:12px;
    border:1px solid #dce6f3;
    background:#f7faff;
    color:#00173d;
    font-weight:600;
}

.sp-details[open] summary{
    margin-bottom:12px;
}

@media (max-width:900px){
    .sp-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .sp-actions{
        justify-content:flex-start;
    }

    .sp-two-col{
        grid-template-columns:1fr;
    }

    .sp-def-list div{
        grid-template-columns:1fr;
        gap:4px;
    }
}

/* Mio V314 - rustig en compact domeinenoverzicht */
.mio-domain-table{
    table-layout:fixed;
}
.mio-domain-table th:nth-child(1),
.mio-domain-table td:nth-child(1){width:30%}
.mio-domain-table th:nth-child(2),
.mio-domain-table td:nth-child(2){width:7%;text-align:center}
.mio-domain-table th:nth-child(3),
.mio-domain-table td:nth-child(3){width:15%}
.mio-domain-table th:nth-child(4),
.mio-domain-table td:nth-child(4){width:10%}
.mio-domain-table th:nth-child(5),
.mio-domain-table td:nth-child(5){width:13%}
.mio-domain-table th:nth-child(6),
.mio-domain-table td:nth-child(6){width:25%}
.mio-domain-table td{
    overflow:hidden;
}
.mio-domain-mainlink,
.mio-domain-table .row-link{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.mio-platform-code{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    min-height:30px;
    padding:4px 8px;
    border-radius:8px;
    background:#eef4ff;
    color:#2f5eae;
    font-weight:800;
}
.mio-domain-table .inline-form{
    margin:0;
    gap:6px;
    flex-wrap:nowrap;
}
.mio-domain-table .inline-form + .inline-form{
    margin-top:6px;
}
.mio-domain-table .inline-form select{
    min-width:0;
    width:100%;
    max-width:none;
}
.mio-domain-table .icon-only{
    flex:0 0 auto;
}
@media (max-width:1150px){
    .mio-domain-table th,
    .mio-domain-table td{padding:14px 10px !important}
    .mio-domain-table th:nth-child(1),
    .mio-domain-table td:nth-child(1){width:31%}
    .mio-domain-table th:nth-child(3),
    .mio-domain-table td:nth-child(3){width:14%}
    .mio-domain-table th:nth-child(4),
    .mio-domain-table td:nth-child(4){width:8%}
    .mio-domain-table th:nth-child(5),
    .mio-domain-table td:nth-child(5){width:14%}
    .mio-domain-table th:nth-child(6),
    .mio-domain-table td:nth-child(6){width:26%}
    .mio-status-text{display:none}
}
@media (max-width:900px){
    .mio-list-panel{overflow-x:auto}
    .mio-domain-table{min-width:760px}
}

/* Mio V329 - aparte schijfruimtekaart op dashboard */
.mio-v159-graphs{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.chart-disk.big-live-card:before{background:#7d67b8 !important;}
.chart-disk .mio-line-svg .area{fill:#7d67b8 !important;opacity:.12 !important;}
.chart-disk .mio-line-svg .line{stroke:#7d67b8 !important;}
.chart-disk .mio-line-svg .dot{stroke:#7d67b8 !important;}
.disk-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:0 0 12px;
}
.disk-summary div{
    border:1px solid #e1eaf5;
    border-radius:14px;
    padding:12px 13px;
    background:#fbfdff;
}
.disk-summary span{
    display:block;
    color:#60728f;
    font-size:12px;
    font-weight:700;
    margin-bottom:6px;
}
.disk-summary strong{
    display:block;
    color:#00173d;
    font-size:18px;
}
@media(max-width:1500px){
    .mio-v159-graphs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:820px){
    .mio-v159-graphs{grid-template-columns:1fr !important;}
}

/* Mio V330 - zes rustige dashboardkaarten */
.mio-v159-graphs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.chart-backups.big-live-card:before{background:#6f8f3d !important;}
.chart-backups .mio-line-svg .area{fill:#6f8f3d !important;opacity:.12 !important;}
.chart-backups .mio-line-svg .line{stroke:#6f8f3d !important;}
.chart-backups .mio-line-svg .dot{stroke:#6f8f3d !important;}
.chart-websites.big-live-card:before{background:#4c8fb8 !important;}
.chart-websites .mio-line-svg .area{fill:#4c8fb8 !important;opacity:.12 !important;}
.chart-websites .mio-line-svg .line{stroke:#4c8fb8 !important;}
.chart-websites .mio-line-svg .dot{stroke:#4c8fb8 !important;}
.disk-summary .small-value{font-size:13px !important;line-height:1.3;overflow-wrap:anywhere;}
.disk-summary a{color:#315faa;text-decoration:none;}
.disk-summary a:hover{text-decoration:underline;}
.bc-table form{margin:0;}
@media(max-width:1500px){
    .mio-v159-graphs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:820px){
    .mio-v159-graphs{grid-template-columns:1fr !important;}
}

/* Mio V331 - duidelijke eigen kleur per dashboardkaart */
.chart-cpu.big-live-card:before{background:#3f67b1 !important;}
.chart-cpu .mio-line-svg .area{fill:#3f67b1 !important;opacity:.14 !important;}
.chart-cpu .mio-line-svg .line{stroke:#3f67b1 !important;}
.chart-cpu .mio-line-svg .dot{stroke:#3f67b1 !important;}

.chart-traffic.big-live-card:before{background:#62ad47 !important;}
.chart-traffic .mio-line-svg .area{fill:#62ad47 !important;opacity:.14 !important;}
.chart-traffic .mio-line-svg .line{stroke:#62ad47 !important;}
.chart-traffic .mio-line-svg .dot{stroke:#62ad47 !important;}

.chart-memory.big-live-card:before{background:#f08a24 !important;}
.chart-memory .mio-line-svg .area{fill:#f08a24 !important;opacity:.14 !important;}
.chart-memory .mio-line-svg .line{stroke:#f08a24 !important;}
.chart-memory .mio-line-svg .dot{stroke:#f08a24 !important;}

.chart-disk.big-live-card:before{background:#8063b6 !important;}
.chart-disk .mio-line-svg .area{fill:#8063b6 !important;opacity:.14 !important;}
.chart-disk .mio-line-svg .line{stroke:#8063b6 !important;}
.chart-disk .mio-line-svg .dot{stroke:#8063b6 !important;}

.chart-backups.big-live-card:before{background:#138f87 !important;}
.chart-backups .mio-line-svg .area{fill:#138f87 !important;opacity:.14 !important;}
.chart-backups .mio-line-svg .line{stroke:#138f87 !important;}
.chart-backups .mio-line-svg .dot{stroke:#138f87 !important;}

.chart-websites.big-live-card:before{background:#c45a7a !important;}
.chart-websites .mio-line-svg .area{fill:#c45a7a !important;opacity:.14 !important;}
.chart-websites .mio-line-svg .line{stroke:#c45a7a !important;}
.chart-websites .mio-line-svg .dot{stroke:#c45a7a !important;}


/* Mio V332 - dashboardgegevens handmatig vernieuwen */
.dashboard-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;}
.dashboard-refresh-box{display:flex;align-items:flex-end;flex-direction:column;gap:7px;}
.dashboard-refresh-box small{color:#71819a;font-size:12px;}
.dashboard-refresh-button{white-space:nowrap;}
@media(max-width:760px){
    .dashboard-page-head{align-items:flex-start;flex-direction:column;}
    .dashboard-refresh-box{align-items:flex-start;}
}

/* Mio V365 - status automatische back-upplanner */
.bc-runner-status{margin:12px 0 16px;padding:10px 12px;border-left:4px solid #dc3545;background:#fff7f6;font-weight:600}
.bc-runner-status.is-ok{border-left-color:#28a745;background:#f2fff5}


/* Mio V367 - rustige indeling voor back-up en herstel */
.backup-tools-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1100px){
    .backup-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
    .backup-tools-grid{grid-template-columns:1fr;}
}

/* V408 - rustiger klantenoverzicht en veilige klantweergave */
.mio-customer-list .mio-list-toolbar > div { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.customer-list-hint { font-size:13px; }
.mio-customer-table { table-layout:auto; }
.mio-customer-table th:nth-child(1) { width:22%; }
.mio-customer-table th:nth-child(2) { width:25%; }
.mio-customer-table th:nth-child(3) { width:9%; text-align:center; }
.mio-customer-table td:nth-child(3) { text-align:center; }
.mio-customer-table th:nth-child(4) { width:24%; }
.mio-customer-table th:nth-child(5) { width:20%; }
.mio-count-badge { display:inline-flex; min-width:30px; height:30px; padding:0 9px; align-items:center; justify-content:center; border-radius:15px; background:#eef4ff; color:#315cad; font-weight:700; }
.customer-vc-form { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.customer-vc-form select { min-width:170px; width:100%; }
.customer-row-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.customer-row-actions .btn { white-space:nowrap; }
.mio-preview-banner { margin:0 0 20px; padding:12px 16px; border:1px solid #f0c36b; background:#fff8e8; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mio-preview-banner strong { display:block; }
.mio-preview-banner span { font-size:13px; color:#6b5a32; }
@media (max-width:1100px) {
  .mio-customer-table th:nth-child(2), .mio-customer-table td:nth-child(2) { display:none; }
  .mio-customer-table th:nth-child(1) { width:25%; }
  .mio-customer-table th:nth-child(4) { width:35%; }
}

/* V410 - compacte klantacties op één regel */
.mio-customer-table th:nth-child(5) { width:15%; }
.customer-row-actions { display:flex; align-items:center; gap:7px; flex-wrap:nowrap; white-space:nowrap; }
.customer-row-actions .inline-form { margin:0; }
.customer-action-icon { text-decoration:none; }
.customer-action-icon:hover { color:#fff; }

/* Mio V426 - rustig mailbeheer met tabbladen en duidelijke wachtwoordbediening */
.mail-tabs{
    display:flex;
    gap:0;
    margin:20px 0;
    border-bottom:1px solid #cbd8e8;
    overflow-x:auto;
}
.mail-tab{
    appearance:none;
    border:0;
    border-bottom:3px solid transparent;
    background:transparent;
    color:#405573;
    min-height:48px;
    padding:0 20px;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
}
.mail-tab:hover{background:#f7faff;color:#17345f}
.mail-tab.active{background:#f7faff;color:#17345f;border-bottom-color:#3b61ac}
.mail-tab-panel{display:none}
.mail-tab-panel.active{display:block}

.mail-password-field{
    display:grid;
    grid-template-columns:minmax(180px,1fr) auto auto;
    gap:7px;
    align-items:center;
    margin-top:8px;
}
.mail-password-field input{margin-top:0!important}
.mail-field-button{
    height:46px;
    padding:0 12px;
    border:1px solid #c8d8f3;
    border-radius:9px;
    background:#eef4ff;
    color:#2f57a5;
    font-weight:700;
    cursor:pointer;
}

.mail-manage-action{position:relative}
.mail-manage-action>summary{list-style:none}
.mail-manage-action>summary::-webkit-details-marker{display:none}
.mail-manage-panel{
    position:absolute;
    z-index:80;
    top:44px;
    right:0;
    width:min(680px,calc(100vw - 80px));
    padding:20px;
    border:1px solid #d6e1ef;
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 42px rgba(0,23,61,.18);
}
.mail-manage-title{display:flex;flex-direction:column;gap:3px;margin-bottom:16px}
.mail-manage-title strong{font-size:17px;color:#00173d}
.mail-manage-title small{color:#63738c}
.mail-manage-block{
    padding:16px;
    margin-top:12px;
    border:1px solid #e0e8f3;
    border-radius:12px;
    background:#f8fbff;
}
.mail-manage-block>strong{display:block;margin-bottom:12px;color:#00173d}
.mail-manage-label{display:block;margin:10px 0 7px;color:#405573;font-size:13px;font-weight:700}
.mail-password-line{
    display:grid;
    grid-template-columns:minmax(180px,1fr) repeat(3,auto);
    gap:8px;
    align-items:center;
}
.mail-password-line input{
    width:100%;
    min-height:40px;
    box-sizing:border-box;
    border:1px solid #cbd8ea;
    border-radius:9px;
    padding:0 12px;
    background:#fff;
}
.mail-password-change-form{margin-top:14px}
.mail-manage-footer{
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #e2eaf4;
}
.mail-manage-footer form{margin:0!important}

@media(max-width:900px){
    .mail-password-field{grid-template-columns:1fr auto}
    .mail-password-field [data-password-generate]{grid-column:1/-1}
    .mail-password-line{grid-template-columns:1fr 1fr}
    .mail-password-line input{grid-column:1/-1}
    .mail-manage-panel{position:fixed;left:20px;right:20px;top:80px;width:auto;max-height:calc(100vh - 110px);overflow:auto}
}
@media(max-width:620px){
    .mail-tab{padding:0 14px}
    .mail-password-field{grid-template-columns:1fr}
    .mail-password-line{grid-template-columns:1fr}
    .mail-password-line input{grid-column:auto}
}


/* V427 - mailboxbeheer als echt dialoogvenster; niet meer afgeknipt door de tabel */
.mail-manage-action[open]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1990;
    background:rgba(0,23,61,.38);
}
.mail-manage-panel{
    position:fixed!important;
    z-index:2000!important;
    top:50%!important;
    left:50%!important;
    right:auto!important;
    width:min(720px,calc(100vw - 40px))!important;
    max-height:calc(100vh - 60px)!important;
    overflow:auto!important;
    transform:translate(-50%,-50%)!important;
    box-sizing:border-box!important;
}
.mail-manage-title{
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:18px!important;
}
.mail-manage-title>div{display:flex;flex-direction:column;gap:3px}
.mail-manage-close{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border:1px solid #cbd8ea;
    border-radius:9px;
    background:#f4f7fb;
    color:#00173d;
    font-size:25px;
    line-height:1;
    cursor:pointer;
}
.mail-manage-close:hover{background:#eaf1fb}
.mailbox-table{overflow:visible!important}
.mail-domain-panel{overflow:visible!important}
body:has(.mail-manage-action[open]){overflow:hidden}
@media(max-width:620px){
    .mail-manage-panel{width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px)!important}
}

/* V429 - werkelijk mailboxbeheer buiten de tabel */
.mailbox-modal[hidden]{display:none!important}
.mailbox-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px;box-sizing:border-box}
.mailbox-modal-backdrop{position:absolute;inset:0;background:rgba(0,23,61,.44)}
.mailbox-modal-dialog{position:relative;z-index:1;width:min(680px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #d5dfec;border-radius:14px;background:#fff;box-shadow:0 24px 70px rgba(0,23,61,.28)}
.mailbox-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 16px;border-bottom:1px solid #e1e8f2}
.mailbox-modal-header h3{margin:0;font-size:18px;color:#00173d}.mailbox-modal-header p{margin:4px 0 0;color:#63738c}
.mailbox-modal-close{width:38px;height:38px;flex:0 0 38px;border:1px solid #b9c9df;border-radius:9px;background:#fff;color:#00173d;font-size:25px;line-height:1;cursor:pointer}
.mailbox-modal-body{overflow-y:auto;overflow-x:hidden;padding:18px 22px;display:grid;gap:14px}
.mailbox-setting-card{min-width:0;padding:16px;border:1px solid #dbe5f1;border-radius:12px;background:#f8fbff}
.mailbox-setting-card h4{margin:0 0 12px;font-size:15px;color:#00173d}
.mailbox-password-unavailable{padding:11px 12px;border-radius:9px;background:#fff4db;color:#714f00;line-height:1.45}
.mailbox-password-current{grid-template-columns:minmax(0,1fr) auto auto!important}
.mailbox-password-new{grid-template-columns:minmax(0,1fr) auto auto auto!important}
.mailbox-quota-line{display:grid;grid-template-columns:minmax(120px,180px) auto;gap:10px;align-items:center}
.mailbox-quota-line input{width:100%;min-height:40px;box-sizing:border-box;border:1px solid #cbd8ea;border-radius:9px;padding:0 12px;background:#fff}
.mailbox-modal-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 22px;border-top:1px solid #e1e8f2;background:#fff}
.mailbox-modal-footer form{margin:0!important}
body.mailbox-modal-open{overflow:hidden}
@media(max-width:760px){
 .mailbox-modal{padding:12px}
 .mailbox-modal-dialog{max-height:calc(100vh - 24px)}
 .mailbox-password-current,.mailbox-password-new{grid-template-columns:1fr 1fr!important}
 .mailbox-password-current input,.mailbox-password-new input{grid-column:1/-1}
 .mailbox-password-new .primary{grid-column:1/-1}
}
@media(max-width:480px){
 .mailbox-modal-header,.mailbox-modal-body,.mailbox-modal-footer{padding-left:14px;padding-right:14px}
 .mailbox-password-current,.mailbox-password-new,.mailbox-quota-line{grid-template-columns:1fr!important}
 .mailbox-password-current input,.mailbox-password-new input{grid-column:auto}
 .mailbox-modal-footer{align-items:stretch}.mailbox-modal-footer form,.mailbox-modal-footer button{width:100%}
}
.mio-nav-group{margin:0 0 10px;border:1px solid #d4e1f2;border-radius:11px;background:#fff;overflow:hidden}
.mio-nav-group summary{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 14px;color:#172d50;font-weight:700;cursor:pointer;list-style:none;user-select:none}
.mio-nav-group summary::-webkit-details-marker{display:none}
.mio-nav-group summary span{color:#6d82a1;transition:transform .18s ease}
.mio-nav-group[open] summary span{transform:rotate(180deg)}
.mio-nav-group.has-active>summary,.mio-nav-group[open]>summary{background:#edf4ff;color:#315dac}
aside nav .mio-nav-submenu{display:grid;gap:5px;padding:5px 7px 8px;border-top:1px solid #e4ecf7;background:#f8fbff}
aside nav .mio-nav-submenu a{min-height:36px;margin:0;padding:8px 10px 8px 20px;border:0;border-radius:8px;background:transparent;font-size:13px;position:relative}
aside nav .mio-nav-submenu a:before{content:"";position:absolute;left:9px;top:50%;width:4px;height:4px;border-radius:50%;background:#9aacC5;transform:translateY(-50%)}
aside nav .mio-nav-submenu a:hover,aside nav .mio-nav-submenu a.active{background:#fff;color:#315dac;box-shadow:0 0 0 1px #d8e4f4 inset}
.dashboard-update-status{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border:1px solid #d7e3f2;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(37,74,130,.05)}
.dashboard-update-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#edf4ff;color:#315dac;font-size:22px;font-weight:800}
.dashboard-update-copy{display:grid;gap:1px;min-width:0}.dashboard-update-copy span{color:#60728f;font-size:12px;font-weight:700}.dashboard-update-copy strong{color:#0b2347;font-size:15px}.dashboard-update-copy small{color:#71819b;font-size:11px}
.dashboard-update-status.has-update{border-color:#b8dda8;background:linear-gradient(90deg,#f3fbed 0,#fff 72%)}.dashboard-update-status.has-update .dashboard-update-icon{background:#68bf45;color:#fff}
.dashboard-update-status.is-current .dashboard-update-icon{background:#edf8e8;color:#58a43b}.dashboard-update-status.is-unknown .dashboard-update-icon{background:#f2f5f9;color:#73839b}
@media(max-width:680px){.dashboard-update-status{grid-template-columns:42px 1fr}.dashboard-update-status>a{grid-column:1/-1;width:100%;text-align:center}}