/* ==========================================================================
   DAH DIGITAL - PONTE DO TEMA ANTIGO PARA O DESIGN SYSTEM
   --------------------------------------------------------------------------
   As telas antigas usam classes do Bootstrap/AdminLTE (.card, .btn, .badge-soft-*,
   .table, .skeleton-line…). Este arquivo mantém esses seletores, mas todos os
   valores vêm dos tokens de www/design-system (fonte da verdade: DESIGN.md).
   Componentes novos usam as classes dd-* — ver www/design-system/README.md.
   ========================================================================== */

:root {
  /* Marca e Destaque — primary do admin passa a ser o forest; o lime é acento */
  --color-primary: var(--surface-inverse);
  --color-primary-hover: var(--surface-inverse-hover);
  --color-primary-soft: var(--primary-bg);

  /* Neutros e Superfícies */
  --color-ink: var(--text-primary);         /* Texto principal / Títulos */
  --color-muted: var(--text-secondary);     /* Texto secundário / Labels */
  --color-border: var(--border-subtle);     /* Bordas sutis */
  --color-bg-page: var(--bg-canvas);        /* Fundo da aplicação */
  --color-surface: var(--surface-card);     /* Fundo de cards, tabelas e modais */

  /* Status e Tags Soft */
  --badge-success-bg: var(--success-bg);
  --badge-success-text: var(--success-text);
  --badge-warning-bg: var(--warning-bg);
  --badge-warning-text: var(--warning-text);
  --badge-danger-bg: var(--danger-bg);
  --badge-danger-text: var(--danger-text);
  --badge-secondary-bg: var(--neutral-bg);
  --badge-secondary-text: var(--neutral-text);
  --badge-purple-bg: var(--violet-bg);
  --badge-purple-text: var(--violet-text);
  --badge-teal-bg: var(--teal-bg);
  --badge-teal-text: var(--teal-text);
  --badge-info-bg: var(--info-bg);
  --badge-info-text: var(--info-text);

  /* Bootstrap 5 Overrides */
  --bs-primary: var(--surface-inverse);
  --bs-primary-rgb: 6, 47, 40; /* = --forest-900 (Bootstrap exige canais RGB) */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-ink);
  --bs-body-bg: var(--color-bg-page);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-lg);
  --bs-border-radius-lg: var(--radius-xl);
  --bs-link-color: var(--text-link);
  --bs-link-hover-color: var(--text-link-hover);
}

/* Tema escuro: os aliases acima já seguem os tokens, que trocam com data-theme="dark" (gravado junto com data-bs-theme) */
[data-bs-theme="dark"] {
  --bs-body-color: var(--color-ink);
  --bs-body-bg: var(--color-bg-page);
  --bs-border-color: var(--color-border);
  --bs-card-bg: var(--color-surface);
  --bs-primary-rgb: 159, 232, 112; /* = --lime-500 */
}

/* ==========================================================================
   1. Tipografia e Princípios Visuais
   ========================================================================== */
html, body {
  font-family: var(--font-body) !important;
  background-color: var(--color-bg-page);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-title, h2.page-title {
  font: var(--type-page-title) !important;
  letter-spacing: var(--ls-snug);
  color: var(--color-ink);
}

h4, .section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-ink);
}

.fs-22, h3.kpi-value, .card-stat h3 {
  font-family: var(--font-display);
  font-size: var(--text-5xl) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums !important;
}

.fs-18, h4.kpi-value {
  font-size: var(--text-4xl) !important;
  font-weight: var(--fw-semibold) !important;
}

.fs-12, .fs-15, .kpi-label, .text-label, .text-muted-custom {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--color-muted) !important;
}

.fs-11, .kpi-variation, .text-variation {
  font-size: var(--text-xs) !important;
}

/* ==========================================================================
   2. Cards e Estrutura de Layout
   ========================================================================== */
.card {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.card:hover, .metric-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-default) !important;
}

.card-header {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
}

.card-body {
  padding: var(--space-5);
}

/* Card Stat */
.card-stat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: all var(--duration-base) var(--ease-standard);
}

.card-stat:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

.icon-shape {
  width: 36px; /* = .dd-iconshape */
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--neutral-bg);
  color: var(--neutral-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

/* ==========================================================================
   3. Botões e Formulários
   ========================================================================== */
.btn {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-4);
  transition: all var(--duration-fast) var(--ease-standard);
}

