/* =========================================================
   Secure-VPN Analytics UI v5.1
   Presentation-only layer — no API/JS logic
   ========================================================= */

.analytics-page{
  width:min(1460px,calc(100% - 48px));
  margin:0 auto;
  padding:42px 0 72px;
  color:#e9f4ff;
}

.analytics-page *{
  box-sizing:border-box;
}


/* ---------- HEADER ---------- */

.topbar{
  min-height:74px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 28px;
}

.topbar .brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:210px;
  text-decoration:none;
}

.topbar .brand-mark-wrap{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:11px;
}

.topbar .brand-mark{
  display:block;
  width:42px !important;
  height:42px !important;
  max-width:42px !important;
  object-fit:cover;
}

.topbar .brand>span:last-child{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.topbar .brand b{
  font-size:16px;
  white-space:nowrap;
}

.topbar .brand small{
  margin-top:4px;
  font-size:9px;
  white-space:nowrap;
}

.topbar .nav{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  min-width:0;
}

.topbar .worker-health{
  flex:0 0 auto;
  min-width:220px;
  max-width:260px;
  display:grid;
  grid-template-columns:8px max-content;
  grid-template-areas:
    "dot state"
    ". time";
  justify-content:end;
  align-items:center;
  column-gap:8px;
  row-gap:2px;
  text-align:right;
}

.topbar .worker-health>i{
  grid-area:dot;
  position:static !important;
  width:8px;
  height:8px;
  margin:0;
}

.topbar .worker-health>span{
  grid-area:state;
  white-space:nowrap;
  font-size:11px;
}

.topbar .worker-health>small{
  grid-area:time;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
  white-space:nowrap;
  color:#607d94;
  font-size:9px;
}


/* ---------- HERO ---------- */

.analytics-hero-suite{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) auto;
  align-items:center;
  gap:35px;
  min-height:270px;
  padding:45px 46px !important;
  overflow:hidden;
  border:1px solid rgba(90,142,184,.25) !important;
  border-radius:22px !important;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(51,220,213,.12),
      transparent 37%
    ),
    linear-gradient(
      145deg,
      rgba(14,35,55,.97),
      rgba(7,20,34,.98)
    ) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.20);
}

.analytics-hero-suite:after{
  content:"";
  position:absolute;
  width:410px;
  height:410px;
  right:-190px;
  top:-250px;
  border-radius:50%;
  background:rgba(62,231,221,.08);
  filter:blur(15px);
  pointer-events:none;
}

.suite-kicker{
  margin-bottom:12px;
  color:#68e6e0 !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.analytics-hero-suite h1{
  max-width:880px;
  margin:0;
  color:#eef8ff;
  font-size:clamp(38px,4.2vw,62px);
  line-height:1.04;
  letter-spacing:-.045em;
}

.analytics-hero-suite p{
  max-width:850px;
  margin:20px 0 0;
  color:#9fb6c9;
  font-size:15px;
  line-height:1.7;
}

.analytics-hero-badge{
  position:relative;
  z-index:1;
  max-width:240px;
  padding:11px 14px !important;
  border:1px solid rgba(84,226,216,.25) !important;
  border-radius:999px !important;
  background:rgba(8,31,45,.7) !important;
  color:#76eae3 !important;
  font-size:10px !important;
  font-weight:800;
  text-align:center;
}


/* ---------- ANALYTICS NAV ---------- */

.analytics-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:17px 0;
  padding:8px;
  border:1px solid rgba(75,124,159,.22);
  border-radius:13px;
  background:#081824;
}

.analytics-subnav a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:8px;
  color:#7f9aae;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  transition:.15s ease;
}

.analytics-subnav a:hover{
  color:#d5f6f3;
  background:#0c2434;
}

.analytics-subnav a.active{
  color:#75eee7;
  background:#103046;
  box-shadow:inset 0 0 0 1px rgba(61,219,210,.17);
}


/* ---------- HOME HUB ---------- */

.analytics-hub-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}

.hub-card{
  position:relative;
  display:block;
  min-height:270px;
  padding:26px !important;
  overflow:hidden;
  border:1px solid rgba(85,137,173,.24) !important;
  border-radius:17px !important;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(53,218,210,.08),
      transparent 42%
    ),
    #091b29 !important;
  color:inherit;
  text-decoration:none;
  transition:.18s ease;
}

.hub-card:hover{
  transform:translateY(-2px);
  border-color:rgba(74,225,216,.45) !important;
}

.hub-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:24px;
  border:1px solid #1c4057;
  border-radius:12px;
  background:#0d2b3d;
  color:#70e9e2;
  font-size:22px;
}

.hub-card h2{
  margin:0;
  font-size:23px;
  letter-spacing:-.025em;
}

.hub-card p{
  max-width:620px;
  margin:12px 0 18px;
  color:#7894a9;
  font-size:12px;
  line-height:1.65;
}

.hub-card strong{
  color:#68e5df;
  font-size:11px;
}

.hub-card small{
  display:block;
  margin-top:18px;
  color:#56738a;
  font-size:10px;
  line-height:1.5;
}


/* ---------- COMMON CARDS ---------- */

.suite-card,
.suite-controls,
.suite-stat{
  border:1px solid rgba(85,137,173,.24) !important;
  background:
    linear-gradient(
      145deg,
      rgba(13,33,51,.96),
      rgba(7,20,34,.98)
    ) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.suite-card{
  margin-top:17px;
  padding:25px !important;
  border-radius:18px !important;
}

.suite-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin-bottom:20px;
}

