/* =========================================================
   TABLES + FILTERS — DOMENJÓ (base comuna)
   Fitxer: public/css/tables.css
   ========================================================= */

/* ─────────────────────────────────────────────
   Filtres
   ───────────────────────────────────────────── */

/* Contenidor (compatibilitat: ús antic i nou) */
.filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    align-items:flex-end;
    margin:1rem 1.5rem 0;
}

/* Cada fila de filtres (pantalles amb més d’una fila) */
.filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    align-items:flex-end;
    width:100%;
}

/* Grup de filtre (label + input/select) */
.filter-group{
    flex:1 1 220px;
    display:flex;
    flex-direction:column;
    gap:0.25rem;
}

/* Grup d’accions */
.filter-group-actions{ flex:0 0 auto; }

/* Label dels filtres */
.filter-label{
    font-size:0.85rem;
    color: var(--grey-text);
}

/* Accions extra */
.filter-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.25rem;
    margin-left:auto;
}

.filter-reset-link{
    font-size:0.8rem;
    color: var(--brand-secondary);
    text-decoration:underline;
    cursor:pointer;
}
.filter-reset-link:hover{ text-decoration:none; }

/* ─────────────────────────────────────────────
   Accions sobre taula
   ───────────────────────────────────────────── */

.table-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.75rem 1.5rem;
    font-size:0.9rem;
}

.table-info{ color: var(--grey-text); }

.table-actions-right{
    display:flex;
    gap:0.5rem;
}

/* Contenidor scroll horitzontal per taules */
.table-responsive{
    width:100%;
    overflow-x:auto;
    padding:0 1.5rem 1.5rem;
}

/* Contenidor alternatiu (ofertes / compres) */
.data-table-wrapper{
    width:100%;
    overflow-x:auto;
    padding:0 1.5rem 1.5rem;
}

/* Taula principal */
.data-table{
    width:100%;
    border-collapse:collapse;
    font-size:0.85rem;
}

.data-table thead{ background-color: var(--grey-light); }

.data-table th,
.data-table td{
    padding:0.45rem 0.6rem;
    border-bottom:1px solid #e0e0e0;
    text-align:left;
    white-space:nowrap;
}

.data-table tbody tr:hover{ background-color:#fafafa; }

/* Badges */
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.1rem 0.5rem;
    border-radius:999px;
    font-size:0.75rem;
}

.badge-success{
    background-color: var(--green-ok);
    color:#ffffff;
}

.badge-muted{
    background-color:#e0e0e0;
    color:#555555;
}

/* Links d'acció a taules */
.btn-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    color: var(--brand-secondary);
    text-decoration:underline;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
}
.btn-link:hover{ text-decoration:none; }

.table-link{
    font-size:0.85rem;
    color: var(--brand-secondary);
    text-decoration:underline;
    cursor:pointer;
    margin-left:0.75rem;
}
.table-link:first-child{ margin-left:0; }
.table-link.disabled{
    pointer-events:none;
    color: var(--grey-text);
    text-decoration:none;
    opacity:0.6;
}

/* ─────────────────────────────────────────────
   Dark theme overrides (taules/filtres)
   ───────────────────────────────────────────── */

html[data-theme="dark"] .filter-label,
html[data-theme="dark"] .table-info{
    color: rgba(242,242,242,.62);
}

html[data-theme="dark"] .data-table thead{
    background-color: rgba(255,255,255,.06);
}

html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table td{
    border-bottom-color: rgba(255,255,255,.10);
    color: rgba(242,242,242,.92);
}

html[data-theme="dark"] .data-table tbody tr:hover{
    background-color: rgba(255,255,255,.04);
}

html[data-theme="dark"] .badge-muted{
    background-color: rgba(255,255,255,.12);
    color: rgba(242,242,242,.85);
}