/* ───────────────────────────────────────────────────────────────
   CondFace — App design system (minimal clean)
   Moldura (sidebar rail + topbar + content), componentes do design e
   overrides que re-skin os componentes Bootstrap/Tabler para os tokens.
   Depende de tokens.css.
   ─────────────────────────────────────────────────────────────── */

/* ── Base ─────────────────────────────────────────────── */
body{
  font-family:var(--f);
  font-size:14px;
  color:var(--tx1);
  background:var(--pg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:700;line-height:1.2;letter-spacing:-.3px;}
a{text-decoration:none;}

/* ── App shell ────────────────────────────────────────── */
.cf-app{display:flex;min-height:100vh;background:var(--pg);}

/* ── Sidebar rail ─────────────────────────────────────── */
.cf-sidebar{
  width:var(--sb-w);flex-shrink:0;
  background:var(--sb);
  display:flex;flex-direction:column;align-items:center;
  padding:16px 0 20px;gap:2px;
  border-right:1px solid var(--sb-border);
  position:fixed;top:0;left:0;bottom:0;z-index:1030;
  overflow-y:auto;
}
.cf-sidebar::-webkit-scrollbar{width:0;}
.cf-logo{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;flex-shrink:0;
}
.cf-logo i{font-size:19px;color:#fff;}
.cf-group{display:flex;flex-direction:column;gap:1px;width:100%;padding:0 10px;align-items:center;}
.cf-sep{width:28px;height:1px;background:rgba(255,255,255,.07);margin:8px auto;}
.cf-btn{
  width:48px;height:44px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;color:rgba(255,255,255,.4);
  transition:all .15s;position:relative;gap:3px;
}
.cf-btn i{font-size:19px;transition:color .15s;}
.cf-btn span{font-size:9px;font-weight:500;letter-spacing:.2px;opacity:.7;text-align:center;line-height:1;}
.cf-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);}
.cf-btn.on{background:rgba(79,142,247,.15);color:var(--accent);}
.cf-btn.on i{color:var(--accent);}
.cf-btn.on span{opacity:1;}
.cf-notif{
  position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--danger);border:1.5px solid var(--sb);
}
.cf-user{
  margin-top:auto;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;cursor:pointer;
}

/* ── Main column ──────────────────────────────────────── */
.cf-main{flex:1;display:flex;flex-direction:column;min-width:0;margin-left:var(--sb-w);}

/* ── Topbar ───────────────────────────────────────────── */
.cf-topbar{
  height:var(--top-h);flex-shrink:0;
  display:flex;align-items:center;gap:12px;
  padding:0 20px;background:var(--surf);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1020;
}
.cf-bc{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.cf-bc-item{font-size:13px;color:var(--tx4);font-weight:500;}
.cf-bc-item.active{color:var(--tx1);font-weight:600;}
.cf-bc-sep{color:var(--tx4);font-size:13px;}
.cf-top-right{display:flex;align-items:center;gap:8px;}
.cf-search{
  display:flex;align-items:center;gap:8px;
  background:var(--surf2);border:1px solid var(--border);
  border-radius:8px;padding:6px 12px;font-size:13px;width:220px;
}
.cf-search i{font-size:15px;color:var(--tx4);}
.cf-search input{border:none;background:transparent;outline:none;color:var(--tx1);font-family:var(--f);font-size:13px;width:100%;}
.cf-search input::placeholder{color:var(--tx4);}
.cf-icon-btn{
  width:34px;height:34px;border-radius:8px;
  background:var(--surf2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;position:relative;color:var(--tx3);
}
.cf-icon-btn:hover{background:var(--surf3);}
.cf-icon-btn i{font-size:17px;}
.cf-notif-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;background:var(--danger);border-radius:50%;border:1.5px solid var(--surf);}
.cf-dm{
  display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;
  border:1px solid var(--border);cursor:pointer;transition:all .15s;
  font-size:12px;font-weight:500;color:var(--tx3);background:transparent;
}
.cf-dm:hover{background:var(--surf2);}
.cf-dm-track{width:32px;height:18px;border-radius:18px;background:var(--surf3);border:1px solid var(--border);position:relative;transition:background .2s;}
.cf-dm-thumb{width:12px;height:12px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.15);}
[data-bs-theme="dark"] .cf-dm-track{background:var(--accent);}
[data-bs-theme="dark"] .cf-dm-thumb{left:16px;}