.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--text-on-inverse) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.btn-outline-primary {
  border-color: var(--color-border) !important;
  color: var(--color-primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-primary-soft) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.form-control, .form-select {
  border-radius: var(--radius-lg) !important;
  border-color: var(--border-default) !important;
  font-size: var(--text-md);
  color: var(--color-ink);
  background-color: var(--color-surface);
}

.form-control:focus, .form-select:focus {
  border-color: var(--focus-color) !important;
  box-shadow: var(--focus-ring-input) !important;
}

.input-group-text {
  border-radius: var(--radius-lg);
  border-color: var(--border-default);
  background-color: var(--surface-subtle);
  color: var(--color-muted);
}

/* ==========================================================================
   4. Badges Soft & Status
   ========================================================================== */
.badge {
  font-weight: var(--fw-semibold) !important;
  padding: 0.35rem 0.65rem !important; /* = .dd-badge */
  border-radius: var(--radius-sm) !important;
  letter-spacing: 0.01em;
  font-size: 0.775rem !important; /* = .dd-badge */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid transparent;
}

.badge-soft-success, .badge.bg-success, .badge.bg-success-subtle {
  background-color: var(--badge-success-bg) !important;
  color: var(--badge-success-text) !important;
  border-color: var(--success-border) !important;
}

.badge-soft-warning, .badge.bg-warning, .badge.bg-warning-subtle {
  background-color: var(--badge-warning-bg) !important;
  color: var(--badge-warning-text) !important;
  border-color: var(--warning-border) !important;
}

.badge-soft-danger, .badge.bg-danger, .badge.bg-danger-subtle {
  background-color: var(--badge-danger-bg) !important;
  color: var(--badge-danger-text) !important;
  border-color: var(--danger-border) !important;
}

.badge-soft-secondary, .badge.bg-secondary, .badge.bg-secondary-subtle {
  background-color: var(--badge-secondary-bg) !important;
  color: var(--badge-secondary-text) !important;
  border-color: var(--neutral-border) !important;
}

.badge-soft-primary, .badge.bg-primary, .badge.bg-primary-subtle {
  background-color: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary-border) !important;
}

.badge-soft-purple, .badge.bg-purple {
  background-color: var(--badge-purple-bg) !important;
  color: var(--badge-purple-text) !important;
  border-color: var(--violet-border) !important;
}

.badge-soft-teal, .badge.bg-teal {
  background-color: var(--badge-teal-bg) !important;
  color: var(--badge-teal-text) !important;
  border-color: var(--teal-border) !important;
}

.badge-soft-info, .badge.bg-info, .badge.bg-info-subtle {
  background-color: var(--badge-info-bg) !important;
  color: var(--badge-info-text) !important;
  border-color: var(--info-border) !important;
}

.badge-tendencia-acelerando {
  background-color: var(--badge-success-bg) !important;
  color: var(--badge-success-text) !important;
  border: 1px solid var(--success-border) !important;
  font-weight: var(--fw-semibold) !important;
}

.badge-tendencia-desacelerando {
  background-color: var(--badge-danger-bg) !important;
  color: var(--badge-danger-text) !important;
  border: 1px solid var(--danger-border) !important;
  font-weight: var(--fw-semibold) !important;
}

.badge-tendencia-estavel {
  background-color: var(--badge-info-bg) !important;
  color: var(--badge-info-text) !important;
  border: 1px solid var(--info-border) !important;
  font-weight: var(--fw-semibold) !important;
}

/* ==========================================================================
   5. Tabelas com Alta Legibilidade & Ocupação 100% da Tela
   ========================================================================== */
.table-responsive {
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  color: var(--color-ink) !important;
  vertical-align: middle;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  width: 100% !important;
}

.table thead, .table thead.table-light {
  background-color: var(--surface-subtle) !important;
}

.table thead th {
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-wide) !important;
  color: var(--text-secondary) !important;
  font-weight: var(--fw-semibold) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0.75rem 0.85rem !important;
  background-color: transparent !important;
  vertical-align: middle;
}

