/* ═══════════════════════════════════════════════════════
   CIANO PORTAL V2 — Design System
   ═══════════════════════════════════════════════════════ */

:root {
  --bg:           hsl(210,20%,98%);
  --fg:           hsl(215,25%,12%);
  --card:         hsl(0,0%,100%);
  --primary:      hsl(183,98%,22%);
  --primary-fg:   hsl(0,0%,100%);
  --muted:        hsl(210,15%,96%);
  --muted-fg:     hsl(215,10%,50%);
  --border:       hsl(210,15%,88%);
  --input-bg:     hsl(0,0%,100%);
  --radius:       0.5rem;
  --sidebar-bg:   hsl(215,30%,10%);
  --sidebar-text: hsl(210,20%,70%);
  --sidebar-active:hsl(183,98%,22%);
  --sidebar-hover:hsl(215,25%,16%);
  --sidebar-border:hsl(215,25%,15%);
  --shadow-sm:    0 1px 3px hsl(215,25%,12%,0.08);
  --shadow-md:    0 4px 16px hsl(215,25%,12%,0.10);

  /* Tela de login — paleta própria (navy / cinza / bege), isolada do --primary do dashboard */
  --auth-bg:        hsl(38,28%,95%);   /* fundo bege claro */
  --auth-navy:      hsl(214,48%,18%);  /* navy — cor de destaque, botões, logo */
  --auth-navy-hover:hsl(214,48%,24%);
  --auth-card:      hsl(0,0%,100%);
  --auth-fg:        hsl(214,30%,16%);
  --auth-muted:     hsl(36,18%,91%);   /* bege acinzentado para tabs/inputs */
  --auth-muted-fg:  hsl(214,10%,42%);
  --auth-border:    hsl(30,12%,85%);
  --auth-shadow:    0 8px 28px hsl(214,48%,18%,0.10);
}

.dark {
  --bg:           hsl(215,30%,8%);
  --fg:           hsl(210,20%,90%);
  --card:         hsl(215,25%,11%);
  --primary:      hsl(183,60%,45%);
  --muted:        hsl(215,20%,14%);
  --muted-fg:     hsl(210,10%,55%);
  --border:       hsl(215,20%,18%);
  --input-bg:     hsl(215,25%,13%);
  --sidebar-bg:   hsl(215,35%,7%);
  --sidebar-text: hsl(210,15%,60%);
  --sidebar-active:hsl(183,60%,45%);
  --sidebar-hover:hsl(215,25%,13%);
  --sidebar-border:hsl(215,25%,12%);

  --auth-bg:        hsl(214,32%,9%);
  --auth-navy:      hsl(195,55%,55%);
  --auth-navy-hover:hsl(195,55%,62%);
  --auth-card:      hsl(214,30%,13%);
  --auth-fg:        hsl(210,20%,92%);
  --auth-muted:     hsl(214,20%,17%);
  --auth-muted-fg:  hsl(210,10%,60%);
  --auth-border:    hsl(214,18%,22%);
  --auth-shadow:    0 8px 28px hsl(0,0%,0%,0.30);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

/* ── LAYOUT ─────────────────────────────────────────── */
.dashboard-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100dvh;
  overflow: hidden;
}

.main-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

