/* === Reset & Base === */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
:root{
  --bg:#0b1220;
  --bg2:#0f172a;
  --panel:#111a2e;
  --panel2:#162038;
  --border:#1f2a44;
  --text:#e6edf7;
  --muted:#8aa0c2;
  --accent:#22d3ee;
  --accent2:#6366f1;
  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;
  --radius:12px;
  --sidebar-w:250px;
}
html,body{ height:100%; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, #0b1220 0%, #0f172a 100%);
  color: var(--text);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{ color: var(--accent); text-decoration: none; }
a:hover{ filter: brightness(1.1); }

/* === Layout === */
.layout{ display:flex; min-height:100vh; }

/* === Sidebar === */
.sidebar{
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
}
.sidebar .brand{
  padding: 22px 22px 18px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border);
}
.sidebar .brand .logo{
  width:36px; height:36px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#0b1220; font-size:18px;
}
.sidebar .brand .name{ font-weight:700; font-size:15px; letter-spacing:0.3px; }
.sidebar .brand .name small{ display:block; font-weight:400; color:var(--muted); font-size:11px; }

.sidebar nav{ flex:1; overflow-y:auto; padding: 14px 10px; }
.nav-group{ margin-bottom: 14px; }
.nav-group .label{
  padding: 8px 12px; font-size:11px; text-transform:uppercase;
  letter-spacing:1.2px; color: var(--muted); font-weight:600;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; margin: 2px 0;
  border-radius: 10px;
  color: #c8d4e6; font-weight:500;
  transition: all .15s ease;
}
.nav-item:hover{ background: var(--panel2); color: #fff; }
.nav-item.active{
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(99,102,241,.08));
  color:#fff;
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item .ico{ width:18px; text-align:center; opacity:.9; }

.sidebar .footer{
  padding: 14px 18px; border-top:1px solid var(--border);
  font-size: 11px; color: var(--muted);
}
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--success); margin-right:6px;}
.dot.off{ background: var(--danger); }

/* === Main === */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
  height:60px;
  background: rgba(15,23,42,.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 24px; position: sticky; top:0; z-index: 10;
}
.topbar h1{ font-size: 16px; font-weight:600; }
.topbar .actions{ display:flex; gap:8px; align-items:center;}

.content{ padding: 28px; flex:1; }
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; flex-wrap:wrap; gap:12px;}
.page-head h2{ font-size:22px; font-weight:700; }
.page-head .sub{ color: var(--muted); margin-top:4px; font-size:13px; }

/* === Cards === */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}
.card .card-title{
  font-size: 13px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color: var(--muted); margin-bottom: 14px;
  display:flex; align-items:center; gap:10px;
}

/* === Forms === */
.form-row{ margin-bottom: 14px; }
.form-row label{
  display:block; font-size:12px; font-weight:600;
  color: var(--muted); margin-bottom:6px;
  text-transform: uppercase; letter-spacing:.6px;
}
.form-row input, .form-row select, .form-row textarea{
  width:100%;
  background: var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:11px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: all .15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}

