/*
 * VHoV Minimumdoelen — frontend.
 *
 * Alles staat onder .vhov-md. Het originele dashboard was een hele pagina en
 * mocht html/body/* aanpassen; hier draait het binnen een Genesis-thema, dus
 * elke globale reset is eruit gehaald en vervangen door een reset die alleen
 * binnen de eigen container geldt.
 *
 * Niet met de hand bijwerken vanuit index.html — dit bestand is nu de bron.
 */

.vhov-md {
    --purple: #4B2678;
    --purple-dark: #32184F;
    --magenta: #C6197F;
    --orange: #F2994A;
    --bg: #F8F5FB;
    --card: #FFFFFF;
    --text: #2B2438;
    --muted: #8A80A0;
    --border: #EAE2F3;
    --good: #3FA66B;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.vhov-md *,
.vhov-md *::before,
.vhov-md *::after {
    box-sizing: border-box;
}

.vhov-md .global-header {
    text-align: center;
    padding: 34px 20px 6px;
    background: linear-gradient(160deg, #FDFBFF, #F0E7F8);
}

.vhov-md .vhov-logo {
    max-width: 260px;
    width: 55%;
    height: auto;
    display: block;
    margin: 0 auto 16px;
}

.vhov-md .global-header h1 {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 800;
    color: var(--purple-dark);
}

.vhov-md .global-header p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 700;
}

.vhov-md .warning-banner {
    margin: 18px 18px 6px;
    background: #FFF4E1;
    border: 1px solid #F0C374;
    color: #7A4A0A;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.vhov-md .warning-banner .wi {
    font-size: 17px;
    flex-shrink: 0;
    line-height: 1.3;
}

.vhov-md .warning-banner b {
    color: #5C3600;
}

.vhov-md .kind-bar-wrap {
    padding: 14px 18px 4px;
}

.vhov-md .kind-bar-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

.vhov-md .kind-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.vhov-md .kind-chip {
    display: flex;
    align-items: center;
    gap: 2px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 4px 6px 4px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}

.vhov-md .kind-chip.active {
    border-color: var(--purple);
    background: var(--purple);
    color: white;
}

.vhov-md .kind-chip .kind-name-btn {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 2px 0;
}

.vhov-md .kind-chip .kind-icon-btn {
    background: rgba(0,0,0,0.06);
    border: none;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    font-size: 9px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Lucht tussen de naam en de twee icoonknopjes. */
.vhov-md .kind-chip .kind-name-btn + .kind-icon-btn {
    margin-left: 10px;
}

.vhov-md .kind-chip.active .kind-icon-btn {
    background: rgba(255,255,255,0.22);
}

.vhov-md .kind-add-btn {
    background: var(--card);
    border: 1.5px dashed #C9B8DE;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--purple);
    cursor: pointer;
}

.vhov-md .top-level-nav {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    background: var(--purple-dark);
    position: sticky;
    top: 0;
    z-index: 200;
    margin-top: 14px;
}

.vhov-md .top-level-nav button {
    flex: 1;
    max-width: 260px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #E9DFF5;
    font-weight: 800;
    font-size: 14px;
    padding: 12px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s;
}

.vhov-md .top-level-nav button.active {
    background: #FFFFFF;
    color: var(--purple-dark);
}

.vhov-md .top-section {
    display: none;
}

.vhov-md .top-section.active {
    display: block;
}

.vhov-md header.hero {
    background: linear-gradient(120deg, var(--purple-dark), var(--purple) 55%, var(--magenta) 100%);
    color: white;
    padding: 22px 26px 24px;
    position: relative;
    overflow: hidden;
}

.vhov-md header.hero::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
    opacity: 0.35;
}

.vhov-md .brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.vhov-md .brand-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.15);
    padding: 5px 12px;
    border-radius: 20px;
}

.vhov-md .brand-tag.kind-tag {
    background: rgba(255,255,255,0.24);
}

