/*
 * Zalliant Axyos — sistema de design (Fase 4.5), Pure CSS sem build step.
 * Fonte: system-ui (sem custo de build extra, sem risco de asset de fonte
 * ausente — alternativa explicitamente autorizada ao Inter self-hosted).
 *
 * --cor-primaria/--cor-primaria-escura/--cor-primaria-clara (e, por
 * compatibilidade, --cor-secundaria/--cor-secundaria-clara) são as únicas
 * variáveis que um tenant pode sobrescrever (ver TenantSettingService /
 * CorUtil, fase 4) — o resto da paleta e todos os tokens de tipografia/
 * espaçamento/forma são fixos.
 */

:root {
    /* Marca (customizável por tenant) */
    --cor-primaria: #6d3fe0;
    --cor-primaria-escura: #1a1035;
    --cor-primaria-clara: #efe9fc;
    --cor-secundaria: #1a1035;
    --cor-secundaria-clara: #eef2f7;

    /* Semânticas (fixas) */
    --cor-sucesso: #16a34a;
    --cor-sucesso-clara: #e7f7ed;
    --cor-alerta: #ea580c;
    --cor-alerta-clara: #fdece1;
    --cor-erro: #dc2626;
    --cor-erro-clara: #fce8e8;
    --cor-info: #1a6fc4;
    --cor-info-clara: #e7f1fb;

    /* Neutros (fixos) */
    --cor-texto: #1a1a2e;
    --cor-texto-secundario: #6b7280;
    --cor-texto-suave: #6b7280;
    --cor-borda: #e5e7eb;
    --cor-fundo: #f7f7fb;
    --cor-superficie: #ffffff;
    --cor-fundo-card: #ffffff;

    /* Tipografia (fixa) */
    --fonte-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    --texto-xs: 12px;
    --texto-sm: 14px;
    --texto-base: 16px;
    --texto-lg: 20px;
    --texto-xl: 28px;

    /* Espaçamento — escala de 4px (fixa) */
    --espaco-1: 4px;
    --espaco-2: 8px;
    --espaco-3: 12px;
    --espaco-4: 16px;
    --espaco-6: 24px;
    --espaco-8: 32px;
    --espaco-12: 48px;
    --espaco: 8px; /* alias legado, mantido por compatibilidade */

    /* Forma (fixa) */
    --raio-card: 12px;
    --raio-btn: 12px;
    --raio-input: 8px;
    --raio-pill: 999px;
    --raio-sm: 8px;
    --raio-md: 12px;
    --raio-lg: 12px;
    --sombra-card: 0 1px 3px rgba(0, 0, 0, 0.06);
    --sombra-card-hover: 0 1px 3px rgba(0, 0, 0, 0.06);
}

* {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fonte-base);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: var(--texto-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Barra de rolagem fina (3px) na cor da sidebar (--cor-primaria-escura),
   em qualquer área com scroll. Só ::-webkit-scrollbar (Chrome/Edge) —
   nada de scrollbar-width/scrollbar-color: Chromium recente passou a
   suportar essas propriedades padrão (antes só do Firefox) e "thin"
   (a única largura fixa que elas aceitam) vencia o 3px explícito do
   ::-webkit-scrollbar, deixando a barra larga de novo mesmo com as
   regras webkit certas. Sem essas duas linhas, só ::-webkit-scrollbar
   manda no Chromium; Firefox fica sem estilo customizado (usa o padrão
   dele), troca aceitável já que a base de usuários é majoritariamente
   Chromium/Edge no Windows. */
*::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #1a1035b3;
    border-radius: var(--raio-pill);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #1a1035;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--espaco-2) 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 var(--espaco-2) 0;
}

a {
    color: var(--cor-primaria);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Números e valores monetários — peso 600, nunca all-caps em rótulos */
.axy-num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- Layout / shell ---------- */

/*
 * Shell de altura travada em 100vh (não min-height): sidebar e topbar
 * ficam sempre visíveis, e .axy-container é quem rola — a janela do
 * navegador nunca ganha barra de rolagem própria. Um ERP de verdade não
 * rola a página inteira, só a área de conteúdo.
 */
.axy-shell {
    height: 100vh;
    display: flex;
    overflow: hidden;
}

.axy-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--espaco-6);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Opt-in por página (via #[Layout('layouts::tenant', ['full' => true])])
   pra telas de trabalho tipo o PDV, que se beneficiam de usar a largura
   inteira da tela em vez do texto centralizado de 1280px das telas de
   formulário/relatório. */
.axy-container--full {
    max-width: none;
}

.axy-grid {
    display: grid;
    gap: var(--espaco-6);
}

.axy-center-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espaco-6);
    background: linear-gradient(160deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 100%);
}

