/* Jinoko Rezervace – Frontend CSS */

#jr-rezervace-wrap {
    position: relative;
    font-family: inherit;
}

#jr-calendar {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
}

.fc {
    background: #fff;
}

/* Stav načítání */
#jr-calendar.jr-loading {
    opacity: .5;
    pointer-events: none;
}

/* Sloty v kalendáři */
.fc-event {
    cursor: pointer;
    border-radius: 4px !important;
    font-size: .82em;
    padding: 1px 4px;
}
.fc-event:hover {
    filter: brightness(1.1);
}

/* ── Modální okno ─────────────────────────────────────────── */
.jr-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jr-modal[hidden] { display: none; }

.jr-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.jr-modal-content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    z-index: 1;
}

.jr-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0;
}
.jr-modal-close:hover { color: #000; }

body.jr-modal-open { overflow: hidden; }

/* ── Detail slotu ─────────────────────────────────────────── */
.jr-modal-title {
    margin: 0 0 16px;
    font-size: 1.2em;
    padding-right: 24px;
}

.jr-slot-detail {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: .95em;
}
.jr-slot-detail th,
.jr-slot-detail td {
    padding: 7px 8px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}
.jr-slot-detail th {
    width: 38%;
    color: #666;
    font-weight: 600;
}

.jr-modal-service-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    color: #fff;
    font-size: .85em;
    font-weight: 600;
}

.jr-more-link {
    font-size: .85em;
    margin-left: 6px;
    opacity: .8;
}

/* ── Formulář ─────────────────────────────────────────────── */
.jr-form { margin-top: 8px; }

.jr-field { margin-bottom: 14px; }

.jr-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: .9em;
}

.jr-field input,
.jr-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .95em;
    box-sizing: border-box;
    font-family: inherit;
}
.jr-field input:focus,
.jr-field textarea:focus {
    outline: none;
    border-color: #3788d8;
    box-shadow: 0 0 0 2px rgba(55,136,216,.2);
}

