/* Aina 2 saraketta */
    form.lane-select-form .lane-select-row.lane-select-two-cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        row-gap: 10px;
        align-items: end;
    }

    form.lane-select-form .left label,
    form.lane-select-form .right label {
        display: block;
        margin: 0 0 6px 0;
        font-weight: 700;
    }

    form.lane-select-form .inline-form {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        min-width: 0;
    }

    /* Yhteiset tyylit kaikille inputeille, selecteille ja napeille */
    form.lane-select-form select,
    form.lane-select-form input[type="date"],
    form.lane-select-form .today-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 38px;
        /* yhtenäinen korkeus */
        padding: 0 .6rem;
        font-size: 14px;
        line-height: 1.2;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-sizing: border-box;
    }

    /* Tänään-nappi erottuu hieman */
    form.lane-select-form .today-btn {
        flex: 0 0 auto;
        /* ei veny */
        background: var(--bg);
        cursor: pointer;
        transition: background .2s;
    }

    form.lane-select-form .today-btn:hover {
        background: #eaeaea;
    }

    /* Poista mahdollinen keskikolumni */
    form.lane-select-form .center {
        display: none !important;
    }

    @media (max-width:360px) {
        form.lane-select-form .inline-form {
            gap: 4px;
        }

        form.lane-select-form select,
        form.lane-select-form input[type="date"],
        form.lane-select-form .today-btn {
            font-size: 13px;
            height: 34px;
        }
    }

    /* Edit-ikoni vasemmalle, riittävä kosketusalue */
    .res-item {
        display: flex;
        align-items: center;
        gap: .35rem;
    }

    .res-item .edit {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        /* hyvä tappialue */
        border-radius: 6px;
        text-decoration: none;
        opacity: .85;
    }

    .res-item .edit:hover {
        opacity: 1;
    }

    .res-item .label {
        flex: 1 1 auto;
        min-width: 0;
        /* ei venytä liikaa */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .res-item .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        display: inline-block;
        opacity: .7;
    }

    /* FREE SKI -tila: näkyvä mutta ei varattavissa */
    td.freeski {
        background: rgba(0, 160, 0, .08);
        color: #0a7a0a;
        font-weight: 600;
        text-align: center;
    }

    .lane-badge {
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 6px;
    }

    .freeski-badge {
        background: rgba(0, 160, 0, .12);
        color: #0a7a0a;
    }

    .closed-badge {
        background: rgba(160, 0, 0, .12);
        color: #7a0a0a;
    }

    .lane-badge i,
    td.freeski i {
        margin-right: .35rem;
        font-size: 0.95em;
        vertical-align: -1px;
        /* näyttää siistiltä tekstin kanssa */
    }

    /* Lane-otsikon alin rivi badgeille */
    .lane-th {
        vertical-align: bottom;
    }

    .lane-head {
        display: block;
        font-weight: 700;
    }

    .lane-subbadges {
        margin-top: 4px;
    }

    /* Yleinen badge-pohja */
    .lane-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        line-height: 1;
        padding: 3px 8px;
        border-radius: 999px;
        margin-left: 0;
        /* nimen alla -> ei pakko siirtää oikealle */
        margin-right: 6px;
        white-space: nowrap;
    }

    .lane-badge i {
        font-size: .95em;
    }

    /* Nykyiset */
    .freeski-badge {
        background: rgba(0, 160, 0, .12);
        color: #0a7a0a;
    }

    .closed-badge {
        background: rgba(160, 0, 0, .12);
        color: #7a0a0a;
    }

    /* Uusi custom-badge: värit tulevat inline-tyylinä, mutta tässä fallback */
    .custom-badge {
        background: var(--badge-bg, rgba(0, 0, 0, .08));
        color: var(--badge-fg, var(--text));
    }

    .fissi-modal[hidden] {
        display: none;
    }

    .fissi-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
    }

    .fissi-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
    }

    .fissi-modal-card {
        position: relative;
        margin: 6vh auto;
        max-width: 520px;
        background: var(--bg);
        border-radius: 14px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        padding: 12px 14px;
    }

    .fissi-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .fissi-modal-body {
        padding-top: 8px;
    }

    .fissi-modal-close {
        background: transparent;
        border: 0;
        font-size: 18px;
        cursor: pointer;
    }

    #res-contacts-content .contact-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 6px;
        border-bottom: 1px solid #f0f0f0;
    }

    #res-contacts-content .contact-row:last-child {
        border-bottom: 0;
    }

    #res-contacts-content .name {
        font-weight: 600;
    }

    #res-contacts-content .meta {
        font-size: .9em;
        opacity: .8;
    }

    .lane-day-table .btn-info-res {
        margin-left: auto;
        /* puskee oikeaan laitaan */
        border: 0;
        background: #2d7dd2;
        font-size: 12px;
        line-height: 1;
        padding: 4px 6px;
        border-radius: 6px;
        cursor: pointer;
    }

    .lane-day-table .btn-info-res:hover {
        background: #e3e7ee;
    }

    /* Soluun suhteellinen konteksti */
    .lane-day-table td.cell-has-info {
        position: relative;
    }

    /* Kelluva info-nappi: pieni, ei riko rivitystä */
    .lane-day-table td.cell-has-info .btn-info-res {
        position: absolute;
        top: 4px;
        /* hienosäädä */
        right: 4px;
        /* hienosäädä */
        border: 0;
        padding: 3px 5px;
        /* pieni klikattava alue */
        font-size: 11px;
        line-height: 1;
        border-radius: 6px;
        background: #2d7dd2;
        /* vaalea sininen pastelli */
        cursor: pointer;
    }

    .lane-day-table td.cell-has-info .btn-info-res:hover {
        background: #dce9ff;
    }

    /* Pidä varausrivi yhdellä rivillä ja katkaise pitkät nimet siististi */
    .lane-day-table .res-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        /* ei rivinvaihtoa */
        min-width: 0;
        /* mahdollistaa ellipsin flex-lapsille */
    }

    .lane-day-table .res-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: 100%;
        min-width: 0;
    }

    .lane-day-table .res-item .label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* … jos ei mahdu */
        max-width: 100%;
    }

    /* --- Tumman teeman värit (kun body.dark tai [data-theme="dark"]) --- */
    body.dark td.reserved.disc-sl,
    [data-theme="dark"] td.reserved.disc-sl {
        background: rgba(200, 80, 90, 0.25);
        /* hieman tummempi punainen */
    }

    body.dark td.reserved.disc-gs,
    [data-theme="dark"] td.reserved.disc-gs {
        background: rgba(90, 130, 230, 0.22);
        /* viileä sininen */
    }

    body.dark td.reserved.disc-sg,
    [data-theme="dark"] td.reserved.disc-sg {
        background: rgba(70, 180, 110, 0.22);
        /* vihertävä pastelli */
    }

    body.dark td.reserved.disc-dh,
    [data-theme="dark"] td.reserved.disc-dh {
        background: rgba(220, 180, 60, 0.26);
        /* lämmin keltainen */
    }

    body.dark td.reserved.disc-mixed,
    [data-theme="dark"] td.reserved.disc-mixed {
        background: rgba(160, 160, 160, 0.20);
    }

    .note-legend {
        font-style: italic;
    }

    body.dark .note-legend {
        color: #bbb;
    }
