/* FJPS-Galerie, Tabulky – Public CSS
   Barvy se řídí CSS proměnnými nastavenými inline na .fe-wrapper
   (viz FE_Shortcode::render) — fallback hodnoty zde jsou jen pojistka,
   pokud by se proměnné z nějakého důvodu nenačetly. */
.fe-wrapper {
    /* záhlaví */
    --fe-header-bg: #1a1a2e;
    --fe-header-text: #ffffff;
    --fe-header-link-hover: #ffffff;

    /* první sloupec */
    --fe-first-col-bg: #f0f0f5;
    --fe-first-col-text: #1a1a2e;

    /* tělo tabulky */
    --fe-row-bg: #ffffff;
    --fe-row-bg-alt: #fafafd;
    --fe-row-text: #1a1a2e;
    --fe-border: #e0e0e8;
    --fe-row-hover: #f8f8fc;

    /* odkazy v záznamech (mimo záhlaví) */
    --fe-link: #c0392b;
    --fe-link-hover: #a52f23;

    /* badge (sloupec typu "výběr") */
    --fe-badge-bg: #eeeeee;
    --fe-badge-text: #333333;

    /* filtry a stránkování */
    --fe-filter-btn-bg: #1a1a2e;
    --fe-filter-btn-text: #ffffff;
    --fe-page-active-bg: #1a1a2e;
    --fe-page-active-text: #ffffff;

    /* mobilní kartičky */
    --fe-mobile-card-bg: #ffffff;
    --fe-mobile-card-title-bg: #f5f5fb;
    --fe-mobile-card-title-text: #1a1a2e;
    --fe-mobile-card-border: #e4e4ee;
    --fe-mobile-card-label: #999999;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .92rem;
    color: #1a1a2e;
    margin: 0 0 32px;
}

.fe-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -.02em;
}

