/**
 * Data tables — shared look for every back-office listing.
 *
 * Two layers:
 *  1. Reusable components (data-panel, segmented, status-pill, row-actions, capacity, date-tile)
 *     for listings built on the new markup, such as /mis-eventos.
 *  2. A restyle of the theme's `.userDatatable` tables, status badges and action icons, so the
 *     existing listings pick up the same language without touching their markup.
 *
 * Loaded globally after the theme stylesheet (partials/_header, layouts/events).
 */

:root {
    --dt-ink: #0a0a0a;
    --dt-text: #333;
    --dt-muted: #8a8a8a;
    --dt-faint: #a3a3a3;
    --dt-surface: #fff;
    --dt-subtle: #f3f3f1;
    --dt-hover: #f7f7f5;
    --dt-line: #f0f0ee;
    --dt-line-soft: #f5f5f3;
    --dt-accent: #ff2a3c;
    --dt-accent-hover: #e91f31;
    --dt-success-bg: #e7f6ec;
    --dt-success-fg: #15803d;
    --dt-success-dot: #16a34a;
    --dt-warning-bg: #fdf3df;
    --dt-warning-fg: #a16207;
    --dt-warning-dot: #e8a317;
    --dt-neutral-bg: #f0f0ee;
    --dt-neutral-fg: #555;
    --dt-neutral-dot: #a3a3a3;
    --dt-danger-bg: #ffe9eb;
    --dt-danger-fg: #e0182b;
    --dt-radius-panel: 24px;
    --dt-radius-row: 16px;
    --dt-pill: 999px;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

.data-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px 16px;
    border-radius: var(--dt-radius-panel);
    background: var(--dt-surface);
}

.data-panel__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 4px 8px;
}

/* ── Segmented tabs ────────────────────────────────────────────────────── */

.segmented {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: var(--dt-pill);
    background: var(--dt-subtle);
}

.segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 8px 0 16px;
    border-radius: var(--dt-pill);
    color: #555;
    font-size: 13px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.segmented__item:hover {
    color: var(--dt-ink);
    text-decoration: none;
}

.segmented__item--active,
.segmented__item--active:hover {
    background: var(--dt-ink);
    color: #fff;
}

.segmented__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--dt-pill);
    background: #e6e6e3;
    font-size: 11px;
}

.segmented__item--active .segmented__count {
    background: rgba(255, 255, 255, .16);
}

/* ── Status legend and pills ───────────────────────────────────────────── */

.status-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--dt-muted);
    font-size: 12px;
}

.status-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-legend__item::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dt-neutral-dot);
}

.status-legend__item--active::before {
    background: var(--dt-success-dot);
}

.status-legend__item--draft::before {
    background: var(--dt-warning-dot);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border-radius: var(--dt-pill);
    background: var(--dt-neutral-bg);
    color: var(--dt-neutral-fg);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.status-pill::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dt-neutral-dot);
}

.status-pill--active {
    background: var(--dt-success-bg);
    color: var(--dt-success-fg);
}

.status-pill--active::before {
    background: var(--dt-success-dot);
}

.status-pill--draft {
    background: var(--dt-warning-bg);
    color: var(--dt-warning-fg);
}

.status-pill--draft::before {
    background: var(--dt-warning-dot);
}

/* ── Row actions ───────────────────────────────────────────────────────── */

.row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.row-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--dt-subtle);
    color: var(--dt-text);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.row-actions__btn:hover,
.row-actions__btn:focus-visible {
    background: var(--dt-ink);
    color: #fff;
    text-decoration: none;
}

.row-actions__btn:focus-visible {
    outline: 2px solid var(--dt-accent);
    outline-offset: 2px;
}

.row-actions__btn--danger:hover,
.row-actions__btn--danger:focus-visible {
    background: var(--dt-danger-bg);
    color: var(--dt-danger-fg);
}

.row-actions__form {
    display: contents;
}

/* ── Capacity meter ────────────────────────────────────────────────────── */

