@import url('../lara-light-teal/theme.css');

/*
 * ============================================================================
 * ALVOAR THEME — PrimeReact overrides
 * ============================================================================
 * Base: lara-light-teal
 * Overrides PrimeReact CSS variables and component styles to match the
 * Alvoar Design System (docs/design/alvoar-design-system.md).
 * ============================================================================
 */

:root {
  /* ── Paleta Alvoar (PANTONE — fonte única) ───────────────────────────── */
  --alvoar-navy:         #0d0c55; /* PANTONE 2757 C — brand primary */
  --alvoar-teal:         #00d6c8; /* PANTONE 3252 C — brand secondary */
  --alvoar-crimson:      #b70052; /* PANTONE 215 C  — danger */
  --alvoar-tan:          #bb9268; /* PANTONE 4254 C — neutro warm */
  --alvoar-yellow:       #ffce00; /* PANTONE 116 C  — warning suave */
  --alvoar-orange:       #ff8737; /* PANTONE 1575 C — warning/destaque */
  --alvoar-green:        #006d49; /* PANTONE 7733 C — success */
  --alvoar-wine:         #610d39; /* PANTONE 2357 C — brand acento */
  --alvoar-brown:        #6f502c; /* PANTONE 463 C  — neutro warm escuro */
  --alvoar-amber:        #ffaa00; /* PANTONE 130 C  — warning forte */
  --alvoar-burnt-orange: #d85d00; /* PANTONE 159 C  — workflows */
  --alvoar-pine:         #104c32; /* PANTONE 3435 C — aprovados */

  /* Primary colors — Alvoar Navy */
  --primary-color: var(--alvoar-navy);
  --primary-color-text: #ffffff;
  --highlight-bg: color-mix(in srgb, var(--alvoar-navy) 10%, transparent);
  --highlight-text-color: var(--alvoar-navy);

  /* Focus ring — Alvoar Teal */
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--alvoar-teal) 25%, transparent);

  /* Surface */
  --surface-ground: #EBEEF3;
  --surface-section: #EBEEF3;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: #E2E8F0;
  --surface-hover: rgba(0, 0, 0, 0.02);

  /* Text */
  --text-color: #1E293B;
  --text-color-secondary: #475569;

  /* Font */
  --font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-size: 14px;

  /* Border radius */
  --border-radius: 6px;

  /* Input */
  --input-border-color: #CED4DA;
  --input-focus-border-color: var(--alvoar-teal);
}

/* ── IconField — corrige sobreposição do ícone com o texto ───────────── */

.p-icon-field-left  > .p-inputtext { padding-left:  2.5rem; }
.p-icon-field-right > .p-inputtext { padding-right: 2.5rem; }

/* ── Button overrides ─────────────────────────────────────────────────── */

.p-button {
  border-radius: 6px;
  font-size: 13.12px;
  padding: 6px 12px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.p-button.p-button-sm {
  font-size: 12.16px;
  padding: 5px 10px;
}

/* Default (primary) button — Alvoar Navy (PANTONE 2757 C) */
.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-link):not(.p-button-danger):not(.p-button-warning):not(.p-button-success):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):not(.p-button-contrast) {
  background: var(--alvoar-navy);
  border-color: var(--alvoar-navy);
  color: #ffffff;
}

.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-link):not(.p-button-danger):not(.p-button-warning):not(.p-button-success):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):not(.p-button-contrast):hover {
  background: color-mix(in srgb, var(--alvoar-navy) 80%, white);
  border-color: color-mix(in srgb, var(--alvoar-navy) 80%, white);
}

.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-link):not(.p-button-danger):not(.p-button-warning):not(.p-button-success):not(.p-button-info):not(.p-button-secondary):not(.p-button-help):not(.p-button-contrast):active {
  background: color-mix(in srgb, var(--alvoar-navy) 90%, black);
  border-color: color-mix(in srgb, var(--alvoar-navy) 90%, black);
}

/* ── Focus ring — teal ────────────────────────────────────────────────── */

.p-inputtext:focus,
.p-dropdown:not(.p-disabled).p-focus,
.p-multiselect:not(.p-disabled).p-focus,
.p-checkbox .p-checkbox-box.p-focus,
.p-radiobutton .p-radiobutton-box.p-focus,
.p-inputnumber .p-inputtext:focus,
.p-calendar .p-inputtext:focus {
  border-color: var(--alvoar-teal) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--alvoar-teal) 20%, transparent) !important;
  outline: none;
}

