/* ============================================================
   beheer.css — gedeelde stijlen voor het QRScan klantportaal
   Harmoniseert met qrbarcodes-info/qrbarcodes.css
   Kleurenpalet: #1a6fdb (blauw) · #1a2340 (navy) · #1558b8 (hover)
   ============================================================ */

/* ===== RESET & BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f4f6fb;
    color: #1a2340;
    display: flex;
    min-height: 100vh;
}
a { text-decoration: none; }

/* ===== SIDEBAR ===== */
.sidebar {
    width: 230px;
    min-height: 100vh;
    background: #1a2340;
    color: #c8d0e0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
}
.sidebar-brand {
    padding: 22px 20px 18px;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #2a3558;
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand-icon { font-size: 22px; color: #1a6fdb; }
.brand-name { letter-spacing: .02em; }
.brand-name strong { color: #1a6fdb; }

.sidebar-klant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #2a3558;
}
.klant-avatar {
    width: 36px; height: 36px;
    background: #1a6fdb;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; color: #fff;
    flex-shrink: 0;
}
.klant-naam { font-size: 13px; font-weight: 600; color: #e8ecf4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.klant-code { font-size: 11px; color: #6b7899; }

.nav-list { list-style: none; padding: 12px 0; flex: 1; }
.nav-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #8a96b3;
    text-decoration: none;
    font-size: 13.5px;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}
.nav-item a:hover { background: #232e50; color: #c8d0e0; }
.nav-item.active a { background: #1f2d52; color: #fff; border-left-color: #1a6fdb; font-weight: 600; }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid #2a3558;
}
.footer-link { font-size: 12px; color: #6b7899; text-decoration: none; }
.footer-link:hover { color: #8a96b3; }

/* ===== MAIN CONTENT ===== */
.main {
    margin-left: 230px;
    flex: 1;
    padding: 28px 32px;
    min-height: 100vh;
}
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 22px; font-weight: 700; }
.page-header p { font-size: 13px; color: #8a93a6; margin-top: 4px; }

/* ===== CARDS ===== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border-top: 4px solid #e0e6f0;
}
.card.blue   { border-top-color: #1a6fdb; }
.card.green  { border-top-color: #34c47c; }
.card.orange { border-top-color: #ffb84d; }
.card.red    { border-top-color: #e25858; }
.card .c-label   { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a93a6; }
.card .c-value   { font-size: 28px; font-weight: 700; margin: 6px 0 4px; }
.card .c-sub     { font-size: 12px; color: #8a93a6; }
.card .c-sub.up  { color: #34c47c; font-weight: 600; }
.card .c-sub.down{ color: #e25858; font-weight: 600; }

/* ===== PANEL ===== */
.panel {
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    margin-bottom: 20px;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.panel-header h2 { font-size: 15px; font-weight: 700; }
.panel-header a  { font-size: 12px; color: #1a6fdb; text-decoration: none; }
.panel-header a:hover { text-decoration: underline; }

/* ===== GRID ===== */
.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ===== TABLE ===== */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #eef1f6; }
th { color: #1a6fdb; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
td a { color: #1a2340; text-decoration: none; font-weight: 600; }
td a:hover { color: #1a6fdb; text-decoration: underline; }

/* ===== DL INFO ===== */
dl.info div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #eef1f6; font-size: 13px; }
dl.info dt { color: #8a93a6; }
dl.info dd { margin: 0; font-weight: 600; text-align: right; max-width: 65%; word-break: break-word; }
dl.info dd a { color: #1a6fdb; text-decoration: none; }
dl.info dd a:hover { text-decoration: underline; }
dl.info dd .badge { font-weight: 600; }

/* ===== BADGES ===== */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.badge.actief    { background: #e3f8ed; color: #1f9d5a; }
.badge.inactief  { background: #fff1de; color: #c9821a; }
.badge.gepland   { background: #e8eefd; color: #1a6fdb; }
.badge.verlopen  { background: #fbe7e7; color: #c64545; }
.badge.concept   { background: #f0f0f0; color: #666; }
.badge.beheerder { background: #e8eefd; color: #1558b8; }

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background .15s;
}
.btn-primary { background: #1a6fdb; color: #fff; }
.btn-primary:hover { background: #1558b8; }
.btn-outline { background: #fff; color: #1a6fdb; border: 1.5px solid #1a6fdb; }
.btn-outline:hover { background: #f0f4ff; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-download { background: #f4f6fb; color: #1a2340; border: 1.5px solid #dde3ef; }
.btn-download:hover { background: #e8ecf6; }

/* ===== FORM ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 700; color: #6b7899; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #dde3ef;
    border-radius: 8px;
    font-size: 13px;
    color: #1a2340;
    font-family: inherit;
    background: #fff;
    transition: border-color .15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: none; border-color: #1a6fdb; box-shadow: 0 0 0 3px rgba(26,111,219,.12); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 12px; color: #8a93a6; margin-top: 4px; }
.alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert-success { background: #e3f8ed; color: #1f9d5a; border: 1px solid #b3e8cc; }
.alert-error   { background: #fbe7e7; color: #c64545; border: 1px solid #f5bebe; }

/* ===== DOC CARDS ===== */
.doc-card {
    background: #fff;
    border: 1.5px solid #eef1f6;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.doc-card .doc-icon { font-size: 32px; }
.doc-card .doc-title { font-size: 14px; font-weight: 700; }
.doc-card .doc-desc  { font-size: 12px; color: #8a93a6; flex: 1; }
canvas { max-height: 220px; }

/* ===== SORTEERBARE TABELLEN ===== */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: #f0f4ff; }
th.sort-asc, th.sort-desc { color: #1558b8; }
.sort-icon { font-size: 11px; color: #c0c8d8; margin-left: 3px; }
th.sort-asc  .sort-icon::before { content: '↑'; color: #1558b8; }
th.sort-desc .sort-icon::before { content: '↓'; color: #1558b8; }
th:not(.sort-asc):not(.sort-desc) .sort-icon::before { content: '⇅'; }

/* ===== LOGIN PAGINA (standalone, geen sidebar) ===== */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-wrap { width: 100%; max-width: 420px; }
.login-brand { text-align: center; margin-bottom: 28px; }
.login-brand .brand-icon { font-size: 36px; color: #1a6fdb; }
.login-brand .brand-name { font-size: 24px; font-weight: 700; color: #1a2340; margin-top: 6px; display: block; }
.login-brand .brand-name strong { color: #1a6fdb; }
.login-brand .brand-sub { font-size: 13px; color: #8a93a6; margin-top: 4px; }
.login-box {
    background: #fff;
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,.09);
}
.login-box .form-group input {
    padding: 11px 14px;
    font-size: 14px;
}
.btn-login {
    width: 100%;
    padding: 13px;
    background: #1a6fdb;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    margin-top: 4px;
}
.btn-login:hover { background: #1558b8; }
.login-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: #8a93a6;
    line-height: 1.6;
}
.login-footer a { color: #1a6fdb; text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

/* ===== BEHEER UTILITY (wachtwoord instellen e.d.) ===== */
body.util-page {
    display: block;
    padding: 40px;
}
.util-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 460px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.util-box h1 { font-size: 18px; margin-bottom: 20px; color: #c9821a; }
.util-box code {
    display: block;
    font-family: monospace;
    font-size: 11px;
    background: #f4f6fb;
    padding: 10px;
    border-radius: 6px;
    margin-top: 12px;
    word-break: break-all;
}
.util-warn { font-size: 12px; color: #c9821a; margin-top: 18px; }

/* ===== FAQ ===== */
.faq-lijst { display: flex; flex-direction: column; gap: 2px; }
.faq-item  { border: 1.5px solid #eef1f6; border-radius: 10px; overflow: hidden; }
.faq-vraag {
    width: 100%; background: #fff; border: none; padding: 15px 18px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 600; color: #1a2340; cursor: pointer;
    text-align: left; font-family: inherit; transition: background .15s;
}
.faq-vraag:hover { background: #f8f9fd; }
.faq-item.open .faq-vraag { background: #f0f4ff; color: #1558b8; }
.faq-icoon { font-size: 20px; font-weight: 300; color: #8a93a6; flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-icoon { transform: rotate(45deg); color: #1558b8; }
.faq-antwoord { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-antwoord { max-height: 400px; }
.faq-antwoord-inner {
    padding: 14px 18px 18px;
    font-size: 13.5px; line-height: 1.7; color: #4a5568;
    border-top: 1px solid #eef1f6; background: #fafbfe;
}
.faq-antwoord-inner a  { color: #1a6fdb; }
.faq-antwoord-inner code { background: #e8edf7; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.faq-antwoord-inner strong { color: #1a2340; }

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
    .sidebar { width: 200px; }
    .main { margin-left: 200px; padding: 16px; }
}
@media (max-width: 500px) {
    .login-box { padding: 28px 20px; }
}