.vhov-md header.hero p {
    margin: 12px 0 0;
    opacity: 0.9;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

.vhov-md .overall-card {
    margin: -22px 18px 0;
    background: var(--card);
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 10px 28px rgba(75,38,120,0.14);
    position: relative;
    z-index: 2;
}

.vhov-md .overall-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.vhov-md .overall-top .big {
    font-size: 26px;
    font-weight: 800;
    color: var(--purple);
}

.vhov-md .overall-top .lbl {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vhov-md .bar-bg {
    background: var(--border);
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
}

.vhov-md .bar-fill {
    background: linear-gradient(90deg, var(--magenta), var(--orange));
    height: 100%;
    border-radius: 10px;
    transition: width .3s;
}

.vhov-md .toolbar {
    padding: 18px 18px 4px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.vhov-md .toolbar select,
.vhov-md .toolbar input[type=text] {
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 13px;
    font-family: inherit;
    background: white;
    color: var(--text);
}

.vhov-md .toolbar input[type=text] {
    flex: 1;
    min-width: 140px;
}

.vhov-md .toggle-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    color: var(--muted);
    user-select: none;
}

.vhov-md .toggle-chip.active {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
}

.vhov-md .print-btn {
    color: var(--purple);
    border-color: #D8C6EA;
    margin-left: auto;
}

.vhov-md .vak-section {
    margin: 16px 18px 0;
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(75,38,120,0.06);
}

.vhov-md .vak-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    background: linear-gradient(90deg, var(--purple), var(--magenta));
    color: white;
}

.vhov-md .vak-header .icon {
    font-size: 18px;
}

.vhov-md .vak-header .title {
    font-weight: 800;
    font-size: 15px;
    flex: 1;
}

.vhov-md .vak-header .count {
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    padding: 3px 10px;
    border-radius: 12px;
}

.vhov-md .vak-header .chevron {
    font-size: 13px;
    transition: transform .2s;
}

.vhov-md .vak-header.collapsed .chevron {
    transform: rotate(-90deg);
}

.vhov-md .vak-progress-bg {
    height: 4px;
    background: rgba(255,255,255,0.25);
}

.vhov-md .vak-progress-fill {
    height: 100%;
    background: white;
}

.vhov-md .vak-body {
    padding: 6px 0;
}

.vhov-md .vak-body.collapsed {
    display: none;
}

.vhov-md .onderwerp-group {
    padding: 6px 16px 10px;
}

.vhov-md .onderwerp-title {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 10px 0 4px;
}

.vhov-md .doel-row {
    display: flex;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}

.vhov-md .doel-row:last-child {
    border-bottom: none;
}

.vhov-md .doel-row.behaald {
    opacity: 0.7;
}

.vhov-md .doel-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    margin-top: 1px;
    background: white;
    transition: all .15s;
}

.vhov-md .doel-checkbox.checked {
    background: var(--good);
    border-color: var(--good);
    color: white;
}

.vhov-md .doel-main {
    flex: 1;
    min-width: 0;
}

.vhov-md .doel-nummer {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--magenta);
    margin-bottom: 2px;
}

.vhov-md .leerjaar-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--purple);
    background: var(--border);
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: 4px;
}

.vhov-md .doel-tekst {
    font-size: 13.5px;
    line-height: 1.42;
}

.vhov-md .doel-row.behaald .doel-tekst {
    text-decoration: line-through;
}

.vhov-md .doel-uitbreiding-toggle {
    font-size: 11px;
    color: var(--purple);
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    display: inline-block;
}

.vhov-md .doel-uitbreiding {
    display: none;
    margin-top: 6px;
    padding-left: 14px;
}

.vhov-md .doel-uitbreiding.open {
    display: block;
}

.vhov-md .doel-uitbreiding li {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 3px;
    line-height: 1.4;
}

.vhov-md .note-area {
    margin-top: 8px;
}

.vhov-md .note-add-link,
.vhov-md .note-edit-link {
    font-size: 11px;
    color: var(--purple);
    font-weight: 700;
    cursor: pointer;
}

.vhov-md .note-edit-link {
    margin-left: 8px;
    text-decoration: underline;
}

.vhov-md .note-preview {
    font-size: 12.5px;
    color: var(--text);
    background: #FBF6FF;
    border-left: 3px solid var(--magenta);
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.4;
}

.vhov-md .note-textarea {
    width: 100%;
    min-height: 56px;
    margin-top: 4px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 12.5px;
    resize: vertical;
    color: var(--text);
}

.vhov-md .empty-state {
    text-align: center;
    padding: 30px 10px;
    color: var(--muted);
    font-size: 13px;
}

.vhov-md footer.note-footer {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    padding: 22px 20px 10px;
}

.vhov-md .reset-link {
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}