/* ── DataTable ────────────────────────────────────────────────────────── */

.p-datatable .p-datatable-thead > tr > th {
  background: var(--alvoar-navy);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11.2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 9px 14px;
  border-color: var(--alvoar-navy);
}

.p-datatable .p-datatable-thead > tr > th .p-sortable-column-icon {
  color: rgba(255, 255, 255, 0.7);
}

.p-datatable .p-datatable-thead > tr > th.p-highlight {
  background: color-mix(in srgb, var(--alvoar-navy) 80%, white);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--alvoar-navy) 80%, white);
}

.p-datatable .p-datatable-thead > tr > th.p-highlight .p-sortable-column-icon {
  color: #ffffff;
}

.p-datatable .p-datatable-tbody > tr > td {
  color: #1E293B;
  font-size: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #DEE2E6;
}

.p-datatable .p-datatable-tbody > tr:hover > td {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.p-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.p-card .p-card-title {
  color: var(--alvoar-navy);
  font-size: 16px;
  font-weight: 700;
}

/* ── Tags / Badges ────────────────────────────────────────────────────── */

.p-tag {
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 700;
}

.p-tag.p-tag-success {
  background: #DCFCE7;
  color: #166534;
}

.p-tag.p-tag-danger {
  background: #EF4444;
  color: #ffffff;
}

.p-tag.p-tag-warning {
  background: #FEF9C3;
  color: #92400E;
}

.p-tag.p-tag-secondary {
  background: #F3F4F6;
  color: #6B7280;
}

.p-tag.p-tag-info {
  background: color-mix(in srgb, var(--alvoar-navy) 10%, transparent);
  color: var(--alvoar-navy);
}

/* ── Dialog / Overlay ─────────────────────────────────────────────────── */

.p-dialog .p-dialog-header {
  background: var(--alvoar-navy);
  color: #ffffff;
  border-radius: 8px 8px 0 0;
}

.p-dialog .p-dialog-header .p-dialog-title {
  font-size: 15px;
  font-weight: 600;
}

.p-dialog .p-dialog-header .p-dialog-header-icon {
  color: rgba(255, 255, 255, 0.8);
}

.p-dialog .p-dialog-header .p-dialog-header-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* ── Paginator ────────────────────────────────────────────────────────── */

.p-paginator .p-paginator-page.p-highlight {
  background: var(--alvoar-navy);
  border-color: var(--alvoar-navy);
  color: #ffffff;
}

/* ── InputText ────────────────────────────────────────────────────────── */

.p-inputtext {
  border-color: #CED4DA;
  border-radius: 6px;
  font-size: 13px;
  color: #212529;
}

.p-inputtext::placeholder {
  color: #6C757D;
}

/* ── Dropdown ─────────────────────────────────────────────────────────── */

.p-dropdown {
  border-color: #CED4DA;
  border-radius: 6px;
}

/* ── Dropdown / MultiSelect / Listbox — item selecionado ──────────────── */
/* lara-light-teal aplica teal sólido em .p-highlight ignorando --highlight-bg */

.p-dropdown-panel .p-dropdown-item.p-highlight,
.p-multiselect-panel .p-multiselect-item.p-highlight,
.p-listbox .p-listbox-item.p-highlight {
  background: color-mix(in srgb, var(--alvoar-navy) 10%, transparent);
  color: var(--alvoar-navy);
}

.p-dropdown-panel .p-dropdown-item.p-highlight:hover,
.p-multiselect-panel .p-multiselect-item.p-highlight:hover,
.p-listbox .p-listbox-item.p-highlight:hover {
  background: color-mix(in srgb, var(--alvoar-navy) 15%, transparent);
  color: var(--alvoar-navy);
}

/* ── Checkbox / RadioButton ───────────────────────────────────────────── */

.p-checkbox .p-checkbox-box.p-highlight {
  background: var(--alvoar-navy);
  border-color: var(--alvoar-navy);
}

.p-radiobutton .p-radiobutton-box.p-highlight {
  background: var(--alvoar-navy);
  border-color: var(--alvoar-navy);
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */

.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
  border-color: var(--alvoar-navy);
  color: var(--alvoar-navy);
}

/* ── Message / Toast ──────────────────────────────────────────────────── */

.p-message.p-message-info,
.p-toast .p-toast-message.p-toast-message-info {
  background: color-mix(in srgb, var(--alvoar-navy) 8%, transparent);
  border-color: var(--alvoar-navy);
  color: var(--alvoar-navy);
}

/* ══════════════════════════════════════════════════════════════════════════
 * SIDEBAR CLARA — Alvoar Nexos
 * Usa [data-theme="alvoar-nexos"] para especificidade maior que app-shell.css
 * ══════════════════════════════════════════════════════════════════════════ */

[data-theme="alvoar-nexos"] .app-sidebar {
  background: #EBEEF3 !important;
  border-right: 1px solid #E2E8F0 !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.08) !important;
  width: 215px !important;
}

[data-theme="alvoar-nexos"] .app-sidebar::before {
  display: none !important;
}

/* Reset nuclear wildcard — permite cores reais */
[data-theme="alvoar-nexos"] .app-sidebar *,
[data-theme="alvoar-nexos"] .app-sidebar *::before,
[data-theme="alvoar-nexos"] .app-sidebar *::after {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--alvoar-navy) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Brand area */
[data-theme="alvoar-nexos"] .app-sidebar-brand {
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="alvoar-nexos"] .app-sidebar-brand img {
  filter: none !important;
  opacity: 1 !important;
}

/* PrimeReact PanelMenu variables */
[data-theme="alvoar-nexos"] .app-sidebar {
  --p-panelmenu-item-color: var(--alvoar-navy);
  --p-panelmenu-item-hover-background: color-mix(in srgb, var(--alvoar-navy) 6%, transparent);
  --p-panelmenu-item-active-background: var(--alvoar-navy);
  --p-panelmenu-header-color: var(--alvoar-navy);
  --p-panelmenu-header-hover-background: color-mix(in srgb, var(--alvoar-navy) 6%, transparent);
  --p-panelmenu-header-active-background: var(--alvoar-navy);
  --p-focus-ring-color: color-mix(in srgb, var(--alvoar-teal) 40%, transparent);
  --p-primary-color: var(--alvoar-navy);
  --p-primary-contrast-color: #ffffff;
  --p-highlight-background: color-mix(in srgb, var(--alvoar-navy) 8%, transparent);
  --p-highlight-color: var(--alvoar-navy);
}

/* Links inativos */
[data-theme="alvoar-nexos"] .app-sidebar .p-panelmenu-header-action,
[data-theme="alvoar-nexos"] .app-sidebar .p-menuitem-link {
  color: var(--alvoar-navy) !important;
  font-size: 12.8px !important;
  font-weight: 400 !important;
  padding: 4px 0 4px 16px !important;
  height: 31px !important;
}

/* Texto dos itens de menu (span interno) */
[data-theme="alvoar-nexos"] .app-sidebar .p-menuitem-text,
[data-theme="alvoar-nexos"] .app-sidebar .p-panelmenu-header-action .p-menuitem-text {
  font-size: 12.8px !important;
  font-weight: 400 !important;
}

/* Hover */
[data-theme="alvoar-nexos"] .app-sidebar .p-panelmenu-header-action:hover,
[data-theme="alvoar-nexos"] .app-sidebar .p-menuitem-link:hover {
  background: color-mix(in srgb, var(--alvoar-navy) 6%, transparent) !important;
  color: var(--alvoar-navy) !important;
}

/* Link ativo */
[data-theme="alvoar-nexos"] .app-sidebar .p-panelmenu-header-action.p-highlight,
[data-theme="alvoar-nexos"] .app-sidebar .p-menuitem-link.p-highlight,
[data-theme="alvoar-nexos"] .app-sidebar .router-link-active,
[data-theme="alvoar-nexos"] .app-sidebar [aria-current="page"] {
  background: var(--alvoar-navy) !important;
  background-color: var(--alvoar-navy) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Section titles */
[data-theme="alvoar-nexos"] .app-sidebar .sidebar-section-title,
[data-theme="alvoar-nexos"] .app-sidebar .p-panelmenu-submenu-label {
  color: #475569 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Focus ring */
[data-theme="alvoar-nexos"] .app-sidebar *:focus,
[data-theme="alvoar-nexos"] .app-sidebar *:focus-visible {
  outline: 2px solid rgba(15, 180, 173, 0.4) !important;
  outline-offset: 0 !important;
}

/* Page background */
[data-theme="alvoar-nexos"] body,
[data-theme="alvoar-nexos"] .app-main {
  background: #EBEEF3 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * COMPONENTES NEXOS — Alvoar Design System Complement
 * Fonte: docs/design/alvoar-design-system-complement.md
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Modal com gradient header ────────────────────────────────────────── */

.p-dialog {
  border-radius: 14px;
}

.p-dialog .p-dialog-header {
  background: linear-gradient(135deg, #1E3A5F 0%, #2563EB 100%);
  border-radius: 14px 14px 0 0;
  padding: 16px;
}

.p-dialog .p-dialog-header .p-dialog-title {
  font-size: 20px;
  font-weight: 500;
}

.p-dialog .p-dialog-content {
  padding: 16px 24px;
}

/* ── Alert banners ────────────────────────────────────────────────────── */

.alert-banner {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  border-radius: 8px;
  padding: 12px 16px;
  color: #92400E;
}

.alert-banner-badge {
  background: #DC2626;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Progress bars ────────────────────────────────────────────────────── */

/* Container fill bar (ex: 77.7% cheio) */
.p-progressbar.progress-container .p-progressbar-value {
  background: var(--alvoar-navy);
  border-radius: 8px;
}

.p-progressbar.progress-container {
  height: 40px;
  background: #E2E8F0;
  border-radius: 8px;
}

.p-progressbar.progress-container .p-progressbar-label {
  color: #FFFFFF;
  font-weight: 700;
}

/* Barra de estoque fina */
.p-progressbar.progress-stock {
  height: 4px;
  border-radius: 2px;
  background: #E2E8F0;
}

.p-progressbar.progress-stock.stock-ok .p-progressbar-value    { background: #059669; }
.p-progressbar.progress-stock.stock-warn .p-progressbar-value  { background: #F59E0B; }
.p-progressbar.progress-stock.stock-crit .p-progressbar-value  { background: #EF4444; }

/* Barra de orçamento */
.p-progressbar.progress-budget {
  height: 8px;
  border-radius: 4px;
  background: #E2E8F0;
}

.p-progressbar.progress-budget .p-progressbar-value { background: #059669; }

/* ── Tags / Badges — sistema completo ────────────────────────────────── */

/* Variantes semânticas de status */
.p-tag.tag-em-producao      { background: #FEF9C3; color: #92400E; border-radius: 6px; }
.p-tag.tag-ag-pagamento     { background: #FFEDD5; color: #9A3412; border-radius: 6px; }
.p-tag.tag-ag-embarque      { background: #EDE9FE; color: #6D28D9; border-radius: 6px; }
.p-tag.tag-em-transito      { background: #0D9488; color: #FFFFFF; border-radius: 20px; }
.p-tag.tag-entregue         { background: #059669; color: #FFFFFF; border-radius: 20px; }
.p-tag.tag-draft-hoje       { background: #F59E0B; color: #FFFFFF; border-radius: 6px; }
.p-tag.tag-ativo            { background: #DCFCE7; color: #166534; }
.p-tag.tag-inativo          { background: #F3F4F6; color: #6B7280; }
.p-tag.tag-pendente         { background: #F97316; color: #FFFFFF; border-radius: 20px; }
.p-tag.tag-recebido         { background: #059669; color: #FFFFFF; border-radius: 20px; }
.p-tag.tag-pago             { color: #059669; background: transparent; }
.p-tag.tag-realizado        { background: #DBEAFE; color: #1E40AF; border-radius: 6px; }
.p-tag.tag-aberta           { background: #FED7AA; color: #9A3412; border-radius: 20px; }
.p-tag.tag-concluida        { background: #D1FAE5; color: #065F46; border-radius: 20px; }
.p-tag.tag-fechado          { background: #1E3A5F; color: #FFFFFF; border-radius: 20px; }
.p-tag.tag-ok               { background: #D1FAE5; color: #065F46; border-radius: 6px; }
.p-tag.tag-verificar        { background: #FEF9C3; color: #92400E; border-radius: 6px; }
.p-tag.tag-critico          { background: #FEE2E2; color: #DC2626; border-radius: 20px; }
.p-tag.tag-atencao          { background: #FEF3C7; color: #D97706; border-radius: 20px; }
.p-tag.tag-deficit          { background: #7F1D1D; color: #FFFFFF; border-radius: 20px; }
.p-tag.tag-suficiente       { background: #D1FAE5; color: #065F46; border-radius: 20px; }
.p-tag.tag-entrada          { background: #059669; color: #FFFFFF; border-radius: 20px; }
.p-tag.tag-saida            { background: #DC2626; color: #FFFFFF; border-radius: 20px; }
.p-tag.tag-auto             { background: #059669; color: #FFFFFF; border-radius: 999px; font-size: 10px; }

/* Badges de tipo / categoria (fornecedores, courier) */
.p-tag.tag-cartorio         { background: #FED7AA; color: #9A3412; }
.p-tag.tag-associacao       { background: #EDE9FE; color: #6D28D9; }
.p-tag.tag-agente-carga     { background: #D1FAE5; color: #065F46; }
.p-tag.tag-banco            { background: #DBEAFE; color: #1E40AF; }
.p-tag.tag-terminal         { background: #CCFBF1; color: #0D9488; }
.p-tag.tag-armador          { background: #1E3A5F; color: #FFFFFF; }
.p-tag.tag-despachante      { background: #FCE7F3; color: #9D174D; }
.p-tag.tag-transportadora   { background: #FEF3C7; color: #92400E; }
.p-tag.tag-seguradora       { background: #FEE2E2; color: #991B1B; }
.p-tag.tag-courier-tipo     { background: #E0E7FF; color: #3730A3; }

/* Tags de embalagem (rótulos pequenos tipo chip) */
.tag-embalagem {
  background: #F1F5F9;
  color: #334155;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Kanban board ─────────────────────────────────────────────────────── */

.kanban-column {
  background: #F1F5F9;
  border-radius: 12px;
  padding: 10px;
  min-width: 231px;
}

.kanban-column-header {
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Cores por fase */
.kanban-col-preproducao  { background: #FCE7F3; color: #9D174D; }
.kanban-col-producao     { background: #FEF3C7; color: #D97706; }
.kanban-col-embarque     { background: #DBEAFE; color: #2563EB; }
.kanban-col-aguardando   { background: #EDE9FE; color: #7C3AED; }
.kanban-col-transito     { background: #D1FAE5; color: #059669; }
.kanban-col-pagamento    { background: #FEF3C7; color: #D97706; }

.kanban-card {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  margin-bottom: 8px;
}

/* ── Input group com prefixo monetário ───────────────────────────────── */

.p-inputgroup-addon {
  background: #F8F9FA;
  color: #212529;
  border: 1px solid #DEE2E6;
  font-size: 16px;
  border-radius: 6px 0 0 6px;
}

.p-inputgroup .p-inputtext {
  border-radius: 0 6px 6px 0;
}

/* ── Inline table input ───────────────────────────────────────────────── */

.table-input {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 12.5px;
  width: 85px;
  height: 25px;
}

/* ── Monospace / código técnico ───────────────────────────────────────── */

.code-mono {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #D63384;
  font-size: 13px;
}

/* ── Checkbox circular (Tarefas) ──────────────────────────────────────── */

.circle-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.circle-checkbox.checked {
  background: #059669;
  border-color: #059669;
  color: #FFFFFF;
}

/* ── Delta / variação de valores ─────────────────────────────────────── */

.value-positive { color: #059669; }
.value-negative { color: #DC2626; }
.value-vence-hoje { color: #DC2626; font-weight: 600; }

/* ── Cards KPI com border-left colorido ──────────────────────────────── */

.kpi-card-green  { border-left: 4px solid #059669; }
.kpi-card-orange { border-left: 4px solid #F97316; }
.kpi-card-blue   { border-left: 4px solid #2563EB; }

/* ── Cards de categoria com bg sólido (Viagens) ─────────────────────── */

.travel-cat-passagens   { background: var(--alvoar-navy); color: #FFFFFF; }
.travel-cat-hospedagem  { background: #0D9488; color: #FFFFFF; }
.travel-cat-alimentacao { background: #F59E0B; color: #FFFFFF; }
.travel-cat-transporte  { background: #DC2626; color: #FFFFFF; }
.travel-cat-outros      { background: #EBEEF3; color: #1E293B; }
.travel-cat-total       { background: var(--alvoar-navy); color: #FFFFFF; }