/* ── Content ──────────────────────────────────────────── */
.cf-content{flex:1;padding:24px 28px;}
.cf-content-inner{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:20px;}

/* ── Page header ──────────────────────────────────────── */
.page-title{font-size:22px;font-weight:700;color:var(--tx1);letter-spacing:-.4px;}
.page-subtitle{font-size:13px;color:var(--tx3);margin-top:3px;}

/* ── Pills (status) ───────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:600;}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;}
.pill.ok{background:var(--ok-bg);color:var(--ok-c);}
.pill.warn{background:var(--wn-bg);color:var(--wn-c);}
.pill.err{background:var(--er-bg);color:var(--er-c);}
.pill.info{background:var(--bl-bg);color:var(--bl-c);}
.pill.pu{background:var(--pu-bg);color:var(--pu-c);}
.pill.mut{background:var(--surf3);color:var(--tx3);}
.pill.no-dot::before{display:none;}
.pill i{font-size:12px;}

/* ── Stat cards ───────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.stat-card{background:var(--surf);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;align-items:flex-start;justify-content:space-between;transition:all .2s;}
.stat-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.04);}
.stat-left{display:flex;flex-direction:column;gap:6px;}
.stat-label{font-size:12px;font-weight:500;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;}
.stat-value{font-size:28px;font-weight:700;color:var(--tx1);letter-spacing:-1px;line-height:1;}
.stat-trend{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--ok);}
.stat-trend.warn{color:var(--warn);}
.stat-trend.muted{color:var(--tx3);}
.stat-trend i{font-size:13px;}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.si-bl{background:var(--bl-bg);color:var(--accent);}
.si-gr{background:var(--ok-bg);color:var(--ok);}
.si-wn{background:var(--wn-bg);color:var(--warn);}
.si-pu{background:var(--pu-bg);color:var(--accent2);}
.si-er{background:var(--er-bg);color:var(--danger);}

/* ── Activity / mini-device / progress ────────────────── */
.activity-row{display:flex;align-items:flex-start;gap:12px;padding:13px 20px;border-bottom:1px solid var(--border);}
.activity-row:last-child{border-bottom:none;}
.act-icon{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.act-icon.ok{background:var(--ok-bg);} .act-icon.ok i{color:var(--ok);font-size:16px;}
.act-icon.info{background:var(--bl-bg);} .act-icon.info i{color:var(--accent);font-size:16px;}
.act-icon.err{background:var(--er-bg);} .act-icon.err i{color:var(--danger);font-size:16px;}
.act-icon.warn{background:var(--wn-bg);} .act-icon.warn i{color:var(--warn);font-size:16px;}
.act-icon.pu{background:var(--pu-bg);} .act-icon.pu i{color:var(--accent2);font-size:16px;}
.act-main{font-size:13px;font-weight:500;color:var(--tx1);}
.act-sub{font-size:12px;color:var(--tx3);margin-top:2px;}
.act-time{font-size:11px;color:var(--tx4);flex-shrink:0;padding-top:2px;margin-left:auto;}
.progress-bar-cf{height:4px;border-radius:4px;background:var(--surf3);overflow:hidden;margin-top:4px;}
.progress-fill{height:100%;border-radius:4px;background:var(--accent);}
.progress-fill.ok{background:var(--ok);}
.progress-fill.warn{background:var(--warn);}

/* ── Device cards ─────────────────────────────────────── */
.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.device-card{background:var(--surf);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s;}
.device-card:hover{border-color:var(--border2);box-shadow:0 4px 16px rgba(0,0,0,.04);}
.dc-header{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;}
.dc-icon{width:42px;height:42px;border-radius:11px;background:var(--bl-bg);display:flex;align-items:center;justify-content:center;}
.dc-icon i{font-size:21px;color:var(--accent);}
.online-badge{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;}
.online-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;display:block;}
.online-badge.on{color:var(--ok);}
.online-badge.off{color:var(--danger);}

