/* ═══════════════════════════════════════════════
   SpinBot — CSS Principal
═══════════════════════════════════════════════ */
:root {
  --primary:#1A56A0; --primary-dark:#0D3461; --primary-light:#2E70C4;
  --accent:#25D366; --accent-dark:#128C7E;
  --gold:#F59E0B; --danger:#EF4444; --warning:#F59E0B; --success:#10B981;
  --text:#0F172A; --text-muted:#64748B;
  --border:#E2E8F0; --surface:#F8FAFC; --white:#FFFFFF;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 20px 60px rgba(0,0,0,.14);
  --sidebar-w:220px; --topbar-h:60px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--surface);font-size:14px;line-height:1.5}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ── App Layout ── */
.app-layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;min-height:100vh}

/* ── Topbar ── */
.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:var(--white);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;height:var(--topbar-h)}
.topbar-left{display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--primary)}
.logo-icon{font-size:22px}
.topbar-page{color:var(--text-muted);font-size:13px;border-left:1px solid var(--border);padding-left:16px}
.topbar-right{position:relative}
.user-menu{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 12px;
  border-radius:var(--radius-sm);transition:.2s}
.user-menu:hover{background:var(--surface)}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);
  min-width:200px;overflow:hidden;display:none;z-index:200}
.user-dropdown.open{display:block}
.user-dropdown .dropdown-info{padding:12px 16px;background:var(--surface)}
.user-dropdown .dropdown-info strong{display:block;font-size:14px}
.user-dropdown .dropdown-info small{color:var(--text-muted)}
.user-dropdown a{display:flex;align-items:center;gap:8px;padding:10px 16px;
  color:var(--text);transition:.15s}
.user-dropdown a:hover{background:var(--surface);text-decoration:none}
.user-dropdown hr{border:none;border-top:1px solid var(--border)}
.logout-link{color:var(--danger)!important}

/* ── Sidebar ── */
.sidebar{background:var(--primary-dark);padding:16px 0;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;
  color:rgba(255,255,255,.7);transition:.15s;border-left:3px solid transparent;font-size:13px}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--accent)}
.nav-icon{font-size:16px;width:20px;text-align:center}

/* ── Main content ── */
.main-content{padding:28px;overflow-y:auto;overflow-x:hidden;min-width:0;max-width:100%;max-height:calc(100vh - var(--topbar-h))}

/* ── Page header ── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:22px;font-weight:700}
.text-muted{color:var(--text-muted)}
.text-sm{font-size:12px}

/* ── Stats grid ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:8px}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);min-width:0}
.stat-icon{flex:none}
.stat-info{min-width:0;flex:1}
.stat-card--green{border-left:4px solid var(--success)}
.stat-card--yellow{border-left:4px solid var(--warning)}
.stat-icon{font-size:28px}
.stat-value{font-size:22px;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.stat-label{font-size:12px;color:var(--text-muted);margin-top:2px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table-scroll>.data-table{margin:0}

/* ── Cards ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border)}
.card-header h3{font-size:15px;font-weight:600}
.card-body{padding:20px}
.mt-4{margin-top:16px} .mt-6{margin-top:24px} .mt-3{margin-top:12px} .mb-4{margin-bottom:16px}

/* ── Tables ── */
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:10px 16px;text-align:left;font-size:12px;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--border);background:var(--surface)}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--surface)}
.text-center{text-align:center}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.badge-success{background:#D1FAE5;color:#065F46}
.badge-warning{background:#FEF3C7;color:#92400E}
.badge-danger{background:#FEE2E2;color:#991B1B}
.badge-info{background:#DBEAFE;color:#1E40AF}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;cursor:pointer;border:2px solid transparent;
  transition:.15s;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-full{width:100%;justify-content:center}
.btn-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-muted);padding:4px}

/* ── Forms ── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:14px;transition:.15s;background:var(--white)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,86,160,.12)}
.input-with-icon{position:relative}
.input-with-icon input{padding-right:44px}
.toggle-pass{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:16px}
.filters-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.filters-bar input,.filters-bar select{flex:1;min-width:160px;padding:8px 12px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px}

/* ── Alerts ── */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13px;font-weight:500}
.alert-error{background:#FEE2E2;color:#991B1B;border:1px solid #FECACA}
.alert-success{background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;
  display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.active{display:flex}
.modal{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  width:100%;max-width:480px;max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--white);z-index:2;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.modal-header h3{font-size:16px;font-weight:700}
.atend-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;align-items:center;justify-content:center;padding:20px}.atend-modal-overlay.open{display:flex}.atend-modal-overlay.active{display:flex}.modal-close{background:none;border:none;cursor:pointer;font-size:20px;line-height:1;
  color:var(--text-muted);padding:2px 6px;border-radius:4px;transition:.15s}
.modal-close:hover{background:var(--surface);color:var(--text)}
.modal-body{padding:20px}
.modal-form{padding:20px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:16px 20px 20px;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--white)}

/* ── Login ── */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%)}
.login-wrapper{width:100%;max-width:400px;padding:20px}
.login-card{background:var(--white);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow-lg)}
.login-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;
  font-size:22px;font-weight:800;color:var(--primary)}
.login-title{text-align:center;font-size:18px;font-weight:700;margin-bottom:24px;color:var(--text)}
.login-form{display:flex;flex-direction:column;gap:4px}
.login-footer{text-align:center;margin-top:20px;color:var(--text-muted);font-size:13px}

