/*
 * Design tokens do redesign (direção A · Console). Fonte: canvas "T-Drop Redesign", versão 15.
 * Carregado depois de app.css: estas variáveis e classes tdp-* são a base dos componentes de
 * Shared/Ui. O tema escuro é o padrão; .theme-light é aplicado pelo MainLayout.
 */
:root,
.theme-dark {
    --tdp-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tdp-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    --tdp-bg: #0b0f14;
    --tdp-surface: #111827;
    --tdp-surface-2: #0f151f;
    --tdp-surface-3: #151d2a;
    --tdp-border: #1f2a3a;
    --tdp-border-strong: #2b3647;
    --tdp-text: #e6edf5;
    --tdp-text-2: #b6c2d3;
    --tdp-muted: #93a1b5;

    --tdp-primary: #ff7a00;
    --tdp-on-primary: #160b00;
    --tdp-primary-soft: #1a1409;
    --tdp-primary-border: #4a2e0f;
    --tdp-link: #ffa04d;

    --tdp-red-fg: #fca5a5;
    --tdp-red-bg: rgba(239, 68, 68, .16);
    --tdp-amber-fg: #fcd34d;
    --tdp-amber-bg: rgba(245, 158, 11, .16);
    --tdp-blue-fg: #93c5fd;
    --tdp-blue-bg: rgba(59, 130, 246, .18);
    --tdp-teal-fg: #5eead4;
    --tdp-teal-bg: rgba(20, 184, 166, .15);
    --tdp-green-fg: #86efac;
    --tdp-green-bg: rgba(34, 197, 94, .14);
    --tdp-gray-fg: #cbd5e1;
    --tdp-gray-bg: rgba(148, 163, 184, .15);

    --tdp-radius: 8px;
    --tdp-radius-lg: 12px;
    --tdp-space-1: 4px;
    --tdp-space-2: 8px;
    --tdp-space-3: 12px;
    --tdp-space-4: 16px;
    --tdp-space-5: 24px;
    --tdp-space-6: 32px;
}

.theme-light {
    --tdp-bg: #f4f6f8;
    --tdp-surface: #ffffff;
    --tdp-surface-2: #f8fafc;
    --tdp-surface-3: #eef2f6;
    --tdp-border: #e2e8f0;
    --tdp-border-strong: #cbd5e1;
    --tdp-text: #0f172a;
    --tdp-text-2: #334155;
    --tdp-muted: #5b6577;

    --tdp-primary-soft: #fff4e8;
    --tdp-primary-border: #ffd2a8;
    --tdp-link: #b45309;

    --tdp-red-fg: #b91c1c;
    --tdp-red-bg: #fee2e2;
    --tdp-amber-fg: #92400e;
    --tdp-amber-bg: #fef3c7;
    --tdp-blue-fg: #1d4ed8;
    --tdp-blue-bg: #dbeafe;
    --tdp-teal-fg: #0f766e;
    --tdp-teal-bg: #ccfbf1;
    --tdp-green-fg: #15803d;
    --tdp-green-bg: #dcfce7;
    --tdp-gray-fg: #475569;
    --tdp-gray-bg: #e2e8f0;
}

/* ---------- PageHeader ---------- */
.tdp-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--tdp-space-3);
    margin: var(--tdp-space-4) 0 var(--tdp-space-4);
    font-family: var(--tdp-font);
}

.tdp-page-header__row {
    display: flex;
    align-items: center;
    gap: var(--tdp-space-3);
    flex-wrap: wrap;
}

.tdp-page-header__titles {
    flex: 1 1 260px;
    min-width: 0;
}

.tdp-page-header__eyebrow {
    font-size: 13px;
    color: var(--tdp-muted);
}

.tdp-page-header__title {
    margin: 2px 0 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tdp-text);
}

.tdp-page-header__subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--tdp-muted);
}

.tdp-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--tdp-space-2);
    flex-wrap: wrap;
}

/* ---------- HubTabs ---------- */
.tdp-tabs {
    display: flex;
    gap: var(--tdp-space-5);
    border-bottom: 1px solid var(--tdp-border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.tdp-tab {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 2px;
    border-bottom: 2px solid transparent;
    color: var(--tdp-muted);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.tdp-tab:hover {
    color: var(--tdp-text);
}

.tdp-tab--active {
    color: var(--tdp-text);
    border-bottom-color: var(--tdp-primary);
    font-weight: 600;
}

/* ---------- StatusBadge ---------- */
.tdp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.tdp-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.tdp-badge--danger { color: var(--tdp-red-fg); background: var(--tdp-red-bg); }
.tdp-badge--warning { color: var(--tdp-amber-fg); background: var(--tdp-amber-bg); }
.tdp-badge--progress { color: var(--tdp-blue-fg); background: var(--tdp-blue-bg); }
.tdp-badge--ready { color: var(--tdp-teal-fg); background: var(--tdp-teal-bg); }
.tdp-badge--done { color: var(--tdp-green-fg); background: var(--tdp-green-bg); }
.tdp-badge--neutral { color: var(--tdp-gray-fg); background: var(--tdp-gray-bg); }

/* ---------- Filtros por situação ---------- */
.tdp-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: var(--tdp-space-3) 0;
}

.tdp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--tdp-border-strong);
    background: transparent;
    color: var(--tdp-text-2);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.tdp-filter-chip--active {
    background: var(--tdp-surface-3);
    border-color: var(--tdp-primary);
    color: var(--tdp-text);
    font-weight: 600;
}

.tdp-filter-chip__count {
    font-variant-numeric: tabular-nums;
    color: var(--tdp-muted);
}

/* ---------- AsyncState ---------- */
.tdp-state {
    display: flex;
    gap: var(--tdp-space-3);
    padding: var(--tdp-space-4);
    border-radius: var(--tdp-radius-lg);
    font-family: var(--tdp-font);
}

.tdp-state--error {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .35);
}

.tdp-state--empty {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--tdp-space-6) var(--tdp-space-4);
    border: 1px dashed var(--tdp-border-strong);
}

.tdp-state--loading {
    flex-direction: column;
}

.tdp-state__title {
    font-weight: 600;
    color: var(--tdp-text);
}

.tdp-state__text {
    font-size: 14px;
    color: var(--tdp-text-2);
}

.tdp-skeleton {
    border-radius: 6px;
    background: var(--tdp-surface-3);
}