/* ── Empty state ──────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:10px;}
.empty-state i{font-size:40px;color:var(--tx4);}
.empty-state p{font-size:14px;color:var(--tx3);}

/* ── Section divider ──────────────────────────────────── */
.section-divider{display:flex;align-items:center;gap:12px;margin:4px 0;}
.section-divider-label{font-size:11px;font-weight:600;color:var(--tx4);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;}
.section-divider-line{flex:1;height:1px;background:var(--border);}

/* ═══════════════════════════════════════════════════════
   OVERRIDES Bootstrap/Tabler → tokens
   ═══════════════════════════════════════════════════════ */
.card{
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:none;
}
.card:hover{border-color:var(--border2);}
.card-header{
  background:transparent;border-bottom:1px solid var(--border);
  padding:16px 20px;font-weight:600;color:var(--tx1);
}
.card-body{padding:20px;}
.card-footer{background:transparent;border-top:1px solid var(--border);}

.btn{border-radius:8px;font-weight:600;font-size:13px;font-family:var(--f);}
.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:#3d78db;--bs-btn-hover-border-color:#3d78db;--bs-btn-color:#fff;--bs-btn-hover-color:#fff;}
.btn-ghost-secondary,.btn-secondary,.btn-outline-secondary{
  --bs-btn-bg:var(--surf2);--bs-btn-border-color:var(--border);--bs-btn-color:var(--tx2);
  --bs-btn-hover-bg:var(--surf3);--bs-btn-hover-border-color:var(--border2);--bs-btn-hover-color:var(--tx1);
}

.table{--bs-table-bg:transparent;--bs-table-color:var(--tx1);color:var(--tx1);margin-bottom:0;}
.table thead th{
  font-size:11px;font-weight:600;color:var(--tx4);text-transform:uppercase;letter-spacing:.6px;
  padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surf2);
}
.table tbody td{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;}
.table tbody tr:hover{background:var(--surf2);}

.form-control,.form-select{
  background:var(--surf);border:1px solid var(--border);color:var(--tx1);
  border-radius:8px;font-family:var(--f);font-size:13px;
}
.form-control:focus,.form-select:focus{
  background:var(--surf);border-color:var(--accent);color:var(--tx1);
  box-shadow:0 0 0 3px rgba(79,142,247,.15);
}
.form-control::placeholder{color:var(--tx4);}
.form-label{font-size:13px;font-weight:500;color:var(--tx2);}
.input-group-text{background:var(--surf2);border-color:var(--border);color:var(--tx4);}

.alert{border-radius:10px;border:1px solid var(--border);}
.alert-danger{background:var(--er-bg);color:var(--er-c);border-color:rgba(242,95,92,.2);}
.alert-success{background:var(--ok-bg);color:var(--ok-c);border-color:rgba(34,211,160,.2);}
.alert-warning{background:var(--wn-bg);color:var(--wn-c);border-color:rgba(245,158,11,.2);}

.dropdown-menu{background:var(--surf);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.10);}
.dropdown-item{color:var(--tx2);}
.dropdown-item:hover{background:var(--surf2);color:var(--tx1);}
.dropdown-divider{border-color:var(--border);}

.modal-content{background:var(--surf);border:1px solid var(--border);border-radius:14px;}
.modal-header,.modal-footer{border-color:var(--border);}

.list-group{--bs-list-group-bg:transparent;--bs-list-group-border-color:var(--border);--bs-list-group-color:var(--tx1);--bs-list-group-action-color:var(--tx2);--bs-list-group-action-hover-bg:var(--surf2);--bs-list-group-action-hover-color:var(--tx1);}
.list-group-item{padding:13px 16px;font-size:13px;}