#page-content { flex: 1; }

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar-nav {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-menu {
  flex: 1;
  padding: 12px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 6px;
  margin: 1px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: all 150ms;
  text-decoration: none;
}

.nav-item:hover { background: var(--sidebar-hover); color: hsl(210,20%,90%); }

.nav-item.active {
  background: hsl(183,98%,22%,0.15);
  color: var(--sidebar-active);
  border-left: 2px solid var(--sidebar-active);
  padding-left: 12px;
}

.nav-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(215,15%,38%);
  padding: 14px 20px 6px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: hsl(183,60%,30%);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-name { font-size: 12px; font-weight: 500; color: white; }
.sidebar-user-role { font-size: 11px; color: hsl(215,15%,40%); }
.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-logout-btn {
  background: none; border: none; cursor: pointer;
  color: hsl(215,15%,40%); padding: 4px;
  border-radius: 4px; transition: color 150ms;
}
.sidebar-logout-btn:hover { color: var(--sidebar-text); }

/* ── HEADER ─────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky; top: 0; z-index: 10;
  min-height: 52px;
}

.app-header-title { font-size: 14px; font-weight: 600; }
.app-header-sub   { font-size: 12px; color: var(--muted-fg); }
.app-header-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 32px; height: 32px;
  border: none; background: none; cursor: pointer;
  border-radius: 6px; color: var(--muted-fg);
  display: flex; align-items: center; justify-content: center;
  transition: all 150ms;
}
.icon-btn:hover { background: var(--muted); color: var(--fg); }

/* ── KPI CARDS ──────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: box-shadow 200ms;
}
.kpi-card:hover { box-shadow: var(--shadow-md); }
.kpi-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted-fg); margin-bottom: 8px;
}
.kpi-value {
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em; line-height: 1.1;
}
.kpi-delta {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; margin-top: 6px;
}
.kpi-delta.up   { color: hsl(142,60%,35%); }
.kpi-delta.down { color: hsl(0,72%,45%); }

/* ── BADGES ─────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-ativo        { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.badge-inativo      { background:#f8fafc; color:#64748b; border-color:#e2e8f0; }
.badge-onboarding   { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.badge-churned      { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.badge-private      { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.badge-alta_renda   { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.badge-varejo       { background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
.badge-institucional{ background:#f0fdfa; color:#0f766e; border-color:#99f6e4; }
.badge-pago         { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.badge-pendente     { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.badge-inadimplente { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.badge-a_fazer      { background:#f8fafc; color:#475569; border-color:#e2e8f0; }
.badge-em_andamento { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.badge-concluido    { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.badge-alta         { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.badge-media        { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.badge-baixa        { background:#f8fafc; color:#64748b; border-color:#e2e8f0; }

/* ── CARDS ──────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.card-title { font-size: 13px; font-weight: 600; }
.card-body  { padding: 16px; }

/* ── TABLES ─────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

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

th {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted-fg); padding: 10px 14px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: left;
}

td {
  padding: 12px 14px; font-size: 13px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}

tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; transition: background 100ms; }
tbody tr:hover td { background: hsl(210,15%,96%,0.6); }
.dark tbody tr:hover td { background: hsl(215,25%,14%); }

/* ── FORMS ──────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 12px; font-weight: 500;
  margin-bottom: 6px; color: var(--fg);
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--input-bg); color: var(--fg);
  font-size: 13px; font-family: inherit;
  transition: border-color 150ms, box-shadow 150ms;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsl(183,98%,22%,0.1);
}
.form-textarea { resize: vertical; min-height: 80px; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 16px;
  border: 1px solid transparent; border-radius: 6px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all 150ms; text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary  { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-secondary{ background: var(--muted); color: var(--fg); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--border); }
.btn-ghost    { background: transparent; color: var(--muted-fg); }
.btn-ghost:hover:not(:disabled) { background: var(--muted); color: var(--fg); }
.btn-danger   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.btn-danger:hover:not(:disabled) { background: #fee2e2; }
.btn-sm       { padding: 5px 10px; font-size: 12px; }
.w-full       { width: 100%; }

/* ── FILTERS BAR ────────────────────────────────────── */
.filters-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--card); position: sticky; top: 52px; z-index: 9;
}

.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted-fg); pointer-events: none; }
.search-input { padding-left: 32px !important; min-width: 220px; }

/* ── ALERTS ─────────────────────────────────────────── */
.alert {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 500;
}
.alert-warning { background:#fffbeb; color:#92400e; border: 1px solid #fde68a; }
.alert-error   { background:#fef2f2; color:#991b1b; border: 1px solid #fecaca; }
.alert-info    { background:#eff6ff; color:#1e40af; border: 1px solid #bfdbfe; }
.alert-success { background:#f0fdf4; color:#166534; border: 1px solid #bbf7d0; }

/* ── AUTH SCREEN (navy / cinza / bege) ────────────────── */
.auth-screen {
  min-height: 100dvh; display: flex;
  align-items: center; justify-content: center;
  background: var(--auth-bg); padding: 20px;
}
.auth-card {
  width: 100%; max-width: 408px;
  background: var(--auth-card); border: 1px solid var(--auth-border);
  border-radius: 14px; padding: 32px;
  box-shadow: var(--auth-shadow);
}
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-logo-name { font-size: 18px; font-weight: 700; color: var(--auth-fg); }
.auth-logo-sub  { font-size: 12px; color: var(--auth-muted-fg); }
.auth-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: var(--auth-fg); }

/* Seletor de tipo de acesso: Cliente / Interno Ciano */
.auth-role-select {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: var(--auth-muted); padding: 4px; border-radius: 8px;
}
.auth-role-btn {
  flex: 1; padding: 8px 10px; border: none; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--auth-muted-fg); transition: all 150ms;
}
.auth-role-btn.active { background: var(--auth-navy); color: hsl(0,0%,100%); }

.auth-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--auth-muted); padding: 4px; border-radius: 8px; }
.auth-tab {
  flex: 1; padding: 7px 12px; border: none; border-radius: 6px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  background: transparent; color: var(--auth-muted-fg); transition: all 150ms;
}
.auth-tab.active { background: var(--auth-card); color: var(--auth-fg); box-shadow: var(--shadow-sm); }
.auth-message {
  margin-top: 12px; padding: 10px 14px;
  border-radius: 6px; font-size: 13px;
}
.auth-message.success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.auth-message.error   { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Inputs e botão primário dentro da auth-card usam a paleta navy, isolados do --primary do dashboard */
.auth-card .form-label { color: var(--auth-fg); }
.auth-card .form-input {
  background: var(--auth-card); color: var(--auth-fg); border-color: var(--auth-border);
}
.auth-card .form-input:focus {
  border-color: var(--auth-navy);
  box-shadow: 0 0 0 3px hsl(214,48%,18%,0.12);
}
.dark .auth-card .form-input:focus { box-shadow: 0 0 0 3px hsl(195,55%,55%,0.16); }
.auth-card .btn-primary {
  background: var(--auth-navy); border-color: var(--auth-navy); color: hsl(0,0%,100%);
}
.auth-card .btn-primary:hover:not(:disabled) { background: var(--auth-navy-hover); border-color: var(--auth-navy-hover); filter: none; }

.auth-switch {
  margin-top: 18px; text-align: center; font-size: 13px; color: var(--auth-muted-fg);
}
.auth-switch button {
  background: none; border: none; padding: 0; margin-left: 4px;
  color: var(--auth-navy); font-weight: 600; font-size: 13px; cursor: pointer;
}
.dark .auth-switch button { color: var(--auth-navy); }
.auth-switch button:hover { text-decoration: underline; }

/* ── TABS ───────────────────────────────────────────── */
.tabs-bar {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--card); padding: 0 20px;
}
.tab-btn {
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  border: none; background: none; cursor: pointer;
  color: var(--muted-fg); border-bottom: 2px solid transparent;
  transition: all 150ms; display: flex; align-items: center; gap: 6px;
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-count {
  font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: var(--muted); color: var(--muted-fg);
}
.tab-btn.active .tab-count { background: hsl(183,98%,22%,0.1); color: var(--primary); }

/* ── TIMELINE ───────────────────────────────────────── */
.timeline { divide-y: var(--border); }
.timeline-item {
  display: flex; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.timeline-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--muted); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: var(--muted-fg);
}
.timeline-title { font-size: 13px; font-weight: 500; }
.timeline-desc  { font-size: 12px; color: var(--muted-fg); margin-top: 2px; line-height: 1.4; }
.timeline-meta  { display: flex; gap: 12px; margin-top: 4px; font-size: 11px; color: var(--muted-fg); }

