/* =====================================================================
   School T-shirts - de Regenboog
   Kleurenpalet geïnspireerd op de naam van de school ("de Regenboog") en
   de bestaande flyers (blauw/rood/groen/geel). De schoolgids zelf kon
   vanuit deze omgeving niet automatisch opgehaald worden (de sandbox
   staat alleen tekst-only ophalen van webpagina's toe, geen CSS/kleuren/
   lettertypes van externe sites) - dit palet is daarom een regenboogset
   (rood/oranje/geel/groen/blauw/paars) gebouwd op de kleuren die al in de
   flyers gebruikt werden, met twee extra tinten (oranje/paars) voor meer
   afwisseling. Pas gerust de HEX-waarden hieronder aan zodra je de
   schoolgids ernaast hebt liggen. Mobile-first: alles is standaard 1
   kolom en schaalt vanaf 640px naar een breder, twee-koloms layout.
   ===================================================================== */

:root {
    --color-blue: #1c5ea8;
    --color-blue-dark: #123f73;
    --color-red: #e0362a;
    --color-orange: #f2924a;
    --color-green: #1f7a3d;
    --color-yellow: #ffd23f;
    --color-purple: #7b4fa0;
    --color-bg: #dff1fa;
    --color-card: #ffffff;
    --color-text: #1c2b36;
    --color-muted: #5b6b76;
    --radius: 14px;
    --shadow: 0 2px 10px rgba(20, 60, 90, 0.12);
    --max-width: 760px;
    /* Volgorde van de regenboogkleuren, gebruikt voor de streep onder de
       header en om kaarten/knoppen om beurten een andere kleur accent te
       geven (zie .rainbow-bar en de nth-child regels verderop). */
    --rainbow-1: var(--color-red);
    --rainbow-2: var(--color-orange);
    --rainbow-3: var(--color-yellow);
    --rainbow-4: var(--color-green);
    --rainbow-5: var(--color-blue);
    --rainbow-6: var(--color-purple);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
    font-size: 16px;
}

a { color: var(--color-blue); }

.wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px;
}

header.site-header {
    background: linear-gradient(120deg, var(--color-blue), var(--color-blue-dark));
    color: #fff;
    padding: 20px 16px;
    position: relative;
}

/* Regenboogstreep onder de header - verwijst naar de naam van de school
   ("de Regenboog") en zorgt voor een vrolijker, kleurrijker eerste beeld. */
header.site-header::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(
        90deg,
        var(--rainbow-1) 0 16.6%,
        var(--rainbow-2) 16.6% 33.3%,
        var(--rainbow-3) 33.3% 50%,
        var(--rainbow-4) 50% 66.6%,
        var(--rainbow-5) 66.6% 83.3%,
        var(--rainbow-6) 83.3% 100%
    );
}

header.site-header .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

header.site-header h1 {
    font-size: 1.65rem;
    margin: 0;
}

