/* Meldingen */
.icr-notice {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: .75rem;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    max-width: 720px;
    transition: opacity .6s ease, max-height .6s ease, margin .6s ease, padding .6s ease;
}
.icr-notice.icr-success { background:#ecfdf3; border:1px solid #16a34a; color:#166534; }
.icr-notice.icr-error   { background:#fef2f2; border:1px solid #dc2626; color:#991b1b; }
.icr-notice.icr-info    { background:#eff6ff; border:1px solid #3b82f6; color:#1e40af; } 

.icr-hidden { opacity:0; max-height:0; margin:0; padding:0; }

/* Login box styling */
.icr-login-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 0 0 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.03);
}
.icr-login-box h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: center;
}
#icr_loginform p { margin-bottom: 12px; }
#icr_loginform label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; color: #374151; }
#icr_loginform input[type="text"],
#icr_loginform input[type="password"] { 
    width: 100%; 
    padding: 10px 12px; 
    border: 1px solid #d1d5db; 
    border-radius: 8px; 
    font-size: 16px; 
    box-sizing: border-box;
}
#icr_loginform input[type="submit"] {
    background: #16a34a;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 8px;
    width: 100%;
    font-size: 16px;
    transition: background 0.2s;
}
#icr_loginform input[type="submit"]:hover { background: #15803d; }

