:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --text: #161616;
  --muted: #6b6b6b;
  --border: #e7e7e7;
  --orange: #f97316;
  --orange-dark: #ea580c;
  --danger: #b42318;
  --success: #157347;
  --sidebar: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff7ed;
  color: var(--orange-dark);
  font-weight: 800;
}
.brand strong, .brand span { display: block; }
.brand span { color: var(--muted); font-size: 13px; margin-top: 2px; }

.nav { padding: 18px 12px; }
.nav-link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 4px;
}
.nav-link:hover { background: #fff7ed; }
.nav-link.active { background: #fff7ed; color: var(--orange-dark); font-weight: 700; }

.sidebar-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--border);
}
.sidebar-footer span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}

.main {
  margin-left: 250px;
  padding: 28px;
  max-width: 1700px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.eyebrow {
  margin: 0 0 5px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--orange-dark);
}
h1, h2 { margin: 0; }
h1 { font-size: clamp(24px, 3vw, 34px); }
h2 { font-size: 20px; }
p { color: var(--muted); margin: 6px 0 0; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.stat-card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat-card { padding: 20px; }
.stat-card span { color: var(--muted); font-size: 14px; }
.stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: 27px;
  letter-spacing: -.02em;
}

.panel { overflow: hidden; }
.panel-head {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.input {
  width: 100%;
  border: 1px solid #dcdcdc;
  background: #fff;
  color: var(--text);
  border-radius: 12px;
  padding: 11px 13px;
  outline: none;
}
.input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.search { max-width: 320px; }

.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}
th, td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
tbody tr:hover { background: #fffaf5; }
.empty {
  text-align: center;
  color: var(--muted);
  padding: 35px;
}
.company-name { font-weight: 700; }
.company-slug { color: var(--muted); font-size: 12px; margin-top: 3px; }
.number { font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.badge.on { background: #ecfdf3; color: var(--success); }
.badge.off { background: #fef3f2; color: var(--danger); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 285px;
}

.btn {
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 10px 13px;
  font-weight: 700;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-secondary { background: #fff; border-color: #ddd; color: var(--text); }
.btn-secondary:hover { border-color: #bbb; }
.btn-ghost { width: 100%; background: transparent; border-color: var(--border); }
.btn-danger { background: #fff; border-color: #f1c4bf; color: var(--danger); }
.btn-small { padding: 7px 9px; font-size: 12px; }

.section { display: none; }
.section.active { display: block; }

.dialog {
  width: min(520px, calc(100vw - 28px));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 24px 80px rgba(0,0,0,.2);
}
.dialog::backdrop { background: rgba(0,0,0,.35); }
.dialog form { padding: 22px; }
.dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.dialog label {
  display: block;
  font-weight: 700;
  margin: 14px 0;
}
.dialog label .input {
  display: block;
  margin-top: 7px;
  font-weight: 400;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
}
.toast {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 100;
  max-width: min(420px, calc(100vw - 40px));
  padding: 13px 16px;
  border-radius: 12px;
  background: #181818;
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #7f1d1d; }
.mobile-only { display: none; }

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 12px 0 40px rgba(0,0,0,.12);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding: 18px; }
  .mobile-only { display: inline-grid; place-items: center; }
  .topbar { align-items: flex-start; }
  .stats-grid { grid-template-columns: 1fr; }
  .panel-head { align-items: stretch; flex-direction: column; }
  .search { max-width: none; }
}

@media (max-width: 560px) {
  .main { padding: 14px; }
  .topbar { flex-wrap: wrap; }
  .topbar > div { flex: 1; min-width: 0; }
  .actions { min-width: 240px; }
  .actions .btn { flex: 1; }
  .stat-card strong { font-size: 24px; }
}


.payment-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.payment-hero h2 { font-size: 22px; }
.provider-pill {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff7ed;
  color: var(--orange-dark);
  font-weight: 800;
}
.payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.payment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.payment-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.payment-card-top h3 { margin: 0; font-size: 18px; }
.provider-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff7ed;
  color: var(--orange-dark);
  font-size: 20px;
  font-weight: 900;
}
.payment-card label {
  display: block;
  margin: 14px 0;
  font-weight: 700;
}
.payment-card label .input {
  display: block;
  margin-top: 7px;
  font-weight: 400;
}
.money-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.money-input > span {
  color: var(--muted);
  font-weight: 800;
}
.money-input .input { margin-top: 0 !important; }
.payment-note {
  display: grid;
  gap: 5px;
  padding: 13px;
  margin: 15px 0;
  border: 1px solid #f1e2d5;
  background: #fffaf5;
  border-radius: 12px;
}
.payment-note strong { font-size: 14px; }
.payment-note span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.btn-full { width: 100%; }
.payment-warning { margin-top: 18px; }
.payment-warning p { line-height: 1.55; }
code {
  padding: 2px 5px;
  border-radius: 5px;
  background: #f2f2f2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}

@media (max-width: 900px) {
  .payment-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .payment-hero { align-items: flex-start; flex-direction: column; }
}

.hidden { display: none !important; }
.app { min-height: 100vh; }
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f7f7f5;
}
.auth-card {
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}
.auth-brand { border: 0; padding: 0 0 28px; }
.auth-card h1 { margin: 0 0 8px; font-size: 30px; }
.auth-description { color: var(--muted); line-height: 1.55; margin: 0 0 22px; }
.auth-card label { display:block; margin: 14px 0; font-weight: 700; }
.auth-card label .input { display:block; margin-top:7px; }
.auth-foot { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.auth-card .btn { margin-top: 8px; }

.overview-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.company-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}
.company-card h3 { margin: 0 0 5px; font-size: 16px; }
.company-card p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.company-card .company-card-stats { display:flex; gap:12px; flex-wrap:wrap; font-size:13px; }
.company-card .company-card-stats strong { color: var(--text); }
.crm-overview-panel { margin-top: 18px; }
.compact-select { min-width: 260px; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.detail-grid > .panel { min-width: 0; }
.detail-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 6px;
}
.detail-card span { color: var(--muted); font-size: 13px; }
.detail-card strong { font-size: 18px; overflow-wrap:anywhere; }
.crm-selector { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.mini-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.mini-stat { background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; }
.mini-stat span { display:block; color:var(--muted); font-size:12px; margin-bottom:5px; }
.mini-stat strong { font-size:19px; }
.module-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:10px; margin-bottom:8px; }
.module-tab { white-space:nowrap; border:1px solid var(--border); background:#fff; border-radius:999px; padding:9px 13px; color:var(--text); }
.module-tab.active { border-color:#fed7aa; background:#fff7ed; color:var(--orange-dark); font-weight:800; }
.loading-panel, .block-empty { min-height:140px; display:grid; place-items:center; }
.detail-list { margin:0; display:grid; gap:8px; }
.detail-list > div { display:grid; grid-template-columns:minmax(120px, .7fr) minmax(0, 1.3fr); gap:12px; padding:8px 0; border-bottom:1px solid #f0f0f0; }
.detail-list dt { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.detail-list dd { margin:0; font-size:14px; overflow-wrap:anywhere; }
.full-span { grid-column: 1 / -1; }
.wide-dialog { width:min(900px, calc(100vw - 30px)); max-width:900px; }
.json-view { max-height:70vh; overflow:auto; padding:16px; background:#f7f7f5; border:1px solid var(--border); border-radius:12px; font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }

@media (max-width: 1100px) {
  .mini-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns:1fr; }
  .crm-selector { align-items:flex-start; flex-direction:column; }
  .compact-select { width:100%; min-width:0; }
}
@media (max-width: 620px) {
  .auth-card { padding:22px; }
  .main { padding:18px; }
  .mini-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .payment-grid { grid-template-columns:1fr; }
  .topbar h1 { font-size:24px; }
}


/* Financeiro real dos provedores */
.billing-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.provider-finance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.provider-finance-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.provider-finance-head h3 { margin: 0; font-size: 19px; }
.provider-finance-head p { margin-top: 3px; font-size: 13px; }
.provider-money-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 16px 0;
}
.provider-money {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 14px;
  background: var(--surface-2);
}
.provider-money span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 7px;
}
.provider-money strong {
  display: block;
  font-size: 20px;
  overflow-wrap: anywhere;
}
.billing-meta {
  display: grid;
  gap: 5px;
  margin: 14px 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.billing-security-panel { margin-top: 18px; }

@media (max-width: 900px) {
  .billing-summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .provider-finance-head { grid-template-columns: auto 1fr; }
  .provider-finance-head .badge { grid-column: 1 / -1; width: fit-content; }
  .provider-money-grid { grid-template-columns: 1fr; }
}