/* Pertise Design System v3 — alinhado com DS oficial pertise-light.html */

/* Self-host fonts (Phase 1) */
@font-face {
  font-family: 'DM Sans';
  src: url('/crm/assets/fonts/dm-sans.woff2') format('woff2-variations'),
       url('/crm/assets/fonts/dm-sans.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/crm/assets/fonts/plus-jakarta.woff2') format('woff2-variations'),
       url('/crm/assets/fonts/plus-jakarta.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/crm/assets/fonts/jetbrains-mono.woff2') format('woff2-variations'),
       url('/crm/assets/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* === DS oficial v1.0 tokens === */
  --bg: #f5f4f0;
  --fg: #1F2937;
  --fg2: #4B5563;
  --border: #e0ddd6;
  --primary: #373083;
  --accent: #7C3AED;
  --surface: #ffffff;
  --surface-elevated: #ffffff;

  /* DS radius */
  --radius: .5rem;
  --radius-lg: 1.25rem;

  /* DS fonts */
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", "DM Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* DS easing */
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --t-fast: 150ms var(--ease-out);
  --t-base: 250ms var(--ease-out);
  --t-slow: 450ms var(--ease-spring);

  /* === BACKWARDS-COMPAT aliases (modulos 23 antigos usam estes) === */
  --indigo: var(--primary);
  --indigo-dark: #0F0C2E;
  --indigo-deep: #1E1A5A;
  --indigo-light: #4A42A0;
  --indigo-pale: #EEEDFA;
  --brand-purple: var(--accent);
  --brand-purple-hover: #6D28D9;
  --wpp-green: #25D366;

  --bg-base: var(--bg);
  --bg-card: var(--surface);
  --bg-subtle: rgba(55,48,131,.04);
  --bg-hover: #EEEDFA;
  --bg-overlay: rgba(238, 237, 250, 0.6);

  --border-strong: #D4D2DD;

  --text-primary: var(--fg);
  --text-secondary: var(--fg2);
  --text-muted: #6B6B7B;
  --text-on-primary: #FFFFFF;
  --gray-600: #6B6B7B;
  --white: #FFFFFF;

  --success: #0D9668;
  --accent-hover: #0A7B54;
  --warn: #D97706;
  --danger: #DC2626;
  --info: #2563EB;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 100px;

  --font-heading: var(--font-display);
  --font-body: var(--font);

  --shadow-xs: 0 1px 2px rgba(15, 12, 46, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 12, 46, 0.06);
  --shadow-md: 0 4px 16px rgba(55, 48, 131, 0.08);
  --shadow-lg: 0 20px 60px rgba(55, 48, 131, 0.1);
  --shadow-glow-indigo: 0 0 24px rgba(55, 48, 131, 0.25);
  --shadow-glow-accent: 0 12px 40px rgba(124, 58, 237, 0.25);
}

body.pertise-light {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.pertise-light h1, body.pertise-light h2, body.pertise-light h3,
body.pertise-light h4, body.pertise-light h5 {
  font-family: var(--font-heading);
  color: var(--indigo-dark);
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* ========== HEADER (top) ========== */
body.pertise-light header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1rem 1.5rem !important;
  box-shadow: var(--shadow-xs);
}

body.pertise-light header h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--indigo-dark);
}

body.pertise-light header h1 .text-indigo-400 {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ========== NAV (sidebar style) ========== */
body.pertise-light nav {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0.5rem 1.5rem !important;
}

body.pertise-light .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  margin: 0 0.125rem;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--t-fast);
  position: relative;
}

body.pertise-light .nav-link:hover {
  background: var(--indigo-pale);
  color: var(--indigo);
}

body.pertise-light .nav-link.active {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-light) 100%);
  color: var(--white) !important;
  box-shadow: var(--shadow-glow-indigo);
}

/* ========== CARDS ========== */
body.pertise-light .card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: var(--t-fast);
}

body.pertise-light .card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ========== KPIs ========== */
body.pertise-light .kpi-lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

body.pertise-light .kpi-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--indigo-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

body.pertise-light .kpi-delta {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-pill);
}

body.pertise-light .kpi-delta.up {
  color: var(--success);
  background: rgba(13, 150, 104, 0.1);
}

body.pertise-light .kpi-delta.down {
  color: var(--danger);
  background: rgba(220, 38, 38, 0.1);
}