/* Sidebar */
.axy-sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--cor-primaria-escura);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.axy-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    font-size: var(--texto-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: var(--espaco-6) var(--espaco-4) var(--espaco-4);
}

.axy-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--espaco-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.axy-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    color: rgba(255, 255, 255, 0.72);
    padding: 10px var(--espaco-3);
    border-radius: var(--raio-btn);
    font-size: var(--texto-sm);
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.axy-sidebar__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.axy-sidebar__link.is-active {
    color: #fff;
    background: var(--cor-primaria);
}

.axy-sidebar__link .axy-sidebar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.axy-sidebar__footer {
    padding: var(--espaco-4) var(--espaco-4) var(--espaco-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--texto-xs);
    color: rgba(255, 255, 255, 0.5);
}

.axy-sidebar__footer-marca {
    display: block;
    height: 44px;
    width: auto;
    margin-bottom: var(--espaco-3);
}

.axy-sidebar__footer a {
    color: rgba(255, 255, 255, 0.75);
    display: block;
    margin-bottom: var(--espaco-2);
}

/* Header / topbar */
.axy-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.axy-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-4);
    padding: var(--espaco-3) var(--espaco-6);
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 20;
}

.axy-topbar__search {
    flex: 1;
    max-width: 420px;
    position: relative;
}

.axy-topbar__search input {
    width: 100%;
    font-family: inherit;
    font-size: var(--texto-sm);
    padding: 9px var(--espaco-3) 9px 36px;
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-input);
    background: var(--cor-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center;
}

.axy-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--espaco-4);
    flex-shrink: 0;
}

.axy-topbar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-input);
    color: var(--cor-texto-secundario);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

.axy-topbar__icon-btn:hover {
    background: var(--cor-fundo);
}

.axy-filial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
    padding: 6px var(--espaco-3);
    border-radius: var(--raio-input);
    background: var(--cor-fundo);
}

.axy-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--raio-pill);
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--texto-xs);
    font-weight: 600;
    flex-shrink: 0;
}

/* ---------- Cartões ---------- */

.axy-card {
    background: var(--cor-superficie);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-card);
    padding: var(--espaco-6);
}

.axy-card--sm {
    background: var(--cor-superficie);
    border-radius: var(--raio-card);
    padding: var(--espaco-4);
}

/* KPI card */
.axy-kpi {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-4);
}

.axy-kpi__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--raio-input);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.axy-kpi__label {
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
    margin-bottom: 4px;
}

.axy-kpi__valor {
    font-size: var(--texto-xl);
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.axy-kpi__variacao {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--texto-xs);
    font-weight: 600;
    margin-top: 4px;
}

.axy-kpi__variacao--positiva { color: var(--cor-sucesso); }
.axy-kpi__variacao--negativa { color: var(--cor-erro); }
.axy-kpi__variacao--neutra { color: var(--cor-texto-secundario); }

/* ---------- Botões ---------- */

.axy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    border: none;
    border-radius: var(--raio-btn);
    padding: 11px 20px;
    font-family: inherit;
    font-size: var(--texto-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease, border-color .15s ease;
    line-height: 1.2;
}

.axy-btn:active {
    transform: translateY(1px);
}

.axy-btn--primary {
    background: var(--cor-primaria);
    color: #fff;
}

.axy-btn--primary:hover {
    background: var(--cor-primaria-escura);
    text-decoration: none;
}

.axy-btn--secondary {
    background: transparent;
    color: var(--cor-texto);
    border: 1.5px solid var(--cor-borda);
}

.axy-btn--secondary:hover {
    background: var(--cor-fundo);
    text-decoration: none;
}

.axy-btn--danger {
    background: var(--cor-erro);
    color: #fff;
}

.axy-btn--danger:hover {
    background: #b91c1c;
    text-decoration: none;
}

.axy-btn--sucesso {
    background: var(--cor-sucesso);
    color: #fff;
}

.axy-btn--sucesso:hover {
    background: #128038;
    text-decoration: none;
}

