/* =========================================================
   Lakeside Availability Table – frontend styles
   ========================================================= */

.lat-table-wrap {
    /*
     * Customise colours in your theme CSS:
     *   .lat-table-wrap { --lat-header-hover-bg: #f0ede8; }
     */
    --lat-border:            #e0d8cc;
    --lat-row-hover:         #f5f1ec;
    --lat-header-hover-bg:   #f5f1ec;
    --lat-header-border:     #c8bfb0;
    --lat-link-color:        #6b5c42;
    --lat-radius:            4px;
    --lat-stav-volne:        #3a7a3a;
    --lat-stav-rezervovane:  #b07d2a;
    --lat-stav-predane:      #999;

    /* Always inherit font, size and colour from theme */
    font-family:   inherit;
    font-size:     inherit;
    line-height:   inherit;
    color:         inherit;

    padding:       0;
    box-sizing:    border-box;
}

.lat-table-wrap *,
.lat-table-wrap *::before,
.lat-table-wrap *::after {
    box-sizing: border-box;
}

/* ── Table scroll wrapper ── */
.lat-table-scroll { overflow-x: auto; }

/* ── Table ── */
.lat-table {
    width:           100%;
    border-collapse: collapse;
    border-spacing:  0;
    font-size:       inherit;
}

/* ── Header ── */
.lat-table thead tr {
    background:    #fff;
    border-bottom: 2px solid var(--lat-header-border);
}
.lat-table thead th {
    padding:        12px 16px;
    text-align:     left;
    font-weight:    600;
    letter-spacing: .04em;
    white-space:    nowrap;
    border:         none;
    user-select:    none;
    color:          inherit;
    background:     #fff;
    transition:     background .15s;
}
.lat-table thead th.lat-sortable {
    cursor: pointer;
}
.lat-table thead th.lat-sortable:hover {
    background: var(--lat-header-hover-bg) !important;
}

/* Sort icons */
.lat-sort-icon::after        { content: ' ⇅'; font-size: .72em; opacity: .35; }
th.lat-sort-asc  .lat-sort-icon::after { content: ' ↑'; opacity: .8; }
th.lat-sort-desc .lat-sort-icon::after { content: ' ↓'; opacity: .8; }

/* ── Body rows ── */
.lat-table tbody tr {
    border-bottom: 1px solid var(--lat-border);
    transition: background .1s;
}
.lat-table tbody tr:hover { background: var(--lat-row-hover); }
.lat-table tbody td {
    padding:        10px 16px;
    vertical-align: middle;
}

/* Hidden rows (pagination) */
.lat-table tbody tr.lat-hidden { display: none !important; }

/* ── PDF link ── */
.lat-pdf-link {
    color:           var(--lat-link-color) !important;
    text-decoration: underline;
}
.lat-pdf-link:hover { opacity: .75; }

/* ── Status ── */
.lat-stav {
    font-weight:    600;
    font-size:      .85em;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.lat-status-select {
    border:         1px solid var(--lat-border) !important;
    border-radius:  3px     !important;
    background:     #fff    !important;
    padding:        2px 6px !important;
    width:          auto    !important;
    font-weight:    600     !important;
    font-size:      .85em   !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor:         pointer !important;
    color:          inherit !important;
}
.lat-stav--volne,
.lat-status-select.lat-stav--volne       { color: var(--lat-stav-volne)       !important; }
.lat-stav--rezervovane,
.lat-status-select.lat-stav--rezervovane { color: var(--lat-stav-rezervovane) !important; }
.lat-stav--predane,
.lat-status-select.lat-stav--predane     { color: var(--lat-stav-predane)     !important; }

/* ── Cena ── */
.lat-col-cena { text-align: right; white-space: nowrap; }

/* ── Bottom controls (info + pagination) ── */
.lat-table-controls--bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    margin-top:      14px;
}
.lat-info { font-size: .85em; opacity: .65; }

/* ── Pagination ── */
.lat-pagination {
    display:     flex;
    gap:         4px;
    align-items: center;
    flex-wrap:   wrap;
}
.lat-pagination button {
    width:           32px       !important;
    height:          32px       !important;
    border-radius:   50%        !important;
    border:          1px solid var(--lat-border) !important;
    background:      #fff       !important;
    cursor:          pointer    !important;
    font-size:       .85em      !important;
    color:           inherit    !important;
    display:         flex       !important;
    align-items:     center     !important;
    justify-content: center     !important;
    line-height:     1          !important;
    padding:         0          !important;
    flex-shrink:     0;
    transition:      background .15s, color .15s, border-color .15s;
}
.lat-pagination button:hover {
    background:   var(--lat-header-hover-bg) !important;
    border-color: var(--lat-header-border)   !important;
}
.lat-pagination button.active {
    background:   var(--lat-link-color)  !important;
    color:        #fff                   !important;
    border-color: var(--lat-link-color)  !important;
}
.lat-pagination button:disabled {
    opacity:        .3          !important;
    cursor:         default     !important;
    pointer-events: none;
}
.lat-ellipsis {
    display:     inline-flex;
    align-items: center;
    padding:     0 3px;
    opacity:     .45;
    font-size:   .85em;
}

/* ── Edit link (logged-in) ── */
.lat-edit-link { margin-top: 8px; font-size: .8em; opacity: .55; }
.lat-edit-link a { color: var(--lat-link-color); text-decoration: underline; }
.lat-edit-link a:hover { opacity: .75; }

/* ── Row with tooltip ── */
tr.lat-has-tooltip {
    cursor: crosshair;
}

/* ── Tooltip container ── */
.lat-tooltip {
    position:      fixed;
    z-index:       99999;
    pointer-events:none;
    background:    #fff;
    border:        1px solid var(--lat-border, #e0d8cc);
    border-radius: 6px;
    box-shadow:    0 6px 24px rgba(0,0,0,.18);
    padding:       6px;
    max-width:     280px;
    opacity:       0;
    transform:     translateY(6px);
    transition:    opacity .15s ease, transform .15s ease;
}
.lat-tooltip.is-visible {
    opacity:   1;
    transform: translateY(0);
}
.lat-tooltip img {
    display:    block;
    max-width:  268px;
    max-height: 200px;
    width:      auto;
    height:     auto;
    border-radius: 3px;
}