.icr-login-links {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
    color: #6b7280;
}
.icr-login-links a { color: #374151; text-decoration: underline; }

/* Tabel (sessies, bikes, mijn reserveringen) */
.icr-table {
    width: 100%;
    max-width: 760px;
    border-collapse: collapse;
    margin: 1.25rem 0 2rem;
    font-size: 16px; 
    line-height: 1.55;
    background: #fff;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.icr-table thead th {
    background: #f3f4f6;
    text-align: left;
    padding: 1rem 1rem;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.icr-table tbody td {
    padding: .9rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.icr-table tbody tr:nth-child(even) { background: #fafafa; }
.icr-table tbody tr:hover { background: #eef2f7; }

.icr-no-cancel {
    font-size: 0.9em;
    color: #666;
}

/* Knoppen */
.icr-btn {
    display: inline-block;
    background: #16a34a;
    border: none;
    color: #fff !important;
    padding: .7rem 1.1rem;
    border-radius: .4rem;
    cursor: pointer;
    font-size: 16px; 
    text-align: center;
    text-decoration: none !important;
    width: 100%;
}
.icr-btn:hover {
    background: #15803d;
    color: #fff !important;
}
.icr-btn-submit {
    max-width: 280px;
}
.icr-btn-cancel {
    padding: .5rem .8rem;
    font-size: 14px;
}

/* Registratieformulier styling */
.icr-register-wrap {
    max-width: 780px;
    background: #fff;
    border-radius: .75rem;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    margin: 1.5rem 0 2rem;
}
.icr-register-wrap h3 {
    margin-top: 0;
    margin-bottom: .5rem;
}
.icr-register-intro {
    margin-bottom: 1.2rem;
    color: #4b5563;
}
.icr-register-form { display: block; }
.icr-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.icr-field label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}
.icr-field label span {
    color: #dc2626;
}
.icr-field input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    padding: .55rem .7rem;
    font-size: 16px;
}
.icr-field-full {
    grid-column: 1 / -1;
}
.icr-radio-group {
    display: flex;
    gap: 1.5rem;
    font-size: 16px;
}
.icr-register-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.icr-option-card {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .75rem;
    font-size: 16px;
}
.icr-option-card input {
    margin-top: .4rem;
}
.icr-option-title {
    font-weight: 600;
    display: block;
}
.icr-option-meta {
    display: block;
    color: #6b7280;
    font-size: .9rem;
}
.icr-option-price {
    display: block;
    font-weight: 600;
    color: #111827;
    margin-top: .15rem;
}

/* Session detail als card/box */
.icr-session-detail {
    max-width: 780px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    margin: 1.5rem 0 2rem;
}

.icr-session-detail h4 {
    margin: 0 0 .35rem;
    font-size: 1.25rem;
}
.icr-session-detail p {
    margin: .2rem 0 .8rem;
    color: #374151;
}

.icr-session-detail .icr-bikes-table {
    margin-top: .8rem;
    box-shadow: none;               
    border: 1px solid #eef2f7;      
}

/* Sessie-overzicht als card/box */
.icr-sessions-box {
    max-width: 780px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
    margin: 1.5rem 0 2rem;
}

.icr-sessions-box h3 {
    margin: 0 0 .5rem;
}

.icr-sessions-box .icr-sessions-table {
    margin-top: .8rem;
    box-shadow: none;               
    border: 1px solid #eef2f7;      
}

/* MOBIEL: Verbeterde Kaarten Weergave */
@media (max-width: 900px) {
    .icr-table {
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .icr-table thead {
        display: none;
    }
    .icr-table tbody {
        display: block;
    }
    .icr-table tr {
        display: block;
        background: #fff;
        margin-bottom: 1.25rem; 
        border-radius: 12px; 
        box-shadow: 0 4px 12px rgba(0,0,0,.05); 
        overflow: hidden;
        border: 1px solid #f3f4f6; 
    }
    .icr-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border: 0;
        padding: 1rem 1.25rem; 
        border-bottom: 1px solid #f3f4f6;
        font-size: 15px;
    }
    .icr-table td:last-child {
        border-bottom: none;
    }
    
    .icr-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #374151;
    }

    .icr-td-fiets,
    .icr-td-date,
    .icr-td-time,
    .icr-td-title {
        text-align: right; 
    }
    
    .icr-td-action {
        display: block; 
        padding: 1rem 1.25rem;
        background: #f9fafb; 
        border-top: 1px solid #f3f4f6;
    }
    .icr-td-action::before {
        display: none;
    }
    
    .icr-td-action .icr-btn {
        width: 100%;
        margin: 0;
        padding: 12px; 
        font-size: 16px;
    }
    
    .icr-td-action form {
        width: 100%;
        display: block;
        margin: 0;
    }

    .icr-register-grid {
        grid-template-columns: 1fr;
    }
    .icr-btn-submit {
        width: 100%;
        max-width: none;
    }

    .icr-session-detail,
    .icr-sessions-box {
        padding: 1rem;
    }
    .icr-session-detail .icr-bikes-table,
    .icr-sessions-box .icr-sessions-table {
        box-shadow: none;
        border: none;
    }
    .icr-sessions-box .icr-sessions-table tr,
    .icr-session-detail .icr-bikes-table tr {
        box-shadow: 0 4px 12px rgba(0,0,0,.05);
        border: 1px solid #f3f4f6;
    }
}


/* ==========================================================
   v1.15 – Saldo-kaart, sessielijst per week, fietsraster
   ========================================================== */
.icr-notice.icr-warning { background:#fff7ed; border:1px solid #fb923c; color:#9a3412; }

.icr-sessions-box h3,
.icr-session-detail h3 { margin: 0 0 .75rem; font-size: 1.25rem; }
.icr-empty { color:#4b5563; margin:.25rem 0 .5rem; }
.icr-small { font-size: 13px; }

/* Secundaire knop */
.icr-btn-secondary { background:#fff; color:#166534 !important; border:1px solid #16a34a; }
.icr-btn-secondary:hover { background:#f0fdf4; color:#14532d !important; }
.icr-btn-wait { background:#ea580c; width:auto; max-width:100%; }
.icr-btn-wait:hover { background:#c2410c; }

/* A · Saldo-kaart */
.icr-balance {
    max-width: 780px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:.75rem;
    padding:1rem 1.25rem;
    margin:1.5rem 0;
    box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.icr-balance-main { display:flex; align-items:center; gap:1rem; }
.icr-balance-count {
    flex:0 0 56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; font-weight:700;
    background:#dcfce7; color:#166534;
}
.icr-balance-low  .icr-balance-count { background:#fef3c7; color:#92400e; }
.icr-balance-empty .icr-balance-count { background:#fee2e2; color:#991b1b; }
.icr-balance-text { flex:1; min-width:0; }
.icr-balance-title { margin:0; font-weight:600; font-size:17px; color:#111827; }
.icr-balance-meta { margin:.15rem 0 0; font-size:14px; color:#4b5563; }
.icr-balance-buy { margin-top:.9rem; }
.icr-balance-buy > summary { list-style:none; width:auto; display:inline-block; }
.icr-balance-buy > summary::-webkit-details-marker { display:none; }
.icr-balance-buy[open] > summary { margin-bottom:.9rem; }
.icr-balance-buy-body { max-width:460px; }
.icr-balance-buy-body .icr-btn { max-width:280px; }

/* B · Sessielijst */
.icr-session-list { display:flex; flex-direction:column; }
.icr-week-label {
    font-size:13px; font-weight:600; color:#6b7280;
    text-transform:none; margin:1rem 0 .35rem;
}
.icr-week-label:first-child { margin-top:0; }
.icr-session-row {
    display:flex; align-items:center; gap:1rem;
    padding:.85rem .5rem;
    border-top:1px solid #f3f4f6;
}
.icr-week-label + .icr-session-row { border-top:none; }
.icr-session-row.is-active { background:#f0fdf4; border-radius:.5rem; }
.icr-date-badge {
    flex:0 0 52px; text-align:center;
    display:flex; flex-direction:column; line-height:1.15;
    border:1px solid #e5e7eb; border-radius:.5rem; padding:.35rem 0;
    background:#f9fafb;
}
.icr-date-dow, .icr-date-mon { font-size:12px; color:#6b7280; }
.icr-date-day { font-size:20px; font-weight:700; color:#111827; }
.icr-session-info { flex:1; min-width:0; }
.icr-session-info p { margin:0; }
.icr-session-time { font-weight:600; color:#111827; }
.icr-session-title { font-size:14px; color:#4b5563; }
.icr-session-action {
    display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end;
}
.icr-session-action .icr-btn { width:auto; padding:.55rem 1rem; font-size:15px; }
.icr-session-action form { margin:0; }
.icr-session-open { font-size:14px; color:#166534; font-weight:600; }

/* Bezettingsbalk */
.icr-occ { display:flex; align-items:center; gap:.5rem; margin-top:.3rem; }
.icr-occ-bar { flex:0 0 90px; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.icr-occ-bar > span { display:block; height:100%; background:#16a34a; }
.icr-occ-text { font-size:13px; color:#4b5563; }
.icr-occ-almost .icr-occ-bar > span { background:#f59e0b; }
.icr-occ-almost .icr-occ-text { color:#92400e; }
.icr-occ-full .icr-occ-bar > span { background:#ea580c; }
.icr-occ-full .icr-occ-text { color:#9a3412; font-weight:600; }

/* Status-chips */
.icr-chip { display:inline-block; font-size:13px; padding:.2rem .6rem; border-radius:.4rem; white-space:nowrap; }
.icr-chip-mine { background:#dcfce7; color:#166534; }
.icr-chip-wait { background:#ffedd5; color:#9a3412; }

/* C · Detail + fietsraster */
.icr-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.icr-detail-head h3 { margin-bottom:.15rem; }
.icr-detail-when { margin:0 0 .75rem; color:#4b5563; }
.icr-detail-close { text-decoration:none; font-size:26px; line-height:1; color:#9ca3af; }
.icr-detail-close:hover { color:#374151; }
.icr-detail-note { font-size:15px; color:#374151; background:#f9fafb; border-radius:.5rem; padding:.6rem .8rem; }
.icr-note-ok   { background:#f0fdf4; color:#166534; }
.icr-note-warn { background:#fef2f2; color:#991b1b; }

.icr-bike-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
    gap:.6rem;
    margin:1rem 0;
}
.icr-bike-form { margin:0; display:flex; }
.icr-bike {
    width:100%; box-sizing:border-box;
    display:flex; flex-direction:column; align-items:flex-start; gap:.1rem;
    padding:.7rem .8rem; border-radius:.6rem;
    border:1px solid #e5e7eb; background:#f9fafb;
    font:inherit; text-align:left; color:#111827;
}
.icr-bike-nr { font-weight:700; font-size:16px; }
.icr-bike-who { font-size:13px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.icr-bike.is-free {
    background:#fff; border:1px dashed #16a34a; cursor:pointer;
    transition:background .15s, border-color .15s;
}
.icr-bike.is-free .icr-bike-who { color:#15803d; font-weight:600; }
.icr-bike.is-free:hover, .icr-bike.is-free:focus-visible { background:#f0fdf4; border-style:solid; outline:none; }
.icr-bike.is-free:disabled { opacity:.6; cursor:wait; }
.icr-bike.is-open { background:#fff; border:1px dashed #d1d5db; }
.icr-bike.is-mine { background:#dcfce7; border:2px solid #16a34a; padding:calc(.7rem - 1px) calc(.8rem - 1px); }
.icr-bike.is-mine .icr-bike-who { color:#166534; font-weight:600; }

.icr-waitlist-box {
    background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
    padding:1rem; margin-top:1rem; border-radius:.6rem; text-align:center;
}
.icr-waitlist-box p { color:#9a3412; margin:.25rem 0 .6rem; }
.icr-waitlist-title { font-weight:600; }
.icr-full-box { background:#fef2f2; border-color:#fecaca; }
.icr-full-box p { color:#991b1b; }

@media (max-width: 600px) {
    .icr-session-row { flex-wrap:wrap; }
    .icr-session-action { flex:1 0 100%; justify-content:stretch; }
    .icr-session-action .icr-btn { flex:1; text-align:center; }
    .icr-balance-buy-body .icr-btn { max-width:none; }
    .icr-bike-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* Annuleren is een afmeldactie: rustige rode omlijning i.p.v. groene hoofdknop */
.icr-btn.icr-btn-cancel { background:#fff; color:#b91c1c !important; border:1px solid #fca5a5; }
.icr-btn.icr-btn-cancel:hover { background:#fef2f2; color:#991b1b !important; border-color:#f87171; }
.icr-no-cancel { font-size:13px; color:#6b7280; }

/* Geen fietsnummering: één reserveerknop + "wie doet er mee" */
.icr-reserve-form { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.25rem 0 1rem; }
.icr-btn.icr-btn-reserve { width:auto; padding:.75rem 1.4rem; font-size:16px; font-weight:600; }
.icr-reserve-form .icr-small { color:#4b5563; }
.icr-people-head { margin:.5rem 0 0; font-weight:600; color:#111827; }
.icr-people-head span { font-weight:400; color:#6b7280; }
.icr-bike { padding:.6rem .8rem; }
.icr-bike .icr-bike-who { font-size:14px; color:#1f2937; }
.icr-bike.is-open .icr-bike-who { color:#9ca3af; }
.icr-bike.is-mine { padding:calc(.6rem - 1px) calc(.8rem - 1px); }
@media (max-width: 600px) {
    .icr-btn.icr-btn-reserve { width:100%; }
}

/* Les openklappen onder de eigen rij (AJAX) */
.icr-session-action [hidden] { display:none !important; }
.icr-session-open-group {
    border:2px solid #16a34a;
    border-radius:.75rem;
    margin:.35rem 0;
    overflow:hidden;
    scroll-margin-top:90px; /* ruimte voor een vaste site-header */
}
.icr-session-open-group .icr-session-row { border-top:none; background:#f0fdf4; border-radius:0; padding:.85rem .75rem; }
.icr-session-detail.is-inline {
    max-width:none; margin:0; border:0; border-top:1px solid #bbf7d0;
    border-radius:0; box-shadow:none; padding:1rem .9rem 1.1rem;
}
.icr-session-detail.is-loading { color:#6b7280; font-size:14px; }
.icr-session-close {
    font-size:14px; font-weight:600; color:#166534 !important; text-decoration:none !important;
    padding:.45rem .7rem; border-radius:.4rem;
}
.icr-session-close:hover { background:#dcfce7; }
#icr-detail-view { scroll-margin-top:90px; }

/* Saldo-kaart compacter: alles op één regel, knop rechts.
   Specifieke selectors zodat de alinea-marges van het thema niet doorwerken. */
.icr-balance { position:relative; padding:1rem 1.25rem; }
.icr-balance .icr-balance-main { min-height:56px; padding-right:190px; }
.icr-balance p.icr-balance-title { margin:0 !important; line-height:1.3; }
.icr-balance p.icr-balance-meta { margin:.2rem 0 0 !important; line-height:1.4; }
.icr-balance .icr-balance-buy { margin-top:0; }
.icr-balance .icr-balance-buy > summary {
    position:absolute; top:1rem; right:1.25rem;
    min-height:56px; display:inline-flex; align-items:center; box-sizing:border-box;
    padding:0 1.1rem; white-space:nowrap;
}
.icr-balance .icr-balance-buy[open] > summary { margin-bottom:0; }
.icr-balance .icr-balance-buy-body { margin-top:1rem; padding-top:1rem; border-top:1px solid #f3f4f6; }

@media (max-width: 600px) {
    .icr-balance .icr-balance-main { padding-right:0; }
    .icr-balance .icr-balance-buy > summary { position:static; min-height:0; padding:.6rem 1rem; margin-top:.9rem; }
}

/* ==========================================================
   v1.17.1 – Mobiel eerst: rustige saldo-kaart en vaste koppen
   (de meeste reserveringen gaan via de telefoon)
   ========================================================== */

/* Koppen: vaste grootte, ongeacht wat het thema met h3 doet */
.icr-sessions-box > h3,
.icr-myres-box > h3 {
    font-size:20px !important; line-height:1.3 !important; font-weight:700 !important;
    margin:0 0 .5rem !important; color:#111827;
}
.icr-week-label { font-size:13px !important; font-weight:600; color:#6b7280; margin:1rem 0 .25rem !important; }
.icr-session-list p { margin:0 !important; }

/* Saldo-kaart: getal + eenheid, knop rechtsboven, geen cirkel */
.icr-balance { position:relative; padding:14px 16px; }
.icr-balance .icr-balance-main { min-height:0; padding-right:0; display:block; }
.icr-balance p.icr-balance-hello,
.icr-balance p.icr-balance-title { padding-right:150px; }
.icr-balance p.icr-balance-hello { margin:0 !important; font-size:14px; line-height:1.4; color:#4b5563; }
.icr-balance p.icr-balance-title { margin:0 !important; line-height:1.1; color:#111827; }
.icr-balance-num { font-size:34px; font-weight:700; color:#166534; letter-spacing:-.5px; }
.icr-balance-unit { font-size:17px; font-weight:600; }
.icr-balance-low  .icr-balance-num { color:#b45309; }
.icr-balance-empty .icr-balance-num { color:#b91c1c; }
.icr-balance p.icr-balance-meta { margin:.35rem 0 0 !important; font-size:14px; line-height:1.45; color:#4b5563; }

.icr-balance .icr-balance-buy > summary {
    position:absolute; top:16px; right:16px;
    min-height:0; padding:.5rem .9rem; font-size:15px; line-height:1.2;
    width:auto; margin:0; display:inline-block;
}
.icr-balance .icr-balance-buy-body { margin-top:.9rem; padding-top:.9rem; border-top:1px solid #f3f4f6; max-width:none; }

/* Op de telefoon: lichtere kaders (alles staat al in het witte kader van het thema) */
@media (max-width: 600px) {
    .icr-balance,
    .icr-sessions-box {
        box-shadow:none !important;
        border-radius:12px;
        padding:14px !important;
        margin:12px 0 !important;
    }
    .icr-balance .icr-balance-main { padding-right:0; }
    .icr-balance .icr-balance-buy > summary { position:absolute; top:14px; right:14px; margin:0; padding:.45rem .8rem; font-size:14px; }
    .icr-balance p.icr-balance-hello,
    .icr-balance p.icr-balance-title { padding-right:135px; }
    .icr-session-row { padding:.75rem 0; gap:.75rem; }
    .icr-session-action .icr-btn { padding:.65rem 1rem; font-size:16px; }
}

@media (max-width: 600px) {
    /* Knoppen onder een les uitlijnen met de tekst (rechts van het datumblokje) */
    .icr-session-row .icr-session-action { padding-left:calc(52px + .75rem); box-sizing:border-box; justify-content:flex-start; }
    /* Annuleren is een bijzaak: kleine knop, niet uitgerekt */
    .icr-session-action .icr-btn.icr-btn-cancel { flex:0 0 auto; padding:.4rem .8rem; font-size:14px; }
    .icr-session-open-group .icr-session-row .icr-session-action { padding-left:calc(52px + .75rem); }
}

/* "Wie doet er mee": labels zo breed als de naam, doorlopend (geen afgekapte namen op mobiel) */
.icr-session-detail .icr-bike-grid { display:flex; flex-wrap:wrap; gap:6px; margin:.6rem 0 0; }
.icr-session-detail .icr-bike {
    width:auto; display:inline-flex; align-items:center;
    padding:.3rem .7rem; border-radius:999px; gap:0;
}
.icr-session-detail .icr-bike .icr-bike-who { font-size:14px; white-space:nowrap; overflow:visible; max-width:none; }
.icr-session-detail .icr-bike.is-mine { padding:calc(.3rem - 1px) calc(.7rem - 1px); }
@media (max-width: 600px) {
    .icr-session-detail .icr-bike-grid { grid-template-columns:none; }
    .icr-btn.icr-btn-reserve { font-size:16px; line-height:1.3; }
}