/* ========== TABLES ========== */
body.pertise-light table {
  width: 100%;
  border-collapse: collapse;
}

body.pertise-light th {
  text-align: left;
  padding: 0.625rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  background: var(--bg-subtle);
}

body.pertise-light td {
  padding: 0.625rem 0.5rem;
  border-bottom: 1px solid var(--bg-subtle);
  font-size: 0.875rem;
  color: var(--text-primary);
}

body.pertise-light tr:hover td {
  background: var(--bg-overlay);
}

/* ========== TAGS ========== */
body.pertise-light .tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.pertise-light .tag-verde {
  background: rgba(13, 150, 104, 0.12);
  color: var(--accent);
  border: 1px solid rgba(13, 150, 104, 0.25);
}

body.pertise-light .tag-amarelo {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warn);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

body.pertise-light .tag-vermelho {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* ========== BUTTONS ========== */
body.pertise-light .btn,
body.pertise-light .btn-primary,
body.pertise-light button[type="submit"]:not([class*="bg-"]) {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-light) 100%);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
}

body.pertise-light .btn:hover,
body.pertise-light .btn-primary:hover,
body.pertise-light button[type="submit"]:hover {
  box-shadow: var(--shadow-glow-indigo);
  transform: translateY(-1px);
}

body.pertise-light .btn-secondary {
  background: var(--white);
  color: var(--indigo);
  border: 1px solid var(--border-strong);
}

body.pertise-light .btn-secondary:hover {
  background: var(--indigo-pale);
  border-color: var(--indigo);
}

/* ========== FORMS ========== */
body.pertise-light input[type="text"],
body.pertise-light input[type="number"],
body.pertise-light input[type="date"],
body.pertise-light input[type="email"],
body.pertise-light input[type="tel"],
body.pertise-light input[type="password"],
body.pertise-light textarea,
body.pertise-light select {
  background: var(--white);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  width: 100%;
  transition: var(--t-fast);
}

body.pertise-light input:focus,
body.pertise-light textarea:focus,
body.pertise-light select:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px rgba(55, 48, 131, 0.12);
}

body.pertise-light label {
  display: block;
  margin-top: 0.625rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ========== UTILITIES (Tailwind dark→light overrides) ========== */
body.pertise-light .bg-slate-900,
body.pertise-light .bg-slate-800,
body.pertise-light .bg-slate-700 { background: var(--white) !important; }

body.pertise-light .border-slate-700,
body.pertise-light .border-slate-600,
body.pertise-light .border-slate-500 { border-color: var(--border) !important; }

body.pertise-light .text-slate-400,
body.pertise-light .text-slate-500 { color: var(--text-muted) !important; }

body.pertise-light .text-slate-300,
body.pertise-light .text-slate-200 { color: var(--text-secondary) !important; }

body.pertise-light .text-white { color: var(--text-primary) !important; }

body.pertise-light .text-indigo-400,
body.pertise-light .text-indigo-300 { color: var(--indigo) !important; }

body.pertise-light .text-yellow-400 { color: var(--warn) !important; }
body.pertise-light .text-red-400 { color: var(--danger) !important; }
body.pertise-light .text-emerald-400,
body.pertise-light .text-green-400 { color: var(--success) !important; }

body.pertise-light .bg-indigo-600,
body.pertise-light .bg-indigo-700 {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-light) 100%) !important;
}

body.pertise-light .bg-green-900 {
  background: rgba(13, 150, 104, 0.1) !important;
  color: var(--success) !important;
}

body.pertise-light .border-green-700 { border-color: var(--success) !important; }

body.pertise-light .bg-yellow-600 { background: var(--warn) !important; }
body.pertise-light .bg-red-600 { background: var(--danger) !important; }
body.pertise-light .bg-green-600 { background: var(--success) !important; }
body.pertise-light .bg-slate-700.rounded { background: var(--bg-subtle) !important; }

/* Skeleton */
body.pertise-light .skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-hover) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: pertise-shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes pertise-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner */
body.pertise-light .spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid var(--border);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: pertise-spin 0.8s linear infinite;
}
@keyframes pertise-spin { to { transform: rotate(360deg); } }

/* Main content area */
body.pertise-light main {
  background: var(--bg-base);
  min-height: calc(100vh - 120px);
}

