/**
 * Padrões globais de UI: hovers, chevrons de navegação, tabelas, loading.
 * Carregado após tailwind.css / glass-global.css (base.html).
 */
:root {
    --ui-transition-fast: 150ms ease;
    --ui-transition-base: 200ms ease;
    --ui-hover-lift: -1px;
    --ui-chevron-nav-size: 2.5rem;
    --ui-chevron-expand-size: 0.75rem;
    --ui-ring: color-mix(in srgb, var(--tenant-nav-color, #4f46e5) 35%, transparent);
}

/* ---------- Navegação: chevrons (prev/next) ---------- */
.ui-nav-chevron-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

button.ui-nav-chevron-btn,
a.ui-nav-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-chevron-nav-size);
    height: var(--ui-chevron-nav-size);
    min-width: var(--ui-chevron-nav-size);
    min-height: var(--ui-chevron-nav-size);
    border-radius: 9999px;
    color: rgb(107 114 128);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ui-transition-base), color var(--ui-transition-base), transform var(--ui-transition-fast), box-shadow var(--ui-transition-base), opacity var(--ui-transition-fast);
}
.dark button.ui-nav-chevron-btn,
.dark a.ui-nav-chevron-btn {
    color: rgb(156 163 175);
}
.ui-nav-chevron-btn:hover:not(:disabled):not(.pointer-events-none) {
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
}
.dark .ui-nav-chevron-btn:hover:not(:disabled):not(.pointer-events-none) {
    background-color: rgb(55 65 81);
    color: rgb(243 244 246);
}
.ui-nav-chevron-btn:focus-visible {
    outline: 2px solid var(--tenant-btn-primary, #4f46e5);
    outline-offset: 2px;
}
.ui-nav-chevron-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
.ui-nav-chevron-btn i {
    font-size: 1.125rem;
    line-height: 1;
}

/* Chevrons em <details> / filtros de relatório (alinhado ao sidebar) */
.ui-chevron-expand {
    font-size: var(--ui-chevron-expand-size);
    line-height: 1;
    color: rgb(156 163 175);
    transition: transform var(--ui-transition-base);
    flex-shrink: 0;
}
.dark .ui-chevron-expand {
    color: rgb(156 163 175);
}
details[open] > summary .ui-chevron-expand {
    transform: rotate(180deg);
}

/* ---------- Botões (refino de hover / foco) ---------- */
.ui-btn-interactive {
    transition: transform var(--ui-transition-fast), box-shadow var(--ui-transition-base), background-color var(--ui-transition-base), border-color var(--ui-transition-base);
}
.ui-btn-interactive:hover:not(:disabled) {
    transform: translateY(var(--ui-hover-lift));
}
.ui-btn-interactive:active:not(:disabled) {
    transform: translateY(0);
}

/* ---------- Linhas de tabela ---------- */
.ui-table tbody tr.ui-table-row-interactive,
.ui-table-hover tbody tr {
    transition: background-color var(--ui-transition-base);
}
.ui-table tbody tr.ui-table-row-interactive:hover,
.ui-table-hover tbody tr:hover {
    background-color: rgb(249 250 251);
}
.dark .ui-table tbody tr.ui-table-row-interactive:hover,
.dark .ui-table-hover tbody tr:hover {
    background-color: rgb(55 65 81 / 0.45);
}

/* ---------- Cards / painéis ---------- */
.ui-panel-interactive {
    transition: box-shadow var(--ui-transition-base), transform var(--ui-transition-fast), border-color var(--ui-transition-base);
}
.ui-panel-interactive:hover {
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.06);
}
.dark .ui-panel-interactive:hover {
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.35);
}

/* ---------- Loading inline ---------- */
.ui-loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(75 85 99);
}
.dark .ui-loading-inline {
    color: rgb(156 163 175);
}
.ui-loading-inline .ui-loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgb(209 213 219);
    border-top-color: var(--tenant-btn-primary, #4f46e5);
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
}
.dark .ui-loading-inline .ui-loading-spinner {
    border-color: rgb(75 85 81);
    border-top-color: var(--tenant-btn-primary, #818cf8);
}
@keyframes ui-spin {
    to { transform: rotate(360deg); }
}

/* Bloco centralizado (ex.: carregando tabela / seção) */
.ui-loading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: rgb(75 85 99);
}
.dark .ui-loading-block {
    color: rgb(156 163 175);
}
.ui-loading-block .ui-loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgb(209 213 219);
    border-top-color: var(--tenant-btn-primary, #4f46e5);
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
}
.dark .ui-loading-block .ui-loading-spinner {
    border-color: rgb(75 85 81);
    border-top-color: var(--tenant-btn-primary, #818cf8);
}

/* ---------- Tabelas ordenáveis (thead) ---------- */
table.ui-sortable-table thead th.ui-sortable-col {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
    transition: background-color var(--ui-transition-base), color var(--ui-transition-base);
}
table.ui-sortable-table thead th.ui-sortable-col:hover {
    background-color: rgb(243 244 246);
}
.dark table.ui-sortable-table thead th.ui-sortable-col:hover {
    background-color: rgb(55 65 81 / 0.6);
}
table.ui-sortable-table thead th.ui-sortable-col::after {
    content: '⇅';
    font-size: 0.65rem;
    line-height: 1;
    opacity: 0.4;
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
}
table.ui-sortable-table thead th.ui-sortable-col[data-sort-dir="asc"]::after {
    content: '▲';
    opacity: 0.85;
    font-size: 0.55rem;
}
table.ui-sortable-table thead th.ui-sortable-col[data-sort-dir="desc"]::after {
    content: '▼';
    opacity: 0.85;
    font-size: 0.55rem;
}