/* ---- toestanden van de plugin zelf (niet uit het originele dashboard) ---- */

.vhov-md-status {
    margin: 24px 20px;
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.vhov-md-status p {
    margin: 0 0 8px;
}

.vhov-md-status p:last-child {
    margin-bottom: 0;
}

.vhov-md-fout {
    border-color: #F0C2C2;
    background: #FDF6F6;
    color: #8A3A3A;
}

.vhov-md-detail {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-word;
    opacity: 0.85;
}

.vhov-md-info {
    margin: 0 20px 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #FFF6E9;
    border: 1px solid #F6DFBE;
    color: #8A5A1E;
    font-size: 12.5px;
    font-weight: 600;
}

.vhov-md-melding {
    margin: 24px 20px;
    padding: 22px 24px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: center;
}

.vhov-md-melding p {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.55;
}

.vhov-md-knop {
    display: inline-block;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--purple);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.vhov-md-knop:hover,
.vhov-md-knop:focus {
    background: var(--purple-dark);
    color: #fff;
}

/* ---- meldingen bij opslaan ---- */

.vhov-md-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    max-width: min(520px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--purple-dark);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 9999;
}

.vhov-md-toast.zichtbaar {
    opacity: 1;
    transform: translate(-50%, 0);
}

.vhov-md-toast.fout {
    background: #8A2B2B;
}

/* ---- aanbod om oude browsergegevens over te nemen ---- */

.vhov-md-overname {
    margin: 16px 18px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #F3ECFB;
    border: 1px solid #D8C6EA;
    color: var(--purple-dark);
}

.vhov-md-overname p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
}

.vhov-md-overname p:last-child {
    margin-bottom: 0;
}

.vhov-md-overname.klaar {
    background: #EDF7F0;
    border-color: #BEE0CA;
    color: #24593A;
}