/* Section titles */
body.pertise-light main h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--indigo-dark);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

body.pertise-light main h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--indigo-dark);
  margin-bottom: 0.5rem;
}

/* Empty state */
body.pertise-light .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

/* Helper classes pra modulos */
body.pertise-light .text-muted-pertise { color: var(--text-muted) !important; }
body.pertise-light .text-secondary-pertise { color: var(--text-secondary) !important; }
body.pertise-light .bg-warn-pertise { background: var(--warn) !important; color: var(--white) !important; }
body.pertise-light .bg-danger-pertise { background: var(--danger) !important; color: var(--white) !important; }
body.pertise-light .bg-success-pertise { background: var(--success) !important; color: var(--white) !important; }
body.pertise-light .bg-progress-track-pertise { background: var(--bg-subtle) !important; }
body.pertise-light .bg-yellow-600 { background: var(--warn) !important; }
body.pertise-light .bg-red-600 { background: var(--danger) !important; }
body.pertise-light .bg-green-600 { background: var(--success) !important; }

/* Form control pra forms inline antigos */
body.pertise-light form input,
body.pertise-light form select,
body.pertise-light form textarea {
  background: var(--white) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* Active state nav improvement */
body.pertise-light a.nav-link.active {
  position: relative;
}

/* Stats progress bar fix */
body.pertise-light .h-2 {
  height: 0.5rem;
  border-radius: var(--r-pill);
}

/* Code/mono */
body.pertise-light .font-mono {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.8em;
  color: var(--indigo-deep);
}

/* Card hover scale improvement */
body.pertise-light .card.kpi-card {
  border-left: 3px solid var(--indigo);
}

/* Drilldown links */
body.pertise-light a.text-indigo-400,
body.pertise-light a.text-indigo-500 {
  color: var(--indigo) !important;
  font-weight: 500;
  transition: var(--t-fast);
}

body.pertise-light a.text-indigo-400:hover {
  color: var(--indigo-light) !important;
  text-decoration: underline;
}

/* Section spacing */
body.pertise-light main > .space-y-6 > * + * { margin-top: 1.5rem; }
body.pertise-light main > .space-y-4 > * + * { margin-top: 1rem; }

/* Grid layout pra KPIs */
body.pertise-light .grid.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 768px) {
  body.pertise-light .grid.md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  body.pertise-light .grid.md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Better nav scroll on mobile */
body.pertise-light nav .flex { overflow-x: auto; scrollbar-width: thin; }

/* Chart container fix - force height */
body.pertise-light canvas { max-height: 280px !important; }
body.pertise-light .card canvas { max-height: 240px !important; }

/* === Layout improvements: textos maiores e legíveis === */

/* Sidebar fonts maiores */
body.pertise-light .sidebar-link {
  font-size: 0.9rem !important;
  padding: 0.625rem 1.25rem !important;
}
body.pertise-light .sidebar-link .icon { font-size: 1.125rem !important; }
body.pertise-light .sidebar-section {
  font-size: 0.7rem !important;
  padding-top: 1rem !important;
}
body.pertise-light .sidebar-brand {
  font-size: 1.375rem !important;
  padding: 1.5rem 1.25rem 1.25rem !important;
}
body.pertise-light .sidebar-brand small {
  font-size: 0.75rem !important;
  margin-top: 0.375rem !important;
}

/* Topbar maior */
body.pertise-light .topbar { height: 72px !important; padding: 0 2rem !important; }
body.pertise-light .topbar-title h1 { font-size: 1.375rem !important; font-weight: 700 !important; }
body.pertise-light .topbar-title small { font-size: 0.8rem !important; }
body.pertise-light .topbar-period a { font-size: 0.8rem !important; padding: 0.5rem 0.875rem !important; }

/* Content area padding */
body.pertise-light .content-area { padding: 2rem !important; }

/* KPI cards bigger */
body.pertise-light .kpi-card {
  padding: 1.5rem !important;
  border-radius: var(--r-lg) !important;
}
body.pertise-light .kpi-card .label {
  font-size: 0.75rem !important;
  margin-bottom: 0.625rem !important;
}
body.pertise-light .kpi-card .value {
  font-size: 2.25rem !important;
  line-height: 1 !important;
}
body.pertise-light .kpi-card .sub { font-size: 0.85rem !important; margin-top: 0.625rem !important; }
body.pertise-light .kpi-card .kpi-icon {
  width: 44px !important; height: 44px !important;
  font-size: 1.25rem !important;
  border-radius: var(--r-md) !important;
}

/* KPI grid more breathing room */
body.pertise-light .kpi-grid { gap: 1.25rem !important; }

/* Section title bigger */
body.pertise-light .section-title { margin: 2rem 0 1rem !important; }
body.pertise-light .section-title h2 { font-size: 1.25rem !important; }

/* Cards with more padding */
body.pertise-light .card { padding: 1.5rem !important; border-radius: var(--r-lg) !important; }

/* Tables more readable */
body.pertise-light table th { font-size: 0.7rem !important; padding: 0.75rem 0.625rem !important; }
body.pertise-light table td { font-size: 0.9rem !important; padding: 0.75rem 0.625rem !important; }

/* Tags bigger */
body.pertise-light .tag {
  padding: 0.3rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* Main h2 in cards */
body.pertise-light main h2 { font-size: 1.125rem !important; }

/* === v3 UX upgrades === */

/* Daltônico: bordas semânticas */
body.pertise-light .tag-verde { border: 1px solid rgba(13,150,104,.3); }
body.pertise-light .tag-amarelo { border: 1px solid rgba(217,119,6,.3); }
body.pertise-light .tag-vermelho { border: 1px solid rgba(220,38,38,.3); }
body.pertise-light .tag-indigo { border: 1px solid rgba(55,48,131,.2); }

/* KPI delta arrows visual além cor */
body.pertise-light .delta.up::before { content: "▲ "; font-size: .65em; }
body.pertise-light .delta.down::before { content: "▼ "; font-size: .65em; }

/* Focus states acessibilidade */
body.pertise-light a:focus-visible,
body.pertise-light button:focus-visible,
body.pertise-light input:focus-visible,
body.pertise-light select:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* Animações entrada cards */
body.pertise-light .kpi-card,
body.pertise-light .card { animation: fadeInUp .4s var(--ease-out) backwards; }
body.pertise-light .kpi-card:nth-child(1) { animation-delay: .05s; }
body.pertise-light .kpi-card:nth-child(2) { animation-delay: .1s; }
body.pertise-light .kpi-card:nth-child(3) { animation-delay: .15s; }
body.pertise-light .kpi-card:nth-child(4) { animation-delay: .2s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Tabela rows hover lift */
body.pertise-light tbody tr { transition: var(--t-fast); }

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.pertise-light *, body.pertise-light *::before, body.pertise-light *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Print otimizado */
@media print {
  body.pertise-light { background: white; color: black; }
  body.pertise-light .card, body.pertise-light .kpi-card { border: 1px solid #ddd; box-shadow: none; page-break-inside: avoid; }
  body.pertise-light .section-title { page-break-after: avoid; }
  body.pertise-light table { page-break-inside: auto; }
  body.pertise-light tr { page-break-inside: avoid; page-break-after: auto; }
}

/* ===== Pertise 360 SaaS Responsive (added 22/05/2026 W4.5) ===== */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); transition: transform .3s; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main { margin-left: 0 !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .topbar { padding: 0 .75rem; }
}
@media (max-width: 768px) {
  .kpi-grid, .kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .breadcrumbs .crumb:not(.active) { display: none; }
  .breadcrumbs .sep { display: none; }
  table { font-size: 11px; }
  th, td { padding: 6px 4px; }
  h1 { font-size: 18px !important; }
  .card { padding: .75rem !important; }
}
@media (max-width: 480px) {
  .content-area { padding: .75rem !important; }
  .kpi-grid, .kpis { grid-template-columns: 1fr !important; }
  .kpi-card .value, .kpi-val { font-size: 1.4rem !important; }
  .avatar-btn .name { display: none; }
  table { font-size: 10px; }
  .conn-grid { grid-template-columns: 1fr !important; }
  .conn-card { padding: 12px !important; }
}
/* Skip link a11y */
.skip-link { position: absolute; top: -40px; left: 0; background: var(--indigo, #6366f1); color: white; padding: 8px; z-index: 9999; text-decoration: none; }
.skip-link:focus { top: 0; }
/* Focus visible */
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--indigo, #6366f1); outline-offset: 2px; }