/* ===== Solution Car CRM — Tema "Showroom" ===== */
:root{
  --bg: #0f1216;
  --bg-elevated: #161b22;
  --bg-card: #1b212a;
  --bg-card-hover: #212834;
  --border: #2a323e;
  --border-soft: #232a34;
  --silver: #c7ccd4;
  --silver-dim: #8a919c;
  --text: #eef1f5;
  --text-dim: #9aa2ad;
  --accent: #3b6ef6;
  --accent-2: #2fa8e0;
  --accent-soft: rgba(59,110,246,.14);
  --success: #16a34a;
  --success-soft: rgba(22,163,74,.14);
  --danger: #eb4f4f;
  --danger-soft: rgba(235,79,79,.14);
  --warning: #e0a52f;
  --warning-soft: rgba(224,165,47,.14);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-pop: 0 20px 60px -20px rgba(0,0,0,.6);
  --font-head: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size:14px; line-height:1.5;
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(59,110,246,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(47,168,224,.06), transparent 60%);
  background-attachment: fixed;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight:600; margin:0; letter-spacing:-.01em; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background: #333c4a; border-radius:99px; }
::-webkit-scrollbar-track{ background: transparent; }

.app-shell{ display:flex; min-height:100vh; }

/* ===== Sidebar ===== */
.app-sidebar{
  width:260px; flex-shrink:0; background: linear-gradient(180deg, var(--bg-elevated), #12161c);
  border-right:1px solid var(--border-soft); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; transition: width .2s ease;
}
.app-sidebar.collapsed{ width:76px; }
.app-sidebar.collapsed .brand-text, .app-sidebar.collapsed .nav-item span:last-child,
.app-sidebar.collapsed .nav-group-title, .app-sidebar.collapsed .user-meta{ display:none; }
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid var(--border-soft); position:relative; }
.brand-mark{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-family:var(--font-head); font-weight:700; flex-shrink:0;
  box-shadow: 0 6px 16px -4px rgba(59,110,246,.5);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family:var(--font-head); font-size:15px; }
.brand-text small{ color:var(--text-dim); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.sidebar-toggle{
  margin-left:auto; background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim);
  width:24px; height:24px; border-radius:7px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
}
.sidebar-scroll{ flex:1; overflow-y:auto; padding:14px 10px; }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; }
.nav-group{ margin-top:16px; display:flex; flex-direction:column; gap:2px; }
.nav-group-title{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); padding:6px 10px 4px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); color:var(--silver);
  font-size:13.5px; font-weight:500; transition: background .12s, color .12s;
}
.nav-item:hover{ background: var(--bg-card); color: var(--text); }
.nav-item.active{ background: var(--accent-soft); color: #cddcff; }
.nav-ico{ width:18px; text-align:center; opacity:.85; flex-shrink:0; }
.sidebar-footer{ border-top:1px solid var(--border-soft); padding:12px; display:flex; align-items:center; gap:8px; }
.user-chip{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.user-avatar{
  width:32px; height:32px; border-radius:50%; background: var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; color:var(--silver);
}
.user-meta{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.user-meta strong{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-meta small{ color:var(--text-dim); font-size:11px; }
.logout-link{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--danger); background:var(--danger-soft); flex-shrink:0; }

/* ===== Main ===== */
.app-main{ flex:1; min-width:0; padding:22px 26px 60px; }
.page-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-header h1{ font-size:21px; }
.page-sub{ color:var(--text-dim); font-size:13px; margin-top:3px; }
.header-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; border:1px solid var(--border);
  background: var(--bg-card); color:var(--text); font-weight:600; font-size:13px; cursor:pointer; transition:.12s;
}
.btn:hover{ background: var(--bg-card-hover); border-color:#3a4552; }
.btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color:transparent; color:#fff; box-shadow:0 8px 20px -8px rgba(59,110,246,.6); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-success{ background: var(--success-soft); border-color: rgba(22,163,74,.35); color:#7be3a0; }
.btn-danger{ background: var(--danger-soft); border-color: rgba(235,79,79,.35); color:#ff9c9c; }
.btn-sm{ padding:6px 10px; font-size:12px; border-radius:8px; }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--text-dim); }
.btn-ghost:hover{ color:var(--text); background:var(--bg-card); }
.btn-icon{ width:34px; height:34px; padding:0; justify-content:center; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ===== Cards / Panels ===== */
.card{ background: var(--bg-card); border:1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.card-pad{ padding:18px; }
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:20px; }
.kpi-card{ background: var(--bg-card); border:1px solid var(--border-soft); border-radius: var(--radius); padding:16px 18px; position:relative; overflow:hidden; }
.kpi-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(135deg, transparent 60%, rgba(59,110,246,.06)); pointer-events:none; }
.kpi-label{ color:var(--text-dim); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.kpi-value{ font-family:var(--font-head); font-size:26px; margin-top:6px; }
.kpi-trend{ font-size:12px; margin-top:5px; color:var(--text-dim); }

/* ===== Kanban ===== */
.funil-tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.funil-tab{ padding:8px 14px; border-radius:99px; border:1px solid var(--border); background:var(--bg-card); font-size:13px; font-weight:600; color:var(--text-dim); }
.funil-tab.active{ background: var(--accent-soft); color:#cddcff; border-color: rgba(59,110,246,.4); }
.kanban-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.status-filter{ display:flex; gap:6px; background:var(--bg-card); border:1px solid var(--border-soft); padding:4px; border-radius:10px; }
.status-filter button{ border:none; background:transparent; color:var(--text-dim); padding:6px 12px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer; }
.status-filter button.active{ background: var(--bg-card-hover); color:var(--text); }

.kanban-board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; }
.kanban-col{
  min-width:280px; max-width:280px; background: var(--bg-elevated); border:1px solid var(--border-soft);
  border-radius: var(--radius); display:flex; flex-direction:column; max-height: calc(100vh - 230px);
}
.kanban-col-head{ padding:12px 14px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px; position:sticky; top:0; background:var(--bg-elevated); border-radius:var(--radius) var(--radius) 0 0; z-index:2; }
.etapa-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.kanban-col-head strong{ font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-col-count{ background: var(--bg-card); border-radius:99px; padding:1px 8px; font-size:11.5px; color:var(--text-dim); }
.kanban-col-total{ padding:8px 14px; font-size:11.5px; color:var(--text-dim); font-family:var(--font-mono); border-bottom:1px solid var(--border-soft); }
.kanban-col-body{ padding:10px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; flex:1; min-height:60px; }
.kanban-col-body.drag-over{ background: var(--accent-soft); border-radius:0 0 var(--radius) var(--radius); }

.neg-card{
  background: var(--bg-card); border:1px solid var(--border-soft); border-radius: var(--radius-sm); padding:11px 12px;
  cursor:grab; box-shadow: var(--shadow-card); transition: transform .1s, border-color .1s;
}
.neg-card:hover{ border-color:#3a4552; transform: translateY(-1px); }
.neg-card.dragging{ opacity:.4; }
.neg-card-title{ font-weight:600; font-size:13px; margin-bottom:5px; }
.neg-card-contato{ color:var(--text-dim); font-size:11.5px; margin-bottom:8px; }
.neg-card-foot{ display:flex; align-items:center; justify-content:space-between; }
.neg-card-valor{ font-family:var(--font-mono); font-size:12.5px; color:#cddcff; }
.badge{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:99px; text-transform:uppercase; letter-spacing:.03em; }
.badge-esfriando{ background:var(--warning-soft); color:var(--warning); }
.badge-ganha{ background:var(--success-soft); color:#7be3a0; }
.badge-perdida{ background:var(--danger-soft); color:#ff9c9c; }
.neg-card-avatar{ width:22px; height:22px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--silver-dim); }

/* ===== Negociação detail ===== */
.neg-layout{ display:grid; grid-template-columns: 1fr 340px; gap:18px; align-items:start; }
.neg-section-title{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); margin-bottom:10px; }
.timeline-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.timeline-item:last-child{ border-bottom:none; }
.timeline-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:5px; flex-shrink:0; }
.item-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.field-row{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field-row label{ font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }

/* ===== Forms ===== */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], select, textarea{
  width:100%; background: var(--bg-elevated); border:1px solid var(--border); color:var(--text); border-radius:9px;
  padding:9px 11px; font-size:13.5px; font-family:var(--font-body); outline:none; transition:border-color .12s;
}
input:focus, select:focus, textarea:focus{ border-color: var(--accent); }
label.form-label{ font-size:12.5px; color:var(--text-dim); margin-bottom:5px; display:block; font-weight:600; }
.form-group{ margin-bottom:14px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ===== Table ===== */
table.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:10px 12px; border-bottom:1px solid var(--border); }
.data-table td{ padding:11px 12px; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.data-table tr:hover td{ background: rgba(255,255,255,.015); }

/* ===== Modal ===== */
.modal-backdrop{ position:fixed; inset:0; background: rgba(6,8,11,.65); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-box{ background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius); width:100%; max-width:480px; box-shadow: var(--shadow-pop); max-height:90vh; overflow-y:auto; }
.modal-head{ padding:16px 18px; border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; }
.modal-body{ padding:18px; }
.modal-foot{ padding:14px 18px; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:8px; }
.modal-close{ background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; }

/* ===== Login ===== */
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ width:100%; max-width:380px; background: var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:32px 28px; box-shadow: var(--shadow-pop); }
.login-brand{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }

/* ===== Misc ===== */
.text-dim{ color:var(--text-dim); }
.mono{ font-family: var(--font-mono); }
.toast{ position:fixed; bottom:20px; right:20px; background: var(--bg-elevated); border:1px solid var(--border); padding:12px 16px; border-radius:10px; box-shadow: var(--shadow-pop); z-index:200; font-size:13px; }
.toast.error{ border-color: rgba(235,79,79,.5); color:#ff9c9c; }
.toast.success{ border-color: rgba(22,163,74,.5); color:#7be3a0; }
.chip{ display:inline-block; padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:600; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-dim); }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .neg-layout{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .app-sidebar{ position:fixed; z-index:50; left:0; top:0; transform: translateX(-100%); transition: transform .2s; }
  .app-sidebar.mobile-open{ transform:none; }
  .app-main{ padding:16px; }
  .sidebar-toggle{ display:none; }
  .form-row{ grid-template-columns:1fr; }
  .btn span.btn-text{ display:none; }
}