/* ============================================================
   Integra SYS INDUSTRIAL — refinamentos visuais e responsividade
   Aplicado sobre glass-light.css + mockup-theme.css
   ============================================================ */

/* Todas as tabelas industriais: overflow no wrapper (nao forcar min-width global) */
.app-main .table-wrap,
.app-main .bg-white.rounded-xl.border {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.app-main .table-wrap table,
.app-main .bg-white.rounded-xl.border > table {
  min-width: 560px;
  width: 100%;
}
.bg-white.rounded-xl.border > table,
.bg-white.rounded-xl.border\ border-slate-200 > table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Cards de KPI: grids adaptativos */
@media (max-width: 640px) {
  .app-main .grid.md\:grid-cols-4,
  .app-main .grid.md\:grid-cols-3,
  .app-main .grid.md\:grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .app-main .grid.grid-cols-1.md\:grid-cols-4 > div,
  .app-main .grid.grid-cols-1.md\:grid-cols-3 > div {
    padding: 0.75rem;
  }
  .app-main .grid.grid-cols-1.md\:grid-cols-4 .text-3xl,
  .app-main .grid.grid-cols-1.md\:grid-cols-3 .text-3xl {
    font-size: 1.375rem;
    line-height: 1.5rem;
  }
}

/* Badges de status mais consistentes */
.app-main span[class*="rounded"][class*="bg-emerald-100"],
.app-main span[class*="rounded"][class*="bg-green-100"] {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
}
.app-main span[class*="rounded"][class*="bg-red-100"] {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca;
}
.app-main span[class*="rounded"][class*="bg-amber-100"] {
  background-color: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a;
}
.app-main span[class*="rounded"][class*="bg-blue-100"] {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe;
}

/* Cards com sombra leve e hover elevado */
.app-main .bg-white.rounded-xl.border {
  box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04), 0 0 0 1px rgba(15, 27, 61, 0.05);
  transition: box-shadow .15s ease;
}
.app-main .bg-white.rounded-xl.border:hover {
  box-shadow: 0 4px 8px rgba(15, 27, 61, 0.06), 0 0 0 1px rgba(15, 27, 61, 0.08);
}

