/* COMPACTNETWORK UI layer v2: shared professional styling for legacy modules. */
:root{
  --cnx-bg:#f4f7fb;
  --cnx-surface:#ffffff;
  --cnx-surface-2:#f8fafc;
  --cnx-border:#d9e2ee;
  --cnx-text:#111827;
  --cnx-muted:#667085;
  --cnx-blue:#1f6feb;
  --cnx-blue-2:#1554b7;
  --cnx-teal:#0f766e;
  --cnx-red:#d92d20;
  --cnx-amber:#b54708;
  --cnx-green:#15803d;
  --cnx-shadow:0 16px 38px rgba(16,24,40,.07);
  --cnx-radius:8px;
  --cnx-font:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

html{background:var(--cnx-bg)}
body{
  font-family:var(--cnx-font) !important;
  background:
    linear-gradient(180deg,#f8fafc 0,#f3f6fa 48%,#eef3f8 100%) !important;
  color:var(--cnx-text) !important;
  letter-spacing:0 !important;
}

a{text-decoration:none}
.wrap,.container{
  width:min(1420px,calc(100% - 28px)) !important;
  max-width:1420px !important;
  margin:0 auto !important;
  padding:20px 0 32px !important;
}

.top,.topbar{
  min-height:64px;
  padding:12px 14px !important;
  margin-bottom:14px !important;
  border:1px solid var(--cnx-border);
  border-radius:var(--cnx-radius);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 26px rgba(16,24,40,.05);
  backdrop-filter:saturate(150%) blur(8px);
}

.brand{gap:12px !important}
.logo,.brand-badge{
  width:42px !important;
  height:42px !important;
  border-radius:8px !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.10)),
    linear-gradient(135deg,var(--cnx-blue),var(--cnx-teal)) !important;
  box-shadow:0 12px 24px rgba(31,111,235,.16) !important;
}

.h1,.brand-title,.card-title{
  color:#101828 !important;
  font-weight:680 !important;
  letter-spacing:0 !important;
}

.h1{font-size:16px !important}
.sub,.brand-sub,.card-desc,.muted{
  color:var(--cnx-muted) !important;
  font-weight:450 !important;
  line-height:1.5 !important;
}

.bar,.actions,.row-actions,.filterBar{
  display:flex;
  gap:8px !important;
  flex-wrap:wrap;
  align-items:center;
}

.pill,.badge,.btn2,.btn,.button,button,
input[type="submit"],input[type="button"]{
  border-radius:999px !important;
  min-height:34px;
  border:1px solid var(--cnx-border) !important;
  font-weight:620 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}

.pill,.badge,.btn2{
  background:#fff !important;
  color:#344054 !important;
}

.btn,button,input[type="submit"]{
  background:linear-gradient(135deg,var(--cnx-blue),var(--cnx-blue-2)) !important;
  color:#fff !important;
  border-color:rgba(31,111,235,.22) !important;
}

.btn2:hover,.pill:hover,.badge:hover{
  background:#f8fafc !important;
  border-color:#b9c7d9 !important;
}

.btn:hover,button:hover,input[type="submit"]:hover{
  filter:brightness(.98);
}

.card,.panel,.list{
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--cnx-border) !important;
  border-radius:var(--cnx-radius) !important;
  box-shadow:var(--cnx-shadow) !important;
}

.card{
  padding:16px !important;
}

.grid,.grid2{
  gap:12px !important;
}

.hr,hr.sep{
  height:1px !important;
  border:0 !important;
  background:#e8eef6 !important;
  margin:14px 0 !important;
}

.kpis{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
  gap:10px !important;
}

.kpi,.stat{
  border:1px solid #e6edf6 !important;
  border-radius:var(--cnx-radius) !important;
  background:linear-gradient(180deg,#fff,#fbfdff) !important;
  box-shadow:0 8px 18px rgba(16,24,40,.04) !important;
  padding:14px !important;
}

.kpi .k,.stat .t{
  color:var(--cnx-muted) !important;
  font-weight:650 !important;
  text-transform:uppercase;
  letter-spacing:.035em !important;
}

.kpi .v,.stat .n{
  color:#101828 !important;
  font-weight:680 !important;
  letter-spacing:0 !important;
}

.table,table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden;
  border:1px solid #e3eaf3 !important;
  border-radius:var(--cnx-radius) !important;
  background:#fff !important;
}

.table th,table th{
  background:#f8fafc !important;
  color:#667085 !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.035em !important;
  border-bottom:1px solid #e6edf6 !important;
}

.table td,table td{
  color:#1f2937 !important;
  border-bottom:1px solid #edf2f7 !important;
  vertical-align:middle !important;
}

.table tr:hover td,table tr:hover td{
  background:#fbfdff !important;
}

.field label,label{
  color:#344054 !important;
  font-weight:620 !important;
  letter-spacing:0 !important;
}

.field input,.field select,.field textarea,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select,textarea{
  border:1px solid var(--cnx-border) !important;
  border-radius:var(--cnx-radius) !important;
  background:#fff !important;
  color:#111827 !important;
  box-shadow:none !important;
}

.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:#9dc3ff !important;
  box-shadow:0 0 0 4px rgba(31,111,235,.11) !important;
}

.msg{
  border-radius:var(--cnx-radius) !important;
  border:1px solid var(--cnx-border) !important;
  background:#fff !important;
  color:#344054 !important;
  box-shadow:0 8px 18px rgba(16,24,40,.04) !important;
  font-weight:580 !important;
}

.msg.ok{border-color:#bbf7d0 !important;background:#f0fdf4 !important;color:#166534 !important}
.msg.err{border-color:#fecaca !important;background:#fff1f2 !important;color:#991b1b !important}

.bad,.tag{
  border-radius:999px !important;
  min-height:24px;
  padding:5px 9px !important;
  font-size:11.2px !important;
  font-weight:700 !important;
  border:1px solid #d0d9e5 !important;
  background:#f8fafc !important;
  color:#344054 !important;
}
.bad.r,.tag.red,.tag.bad{background:#fff1f2 !important;border-color:#fecaca !important;color:#991b1b !important}
.bad.y,.tag.amber{background:#fffbeb !important;border-color:#fde68a !important;color:#92400e !important}
.bad.g,.bad.a,.tag.green,.tag.ok{background:#f0fdf4 !important;border-color:#bbf7d0 !important;color:#166534 !important}
.bad.n,.tag.blue{background:#eff6ff !important;border-color:#bfdbfe !important;color:#1d4ed8 !important}

.mono{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

@media(max-width:900px){
  .wrap,.container{width:min(100% - 20px,1420px) !important;padding-top:12px !important}
  .top,.topbar{align-items:flex-start !important}
  .table,table{display:block;overflow-x:auto;white-space:nowrap}
}