.jr-required { color: #c00; }

.jr-field-error {
    display: block;
    color: #c00;
    font-size: .82em;
    margin-top: 3px;
    min-height: 1em;
}

.jr-form-error {
    background: #fde8e8;
    border: 1px solid #f5aca6;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: .9em;
    color: #7a1a1a;
}

/* ── Tlačítko ─────────────────────────────────────────────── */
.jr-btn {
    display: inline-block;
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}
.jr-btn-primary             { background: #3788d8; color: #fff; }
.jr-btn-primary:hover       { background: #2a6bbf; }
.jr-btn-primary:disabled    { background: #a0bcd8; cursor: not-allowed; }

.jr-form-footer { text-align: right; margin-top: 6px; }

/* ── Potvrzení rezervace ──────────────────────────────────── */
.jr-success {
    text-align: center;
    padding: 20px 0 10px;
}
.jr-success-icon {
    font-size: 3em;
    color: #46b450;
    margin-bottom: 12px;
}
.jr-success h3 {
    margin: 0 0 8px;
    font-size: 1.2em;
}
.jr-success p { color: #555; margin: 0; }

/* ── Responzivita ─────────────────────────────────────────── */
@media (max-width: 520px) {
    .jr-modal-content {
        padding: 20px 16px;
        max-width: 100%;
        width: 100%;
        max-height: 96vh;
        border-radius: 12px 12px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
    }
    .jr-modal { align-items: flex-end; }
    .jr-slot-detail th { width: 44%; }
}

/* ── Open calendar (volné rezervace) ─────────────────────────────────── */

#jr-open-calendar {
    font-family: inherit;
}

.jr-open-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.jr-open-date {
    font-weight: 600;
    font-size: 1.05em;
    flex: 1;
    text-align: center;
}

.jr-nav-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: .9em;
    font-family: inherit;
    transition: background .15s;
}
.jr-nav-btn:hover { background: #e0e0e0; }
.jr-nav-today     { font-weight: 600; }

/* ── Time axis ───────────────────────────────────────────────────────── */

.jr-time-axis-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px;
}

.jr-axis-bar {
    flex: 1;
    position: relative;
    height: 20px;
    overflow: visible;
}

.jr-axis-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: .72em;
    color: #888;
    white-space: nowrap;
    top: 0;
}

/* ── Legend ─────────────────────────────────────────────────────────── */

.jr-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    font-size: .82em;
    color: #555;
    flex-wrap: wrap;
}

.jr-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.jr-legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}
.jr-legend-dot--available { background: #3788d8; }
.jr-legend-dot--booked    { background: #888; }
.jr-legend-dot--closed    { background: #bbb; }

.jr-open-hint {
    font-size: .83em;
    color: #777;
    margin: 0 0 14px;
    font-style: italic;
}

/* ── Lanes ───────────────────────────────────────────────────────────── */

.jr-lane {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.jr-lane-label {
    width: 130px;
    min-width: 130px;
    font-weight: 600;
    font-size: .88em;
    padding-right: 10px;
    word-break: break-word;
}

.jr-lane-bar {
    flex: 1;
    height: 34px;
    position: relative;
    background: #e8e8e8;
    border-radius: 5px;
    overflow: hidden;
}

/* ── Segments ────────────────────────────────────────────────────────── */

.jr-lane-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 1px;
}

.jr-lane-segment--available {
    cursor: pointer;
    transition: filter .1s;
}
.jr-lane-segment--available:hover,
.jr-lane-segment--available:focus {
    filter: brightness(1.15);
    outline: none;
}

.jr-lane-segment--booked { background: #888; cursor: default; }
.jr-lane-segment--closed { background: #bbb; cursor: default; }
.jr-lane-segment--past   { background: #ddd; cursor: default; }

/* Helpers */
.jr-loading-text { color: #888; font-style: italic; padding: 10px 0; }
.jr-no-services  { color: #888; font-style: italic; padding: 10px 0; }
.jr-error        { color: #c00; padding: 10px 0; }

/* ── Responsive open calendar ────────────────────────────────────────── */
@media (max-width: 600px) {
    .jr-lane-label { width: 90px; min-width: 90px; font-size: .8em; }
    .jr-lane-bar   { height: 28px; }
    .jr-open-date  { font-size: .95em; }
    .jr-axis-tick  { font-size: .65em; }
}

/* ── Week grid ───────────────────────────────────────────────────────── */

.jr-week-grid {
    display: grid;
    grid-template-columns: 130px repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 12px;
}

.jr-week-block  { margin-bottom: 10px; }
.jr-week-corner { /* empty top-left cell */ }

.jr-week-header-cell {
    text-align: center;
    font-size: .76em;
    font-weight: 600;
    padding: 4px 2px 6px;
    color: #555;
}
.jr-week-header-cell--today { color: #3788d8; }

.jr-week-dow {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .9em;
}
.jr-week-dom {
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.1;
}

.jr-week-location-label {
    font-size: .84em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    word-break: break-word;
    min-height: 38px;
}

.jr-week-location-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.jr-week-cell {
    height: 38px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: filter .1s;
}
.jr-week-cell[role="button"] { cursor: pointer; }
.jr-week-cell[role="button"]:hover,
.jr-week-cell[role="button"]:focus {
    filter: brightness(1.12);
    outline: none;
}
.jr-week-cell--none { cursor: default; }
.jr-week-cell--today {
    outline: 2px solid rgba(0,0,0,.22);
    outline-offset: -2px;
}

.jr-week-cell-bar {
    position: absolute;
    inset: 0;
    background: #e0e0e0;
}

.jr-week-cell-seg {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* ── Mini time bar (in modal) ────────────────────────────────────────── */

.jr-mini-bar {
    height: 14px;
    background: #e8e8e8;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.jr-mini-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 1px;
}

/* ── Select in form ──────────────────────────────────────────────────── */

.jr-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .95em;
    box-sizing: border-box;
    font-family: inherit;
    background: #fff;
}
.jr-field select:focus {
    outline: none;
    border-color: #3788d8;
    box-shadow: 0 0 0 2px rgba(55,136,216,.2);
}

/* ── Responsive week grid ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .jr-week-grid { grid-template-columns: 80px repeat(7, 1fr); gap: 2px; }
    .jr-week-location-label { font-size: .74em; gap: 4px; }
    .jr-week-location-dot   { width: 9px; height: 9px; }
    .jr-week-cell           { height: 30px; }
    .jr-week-dow            { font-size: .78em; }
    .jr-week-dom            { font-size: 1.1em; }
    .jr-open-date           { font-size: .92em; }
}