/* Cabeçalhos de card mais discretos */
.app-main .bg-white .px-5.py-4.border-b {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background: linear-gradient(180deg, #fbfcfe, #ffffff);
}

/* Barras de progresso mais suaves */
.app-main .h-2.bg-slate-200.rounded > div {
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* Botões primários mais tocáveis em mobile */
@media (max-width: 640px) {
  .app-main button, .app-main .btn {
    min-height: 40px;
  }
}

/* Sidebar industrial: acento sutil verde-teal nos hovers */
[data-vertical="mercado"] .sidebar-nav a:hover,
.sidebar-nav a:hover {
  background: linear-gradient(90deg, rgba(16, 217, 163, 0.08), transparent 60%);
  color: #0f1b3d;
}

/* Seções da sidebar mais espaçadas e legíveis */
.sidebar-nav .nav-section {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 12px 20px 6px;
  text-transform: uppercase;
  font-weight: 700;
}
.sidebar-nav .nav-section:first-child {
  padding-top: 0;
}

/* Empty states industriais mais aconchegantes */
.app-main tbody tr td.py-6.text-center.text-slate-400,
.app-main tbody tr td.py-8.text-center {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Mini-Gantt do APS: sem quebrar em mobile */
.app-main .flex.items-center.gap-3.py-1 .flex-1 {
  min-width: 240px;
}

/* Faixa de banner (fiscal, avisos) mais destacada */
.app-main .bg-amber-50.border.border-amber-200,
.app-main .bg-slate-50.border.border-slate-200.rounded-xl {
  padding: 12px 16px;
  line-height: 1.5;
}

/* Print-friendly (para relatórios) */
@media print {
  .sidebar, .app-topbar, .app-topbar-actions, .fab, .ai-chat-widget { display: none !important; }
  .app-main { padding: 0 !important; }
  .bg-white.rounded-xl.border { break-inside: avoid; }
}

/* ============================================================
   REFINAMENTO GERAL v2 — layout + sidebar
   ============================================================ */

/* Sidebar: sombra leve — fundo vem do Glass Light */
.sidebar, .app-sidebar, aside[class*="sidebar"] {
  box-shadow: 2px 0 12px -6px rgba(15, 27, 61, 0.08);
}
.sidebar-nav a, .app-nav a {
  border-radius: 8px !important;
  margin: 1px 8px !important;
  padding: 8px 12px !important;
  transition: background 120ms ease, color 120ms ease;
  font-weight: 500 !important;
}
.sidebar-nav a:hover, .app-nav a:hover {
  background: rgba(46, 124, 246, 0.08) !important;
  color: #0F1B3D !important;
}
.sidebar-nav a.active, .sidebar-nav a[aria-current="page"],
.app-nav a.active, .app-nav a[aria-current="page"],
.sidebar-nav a.nav-item.active {
  background: #1D4ED8 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.28);
}
.sidebar-nav a.active i, .sidebar-nav a[aria-current="page"] i,
.app-nav a.active i, .app-nav a[aria-current="page"] i {
  color: #fff !important;
}

/* Espaçamento entre grupos e cards do main */
.app-main > * + * { margin-top: 1.25rem; }
.app-main .grid + .grid,
.app-main .bg-white + .bg-white { margin-top: 1rem; }

/* Cards padrão (light) mais uniformes */
.app-main .bg-white {
  border-color: rgba(15, 27, 61, 0.08) !important;
}

/* Toolbar de botões — hierarquia clara */
.app-main [data-action="new-sale"],
.app-main [data-action="new-terminal"],
.app-main button[data-action]:first-of-type {
  box-shadow: 0 2px 6px rgba(46, 124, 246, 0.25);
}

/* Tabs mais destacadas */
.module-tab-btn {
  transition: color 120ms ease, border-color 120ms ease;
}
.module-tab-btn[aria-selected="true"],
.module-tab-btn.active,
.module-tab-btn[class*="text-brand-blue"] {
  border-bottom-color: #2E7CF6 !important;
  color: #2E7CF6 !important;
}

/* Ao abrir sub-menu no mobile, ficar organizado — sem !important que zera safe-area */
@media (max-width: 768px) {
  .app-main h1, .app-main h2 { line-height: 1.2; }
}

/* Estilo de foco visível — acessibilidade */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #2E7CF6;
  outline-offset: 2px;
}

/* Filtros pill */
.app-main a[href*="?status="], .app-main a[href*="?filter="],
.app-main a[href*="?type="], .app-main a[href*="?cause="],
.app-main a[href*="?tab="] {
  transition: transform 100ms ease;
}
.app-main a[href*="?status="]:hover,
.app-main a[href*="?filter="]:hover {
  transform: translateY(-1px);
}

/* Padding interno de tabelas mais confortável */
.app-main table th, .app-main table td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Filtros avançados — bar horizontal */
.adv-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: #fff; border: 1px solid rgba(15,27,61,0.08); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.adv-filters label {
  display: flex; flex-direction: column; font-size: 11px; color: #64748b; font-weight: 600;
}
.adv-filters input, .adv-filters select {
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 8px; font-size: 12px;
  min-width: 120px; margin-top: 2px;
}
.adv-filters button {
  align-self: flex-end; background: #0F1B3D; color: #fff; padding: 6px 12px;
  border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: 0;
}
.adv-filters .clear-btn {
  background: transparent; color: #64748b; border: 1px solid #e2e8f0;
}

/* Cards de KPI (bg-white rounded-xl) — hover mais suave */
.app-main .grid > .bg-white.rounded-xl.border {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.app-main .grid > .bg-white.rounded-xl.border:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 27, 61, 0.08);
}

/* ============================================================
   PAGINATION v3 — moderno
   ============================================================ */