/* ── Instances ── */
.instance-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.instance-row:last-child{border-bottom:none}
.instance-status{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.status-connected,.instance-status.status-connected{background:var(--success)}
.status-disconnected,.instance-status.status-disconnected{background:var(--text-muted)}
.status-connecting,.instance-status.status-connecting{background:var(--warning)}
.status-banned,.instance-status.status-banned{background:var(--danger)}
.instance-info{flex:1}
.instance-info strong{display:block;font-size:14px}
.instance-info small{color:var(--text-muted)}
.instances-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.instance-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.instance-card-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.instance-card-header h3{flex:1;font-size:14px;font-weight:600}
.instance-card-body{padding:16px}
.instance-card-footer{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface)}
.instance-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.qr-box{margin-top:12px;display:flex;justify-content:center}
.qr-img{max-width:200px;border-radius:8px;border:1px solid var(--border)}

/* ── Plan cards ── */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.plan-card{background:var(--white);border:2px solid var(--border);border-radius:var(--radius);
  padding:24px;text-align:center;position:relative;transition:.2s}
.plan-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.plan-card--current{border-color:var(--primary);background:#EBF3FF}
.plan-current-badge{position:absolute;top:-1px;right:-1px;background:var(--primary);
  color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:0 var(--radius) 0 var(--radius-sm)}
.plan-price-tag{font-size:28px;font-weight:800;color:var(--primary);margin:12px 0}
.plan-price-tag small{font-size:13px;font-weight:400;color:var(--text-muted)}
.plan-features{list-style:none;text-align:left;margin:16px 0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.plan-limits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.limit-item{text-align:center}
.limit-val{display:block;font-size:20px;font-weight:800;color:var(--primary)}
.limit-lbl{font-size:11px;color:var(--text-muted)}
.plan-current{padding:24px;text-align:center}
.plan-badge{display:inline-block;background:var(--primary);color:#fff;
  padding:6px 18px;border-radius:20px;font-weight:700;font-size:15px;margin-bottom:8px}
.plan-price{font-size:32px;font-weight:800;color:var(--primary)}
.plan-price span{font-size:14px;color:var(--text-muted);font-weight:400}

/* ── Limit bars ── */
.limit-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13px}
.limit-bar>span:first-child{width:100px;color:var(--text-muted)}
.limit-bar>span:last-child{width:80px;text-align:right;color:var(--text-muted)}
.bar-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;background:var(--primary);border-radius:3px;transition:.4s}

/* ── WhatsApp preview ── */
.whatsapp-preview{background:#ECE5DD;border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column;gap:8px}
.wp-bubble{background:var(--white);border-radius:0 8px 8px 8px;padding:8px 12px;
  font-size:13px;max-width:85%;box-shadow:var(--shadow-sm)}
.wp-bubble--bot{background:var(--white)}
.wp-bubble--user{background:#DCF8C6;align-self:flex-end;border-radius:8px 0 8px 8px}

/* ── Departments ── */
.dept-preview{padding:16px}
.dept-preview h3{margin-bottom:12px;font-size:14px;font-weight:600}

/* ── Empty state ── */
.empty-state{display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 24px;text-align:center;gap:12px}
.empty-icon{font-size:48px}
.empty-state h3{font-size:18px;font-weight:700}
.empty-state p{color:var(--text-muted)}

/* ── Actions ── */
.actions{display:flex;gap:6px;flex-wrap:wrap}

/* ── Menu mobile (gaveta) ── */
.menu-toggle{display:none;background:none;border:none;cursor:pointer;width:38px;height:38px;border-radius:8px;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;flex-shrink:0}
.menu-toggle:hover{background:var(--surface)}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.sidebar-backdrop{position:fixed;inset:0;top:var(--topbar-h);background:rgba(0,0,0,.45);z-index:250;display:none}
.sidebar-backdrop.show{display:block}
body.sidebar-open{overflow:hidden}

/* ── Responsive ── */
@media(max-width:768px){
  .app-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar-h) 1fr}
  .sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:240px;z-index:300;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 12px 40px rgba(0,0,0,.35);overflow-y:auto}
  .sidebar.open{transform:translateX(0)}
  .main-content{padding:16px}
  .menu-toggle{display:flex}
  .user-meta{display:none !important}
  .topbar-page{display:none}
  .imp-text{display:none}
  .tour-btn{display:none !important}
  .logo-text{display:none}
  .stack-mobile{grid-template-columns:1fr !important}
  .fin-alerts{grid-template-columns:1fr !important}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* ===== Sidebar colapsável (desktop) ===== */
.sidebar-collapse{background:none;border:none;width:100%;cursor:pointer;font:inherit;margin-top:auto}
.sb-collapse-arrow{transition:transform .2s ease}
@media(min-width:769px){
  .app-layout{transition:grid-template-columns .2s ease}
  html.sb-collapsed .app-layout{grid-template-columns:64px 1fr}
  html.sb-collapsed .sidebar .nav-item{justify-content:center;padding-left:0;padding-right:0;gap:0;position:relative}
  html.sb-collapsed .sidebar .nav-item>span:not(.nav-icon){display:none}
  html.sb-collapsed .sb-collapse-arrow{transform:rotate(180deg)}
  html.sb-collapsed .sidebar .nav-item:hover::after{content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#0f172a;color:#fff;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;z-index:400;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.3)}
}
@media(max-width:768px){.sidebar-collapse{display:none}}