.progress{background:var(--surf3);border-radius:6px;}
.progress-bar{background:var(--accent);}

code{font-family:var(--fm);font-size:.85em;color:var(--accent2);background:var(--surf3);padding:1px 5px;border-radius:5px;}

.badge{font-weight:600;border-radius:6px;}
.text-muted{color:var(--tx3)!important;}
.text-purple{color:var(--accent2)!important;}
.bg-purple{background:var(--accent2)!important;}
.btn-purple{--bs-btn-bg:var(--accent2);--bs-btn-border-color:var(--accent2);--bs-btn-hover-bg:#6a4ce0;--bs-btn-hover-border-color:#6a4ce0;--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#6a4ce0;}
.btn-outline-purple{--bs-btn-color:var(--accent2);--bs-btn-border-color:var(--accent2);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--accent2);--bs-btn-hover-border-color:var(--accent2);--bs-btn-active-bg:var(--accent2);--bs-btn-active-color:#fff;}
.btn-outline-primary{--bs-btn-color:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--accent);--bs-btn-hover-border-color:var(--accent);}

/* avatares utilitários usados em listas */
.avatar.rounded,.avatar-sm.rounded{border-radius:9px!important;}

/* ── Toasts ───────────────────────────────────────────── */
.cf-toast-wrap{position:fixed;top:16px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:8px;}
.cf-toast{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:10px;font-size:13px;font-weight:500;color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.18);min-width:260px;
  animation:cf-toast-in .2s ease;
}
.cf-toast.ok{background:var(--ok);}
.cf-toast.err{background:var(--danger);}
.cf-toast i{font-size:17px;}
.cf-toast .cf-toast-x{margin-left:auto;cursor:pointer;opacity:.8;}
@keyframes cf-toast-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px;}

/* ── Sidebar expansível (somente desktop) ─────────────── */
.cf-side-head{
  display:flex;flex-direction:column;align-items:center;
  width:100%;gap:10px;margin-bottom:14px;padding:0 10px;
}
.cf-logo{margin-bottom:0;}                 /* o head cuida do espaçamento */
.cf-brand{
  display:none;font-weight:700;font-size:16px;color:#fff;
  letter-spacing:-.3px;white-space:nowrap;
}
@media(min-width:992px){
  .cf-sidebar{transition:width .18s ease;}
  .cf-main{transition:margin-left .18s ease;}

  /* o logo é o gatilho da expansão no desktop */
  .cf-logo{cursor:pointer;transition:filter .15s,box-shadow .15s;}
  .cf-logo:hover{filter:brightness(1.12);box-shadow:0 0 0 3px rgba(255,255,255,.10);}

  html.nav-expanded{--sb-w:222px;}
  html.nav-expanded .cf-sidebar{align-items:stretch;}
  html.nav-expanded .cf-side-head{flex-direction:row;align-items:center;gap:10px;}
  html.nav-expanded .cf-brand{display:block;flex:1;}

  html.nav-expanded .cf-group{align-items:stretch;}
  html.nav-expanded .cf-sep{width:auto;margin:8px 14px;}

  html.nav-expanded .cf-btn{
    flex-direction:row;width:100%;height:42px;
    justify-content:flex-start;gap:12px;padding:0 14px;
  }
  html.nav-expanded .cf-btn span{display:none;}        /* esconde label abreviado */
  html.nav-expanded .cf-btn::after{
    content:attr(title);font-size:13px;font-weight:500;
    white-space:nowrap;opacity:.95;
  }
  html.nav-expanded .cf-btn .cf-notif{top:9px;right:auto;left:30px;}

  html.nav-expanded .cf-user{align-self:flex-start;margin-left:14px;}
}

/* ── Responsivo ───────────────────────────────────────── */
@media(max-width:991px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .cf-search{display:none;}
}
@media(max-width:640px){
  .stats-grid{grid-template-columns:1fr;}
  .cf-content{padding:16px;}
}