/* ---- FILTERS ---- */
.fe-filters { margin-bottom: 16px; }
.fe-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.fe-filter-group { display: flex; flex-direction: column; gap: 3px; }
.fe-filter-group label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #666; }
.fe-filter-select {
    border: 1.5px solid #d0d0da;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: .85rem;
    background: #fff;
    color: #1a1a2e;
    cursor: pointer;
    transition: border-color .2s;
    min-width: 130px;
}
.fe-filter-select:focus { outline: none; border-color: #888; }
.fe-filter-btn {
    padding: 7px 18px;
    background: var(--fe-filter-btn-bg);
    color: var(--fe-filter-btn-text);
    border: none;
    border-radius: 5px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
    align-self: flex-end;
}
.fe-filter-btn:hover { opacity: .85; }
.fe-reset-btn {
    padding: 7px 12px;
    color: var(--fe-link);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    align-self: flex-end;
    border: 1.5px solid var(--fe-link);
    border-radius: 5px;
    transition: background .2s, color .2s;
    opacity: .85;
}
.fe-reset-btn:hover { opacity: 1; color: var(--fe-link-hover); background: rgba(0,0,0,.03); }

/* ---- TABLE ---- */
.fe-table-scroll {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
.fe-table {
    border-collapse: collapse;
    width: 100%;
    background: var(--fe-row-bg);
}
.fe-table th, .fe-table td {
    padding: 10px 14px;
    border: 1px solid var(--fe-border);
    text-align: left;
    vertical-align: middle;
}

/* záhlaví — odkazy uvnitř (řadicí šipky) dědí barvu textu záhlaví, NIKDY barvu --fe-link */
.fe-table thead tr th {
    background: var(--fe-header-bg);
    color: var(--fe-header-text);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    user-select: none;
}
.fe-table thead tr th a,
.fe-table thead tr th a:visited {
    color: var(--fe-header-text) !important;
}
.fe-table thead tr th a:hover {
    color: var(--fe-header-link-hover) !important;
}

/* tělo tabulky */
.fe-table tbody tr { transition: background .15s; }
.fe-table tbody tr td { background: var(--fe-row-bg); color: var(--fe-row-text); }
.fe-table tbody tr:nth-child(even) td { background: var(--fe-row-bg-alt); }
.fe-table tbody tr:hover td { background: var(--fe-row-hover); }

.fe-table tbody tr td:first-child {
    background: var(--fe-first-col-bg);
    color: var(--fe-first-col-text);
    font-weight: 600;
}
.fe-table tbody tr:hover td:first-child {
    background: var(--fe-first-col-bg);
    filter: brightness(.96);
}

/* odkazy v záznamech (buňky typu "odkaz") — zcela nezávislé na záhlaví */
.fe-table tbody a {
    color: var(--fe-link);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s;
}
.fe-table tbody a:hover { color: var(--fe-link-hover); text-decoration: underline; }
.fe-icon-link { width: 13px; height: 13px; flex-shrink: 0; }

.fe-badge {
    display: inline-block;
    padding: 2px 9px;
    background: var(--fe-badge-bg);
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--fe-badge-text);
    white-space: nowrap;
}
.fe-thumb {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #ddd;
    display: block;
}
.fe-img-link:hover .fe-thumb { opacity: .85; }
.fe-empty-cell { color: #bbb; }
.fe-empty { text-align: center; padding: 30px !important; color: #888; }

/* ---- PAGINATION ---- */
.fe-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.fe-count { font-size: .8rem; color: #888; margin-right: 8px; }
.fe-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 5px;
    border: 1.5px solid #d0d0da;
    font-size: .82rem;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    transition: all .15s;
}
.fe-page-btn:hover { background: var(--fe-page-active-bg); color: var(--fe-page-active-text); border-color: var(--fe-page-active-bg); }
.fe-page-btn.active { background: var(--fe-page-active-bg); color: var(--fe-page-active-text); border-color: var(--fe-page-active-bg); }

/* ---- NOTICE ---- */
.fe-notice { padding: 12px 16px; background: #fff8f0; border-left: 4px solid #e67e22; color: #555; border-radius: 4px; }

/* ---- RESPONSIVE – CARD LAYOUT ON MOBILE ---- */
@media (max-width: 680px) {

    /* Filters */
    .fe-filter-form    { flex-direction: column; align-items: stretch; }
    .fe-filter-select  { width: 100%; }
    .fe-filter-btn,
    .fe-reset-btn      { width: 100%; justify-content: center; text-align: center; }

    /* Hide table scroll wrapper border-radius — cards have their own */
    .fe-table-scroll   { box-shadow: none; border-radius: 0; overflow: visible; }

    /* Hide table header row */
    .fe-table thead    { display: none; }

    /* Table becomes a block container of cards */
    .fe-table,
    .fe-table tbody    { display: block; width: 100%; }

    /* Each row = one card */
    .fe-table tbody tr {
        display: block;
        background: var(--fe-mobile-card-bg);
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,.09);
        margin-bottom: 12px;
        overflow: hidden;
        border: 1px solid var(--fe-mobile-card-border);
        transition: box-shadow .2s;
    }
    .fe-table tbody tr:hover {
        box-shadow: 0 4px 18px rgba(0,0,0,.13);
    }
    /* cancel zebra/hover backgrounds on mobile - cards use their own bg */
    .fe-table tbody tr td,
    .fe-table tbody tr:nth-child(even) td,
    .fe-table tbody tr:hover td {
        background: transparent !important;
    }

    /* All cells become block rows inside the card */
    .fe-table tbody td {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 9px 14px;
        border: none;
        border-bottom: 1px solid var(--fe-mobile-card-border);
        font-size: .88rem;
        color: var(--fe-row-text) !important;
        font-weight: normal !important;
    }
    .fe-table tbody td:last-child {
        border-bottom: none;
    }

    /* FIRST CELL = card header / title
       Explicitně i pro sudé řádky (:nth-child(even)), aby žádné jiné
       pravidlo se stejnou nebo vyšší specificitou titulek nepřebilo —
       liché i sudé karty tak mají vždy naprosto identický vzhled. */
    .fe-table tbody tr td[data-first="1"],
    .fe-table tbody tr:nth-child(even) td[data-first="1"],
    .fe-table tbody tr:hover td[data-first="1"] {
        display: block !important;
        padding: 13px 14px 11px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--fe-mobile-card-title-text) !important;
        background: var(--fe-mobile-card-title-bg) !important;
        border-bottom: 2px solid var(--fe-mobile-card-border) !important;
        line-height: 1.3;
    }
    /* Hide the label pseudo on first cell — it IS the title */
    .fe-table tbody td[data-first="1"]::before {
        display: none !important;
    }

    /* Label prefix for all other cells */
    .fe-table tbody td:not([data-first="1"])::before {
        content: attr(data-label);
        flex-shrink: 0;
        min-width: 110px;
        font-size: .75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--fe-mobile-card-label);
        padding-top: 1px;
    }

    /* Adjust inner elements */
    .fe-thumb   { width: 72px; height: 54px; }
    .fe-badge   { font-size: .8rem; }

    /* Pagination */
    .fe-pagination { justify-content: center; }
}

/* ---- SORTABLE HEADERS ---- */
.fe-th-sortable { white-space: nowrap; }
.fe-sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    transition: opacity .15s;
}
.fe-sort-link:hover { opacity: .85; text-decoration: none; }
.fe-sort-arrow {
    font-size: .9em;
    opacity: .9;
    line-height: 1;
}

/* ---- FULLTEXT SEARCH ---- */
.fe-filter-search { flex: 1 1 220px; min-width: 180px; }
.fe-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.fe-search-input {
    width: 100%;
    border: 1.5px solid #d0d0da;
    border-radius: 5px;
    padding: 6px 32px 6px 34px;
    font-size: .85rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 16px;
    color: #1a1a2e;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}
.fe-search-input:focus {
    outline: none;
    border-color: var(--fe-filter-btn-bg);
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
/* schovat nativní ✕ tlačítko v type=search (Chrome) */
.fe-search-input::-webkit-search-cancel-button { display: none; }

.fe-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: .9rem;
    padding: 0 2px;
    line-height: 1;
    transition: color .15s;
}
.fe-search-clear:hover { color: var(--fe-link); }

/* na mobilu search zabere celou šířku */
@media (max-width: 680px) {
    .fe-filter-search { flex: 1 1 100%; }
    .fe-search-input  { width: 100%; }
}