.suite-head h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.025em;
}

.suite-head p{
  max-width:780px;
  margin:8px 0 0;
  color:#7793a9;
  font-size:12px;
  line-height:1.6;
}

.qc-pill{
  flex:0 0 auto;
  padding:6px 9px !important;
  border:1px solid rgba(62,222,150,.26) !important;
  border-radius:999px !important;
  background:rgba(27,121,77,.16) !important;
  color:#61eca5 !important;
  font-size:9px !important;
  font-weight:900;
}


/* ---------- CONTROLS ---------- */

.suite-controls{
  display:grid !important;
  grid-template-columns:
    repeat(auto-fit,minmax(170px,1fr)) !important;
  gap:12px !important;
  align-items:end !important;
  margin-top:0 !important;
  padding:18px !important;
  border-radius:15px !important;
}

.suite-controls label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#7f9aaf;
  font-size:10px;
  font-weight:700;
}

.suite-controls select{
  width:100%;
  min-height:43px;
  padding:0 38px 0 12px;
  border:1px solid #1d3c54 !important;
  border-radius:9px !important;
  outline:none;
  background:#071724 !important;
  color:#e3f0fa !important;
  font:inherit;
}

.suite-controls select:focus{
  border-color:#3bded7 !important;
  box-shadow:0 0 0 3px rgba(59,222,215,.08);
}

.update-btn{
  min-height:43px !important;
  padding:0 18px !important;
  border:1px solid rgba(64,225,217,.52) !important;
  border-radius:9px !important;
  background:
    linear-gradient(180deg,#153e54,#102f43) !important;
  color:#c9fffb !important;
  font-weight:800 !important;
  cursor:pointer;
}

.update-btn:hover{
  border-color:#65eee7 !important;
}

.update-btn:disabled{
  opacity:.6;
  cursor:wait;
}


/* ---------- WARNINGS ---------- */

.suite-warning{
  margin:14px 0 0;
  padding:14px 16px !important;
  border:1px solid rgba(255,181,75,.34) !important;
  border-radius:11px !important;
  background:rgba(108,68,17,.2) !important;
  color:#ffd89d !important;
  font-size:11px;
}


/* ---------- STATS ---------- */

.suite-stat-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:12px !important;
  margin:16px 0 0 !important;
}

.suite-stat{
  min-height:125px;
  padding:20px !important;
  border-radius:15px !important;
}

.suite-stat small{
  color:#708da3 !important;
  font-size:10px !important;
}

.suite-stat strong{
  display:block;
  margin:8px 0 7px;
  color:#edf7ff;
  font-size:23px;
  line-height:1.15;
  letter-spacing:-.03em;
}

.suite-stat span{
  color:#5d7a90 !important;
  font-size:10px !important;
  line-height:1.5;
}


/* ---------- TABLES ---------- */

.suite-table-scroll{
  overflow:auto;
  border-radius:11px;
}

.suite-table{
  width:100%;
  border-collapse:collapse;
}

.suite-table th{
  padding:11px 12px !important;
  border-bottom:1px solid #1a394f !important;
  color:#6f8da4 !important;
  text-align:left;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.suite-table td{
  padding:14px 12px !important;
  border-bottom:1px solid rgba(36,68,91,.52) !important;
  color:#abc0cf !important;
  font-size:11px !important;
}

.suite-table tbody tr:hover{
  background:rgba(27,69,91,.13);
}


/* ---------- CHART ---------- */

.chart-wrap{
  min-height:380px;
  padding:12px;
  border:1px solid #18374d;
  border-radius:12px;
  background:#071824;
}

.chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:9px 14px;
  margin-top:15px;
}


/* ---------- CONSISTENCY ---------- */

.consistency-list{
  display:grid;
  gap:12px;
}

.suite-note{
  padding:14px;
  border:1px solid #19374d;
  border-radius:10px;
  background:#071824;
  color:#7b97aa;
  font-size:11px;
  line-height:1.6;
}


/* ---------- GEOGRAPHY ---------- */

.geo-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;
}

.geo-summary-grid>*{
  border-radius:12px;
}


/* ---------- HOME METHOD NOTE ---------- */

.analytics-page>.suite-card:last-of-type .suite-note{
  border-color:rgba(59,216,206,.18);
  background:
    linear-gradient(
      90deg,
      rgba(17,57,72,.42),
      rgba(7,24,36,.7)
    );
}


/* ---------- RESPONSIVE ---------- */

@media(max-width:1100px){

  .topbar{
    gap:14px;
    padding-left:18px;
    padding-right:18px;
  }

  .topbar .brand{
    min-width:auto;
  }

  .topbar .brand small,
  .topbar .worker-health{
    display:none;
  }

  .analytics-hero-suite{
    grid-template-columns:1fr;
  }

  .analytics-hero-badge{
    width:max-content;
    max-width:100%;
  }

  .suite-stat-grid{
    grid-template-columns:1fr 1fr !important;
  }

}


@media(max-width:720px){

  .analytics-page{
    width:min(100% - 24px,1460px);
    padding-top:20px;
  }

  .analytics-hero-suite{
    min-height:auto;
    padding:27px 22px !important;
  }

  .analytics-hero-suite h1{
    font-size:38px;
  }

  .analytics-hub-grid{
    grid-template-columns:1fr;
  }

  .suite-stat-grid{
    grid-template-columns:1fr !important;
  }

  .suite-head{
    display:block;
  }

  .qc-pill{
    display:inline-flex;
    margin-top:12px;
  }

}