.table tbody tr {
  background-color: var(--color-surface);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

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

.table tbody td {
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0.75rem 0.85rem !important; /* = .dd-table td */
  font-size: var(--text-md);
  color: var(--color-ink);
  line-height: 1.35;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover {
  background-color: var(--surface-hover) !important;
}

.table-cell-title {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  font-size: var(--text-md);
  line-height: 1.3;
  word-break: break-word;
}

.table-cell-subtitle {
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-0-5);
  line-height: 1.25;
}

/* ==========================================================================
   5.1 Tabelas Densas (Alta Densidade de Dados)
   ========================================================================== */
.table-dense {
  width: 100% !important;
  font-size: var(--text-sm) !important;
}

.table-dense thead th {
  padding: 0.5rem 0.55rem !important;
  font-size: var(--text-2xs) !important;
  letter-spacing: 0.02em !important;
  vertical-align: middle;
}

.table-dense tbody td {
  padding: 0.45rem 0.55rem !important; /* = .dd-table--dense td */
  font-size: var(--text-sm) !important;
  line-height: 1.3 !important;
  vertical-align: middle;
}

.table-dense .badge {
  padding: 0.2rem 0.45rem !important;
  font-size: 0.72rem !important;
}

.table-dense .btn-sm {
  padding: var(--space-1) var(--space-2) !important;
  font-size: var(--text-xs) !important;
  border-radius: var(--radius-pill) !important;
}

/* ==========================================================================
   5.2 Responsividade e Ajuste Automático à Tela
   ========================================================================== */
.table-responsive,
.table-responsive-fit {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.app-wrapper {
  overflow-x: clip !important; /* clip (e não hidden) para não quebrar o position: sticky do menu lateral */
  max-width: 100vw !important;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* ==========================================================================
   6. Skeleton Loaders / Shimmer Animations
   ========================================================================== */
.skeleton-line {
  display: inline-block;
  height: var(--space-2-5);
  background-color: var(--neutral-150);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.skeleton-line::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 20%, rgba(255, 255, 255, 0.7) 60%, transparent 100%);
  animation: dd-shimmer 1.5s infinite; /* keyframe do design system (tokens/utilities.css) = .dd-skeleton */
}

[data-theme="dark"] .skeleton-line {
  background-color: rgba(255, 255, 255, 0.07);
}

/* ==========================================================================
   7. Sidebar & Header Styling
   ========================================================================== */
/* Shell: componentes/sidebar.php e nav_sup.php usam o markup do design system (dd-sidebar, dd-topbar)
   dentro dos contêineres do AdminLTE, que seguem cuidando de recolher (desktop) e do off-canvas (mobile). */
:root {
  --lte-sidebar-width: var(--sidebar-width);
}

.app-header.dd-topbar {
  position: sticky;
  top: 0;
  z-index: 1034; /* mantém a camada do .app-header do AdminLTE */
  border-bottom: 1px solid var(--border-subtle);
}

/* Celular: topbar compacta como no AppShell (sem texto do usuário e sem breadcrumb), título com espaço */
@media (max-width: 767px) {
  .app-header.dd-topbar {
    height: 60px;
    padding: 0 var(--space-2-5) 0 var(--space-2);
    gap: var(--space-2);
  }
  .app-header.dd-topbar .dd-topbar__user-text,
  .app-header.dd-topbar .dd-topbar__crumb {
    display: none;
  }
}

.app-sidebar {
  background-color: var(--bg-shell) !important;
  border-right: 1px solid var(--border-subtle) !important;
}

.app-sidebar > .dd-sidebar {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  border-right: 0;
}

.app-sidebar .dd-brand,
.app-sidebar .dd-navlink {
  text-decoration: none;
}

/* ==========================================================================
   8. Modais
   ========================================================================== */
.modal-content {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

.modal-header {
  background-color: var(--surface-card) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: var(--space-5) var(--space-6) var(--space-4);
}

.modal-title {
  font: var(--type-card-title);
  color: var(--color-ink);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  border-top: 1px solid var(--color-border) !important;
  padding: var(--space-4) var(--space-6);
}

/* ==========================================================================
   8.1 Abas Bootstrap (.nav-tabs) — antes copiadas à mão em index.php, gerenciamento.php
       e pedidos_compra.php; agora uma regra só, com a cara do .dd-tab (sublinhado lime)
   ========================================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--border-default);
  gap: var(--space-1);
}

.nav-tabs .nav-link {
  position: relative;
  font: var(--fw-semibold) var(--text-md)/1 var(--font-display);
  color: var(--text-secondary);
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  padding: var(--space-3-5) var(--space-3-5);
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary);
}

.nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: var(--space-2-5);
  right: var(--space-2-5);
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.nav-tabs .nav-link.active {
  color: var(--text-primary);
}

.nav-tabs .nav-link.active::after {
  background: var(--lime-500);
}

/* ==========================================================================
   9. Daterangepicker Customizations
   ========================================================================== */
.daterangepicker {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--color-primary) !important;
}

.daterangepicker .ranges li.active {
  background-color: var(--color-primary) !important;
}

.daterangepicker .drp-buttons .btn {
  font-size: var(--text-xs) !important;
  border-radius: var(--radius-pill) !important;
  padding: var(--space-1) var(--space-2-5) !important;
}

/* ==========================================================================
   10. Camadas — Bootstrap/AdminLTE usam z-index 1000+ (navbar 1030, modal 1055).
       No admin, os overlays do design system sobem para acima deles.
   ========================================================================== */
.dd-toast-region:not(.is-contained) {
  z-index: 1090; /* = .toast-container do Bootstrap */
}

.dd-modal-root:not(.is-contained) {
  z-index: 1060; /* acima do menu lateral do AdminLTE (1038), em qualquer lugar do HTML */
}