/* === Selects globais — fix do visual nativo feio === */
select, .sel-dark{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2322d3ee' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 36px 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
select:hover, .sel-dark:hover{ border-color: var(--accent); }
select:focus, .sel-dark:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}
select option, .sel-dark option{
  background: var(--panel);
  color: var(--text);
  padding: 8px;
}
/* Input standalone (fora de .form-row) */
input.sel-dark, input[type=text].dark-input, input[type=number].dark-input, input[type=password].dark-input{
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.form-row textarea{ min-height: 110px; resize: vertical; font-family: "Cascadia Code", "Consolas", monospace; }
.form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
.form-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.help{ font-size:12px; color: var(--muted); margin-top:4px; }

/* === Buttons === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--panel2); color: var(--text);
  border:1px solid var(--border);
  padding: 10px 16px; border-radius:8px;
  font-weight:600; font-size:13px; cursor:pointer;
  transition: all .15s;
  font-family: inherit;
}
.btn:hover{ background: var(--border); }
.btn-primary{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#0b1220; border-color: transparent;
}
.btn-primary:hover{ filter:brightness(1.1); }
.btn-danger{ background: rgba(239,68,68,.15); color:#fca5a5; border-color: rgba(239,68,68,.3);}
.btn-danger:hover{ background: rgba(239,68,68,.25); }
.btn-success{ background: rgba(16,185,129,.18); color:#6ee7b7; border-color: rgba(16,185,129,.3);}
.btn-warning{ background: rgba(245,158,11,.15); color:#fcd34d; border-color: rgba(245,158,11,.3);}
.btn-sm{ padding:6px 10px; font-size:12px; }
.btn-block{ width:100%; }

/* === Tables === */
.table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border);}
table.data{ width:100%; border-collapse: collapse; background:var(--panel); }
table.data th, table.data td{
  padding: 12px 14px; text-align:left;
  border-bottom: 1px solid var(--border);
  font-size:13px;
}
table.data th{
  background: var(--bg2); color: var(--muted);
  font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.8px;
}
table.data tr:hover td{ background: rgba(255,255,255,.02); }
table.data td.actions{ text-align:right; white-space:nowrap;}