/* ── KANBAN ─────────────────────────────────────────── */
.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding: 20px; min-height: calc(100vh - 120px); }
.kanban-col { flex-shrink: 0; width: 280px; }
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 8px 8px 0 0;
  font-size: 12px; font-weight: 600; margin-bottom: 8px;
}
.kanban-cards { display: flex; flex-direction: column; gap: 8px; }
.kanban-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; cursor: pointer;
  transition: box-shadow 150ms;
}
.kanban-card:hover { box-shadow: var(--shadow-md); }

/* ── MISC ───────────────────────────────────────────── */
.page-wrap { padding: 20px; }
.section-gap { margin-bottom: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-col-2 { grid-column: span 2; }

/* ── CHART CONTAINERS ──────────────────────────────────
   Chart.js com responsive:true precisa de um pai com altura FIXA
   e position:relative — sem isso o canvas cresce indefinidamente
   (ou fica cortado) dentro de cards flex/grid. Sempre envolver
   <canvas> nesta div antes de instanciar new Chart(). ───────── */
.chart-container { position: relative; width: 100%; }
.chart-container.h-sm { height: 200px; }
.chart-container.h-md { height: 260px; }
.chart-container.h-lg { height: 320px; }
@media (max-width: 768px) {
  .chart-container.h-md { height: 220px; }
  .chart-container.h-lg { height: 260px; }
}

.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.legend-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-fg); }
.info-note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; color: var(--muted-fg); line-height: 1.5;
  padding: 10px 14px; background: var(--muted); border-radius: 6px;
}
.info-note svg { flex-shrink: 0; margin-top: 1px; opacity: 0.7; }

.text-muted { color: var(--muted-fg); }
.text-sm    { font-size: 12px; }
.text-xs    { font-size: 11px; }
.font-medium{ font-weight: 500; }
.font-semibold{font-weight:600; }
.font-bold  { font-weight: 700; }
.tabular    { font-variant-numeric: tabular-nums lining-nums; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 20px; color: var(--muted-fg);
  text-align: center; gap: 8px;
}
.empty-state svg { opacity: 0.3; margin-bottom: 8px; }

.loading-row td { padding: 16px; text-align: center; color: var(--muted-fg); }

.divider { height: 1px; background: var(--border); }

/* ── TOAST ──────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  min-width: 280px; max-width: 380px;
  animation: toast-in 200ms ease;
  box-shadow: var(--shadow-md);
}
.toast.success { background:#166534; color:white; }
.toast.error   { background:#991b1b; color:white; }
.toast.info    { background:hsl(183,98%,22%); color:white; }
@keyframes toast-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-fg); opacity: 0.5; }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar-nav { display: none; }
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}