.pg-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid rgba(15,27,61,0.08); border-radius: 10px;
  padding: 8px 12px; margin-top: 12px;
  box-shadow: 0 1px 2px rgba(15,27,61,0.04);
}
.pg-meta { font-size: 12px; color: #64748b; flex: 1; }
.pg-meta b { color: #0F1B3D; font-weight: 700; }
.pg-controls { display: flex; align-items: center; gap: 2px; }
.pg-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 12px; font-weight: 600;
  color: #64748b; background: transparent; text-decoration: none;
  transition: background 100ms ease, color 100ms ease;
  border: 1px solid transparent; cursor: pointer;
}
.pg-btn:hover:not(.pg-btn--disabled):not(.pg-btn--active) {
  background: #f1f5f9; color: #0F1B3D;
}
.pg-btn--active {
  background: #1D4ED8;
  color: #fff !important; cursor: default;
  box-shadow: 0 2px 4px rgba(29,78,216,0.3);
}
.pg-btn--disabled { color: #cbd5e1; cursor: not-allowed; }
.pg-ellipsis { padding: 0 6px; color: #94a3b8; font-weight: 700; }
.pg-size {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px;
  font-size: 12px; background: #fff; color: #0F1B3D; cursor: pointer;
}

/* ============================================================
   SIDEBAR v3 — tipografia (fundo Glass Light)
   ============================================================ */
.sidebar-nav {
  padding: 8px 0 !important;
}
.sidebar-nav .nav-section {
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  color: #94a3b8 !important;
  padding: 16px 20px 6px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-top: 1px solid rgba(15,27,61,0.04);
  margin-top: 4px;
}
.sidebar-nav .nav-section:first-child {
  padding-top: 4px !important;
  border-top: none;
  margin-top: 0;
}
.sidebar-nav a i {
  width: 20px !important;
  text-align: center;
  font-size: 13px;
  color: #64748b;
  transition: color 120ms ease;
}
.sidebar-nav a:hover i { color: #2E7CF6; }
.sidebar-nav a.active i, .sidebar-nav a[aria-current="page"] i { color: #fff !important; }

/* Card do plano — Glass Light (nao navy gradient) */
.sidebar-license-card, .sidebar-plan-card, a.sidebar-plan-card-link {
  margin: 12px !important;
  background: rgba(255, 255, 255, 0.65) !important;
  color: inherit !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}
.sidebar-plan-card .sidebar-plan-name,
a.sidebar-plan-card-link .sidebar-plan-name { color: #0F172A !important; }
.sidebar-plan-card .sidebar-plan-exp,
.sidebar-plan-card .sidebar-plan-pct,
a.sidebar-plan-card-link .sidebar-plan-exp,
a.sidebar-plan-card-link .sidebar-plan-pct { color: #64748B !important; }
.sidebar-plan-card .sidebar-plan-btn,
a.sidebar-plan-card-link .sidebar-plan-btn {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* ============================================================
   PÁGINAS INTERNAS v3 — polish
   ============================================================ */
.app-main {
  max-width: 1400px;
  margin: 0 auto;
}
.app-main h1, .app-main .page-title-main {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: #0F1B3D !important;
}
.app-main .page-subtitle-main {
  color: #64748b !important;
  font-size: 14px !important;
}
/* Cards de KPI mais estilosos */
.app-main .grid > .bg-white.rounded-xl.border {
  position: relative;
  overflow: hidden;
}
.app-main .grid > .bg-white.rounded-xl.border::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #2E7CF6, #10D9A3);
  opacity: 0;
  transition: opacity 200ms ease;
}
.app-main .grid > .bg-white.rounded-xl.border:hover::before { opacity: 1; }

/* Botões primários com gradient */
.app-main [data-action="new-sale"],
.app-main [data-action="new-terminal"],
.app-main [data-action="new-product"],
.app-main [data-action="new-customer"],
.app-main [data-action="new-supplier"],
.app-main button.bg-navy,
.app-main a.bg-navy {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.3) !important;
  transition: transform 100ms ease, box-shadow 200ms ease !important;
}
.app-main [data-action="new-sale"]:hover,
.app-main button.bg-navy:hover,
.app-main a.bg-navy:hover {
  background: #1E40AF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29,78,216,0.4) !important;
  color: #FFFFFF !important;
}

/* Search boxes mais destacadas */
.app-main input[type="search"], .app-main input[type="text"][name="q"] {
  border-radius: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid #e2e8f0 !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.app-main input[type="search"]:focus, .app-main input[type="text"][name="q"]:focus {
  border-color: #2E7CF6 !important;
  box-shadow: 0 0 0 3px rgba(46,124,246,0.15) !important;
  outline: none;
}

/* Empty states amigáveis */
.app-main tbody tr td[colspan]:only-child {
  padding: 48px 20px !important;
  color: #94a3b8 !important;
  font-style: italic;
}