.vhov-md-overname-knoppen {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vhov-md-knop-stil {
    background: transparent;
    color: var(--purple);
    border: 1px solid #C9B8DE;
}

.vhov-md-knop-stil:hover,
.vhov-md-knop-stil:focus {
    background: #EDE4F6;
    color: var(--purple-dark);
}

.vhov-md-knop[disabled] {
    opacity: .55;
    cursor: default;
}

/* ==========================================================================
   Hardening (fase 9)
   ========================================================================== */

/* ---- verdediging tegen themastijlen ----------------------------------------
   Het originele dashboard was een hele pagina en kon van browserstandaarden
   uitgaan. Hier draait het binnen een Genesis-thema dat zijn eigen regels legt
   op knoppen, lijsten, links en formulieren. Alles wat we hieronder terugzetten
   is iets waarvan de opmaak stukgaat als het thema er iets anders mee doet.
   -------------------------------------------------------------------------- */

.vhov-md button {
    font-family: inherit;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    box-shadow: none;
    width: auto;
    margin: 0;
}

.vhov-md button:hover,
.vhov-md button:focus {
    text-decoration: none;
}

.vhov-md input,
.vhov-md select,
.vhov-md textarea {
    font-family: inherit;
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    text-transform: none;
    line-height: normal;
}

.vhov-md ul,
.vhov-md ol {
    margin: 0;
    padding: 0;
}

.vhov-md li {
    margin: 0;
}

.vhov-md .doel-uitbreiding {
    padding-left: 18px;
}

.vhov-md .doel-uitbreiding li {
    list-style: disc;
}

.vhov-md p {
    margin: 0;
}

.vhov-md h1,
.vhov-md h2,
.vhov-md h3 {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.vhov-md a {
    box-shadow: none;
}

.vhov-md img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.vhov-md table {
    border: 0;
}

/* ---- zichtbare focus ------------------------------------------------------
   Alles wat met de muis bedienbaar is, is nu ook met tab bereikbaar. Dan moet
   je ook kunnen zien waar je bent.
   -------------------------------------------------------------------------- */

.vhov-md :focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 2px;
    border-radius: 4px;
}

.vhov-md .doel-checkbox:focus-visible {
    outline-offset: 3px;
}

/* ---- mobiel ----------------------------------------------------------------
   Het origineel had geen enkele mediaquery. Op een telefoon van 360 px liepen
   de werkbalk en de vakkoppen uit hun voegen.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .vhov-md .global-header {
        padding: 22px 14px 6px;
    }

    .vhov-md .vhov-logo {
        width: 65%;
        max-width: 200px;
    }

    .vhov-md .kind-bar-wrap,
    .vhov-md .top-level-nav,
    .vhov-md .toolbar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vhov-md .overall-card {
        margin-left: 12px;
        margin-right: 12px;
        padding: 14px 16px;
    }

    .vhov-md header.hero {
        padding: 18px 16px 20px;
    }

    /* Selects en zoekveld naast elkaar proppen werkt niet op 360 px. */
    .vhov-md .toolbar {
        gap: 6px;
    }

    .vhov-md .toolbar select,
    .vhov-md .toolbar input[type=text] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .vhov-md .toggle-chip {
        flex: 0 0 auto;
    }

    .vhov-md .print-btn {
        margin-left: 0;
    }

    .vhov-md .vak-header {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .vhov-md .vak-header .title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .vhov-md .doel-row {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vhov-md .doel-tekst {
        font-size: 13.5px;
    }

    .vhov-md .top-level-nav button {
        max-width: none;
        font-size: 13px;
        padding: 10px 6px;
    }

    .vhov-md-overname,
    .vhov-md-status,
    .vhov-md-melding {
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* Aanraakschermen: een vinkje van 22 px is te klein om betrouwbaar te raken.
   De maten hieronder komen uit een meting in de browser, niet uit een schatting:
   de tekstachtige knoppen bleken 15 px hoog. */
@media (pointer: coarse) {
    .vhov-md .doel-checkbox {
        min-width: 30px;
        min-height: 30px;
    }

    .vhov-md .toggle-chip {
        min-height: 34px;
    }

    /* Groot genoeg om te raken, maar niet zo groot dat de chip uit elkaar valt. */
    .vhov-md .kind-chip .kind-icon-btn {
        min-width: 24px;
        min-height: 24px;
    }

    .vhov-md .kind-chip .kind-name-btn,
    .vhov-md .doel-uitbreiding-toggle,
    .vhov-md .note-add-link,
    .vhov-md .note-edit-link,
    .vhov-md .reset-link {
        display: inline-block;
        min-height: 24px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .vhov-md .note-footer .reset-link {
        margin-top: 2px;
    }
}

/* Respecteer de systeeminstelling voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
    .vhov-md .bar-fill,
    .vhov-md .vak-progress-fill,
    .vhov-md .top-level-nav button,
    .vhov-md-toast {
        transition: none;
    }
}

/* ---- uitsplitsing per vak (schakelbaar) ------------------------------------
   Eén percentage over 790 doelen zegt weinig. Deze uitsplitsing laat zien waar
   het vlot loopt en waar niet. Standaard dicht: de meeste mensen willen gewoon
   de lijst.
   -------------------------------------------------------------------------- */

.vhov-md .vak-overzicht {
    margin: 10px 18px 0;
    padding: 14px 18px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.vhov-md .vak-overzicht-titel {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: 10px;
}

.vhov-md .vak-overzicht-regel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.vhov-md .vak-overzicht-naam {
    flex: 0 0 190px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vhov-md .vak-overzicht-balk {
    flex: 1 1 auto;
    background: var(--border);
    border-radius: 8px;
    height: 9px;
    overflow: hidden;
}

.vhov-md .vak-overzicht-vul {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--magenta), var(--orange));
    transition: width .3s;
}

.vhov-md .vak-overzicht-cijfer {
    flex: 0 0 96px;
    text-align: right;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}

.vhov-md .vak-overzicht-pct {
    display: inline-block;
    min-width: 34px;
    font-weight: 800;
    color: var(--purple);
}

@media (max-width: 600px) {
    .vhov-md .vak-overzicht {
        margin-left: 12px;
        margin-right: 12px;
        padding: 12px 14px 14px;
    }

    /* Op 375 px past naam + balk + cijfer niet naast elkaar. */
    .vhov-md .vak-overzicht-regel {
        flex-wrap: wrap;
        gap: 4px 10px;
        padding: 6px 0;
    }

    .vhov-md .vak-overzicht-naam {
        flex: 1 1 auto;
    }

    .vhov-md .vak-overzicht-cijfer {
        flex: 0 0 auto;
        text-align: left;
    }

    .vhov-md .vak-overzicht-balk {
        flex: 1 1 100%;
        order: 3;
    }
}