/* Tiiviimpi pystysuuntainen väli modalissa */
#bookingModal .modal-content p { margin: 6px 0; }

/* Yhtenäinen ulkoasu kaikille syötekentille modalissa */
#bookingModal input[type="text"],
#bookingModal input[type="number"],
#bookingModal select,
#bookingModal textarea {
  border: 1px solid var(--border, #c7c7c7);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  box-sizing: border-box;
}

/* Kenttien oletusleveys, jotta "Tiimi" ja "Urheilijoiden määrä" näyttävät samalta */
#bookingModal input[type="text"],
#bookingModal input[type="number"],
#bookingModal select {
  height: 34px;
  min-width: 260px; /* säädä tarvittaessa */
}

/* Tekstialue: sama kulmapyöristys + täysi leveys */
#bookingModal textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
}

/* Fokus- ja virhe-efektit */
#bookingModal input:focus,
#bookingModal select:focus,
#bookingModal textarea:focus {
  outline: none;
  border-color: var(--accent, #1e66f5);
  box-shadow: 0 0 0 2px rgba(30, 102, 245, .15);
}

#bookingModal .is-invalid {
  border-color: var(--danger, #d64545) !important;
  box-shadow: 0 0 0 2px rgba(214, 69, 69, .15);
}

/* Puhelin-jako -rivin marginaali hieman pienemmäksi */
#bookingModal #sharePhoneRow { margin: 6px 0 !important; }

/* Lisätty 19.10.2025)
/* Yleinen modal-kehys */
.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;              /* JS vaihtaa flexiksi kun avataan */
  align-items: center;         /* keskitys pysty- ja vaakasuunnassa */
  justify-content: center;
  padding: 16px;               /* reuna padding pienissä näytöissä */
  background: rgba(0,0,0,.4);
  overflow-y: auto;            /* varmistus: jos kortti on korkeampi kuin dynaaminen vh */
}

.modal .modal-card {             /* käytä tätä luokkaa HTML:ssä */
  position: relative;
  margin: 60px 16px 24px;
  width: min(720px, 96vw);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  padding: 16px;
}

/* label/textarea pienet siistimiset */
.modal .modal-label { display:block; margin: 8px 0 4px; }
.modal .modal-textarea { width: 100%; box-sizing: border-box; }

.modal .modal-content {
  position: relative;
  margin: 60px 16px 24px;
  width: min(720px, 96vw);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  padding: 16px;
}
/* Tausta ei rullaa kun modal on auki */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.myres-sticky-top { position: sticky; top: 0; z-index: 100; } /* pienempi kuin modal */

/* Taustaverho */
.modal .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.40);
  z-index: 0;
}

/* Sticky-otsikon z-index pienemmäksi */
.myres-sticky-top {
  position: sticky;
  top: 0;
  z-index: 100;   /* pienempi kuin modal */
}