/*
 * UX-S2 — Fundação visual (design tokens + componentes reutilizáveis).
 *
 * Evolui a identidade visual JÁ existente no projeto (laranja #f47920, azul-marinho #1e3a5f,
 * cinzas industriais, cores "soft" de badge já usadas em Peca/Index.cshtml, Areas/Admin/*
 * e Areas/Empresa/*) — não introduz uma paleta nova. As variáveis de sidebar já existentes em
 * Views/Shared/_Layout.cshtml (--app-sidebar-*) NÃO são duplicadas nem sobrescritas aqui; o
 * menu lateral continua controlado só por aquele arquivo, intocado nesta fase.
 *
 * Este arquivo é aditivo: nenhuma classe aqui reutiliza nomes já usados por site.css ou pelos
 * módulos existentes (obra-*, rdo-*, page-context-*), para não colidir com nada em produção.
 * Prefixo próprio: "ep-" (EasyPlant) para os componentes novos; "page-context-*" é extensão do
 * que já existe em site.css (mesmo prefixo, mesmo dono).
 */

:root {
    /* Cores de marca (mesmos valores hex já usados em wwwroot/css/site.css e nas views) */
    --ep-color-primary: #f47920;
    --ep-color-primary-hover: #d96512;
    --ep-color-primary-soft-bg: #fff3e9;
    --ep-color-primary-soft-text: #9a4509;
    --ep-color-secondary: #1e3a5f;

    /* Neutros / cinzas industriais */
    --ep-color-bg: #f7f8fa;
    --ep-color-surface: #ffffff;
    --ep-color-border: #e5e7eb;
    --ep-color-text: #1f2937;
    --ep-color-text-muted: #6b7280;

    /* Semânticas (mesmos valores já usados nas badges "soft" espalhadas pelo projeto) */
    --ep-color-success-bg: #e8f5e9;
    --ep-color-success-text: #2e7d32;
    --ep-color-warning-bg: #fff3e0;
    --ep-color-warning-text: #ef6c00;
    --ep-color-danger-bg: #ffebee;
    --ep-color-danger-text: #c62828;
    --ep-color-info-bg: #e3f2fd;
    --ep-color-info-text: #1565c0;
    --ep-color-neutral-bg: #eef0f2;
    --ep-color-neutral-text: #4b5563;

    /* Espaçamento (escala consistente, rem) */
    --ep-space-1: .25rem;
    --ep-space-2: .5rem;
    --ep-space-3: .75rem;
    --ep-space-4: 1rem;
    --ep-space-5: 1.5rem;
    --ep-space-6: 2rem;

    /* Bordas, raios e sombras discretos (mesma amplitude já usada em .obra-kpi / .rdo-fill-card) */
    --ep-radius-sm: .45rem;
    --ep-radius-md: .7rem;
    --ep-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --ep-shadow-md: 0 .35rem 1rem rgba(15, 23, 42, .08);

    /* Transições (150–250ms, consistente com o sidebar existente) */
    --ep-transition-fast: 150ms ease;
    --ep-transition-base: 200ms ease;

    --ep-focus-ring: 0 0 0 .2rem rgba(244, 121, 32, .25);
}

/* ---------- Foco visível (aplica-se só aos componentes ep-* / page-context-* novos;
   não sobrescreve o :focus global já existente em site.css para .btn/.form-control) ---------- */
.ep-card:focus-visible,
.ep-empty-state a:focus-visible,
.ep-filter-bar input:focus-visible,
.ep-filter-bar select:focus-visible,
.ep-pagination a:focus-visible,
.page-context-back:focus-visible,
.page-context-actions a:focus-visible {
    outline: 2px solid var(--ep-color-primary);
    outline-offset: 2px;
}

/* ---------- Redução de movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    .ep-card,
    .ep-filter-bar input,
    .ep-pagination .page-link {
        transition: none !important;
    }
}

/* =========================================================
   _PageHeader — extensões (breadcrumb, ações). O cabeçalho
   original (.page-context-header/.page-context-back/.page-context-title)
   permanece definido em site.css, sem alteração.
   ========================================================= */
.page-context-breadcrumb {
    margin-bottom: var(--ep-space-2);
}

.page-context-breadcrumb .breadcrumb {
    font-size: .8rem;
}

.page-context-title--full {
    grid-column: 1 / -1;
}

.page-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ep-space-2);
    margin: var(--ep-space-2) 0 var(--ep-space-4);
}

/* Reforço explícito do critério de aceite: só a ação PRIMÁRIA usa a cor de destaque (laranja,
   via .btn-primary já mapeado em site.css); ações secundárias nunca competem visualmente com ela. */
.page-context-actions .btn-outline-secondary {
    color: var(--ep-color-secondary);
    border-color: #ced7df;
}