.axy-btn--ghost {
    background: transparent;
    color: var(--cor-texto-secundario);
}

.axy-btn--ghost:hover {
    background: var(--cor-fundo);
    text-decoration: none;
}

.axy-btn--block {
    width: 100%;
}

.axy-btn--lg {
    padding: 16px 24px;
    font-size: var(--texto-base);
    border-radius: var(--raio-btn);
}

.axy-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.axy-btn__kbd {
    opacity: .75;
    font-weight: 500;
    font-size: 0.85em;
}

/* ---------- Formulários ---------- */

.axy-field {
    margin-bottom: var(--espaco-4);
}

.axy-label {
    display: block;
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--cor-texto-secundario);
    margin-bottom: 6px;
}

.axy-input,
.axy-select,
.axy-textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--texto-sm);
    padding: 10px var(--espaco-3);
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-input);
    background: #fff;
    color: var(--cor-texto);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.axy-input:focus,
.axy-select:focus,
.axy-textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-clara);
}

.axy-input.is-invalid {
    border-color: var(--cor-erro);
}

.axy-error {
    color: var(--cor-erro);
    font-size: var(--texto-xs);
    margin-top: 4px;
}

/* ---------- Alertas / badges ---------- */

.axy-alert {
    border-radius: var(--raio-input);
    padding: var(--espaco-3) var(--espaco-4);
    font-size: var(--texto-sm);
    margin-bottom: var(--espaco-4);
}

.axy-alert--erro { background: var(--cor-erro-clara); color: var(--cor-erro); }
.axy-alert--sucesso { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.axy-alert--alerta { background: var(--cor-alerta-clara); color: var(--cor-alerta); }
.axy-alert--info { background: var(--cor-info-clara); color: var(--cor-info); }

.axy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--texto-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--raio-pill);
}

.axy-badge--sucesso { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.axy-badge--erro { background: var(--cor-erro-clara); color: var(--cor-erro); }
.axy-badge--alerta { background: var(--cor-alerta-clara); color: var(--cor-alerta); }
.axy-badge--info { background: var(--cor-info-clara); color: var(--cor-info); }
.axy-badge--neutro { background: var(--cor-fundo); color: var(--cor-texto-secundario); }

/* ---------- Estado vazio ---------- */

.axy-empty {
    text-align: center;
    padding: var(--espaco-12) var(--espaco-6);
}

.axy-empty__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--espaco-4);
    border-radius: var(--raio-pill);
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.axy-empty__titulo {
    font-size: var(--texto-base);
    font-weight: 600;
    margin-bottom: 4px;
}

.axy-empty__texto {
    color: var(--cor-texto-secundario);
    font-size: var(--texto-sm);
    max-width: 360px;
    margin: 0 auto var(--espaco-4);
}

/* ---------- Tabelas ---------- */

.axy-table {
    width: 100%;
    border-collapse: collapse;
}

.axy-table th {
    text-align: left;
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--cor-texto-secundario);
    padding: var(--espaco-2) var(--espaco-3);
    border-bottom: 1px solid var(--cor-borda);
}

.axy-table td {
    padding: var(--espaco-3);
    border-bottom: 1px solid var(--cor-borda);
    font-size: var(--texto-sm);
}

.axy-table tbody tr:hover {
    background: var(--cor-fundo);
}

.axy-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- Utilitários ---------- */

.axy-text-suave { color: var(--cor-texto-secundario); }
.axy-text-xs { font-size: var(--texto-xs); }
.axy-text-sm { font-size: var(--texto-sm); }
.axy-mt-1 { margin-top: var(--espaco-1); }
.axy-mt-2 { margin-top: var(--espaco-2); }
.axy-mt-3 { margin-top: var(--espaco-3); }
.axy-mt-4 { margin-top: var(--espaco-4); }
.axy-mt-6 { margin-top: var(--espaco-6); }
.axy-flex { display: flex; }
.axy-flex-between { display: flex; align-items: center; justify-content: space-between; }
.axy-flex-wrap { flex-wrap: wrap; }
.axy-items-center { align-items: center; }
.axy-gap-1 { gap: var(--espaco-1); }
.axy-gap-2 { gap: var(--espaco-2); }
.axy-gap-3 { gap: var(--espaco-3); }
.axy-gap-4 { gap: var(--espaco-4); }