.tabelas-toolbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.tabelas-data td{ vertical-align:middle; }
.table-row-recommended td{
  background: rgba(34,211,238,.035);
}
.modern-input{
  width:100%;
  background: var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 10px;
  color:var(--text);
  font:inherit;
}
.modern-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(34,211,238,.12);
}
.ios-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:86px;
  cursor:pointer;
  user-select:none;
}
.ios-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.ios-slider{
  width:44px;
  height:26px;
  border-radius:999px;
  background:#263149;
  border:1px solid var(--border);
  position:relative;
  transition:all .18s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.ios-slider::before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  left:2px;
  top:2px;
  border-radius:50%;
  background:#dbeafe;
  transition:transform .18s ease;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.ios-switch input:checked + .ios-slider{
  background:linear-gradient(90deg, var(--success), #22d3ee);
  border-color:rgba(16,185,129,.45);
}
.ios-switch input:checked + .ios-slider::before{
  transform:translateX(18px);
  background:#fff;
}
.ios-label{
  color:var(--text);
  font-weight:700;
  min-width:28px;
}
.autosave-state{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.autosave-state.saving{ color:var(--warning); }
.autosave-state.saved{ color:var(--success); }

.badge{
  display:inline-block; padding: 3px 9px; border-radius:99px;
  font-size:11px; font-weight:600;
}
.badge-success{ background: rgba(16,185,129,.18); color:#6ee7b7; }
.badge-danger{ background: rgba(239,68,68,.18); color:#fca5a5; }
.badge-warning{ background: rgba(245,158,11,.18); color:#fcd34d; }
.badge-info{ background: rgba(34,211,238,.18); color:#67e8f9; }
.badge-muted{ background: var(--bg2); color: var(--muted); border:1px solid var(--border);}

/* === Stats === */
.stats-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin-bottom: 22px; }
.stat{
  background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding:18px;
}
.stat .label{ font-size:12px; color: var(--muted); text-transform:uppercase; letter-spacing:.8px; font-weight:600; }
.stat .value{ font-size: 28px; font-weight:700; margin-top:8px; }
.stat .delta{ font-size:12px; color: var(--muted); margin-top:4px;}

/* === Alerts === */
.alert{ padding:12px 16px; border-radius:8px; margin-bottom:14px; border:1px solid;}
.alert-info{ background: rgba(34,211,238,.08); color:#67e8f9; border-color: rgba(34,211,238,.25);}
.alert-success{ background: rgba(16,185,129,.08); color:#6ee7b7; border-color: rgba(16,185,129,.25);}
.alert-warning{ background: rgba(245,158,11,.08); color:#fcd34d; border-color: rgba(245,158,11,.25);}
.alert-danger{ background: rgba(239,68,68,.08); color:#fca5a5; border-color: rgba(239,68,68,.25);}

/* === Toast === */
.toast-container{
  position: fixed; top:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px;
}
.toast{
  background: var(--panel); border:1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 12px 16px; min-width: 260px;
  box-shadow: 0 10px 25px rgba(0,0,0,.4);
  animation: slidein .3s ease;
}
.toast.success{ border-left-color: var(--success); }
.toast.danger{ border-left-color: var(--danger); }
.toast.warning{ border-left-color: var(--warning); }
@keyframes slidein{ from{ transform: translateX(100px); opacity:0;} to{ transform: translateX(0); opacity:1;} }

/* === Modal === */
.modal-bg{
  position:fixed; inset:0; background: rgba(0,0,0,.6); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-bg.open{ display:flex; }
.modal{
  background: var(--panel); border:1px solid var(--border);
  border-radius: 14px; max-width: 520px; width:100%;
  max-height: 90vh; overflow:auto;
}
.modal-head{ padding:18px 22px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.modal-head h3{ font-size:16px; font-weight:700;}
.modal-body{ padding:22px; }
.modal-foot{ padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end;}

/* === Chat / Conversas === */
.conversations-shell{
  display:grid;
  grid-template-columns:minmax(260px,300px) minmax(0,1fr);
  gap:16px;
  height:calc(100vh - 178px);
  min-height:520px;
}
.conversations-contacts,
.conversation-panel{
  margin:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.conversation-contact-list{
  overflow-y:auto;
  min-height:0;
  padding-right:4px;
}
.conversation-contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:8px;
  margin-bottom:6px;
  color:#e6edf7;
}
.conversation-contact:hover,
.conversation-contact.active{
  background:var(--panel2);
}
.conversation-contact-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.conversation-contact-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.conversation-contact-main small{
  color:var(--muted);
  font-size:11px;
}
.conversation-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.conversation-session-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}
.conversation-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.conversation-messages{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:18px 8px 2px 0;
  scroll-behavior:smooth;
}
.chat-list{ display:flex; flex-direction:column; gap:8px;}
.msg{
  max-width: 75%; padding:10px 14px; border-radius:12px; font-size:13px;
  line-height:1.45;
}
.msg.in{ background: var(--bg2); align-self:flex-start; border:1px solid var(--border);}
.msg.out{ background: linear-gradient(135deg, rgba(34,211,238,.3), rgba(99,102,241,.25)); align-self:flex-end; }
.msg .meta{ font-size:10px; color: var(--muted); margin-top:6px;}

/* === Utility === */
.text-muted{ color: var(--muted); }
.text-success{ color: var(--success); }
.text-danger{ color: var(--danger); }
.mb-0{ margin-bottom:0 !important;}
.mt-3{ margin-top: 14px;}
.mt-4{ margin-top: 22px;}
.flex{ display:flex; gap:10px; align-items:center;}
.flex-between{ display:flex; justify-content:space-between; align-items:center; gap:10px;}
.gap-2{ gap:8px;}
.empty-state{
  text-align:center; padding: 50px 20px; color: var(--muted);
}
.empty-state .ico{ font-size:48px; opacity:.4; margin-bottom:12px; }

/* === Code === */
code, pre{
  font-family: "Cascadia Code", "Consolas", monospace;
  background: var(--bg2); padding: 2px 6px; border-radius:4px; font-size:12px;
}
pre{ padding: 12px; overflow-x:auto; }

/* === Responsivo === */
@media (max-width: 900px){
  :root{ --sidebar-w: 70px; }
  .sidebar .brand .name, .nav-group .label, .nav-item span:not(.ico), .sidebar .footer { display: none; }
  .nav-item{ justify-content:center; }
  .conversations-shell{
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
  }
  .conversations-contacts{
    max-height:260px;
  }
  .conversation-panel{
    height:calc(100vh - 250px);
    min-height:460px;
  }
  .msg{ max-width:92%; }
}