/* =========================================================
   _EmptyState
   ========================================================= */
.ep-empty-state {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ep-space-2);
    padding: var(--ep-space-6) var(--ep-space-4);
    text-align: center;
    color: var(--ep-color-text-muted);
}

.ep-empty-state i {
    margin-bottom: var(--ep-space-1);
    color: #94a3b8;
    font-size: 2rem;
}

.ep-empty-state strong {
    color: var(--ep-color-text);
    font-size: 1rem;
}

.ep-empty-state p {
    max-width: 32rem;
    margin: 0;
}

/* =========================================================
   _FilterBar (filter-bar tag helper)
   ========================================================= */
.ep-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ep-space-3);
    padding: var(--ep-space-3) var(--ep-space-4);
    border: 1px solid var(--ep-color-border);
    border-radius: var(--ep-radius-md);
    background: var(--ep-color-surface);
    margin-bottom: var(--ep-space-4);
}

.ep-filter-bar__search {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.ep-filter-bar__search input {
    width: 100%;
}

.ep-filter-bar__fields {
    display: flex;
    flex: 2 1 auto;
    flex-wrap: wrap;
    gap: var(--ep-space-2);
}

.ep-filter-bar__actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--ep-space-2);
}

@media (max-width: 575.98px) {
    .ep-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .ep-filter-bar__fields,
    .ep-filter-bar__actions {
        flex-direction: column;
    }

    .ep-filter-bar__actions .btn {
        width: 100%;
    }
}

/* =========================================================
   _Pagination
   ========================================================= */
.ep-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ep-space-3);
    margin-top: var(--ep-space-4);
}

.ep-pagination__total {
    color: var(--ep-color-text-muted);
    font-size: .8rem;
}

@media (max-width: 575.98px) {
    .ep-pagination {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* =========================================================
   Classes utilitárias reutilizáveis (cards, badges, toolbar,
   tabela responsiva, carregamento e erro) — Etapa 3.5.
   ========================================================= */
.ep-card {
    height: 100%;
    padding: var(--ep-space-4);
    border: 1px solid var(--ep-color-border);
    border-radius: var(--ep-radius-md);
    background: var(--ep-color-surface);
    box-shadow: var(--ep-shadow-sm);
    transition: box-shadow var(--ep-transition-base), transform var(--ep-transition-base);
}

a.ep-card:hover,
a.ep-card:focus-visible {
    box-shadow: var(--ep-shadow-md);
    transform: translateY(-2px);
}

.ep-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ep-space-3);
    margin-bottom: var(--ep-space-4);
}

.ep-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ep-space-2);
}

.ep-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ep-space-1);
    padding: .3rem .6rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

.ep-badge-success { background: var(--ep-color-success-bg); color: var(--ep-color-success-text); }
.ep-badge-warning { background: var(--ep-color-warning-bg); color: var(--ep-color-warning-text); }
.ep-badge-danger  { background: var(--ep-color-danger-bg);  color: var(--ep-color-danger-text); }
.ep-badge-info    { background: var(--ep-color-info-bg);    color: var(--ep-color-info-text); }
.ep-badge-neutral { background: var(--ep-color-neutral-bg); color: var(--ep-color-neutral-text); }

/* Tabela responsiva: em telas estreitas vira lista de cards (mesma técnica já usada em
   .rdo-entry-table, generalizada aqui via data-label por célula). */
@media (max-width: 575.98px) {
    .ep-table-responsive table,
    .ep-table-responsive thead,
    .ep-table-responsive tbody,
    .ep-table-responsive tr,
    .ep-table-responsive td {
        display: block;
        width: 100%;
    }

    .ep-table-responsive thead {
        display: none;
    }

    .ep-table-responsive tr {
        margin-bottom: var(--ep-space-3);
        padding: var(--ep-space-3);
        border: 1px solid var(--ep-color-border);
        border-radius: var(--ep-radius-sm);
        background: var(--ep-color-surface);
    }

    .ep-table-responsive td {
        padding: .3rem 0;
        border: 0;
    }

    .ep-table-responsive td::before {
        display: block;
        margin-bottom: .15rem;
        color: var(--ep-color-text-muted);
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
    }
}

.ep-loading {
    display: flex;
    min-height: 8rem;
    align-items: center;
    justify-content: center;
    gap: var(--ep-space-2);
    color: var(--ep-color-text-muted);
}

.ep-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ep-space-2);
    padding: var(--ep-space-5) var(--ep-space-4);
    border: 1px solid var(--ep-color-danger-bg);
    border-radius: var(--ep-radius-md);
    background: #fff8f8;
    color: var(--ep-color-danger-text);
    text-align: center;
}

.ep-error-state i {
    font-size: 1.75rem;
}