header.site-header .school-name {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* De titel/schoolnaam is altijd een link terug naar de homepage (ook
   vanaf de bedankpagina na het plaatsen van een bestelling), maar oogt
   bewust als gewone tekst i.p.v. een duidelijke link. */
a.site-header-home {
    color: inherit;
    text-decoration: none;
    display: block;
}

a.site-header-home:hover h1 { text-decoration: underline; }

.card {
    background: var(--color-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
    border-top: 5px solid var(--color-blue);
}

/* Kaarten krijgen om beurten een andere regenboogkleur bovenrand, zodat
   een pagina met meerdere kaarten (bv. het dashboard) meteen kleurrijker
   oogt zonder dat de leesbaarheid van de tekst eronder lijdt. */
.card:nth-of-type(6n+1) { border-top-color: var(--rainbow-1); }
.card:nth-of-type(6n+2) { border-top-color: var(--rainbow-2); }
.card:nth-of-type(6n+3) { border-top-color: var(--rainbow-4); }
.card:nth-of-type(6n+4) { border-top-color: var(--rainbow-5); }
.card:nth-of-type(6n+5) { border-top-color: var(--rainbow-6); }
.card:nth-of-type(6n+6) { border-top-color: var(--rainbow-3); }

.card h2 {
    margin-top: 0;
    color: var(--color-blue-dark);
}

.channel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .channel-grid { grid-template-columns: 1fr 1fr; }
}

.channel-card {
    display: block;
    text-decoration: none;
    background: var(--color-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    color: var(--color-text);
    border-top: 6px solid var(--color-red);
    transition: transform 0.1s ease;
}

.channel-card:hover { transform: translateY(-2px); }

.channel-card.pickup { border-top-color: var(--color-green); }
.channel-card.school { border-top-color: var(--color-blue); }

.channel-card h3 {
    color: var(--color-blue-dark);
    margin-top: 0;
}

/* Duidelijke "Bestel hier"-knop onderin het kanaalkeuze-vak (zie
   templates/shop/home.php) - maakt zichtbaar dat het hele vak
   klikbaar is en waarvoor, i.p.v. dat het aanvoelt als een losse
   informatiekaart. Een <span>, geen geneste link: het vak zelf
   (.channel-card) is al de <a>. */
.channel-card-cta {
    display: inline-block;
    margin-top: 16px;
    pointer-events: none;
}

.badge {
    display: inline-block;
    background: var(--color-yellow);
    color: var(--color-blue-dark);
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.8rem;
}

.badge.badge-purple { background: var(--color-purple); color: #fff; }
.badge.badge-orange { background: var(--color-orange); color: #402100; }

form .field {
    margin-bottom: 16px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=date],
input[type=datetime-local],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #b9cfdd;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
    color: var(--color-text);
}

textarea { min-height: 140px; font-family: monospace; }

.btn {
    display: inline-block;
    background: var(--color-blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn:hover { background: var(--color-blue-dark); }

.btn.btn-secondary {
    background: transparent;
    color: var(--color-blue);
    border: 2px solid var(--color-blue);
}

.btn.btn-danger { background: var(--color-red); }
.btn.btn-danger:hover { background: #a8241b; }

.btn.btn-success { background: var(--color-green); }
.btn.btn-success:hover { background: #145226; }

/* Klikbare maatstalen (order_lines): geen keuzelijst maar naast elkaar
   staande, aanklikbare "swatches", zoals bij een gewone kledingwebsite.
   De echte selectie is een gewoon radio-input (voor toegankelijkheid en
   formuliervalidatie), visueel verborgen zonder display:none - daarmee
   blijft de browser 'm wel meenemen in required-validatie en focus. */
.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 10px 14px;
    border: 2px solid #b9cfdd;
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.1s ease, background 0.1s ease, color 0.1s ease;
}

.swatch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.swatch:hover { border-color: var(--color-blue); }

.swatch.selected {
    background: var(--color-blue);
    border-color: var(--color-blue-dark);
    color: #fff;
}

.swatch.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f2f5f7;
}

.swatch.is-disabled:hover { border-color: #b9cfdd; }

/* Voor een conditie (bv. 'Gebruikt') die voor de gekozen maat niet
   beschikbaar is en daarom volledig verborgen wordt i.p.v. grijs getoond
   (zie applyConditionSwatchAvailability() in order-form.js). Een losse
   klasse i.p.v. het `hidden`-attribuut, want .swatch { display:
   inline-flex } zou een `[hidden]`-attribuutselector met gelijke
   specificiteit anders teniet kunnen doen. */
.swatch.is-hidden { display: none; }

.swatch small {
    display: block;
    font-weight: 400;
    font-size: 0.72rem;
    opacity: 0.85;
}

/* Maat en conditie op dezelfde regel (naast elkaar), elk hun eigen
   swatch-groep met een eigen label erboven. */
.swatch-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
}

.swatch-fields > div { flex: 1 1 220px; }

.order-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    border: 1px solid #dfeaf1;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

@media (min-width: 640px) {
    .order-line { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
}

/* Eén regel (maat/conditie/aantal + evt. kind/klas) in het bestelformulier.
   Losse klasse van .order-line hierboven (dat is een generieke rij-helper
   die de beheermodule breed gebruikt met een eigen inline grid-template). */
.shirt-line {
    border: 1px solid #dfeaf1;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    background: #fbfdfe;
}

.order-line-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

@media (min-width: 640px) {
    .order-line-row-3 { grid-template-columns: repeat(3, 1fr); }
    .order-line-row-2 { grid-template-columns: repeat(2, 1fr); }
}

.order-line-actions {
    text-align: right;
}

.shirt-line select:disabled,
.shirt-line option:disabled {
    color: #9aa7ae;
}

/* Live totaalbedrag op het bestelformulier (_order_summary.php). */
.summary-box {
    border: 2px solid var(--color-green);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 20px 0;
    background: #f3fbf5;
}

.summary-box h2 {
    margin-top: 0;
    color: var(--color-green);
    font-size: 1.05rem;
}

.summary-box table.data-table th {
    /* table.data-table th heeft standaard een blauwgrijze achtergrond
       (voor tabelkoppen) - hier zijn de th's echter rijlabels
       ("Subtotaal"/"Korting"/"Te betalen"), geen kopregel, dus die
       achtergrond overschrijven zodat het Totaal-blok niet grijzig oogt. */
    background: transparent;
}

.summary-box table.data-table th,
.summary-box table.data-table td {
    border-bottom: none;
    padding: 4px 8px;
}

.summary-box table.data-table td { text-align: right; }

/* Productafbeelding van het shirt, boven de shirtregels (task: afbeelding tonen + admin upload). */
.shirt-product-image {
    display: block;
    max-width: 320px;
    max-height: 320px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 16px 0;
    object-fit: contain;
}

.discount-slot { margin-bottom: 10px; }
.discount-feedback { display: block; font-size: 0.85rem; margin-top: 4px; }
.discount-feedback.discount-ok { color: var(--color-green); }
.discount-feedback.discount-error { color: var(--color-red); }

.alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.alert-error { background: #fde3e1; color: #7a1e17; border: 1px solid #f3b6b1; }
.alert-success { background: #e2f3e6; color: #1c5a2d; border: 1px solid #b9e0c3; }
.alert-info { background: #e4f0fa; color: #123f73; border: 1px solid #b9d7ef; }

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

table.data-table th,
table.data-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e3ecf1;
    text-align: left;
}

table.data-table th { background: #f2f8fb; }

footer.site-footer {
    text-align: center;
    color: var(--color-muted);
    padding: 24px 16px 40px;
    font-size: 0.9rem;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--rainbow-1), var(--rainbow-2), var(--rainbow-3), var(--rainbow-4), var(--rainbow-5), var(--rainbow-6)) 1;
}

/* Statuslabel voor schoolverkoopperiodes (admin/sales_channels.php):
   actief/toekomstig/afgerond, met een eigen kleur per status. */
.status-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

.status-pill.status-active { background: #d6f5df; color: #14532b; }
.status-pill.status-future { background: #e4f0fa; color: #123f73; }
.status-pill.status-past { background: #ece7f3; color: #4a2e6b; }

/* ---------------- Admin ---------------- */

.admin-body { background: #f2f5f7; }

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-nav {
    width: 240px;
    background: linear-gradient(180deg, var(--color-blue-dark), #0d2c50);
    color: #fff;
    padding: 16px;
    flex-shrink: 0;
    border-top: 4px solid var(--color-yellow);
}

.admin-nav a {
    display: block;
    color: #dceaf5;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
}

.admin-nav a:hover,
.admin-nav a.active {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.admin-main {
    flex: 1;
    padding: 24px;
    max-width: 1100px;
}

.env-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-yellow);
    color: #5a4400;
    margin-left: 8px;
}

.env-badge.env-prod { background: #d6f5df; color: #14532b; }
.env-badge.env-test { background: #ffe6b3; color: #7a4b00; }

@media (max-width: 800px) {
    .admin-shell { flex-direction: column; }
    .admin-nav { width: 100%; }
    .admin-main { padding: 16px; }
}