/* ============================================================
 * Printable speelbladen — A4-optimized voor browser-print
 * Schermweergave: form + live preview
 * Print: alleen het sheet, exact 1 A4, met cell-borders (geen
 * background-trick zodat het werkt zonder "Achtergrondkleuren
 * afdrukken" aanvinken).
 * ============================================================ */

.bke-printable-tool {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}
@media (min-width: 900px) {
    .bke-printable-tool { grid-template-columns: 300px 1fr; align-items: start; }
}

.bke-printable-form {
    display: flex; flex-direction: column; gap: .9rem;
    background: linear-gradient(180deg, #fffdf3 0%, #fffaf2 100%);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid #fde68a;
    box-shadow: 0 4px 14px -8px rgba(250, 204, 21, .35);
}
.bke-printable-form label {
    display: flex; flex-direction: column; gap: .3rem;
    font-weight: 600; color: #173b57; font-size: .95rem;
}
.bke-printable-form select {
    padding: .65rem .75rem;
    border-radius: 10px;
    border: 1px solid #c7d2fe;
    background: #fff;
    font-weight: 500;
    color: #111827;
    min-height: 44px;
    cursor: pointer;
}
.bke-printable-form select:focus {
    outline: 3px solid #facc15; outline-offset: 2px;
    border-color: #173b57;
}
.bke-printable-form .bke-printable-check {
    flex-direction: row; align-items: center; gap: .55rem;
    cursor: pointer; padding: .35rem 0;
}
.bke-printable-form input[type="checkbox"] {
    width: 1.15rem; height: 1.15rem;
    accent-color: #173b57;
    cursor: pointer;
}

/* Print-knop — bake kleuren in (CSS-vars niet altijd geërfd hier) */
.bke-printable-form .bke-print-btn {
    appearance: none;
    border: 0;
    background: linear-gradient(180deg, #1f4f74 0%, #173b57 60%, #0f2a3f 100%);
    color: #ffffff;
    padding: .9rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    min-height: 52px;
    margin-top: .5rem;
    box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 8px 18px -8px rgba(23,59,87,.55);
    transition: transform .12s ease, filter .15s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.bke-printable-form .bke-print-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bke-printable-form .bke-print-btn:active { transform: translateY(0); }
.bke-printable-form .bke-print-btn::before {
    content: "🖨️"; font-size: 1.15em;
}

.bke-printable-preview {
    background: #fff;
    border: 1px dashed #94a3b8;
    padding: 1.25rem;
    border-radius: 16px;
    overflow: auto;
    box-shadow: 0 2px 12px -4px rgba(23,59,87,.12);
}

/* ============================================================
 * Print sheet — zichtbaar in preview én bij printen
 * ============================================================ */
.bke-print-sheet {
    background: #fff;
    color: #111;
    padding: .5rem;
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.bke-print-meta {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    font-size: 1rem; margin-bottom: .85rem; padding-bottom: .6rem;
    border-bottom: 2px solid #111;
    align-items: center;
}

.bke-print-grid { display: grid; gap: .85rem; }
.bke-print-sheet--1 .bke-print-grid { grid-template-columns: 1fr; }
.bke-print-sheet--6 .bke-print-grid { grid-template-columns: repeat(2, 1fr); }
.bke-print-sheet--12 .bke-print-grid { grid-template-columns: repeat(3, 1fr); }

.bke-print-card {
    display: flex; flex-direction: column; gap: .35rem;
    align-items: center;
    page-break-inside: avoid;
    break-inside: avoid;
}

.bke-print-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    aspect-ratio: 1;
    max-width: 320px;
    /* border-trick — werkt zonder "Print backgrounds" toestemming */
    border: 3px solid #000;
    gap: 0;
    background: #fff;
}
.bke-print-sheet--6 .bke-print-board { max-width: 240px; }
.bke-print-sheet--12 .bke-print-board { max-width: 150px; }

.bke-print-cell {
    background: #fff;
    border: 1.5px solid #000;
    aspect-ratio: 1;
    /* Zorgt dat alle 4 randen mooi binnen het bord vallen */
    margin: -0.75px;
}

.bke-print-score {
    font-size: .9rem; color: #111;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-top: .15rem;
}

/* ───── Thema's — alleen op scherm zichtbaar ───── */
.bke-print-sheet--chalk { background: #1f3d2b; color: #f8f9fa; }
.bke-print-sheet--chalk .bke-print-board { border-color: #f8f9fa; background: #1f3d2b; }
.bke-print-sheet--chalk .bke-print-cell { background: #1f3d2b; border-color: #f8f9fa; }
.bke-print-sheet--chalk .bke-print-meta { border-bottom-color: #f8f9fa; }
.bke-print-sheet--chalk .bke-print-score { color: #f8f9fa; }

.bke-print-sheet--winter .bke-print-board { border-color: #1e40af; }
.bke-print-sheet--winter .bke-print-cell { border-color: #1e40af; }

/* ============================================================
 * Print wordt via iframe-pattern in printable.js afgehandeld.
 * Geen @media print rules op de hoofd-pagina meer — die werkten
 * niet betrouwbaar door cascade-conflicts met body * { display:none }.
 * De iframe heeft eigen print-CSS inline.
 *
 * Voor de zeldzame gebruiker die toch Cmd+P op de pagina drukt:
 * standaard browser print (met WP header/footer). Niet ideaal,
 * maar de knop is de aangewezen route.
 * ============================================================ */

/* ============================================================
 * Stats blok (gebruikt elders in plugin)
 * ============================================================ */
.bke-stats { background: #fffaf2; border-radius: 14px; padding: 1.25rem; margin: 1rem 0; }
.bke-stats__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 0; }
@media (min-width: 640px) { .bke-stats__list { grid-template-columns: repeat(3, 1fr); } }
.bke-stats__list div { background: #fff; padding: .85rem; border-radius: 10px; text-align: center; }
.bke-stats__list dt { font-size: .85rem; color: #4b5563; }
.bke-stats__list dd { margin: .2rem 0 0; font-size: 1.4rem; font-weight: 700; color: #173b57; font-variant-numeric: tabular-nums; }