.capacity {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.capacity__figures {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.capacity__count {
    color: var(--dt-ink);
    font-size: 14px;
}

.capacity__total,
.capacity__unit {
    color: var(--dt-faint);
}

.capacity__percent {
    color: var(--dt-muted);
    font-size: 12px;
}

.capacity__bar {
    display: block;
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: var(--dt-pill);
    background: var(--dt-line);
    overflow: hidden;
    appearance: none;
}

.capacity__bar::-webkit-progress-bar {
    border-radius: var(--dt-pill);
    background: var(--dt-line);
}

.capacity__bar::-webkit-progress-value {
    border-radius: var(--dt-pill);
    background: var(--dt-accent);
}

.capacity__bar::-moz-progress-bar {
    border-radius: var(--dt-pill);
    background: var(--dt-accent);
}

.capacity--full .capacity__bar::-webkit-progress-value {
    background: var(--dt-ink);
}

.capacity--full .capacity__bar::-moz-progress-bar {
    background: var(--dt-ink);
}

/* ── Date tile ─────────────────────────────────────────────────────────── */

.date-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 52px;
    border-radius: 14px;
    background: var(--dt-subtle);
    color: var(--dt-ink);
}

.date-tile__day {
    font-size: 18px;
    line-height: 20px;
}

.date-tile__month {
    color: var(--dt-muted);
    font-size: 10px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.date-tile--highlight {
    background: var(--dt-accent);
    color: #fff;
}

.date-tile--highlight .date-tile__month {
    color: rgba(255, 255, 255, .8);
}

/* ── Theme tables (.userDatatable) ─────────────────────────────────────── */

.card:has(> .card-body > .userDatatable) {
    border-radius: var(--dt-radius-panel);
    box-shadow: none;
}

.userDatatable table {
    border-bottom: 0;
}

.userDatatable table thead tr:not(.footable-filtering) th,
.userDatatable-header th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--dt-line) !important;
    border-radius: 0 !important;
    background: transparent;
    color: var(--dt-faint);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .3px;
}

.userDatatable-title {
    color: var(--dt-faint);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .3px;
    text-transform: none;
}

.userDatatable table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--dt-line-soft);
    transition: background-color .15s ease;
}

.userDatatable table tbody tr:first-child td {
    padding-top: 14px;
}

.userDatatable table tbody tr:last-child td {
    padding-bottom: 14px;
    border-bottom: 0;
}

.userDatatable table tbody tr:hover > td {
    background: var(--dt-hover);
}

.userDatatable table tbody tr:hover > td:first-child {
    border-radius: var(--dt-radius-row) 0 0 var(--dt-radius-row);
}

.userDatatable table tbody tr:hover > td:last-child {
    border-radius: 0 var(--dt-radius-row) var(--dt-radius-row) 0;
}

.userDatatable-content {
    color: var(--dt-ink);
    font-weight: 400;
}

/* Status badges keep their theme color classes; this turns them into dotted pills. */
.userDatatable-content-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 5px 12px 5px 10px;
    border-radius: var(--dt-pill) !important;
    background: var(--dt-neutral-bg);
    color: var(--dt-neutral-fg);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
}

.userDatatable-content-status::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

.userDatatable-content-status.bg-opacity-success {
    background: var(--dt-success-bg);
    color: var(--dt-success-fg);
}

.userDatatable-content-status.bg-opacity-warning {
    background: var(--dt-warning-bg);
    color: var(--dt-warning-fg);
}

.userDatatable-content-status.bg-opacity-danger {
    background: var(--dt-danger-bg);
    color: var(--dt-danger-fg);
}

/* Theme action icons become filled round buttons. */
.orderDatatable_actions {
    gap: 6px;
}

.orderDatatable_actions li {
    margin: 0;
}

.orderDatatable_actions li a,
.orderDatatable_actions li button.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--dt-subtle);
    transition: background-color .15s ease, color .15s ease;
}

.orderDatatable_actions li a i,
.orderDatatable_actions li a svg,
.orderDatatable_actions li button.remove i {
    color: var(--dt-text);
    font-size: 16px;
}

.orderDatatable_actions li a:hover,
.orderDatatable_actions li a.view:hover,
.orderDatatable_actions li a.edit:hover {
    background: var(--dt-ink);
}

.orderDatatable_actions li a:hover i,
.orderDatatable_actions li a:hover svg {
    color: #fff;
}

.orderDatatable_actions li a.remove:hover,
.orderDatatable_actions li button.remove:hover {
    background: var(--dt-danger-bg);
}

.orderDatatable_actions li a.remove:hover i,
.orderDatatable_actions li a.remove:hover svg,
.orderDatatable_actions li button.remove:hover i {
    color: var(--dt-danger-fg);
}

/* Stacked mobile cards (responsive-table.css) keep their own cell box; the row hover band and
   the desktop cell padding above would otherwise leak into each card. */
@media (max-width: 767.98px) {
    .userDatatable .table-stack__table tbody td,
    .userDatatable .table-stack__table tbody tr:first-child td,
    .userDatatable .table-stack__table tbody tr:last-child td {
        padding: 10px 0;
        border-bottom: 1px solid var(--dt-line-soft);
    }

    .userDatatable .table-stack__table tbody tr td:last-child {
        border-bottom: 0;
    }

    .userDatatable .table-stack__table tbody tr:hover > td {
        border-radius: 0;
        background: transparent;
    }
}

@media (max-width: 575.98px) {
    .data-panel {
        padding: 16px;
        border-radius: 20px;
    }

    .status-legend {
        display: none;
    }

    .row-actions__btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}