/* Ineurofit theme — Performa Suite visual system.
   Tokens/components from performa_suite_style.css, plus Bootstrap compatibility.
   No global * reset so existing grid/spacing still works. */

:root{
  --bg:#0d0d0d;
  --bg2:#111111;
  --bg3:#1a1a1a;
  --bg4:#222222;
  --yellow:#FFD700;
  --blue:#00b4d8;
  --blue2:#0090b0;
  --border:#2a2a2a;
  --text:#f0f0f0;
  --muted:#888888;
  --danger:#e74c3c;
  --success:#27ae60;
  --warn:#f39c12;
  --focus:#008DED;
  --repulse:#00B496;
  --reflex:#7D44E9;
  --predictor:#9955B9;
  --remory:#B97555;
  --tracker:#B9B755;
}

html,body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
html:has(#app),body:has(#app){
  height:100%;
  overflow:hidden;
}

body[data-bs-theme="dark"]{
  background:var(--bg) !important;
  color:var(--text) !important;
}

a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--blue);}

/* ---- LOGIN ---- */
.login-page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
  padding:24px;
}
.login-box{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:16px;
  padding:48px 40px;
  width:420px;
  max-width:100%;
  box-shadow:none;
}
.login-logo{display:block;width:180px;margin:0 auto 32px;}
.login-box h2{text-align:center;font-size:16px;font-weight:500;color:var(--muted);margin-bottom:24px;}
.lg{margin-bottom:18px;}
.lg label,.login-box .form-label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:6px;
}
.lg input:not([type="checkbox"]),.login-box .form-control{
  width:100%;
  background:#141414 !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  padding:11px 14px;
  color:var(--text) !important;
  font-family:'Poppins',sans-serif;
  font-size:14px;
}
.pw-wrap{
  position:relative;
}
.pw-wrap #passinput{
  padding-right:42px;
}
.pw-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-radius:6px;
  color:var(--muted);
  cursor:pointer;
  padding:0;
}
.pw-toggle:hover{color:var(--text);background:rgba(255,255,255,.06);}
.pw-toggle .pw-eye-off{display:none;}
.pw-toggle.is-on .pw-eye{display:none;}
.pw-toggle.is-on .pw-eye-off{display:block;}
.lg input:not([type="checkbox"]):focus,.login-box .form-control:focus{
  outline:none;
  border-color:var(--blue) !important;
  box-shadow:none !important;
}
.btn-login,.login-box #signin_btn{
  width:100%;
  background:var(--blue2) !important;
  border:none !important;
  border-radius:8px !important;
  padding:13px !important;
  color:#fff !important;
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  margin-top:6px;
}
.btn-login:hover,.login-box #signin_btn:hover{background:var(--blue) !important;}
.login-showpw{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}
.login-showpw input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:checkbox;
  width:16px !important;
  height:16px !important;
  min-width:16px;
  max-width:16px;
  margin:0 !important;
  padding:0 !important;
  flex-shrink:0;
  accent-color:var(--blue);
  cursor:pointer;
  background:transparent !important;
  border:none !important;
  border-radius:3px !important;
}
.login-showpw label{
  display:inline !important;
  margin:0 !important;
  padding:0;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.4px;
  text-transform:none;
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  line-height:16px;
}
.login-msg{margin-top:14px;font-size:12px;color:var(--danger);text-align:center;min-height:18px;}
.login-lang{display:flex;justify-content:center;margin-bottom:20px;}
.login-lang .lang-switch{
  position:relative;
  background:var(--bg);
}

/* ---- APP SHELL ---- */
#app{
  display:flex;
  flex-direction:column;
  height:100vh;
  max-height:100vh;
  overflow:hidden;
  background:var(--bg);
}

.topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:0 28px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  flex-shrink:0;
  z-index:100;
  gap:12px;
}
.tl{display:flex;align-items:center;gap:16px;min-width:0;}
.tl img{height:60px;width:auto;}
.tl-sep{width:1px;height:24px;background:var(--border);flex-shrink:0;}
.tl-txt{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:2px;white-space:nowrap;}
.tr{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:nowrap;}
.hamburger{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.uchip{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:40px;
  padding:5px 14px 5px 5px;
  cursor:pointer;
  color:var(--text);
}
.uchip img,.uav{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
}
.uav{
  background:var(--blue2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#fff;
}
.uname{font-size:12px;font-weight:500;margin:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.btn-out{
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 14px;
  color:var(--muted);
  font-family:'Poppins',sans-serif;
  font-size:11px;
  cursor:pointer;
  text-decoration:none !important;
  display:inline-flex;
  align-items:center;
}
.btn-out:hover{border-color:var(--danger);color:var(--danger);}

/* language pills */
.lang-switch{
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:8px;
  padding:3px;
  position:relative;
}
.lang-btn{
  background:transparent;
  color:var(--muted);
  border:none;
  border-radius:6px;
  padding:5px 12px;
  font-family:'Poppins',sans-serif;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
}
.lang-btn.on,.lang-btn.active{
  background:var(--blue2);
  color:#fff;
}
#lang-toggle.visually-hidden-lang{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
  padding:0 !important;
  margin:0 !important;
  pointer-events:none;
}

/* view-as */
.viewas-box{
  display:flex;
  align-items:center;
  gap:8px;
}
.viewas-box label{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0;
}
.viewas-box .form-control{
  min-width:160px;
  height:32px;
  padding:4px 10px;
  font-size:12px;
}

.body-wrap{
  display:flex;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* LEFT TABS */
.tabs{
  width:230px;
  background:var(--bg2);
  border-right:1px solid var(--border);
  padding:16px 10px;
  flex-shrink:0;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
}
.tab-lbl{
  font-size:9px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.5px;
  padding:0 10px;
  margin:16px 0 6px;
}
.tab{
  display:flex !important;
  flex-wrap:nowrap;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--muted) !important;
  border-radius:10px;
  transition:all .15s;
  position:relative;
  border:none;
  background:transparent;
  width:100%;
  text-align:left;
  font-family:'Poppins',sans-serif;
  text-decoration:none !important;
}
.tab:hover{background:rgba(255,255,255,.05);color:var(--text) !important;}
.tab.on{background:rgba(0,180,216,.12);color:var(--blue) !important;}
.tab.on::before{
  content:'';
  position:absolute;
  left:0;
  top:18%;
  height:64%;
  width:3px;
  background:var(--blue);
  border-radius:0 3px 3px 0;
}
.tab svg,.tab .ti,.tab i{
  width:22px;
  height:22px;
  min-width:22px;
  flex:0 0 22px;
  flex-shrink:0;
  font-size:18px;
  opacity:.65;
  color:inherit;
}
.tab.on svg,.tab:hover svg,.tab.on .ti,.tab:hover .ti,.tab.on i,.tab:hover i{opacity:1;}
.tab > span{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  line-height:1.25;
}
.tab-sub{padding-left:48px;font-size:12px;font-weight:500;}
.sub-menu{padding:4px 0 8px;}
#buttonfor_sessionlist{display:block;}
#buttonfor_userspage,#buttonfor_report,#buttonfor_export,#buttonfor_organization_report,#buttonfor_levelassessmentpage{display:flex !important;}
.tabs-close{
  display:none;
  position:absolute;
  top:10px;
  right:10px;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:22px;
  cursor:pointer;
}
.tab-lbl:first-of-type{margin-top:0;}
.tabs,.main{
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.tabs::-webkit-scrollbar,.main::-webkit-scrollbar{
  width:6px;
  height:6px;
}
.tabs::-webkit-scrollbar-track,.main::-webkit-scrollbar-track{
  background:transparent;
}
.tabs::-webkit-scrollbar-thumb,.main::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:6px;
}
.tabs::-webkit-scrollbar-thumb:hover,.main::-webkit-scrollbar-thumb:hover{
  background:#3a3a3a;
}
.tabs::-webkit-scrollbar-button,.main::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}

/* sidebar filters */
.tabs #filterForm,.tab-filters{
  padding:8px 6px 16px;
}
.tab-filters .field{margin-bottom:12px;}
.tabs .form-group{margin-bottom:12px;}
.tabs .form-group label,.tabs #filterForm label{
  display:block;
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:5px;
}
.tabs .form-control,.tabs input,.tabs select{
  width:100%;
  background:#141414 !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  padding:8px 10px;
  color:var(--text) !important;
  font-size:12px;
}
.tabs h6{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;padding:8px 10px 6px;margin:8px 0 0;}

.main{
  flex:1;
  padding:24px 28px;
  overflow-y:auto;
  overflow-x:hidden;
  min-width:0;
  min-height:0;
  background:var(--bg);
}
.main.report-legacy{
  padding:0;
}
.main.report-legacy > .container-fluid{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-top:24px;
}

/* Report filters only — slides keep original Modernize styling */
.report-filters{
  padding-bottom:8px;
}
.report-filters #filterForm{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px;
  margin-bottom:20px;
}
.report-filters .form-group{
  margin-bottom:14px;
}
.report-filters .form-group label{
  display:block;
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:5px;
}
.report-filters .form-control,
.report-filters textarea.form-control{
  background:#141414 !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  padding:9px 13px;
  color:var(--text) !important;
  font-family:'Poppins',sans-serif;
  font-size:12px;
  color-scheme:dark;
  box-shadow:none !important;
}
.report-filters textarea.form-control{
  min-height:72px;
  width:100%;
}
.report-filters .form-control:focus,
.report-filters textarea.form-control:focus{
  outline:none;
  border-color:var(--blue) !important;
  box-shadow:none !important;
}
.report-filters .form-control::placeholder{
  color:#444;
}
.report-filters .form-text,
.report-filters .text-muted{
  color:var(--muted) !important;
  font-size:11px;
}
.report-filters .form-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0;
}
.report-filters .form-check-input{
  accent-color:var(--blue);
  background-color:#141414;
  border-color:var(--border);
  margin:0;
  float:none;
}
.report-filters .form-check-label{
  color:var(--text);
  font-size:12px;
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
  margin:0;
}
.report-filters-h{
  font-size:14px !important;
  font-weight:700;
  color:var(--text);
  text-transform:none;
  letter-spacing:0;
  margin:18px 0 14px !important;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.report-filters .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 15px;
  border-radius:8px !important;
  font-family:'Poppins',sans-serif;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .15s;
}
.report-filters .btn-sm{
  padding:6px 12px;
  font-size:11px;
}
.report-filters .btn-primary{
  background:var(--blue2) !important;
  border-color:var(--blue2) !important;
  color:#fff !important;
}
.report-filters .btn-primary:hover{
  background:var(--blue) !important;
  border-color:var(--blue) !important;
  color:#fff !important;
}
.report-filters .btn-secondary{
  background:transparent !important;
  color:var(--muted) !important;
  border:1px solid var(--border) !important;
}
.report-filters .btn-secondary:hover{
  border-color:var(--blue) !important;
  color:var(--blue) !important;
  background:transparent !important;
}
.report-filters-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:8px;
}
.report-filters .switch{
  top:0;
}
.main:not(.report-legacy) .container,
.main:not(.report-legacy) .container-sm,
.main:not(.report-legacy) .container-md,
.main:not(.report-legacy) .container-lg,
.main:not(.report-legacy) .container-xl,
.main:not(.report-legacy) .container-xxl{
  max-width:100% !important;
  width:100%;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* PAGE HEADER */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap;}
.ph-t{font-size:20px;font-weight:700;color:var(--text);}
.ph-s{font-size:12px;color:var(--muted);margin-top:3px;}
.users-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}

/* Convert old colored banners into Performa page headers */
.main:not(.report-legacy) .row.card[style*="background-color"],
.main:not(.report-legacy) .row.card[style*="background:"],
.main:not(.report-legacy) .container .row.card[style*="background-color"]{
  background:var(--bg3) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  padding:18px 22px !important;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}
.main:not(.report-legacy) .row.card[style*="background-color"]::before,
.main:not(.report-legacy) .container .row.card[style*="background-color"]::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--blue);
  border-radius:12px 12px 0 0;
}
.row.card.overview-focus::before,
.row.card:has([data-translate="Focus Overview"])::before,
.row.card:has([data-translate="Focus Trend"])::before,
.row.card[style*="0,141,237"]::before{
  background:#008DED !important;
}
.row.card.overview-repulse::before,
.row.card:has([data-translate="RePulse Overview"])::before,
.row.card:has([data-translate="RePulse Trend"])::before,
.row.card[style*="0,180,150"]::before{
  background:#00B496 !important;
}
.row.card.overview-reflex::before,
.row.card:has([data-translate="Reflex Overview"])::before,
.row.card:has([data-translate="Reflex Trend"])::before,
.row.card[style*="125, 68, 233"]::before,
.row.card[style*="125,68,233"]::before{
  background:#7D44E9 !important;
}
.row.card.overview-predictor::before,
.row.card:has([data-translate="Predictor Overview"])::before,
.row.card:has([data-translate="Predictor Trend"])::before,
.row.card[style*="153, 85, 185"]::before,
.row.card[style*="153,85,185"]::before{
  background:#9955B9 !important;
}
.row.card.overview-remory::before,
.row.card:has([data-translate="Remory Overview"])::before,
.row.card:has([data-translate="Remory Trend"])::before,
.row.card[style*="185, 117, 85"]::before,
.row.card[style*="185,117,85"]::before{
  background:#B97555 !important;
}
.row.card.overview-focus{box-shadow:inset 0 3px 0 0 #008DED !important;}
.row.card.overview-repulse{box-shadow:inset 0 3px 0 0 #00B496 !important;}
.row.card.overview-reflex{box-shadow:inset 0 3px 0 0 #7D44E9 !important;}
.row.card.overview-predictor{box-shadow:inset 0 3px 0 0 #9955B9 !important;}
.row.card.overview-remory{box-shadow:inset 0 3px 0 0 #B97555 !important;}
.row.card.overview-tracker{box-shadow:inset 0 3px 0 0 #B9B755 !important;}
.main:not(.report-legacy) .row.card[style*="background-color"] h4,
.main:not(.report-legacy) .row.card[style*="background-color"] h1,
.main:not(.report-legacy) .container .row.card[style*="background-color"] h4{
  color:var(--text) !important;
  font-size:18px;
  font-weight:700;
  margin:4px 0 !important;
  text-align:left !important;
}

/* CARDS — Performa: flat 1px border, no drop shadow */
html:not(:has(.report-legacy)) .card{
  --bs-card-bg: var(--bg3);
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: 12px;
  --bs-card-box-shadow: none;
  --bs-card-inner-border-radius: 11px;
  background:var(--bg3) !important;
  background-color:var(--bg3) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  color:var(--text);
}
html:not(:has(.report-legacy)) .card-body{
  color:var(--text);
  box-shadow:none !important;
}
html:not(:has(.report-legacy)) .card-title,html:not(:has(.report-legacy)) .ct{
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.cs{font-size:11px;color:var(--muted);margin-top:2px;}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}

/* Game type played — chart + legend as one centered group */
.card-body:has(.game-type-wrap){
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.game-type-wrap{
  display:flex !important;
  flex-wrap:nowrap;
  justify-content:center !important;
  align-items:center;
  gap:16px;
  width:100%;
  margin-left:0 !important;
  margin-right:0 !important;
  flex:0 0 auto;
}
.game-type-wrap > .col-3{
  flex:0 0 130px;
  width:130px;
  max-width:130px;
}
.game-type-wrap > .col-8{
  flex:0 0 auto;
  width:auto;
  max-width:none;
}
.game-type-wrap #gametypechart,
.gender-wrap #genderchart{
  display:block;
  width:130px !important;
  height:130px !important;
  margin:0 auto;
}
.game-type-wrap > .col-8 > .row{
  display:grid;
  grid-template-columns:22px minmax(72px,auto) auto;
  align-items:center;
  column-gap:8px;
  margin:0;
}
.game-type-wrap > .col-8 > .row > [class*="col"]{
  width:auto;
  max-width:none;
  flex:unset;
  padding:0;
}
.game-type-wrap > .col-8 h6{
  margin:0;
  white-space:nowrap;
}

.usage-month-card .card-body{
  height:250px;
  display:flex;
  flex-direction:column;
  padding:16px 16px 10px;
  overflow:hidden;
}
.usage-month-card .card-title{
  margin-bottom:8px !important;
  flex-shrink:0;
}
.usage-month-chart{
  flex:1;
  min-height:0;
  position:relative;
  width:100%;
}
.usage-month-chart canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}
.card-hover:hover{
  transform:none !important;
}

/* Assessment overview — equal gaps between cards */
#assessment_overview .card{
  margin-bottom:0 !important;
}
#assessment_overview .assessment-cards,
#assessment_overview .assessment-cards .row{
  --bs-gutter-x:16px;
  --bs-gutter-y:16px;
}
#assessment_overview .assessment-cards .card{
  height:100%;
}
#assessment_overview .assessment-cards .col-md-6 .card-body{
  height:250px;
}
#assessment_overview .assessment-radar-body{
  height:100% !important;
  min-height:516px;
  padding:8px !important;
  display:flex;
  flex-direction:column;
}
#assessment_overview .assessment-radar-canvas{
  flex:1;
  min-height:0;
  position:relative;
  width:100%;
}
#assessment_overview .assessment-radar-canvas canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none;
  max-height:none;
}

/* External data (other.html) — equal card gaps, radar fills the card */
.external-data-cards{
  --bs-gutter-x:16px;
  --bs-gutter-y:16px;
}
.external-data-cards .card{
  margin-bottom:0 !important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.external-data-cards .card > .card-body{
  flex:1;
}
.external-data-cards .col-lg-6 .card > .card-body{
  min-height:0;
}
.external-data-cards .col-lg-6 .card{
  min-height:560px;
}
.external-data-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 0;
  flex-shrink:0;
}
.external-data-toolbar .card-title{
  flex:1;
  min-width:0;
}
.external-data-toolbar .btn{
  flex-shrink:0;
}
.external-radar-body{
  flex:1;
  min-height:480px;
  padding:8px 12px 16px !important;
  display:flex;
  flex-direction:column;
}
.external-radar-body--wide{
  flex:none;
  height:620px;
  min-height:620px;
}
.external-radar-canvas,
.external-bar-canvas{
  flex:1;
  position:relative;
  width:100%;
  min-height:420px;
}
.external-radar-body--wide .external-radar-canvas{
  min-height:560px;
  height:100%;
}
.external-radar-canvas canvas,
.external-bar-canvas canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none;
  max-height:none;
}
html:not(:has(.report-legacy)) .shadow,html:not(:has(.report-legacy)) .shadow-sm,html:not(:has(.report-legacy)) .shadow-lg{
  box-shadow:none !important;
}

/* KPI tiles (big number cards) — Performa top accent, not left stripe */
html:not(:has(.report-legacy)) .kpi-card,html:not(:has(.report-legacy)) .card.overflow-hidden{
  position:relative;
  overflow:hidden;
}
html:not(:has(.report-legacy)) .card[style*="border-left"]{
  border:1px solid var(--border) !important;
  border-left:1px solid var(--border) !important;
}
html:not(:has(.report-legacy)) .card[style*="border-left"]::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--blue);
  border-radius:12px 12px 0 0;
  z-index:1;
  pointer-events:none;
}
html:not(:has(.report-legacy)) .card[style*="00edbf"]::before,html:not(:has(.report-legacy)) .card[style*="0,237,191"]::before{background:var(--success);}
html:not(:has(.report-legacy)) .card[style*="008ded"]::before,html:not(:has(.report-legacy)) .card[style*="0,141,237"]::before{background:var(--blue);}
html:not(:has(.report-legacy)) .card[style*="FFD700"]::before,html:not(:has(.report-legacy)) .card[style*="255,215,0"]::before{background:var(--yellow);}

/* BUTTONS — map Bootstrap to Performa */
html:not(:has(.report-legacy)) .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 15px;
  border-radius:8px !important;
  font-family:'Poppins',sans-serif;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .15s;
}
html:not(:has(.report-legacy)) .btn-primary,html:not(:has(.report-legacy)) .bp{
  background:var(--blue2) !important;
  border-color:var(--blue2) !important;
  color:#fff !important;
}
html:not(:has(.report-legacy)) .btn-primary:hover,html:not(:has(.report-legacy)) .bp:hover{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important;}
html:not(:has(.report-legacy)) .btn-dark,html:not(:has(.report-legacy)) .btn-outline-primary,html:not(:has(.report-legacy)) .bo{
  background:transparent !important;
  color:var(--muted) !important;
  border:1px solid var(--border) !important;
}
html:not(:has(.report-legacy)) .btn-dark:hover,html:not(:has(.report-legacy)) .btn-outline-primary:hover,html:not(:has(.report-legacy)) .bo:hover{
  border-color:var(--blue) !important;
  color:var(--blue) !important;
  background:transparent !important;
}
html:not(:has(.report-legacy)) .btn-success,html:not(:has(.report-legacy)) .bs{background:rgba(39,174,96,.14) !important;color:#4dcc85 !important;border-color:rgba(39,174,96,.3) !important;}
html:not(:has(.report-legacy)) .btn-danger,html:not(:has(.report-legacy)) .bd{background:rgba(231,76,60,.12) !important;color:#e74c3c !important;border-color:rgba(231,76,60,.3) !important;}
html:not(:has(.report-legacy)) .by{background:rgba(255,215,0,.1) !important;color:var(--yellow) !important;border-color:rgba(255,215,0,.3) !important;}
html:not(:has(.report-legacy)) .btn-sm{padding:6px 12px;font-size:11px;}

/* mode pills (Manual / AI etc.) */
.period-tabs,.mode-tabs{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}
.ptab,.mode-tabs .btn,.period-tabs .btn{
  padding:8px 18px !important;
  border-radius:8px !important;
  border:1px solid var(--border) !important;
  font-size:12px !important;
  font-weight:600;
  cursor:pointer;
  color:var(--muted) !important;
  background:transparent !important;
}
.ptab:hover,.mode-tabs .btn:hover{border-color:var(--blue) !important;color:var(--blue) !important;}
.ptab.on,.mode-tabs .btn.btn-primary,.mode-tabs .btn.on{
  background:var(--blue2) !important;
  border-color:var(--blue2) !important;
  color:#fff !important;
}

/* PILLS */
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:600;}
.pg{background:rgba(39,174,96,.14);color:#4dcc85;}
.pr{background:rgba(231,76,60,.14);color:#e74c3c;}
.py{background:rgba(255,215,0,.12);color:var(--yellow);}
.pb{background:rgba(74,159,255,.12);color:var(--blue);}
.pm{background:rgba(123,140,190,.1);color:var(--muted);}

/* TABLES */
.tw,.table-responsive{overflow-x:auto;}
html:not(:has(.report-legacy)) table,html:not(:has(.report-legacy)) .table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  color:var(--text);
  background:transparent !important;
  --bs-table-bg:transparent;
  --bs-table-color:var(--text);
  --bs-table-striped-bg:rgba(255,255,255,.02);
  --bs-table-hover-bg:rgba(74,159,255,.03);
}
html:not(:has(.report-legacy)) thead th,html:not(:has(.report-legacy)) .table thead th{
  padding:9px 14px;
  text-align:left;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted) !important;
  border-bottom:1px solid var(--border) !important;
  background:transparent !important;
}
html:not(:has(.report-legacy)) tbody tr{border-bottom:1px solid rgba(42,42,42,.8);}
html:not(:has(.report-legacy)) tbody tr:hover{background:rgba(74,159,255,.03);}
html:not(:has(.report-legacy)) tbody td,html:not(:has(.report-legacy)) .table td{padding:11px 14px;color:var(--text);border-color:var(--border) !important;vertical-align:middle;}
html:not(:has(.report-legacy)) .table h6{color:var(--text);font-size:12px;margin:0;}

/* FIELDS */
.field label,.form-label,html:not(:has(.report-legacy)) .form-group label{
  display:block;
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:5px;
}
.field input,.field select,
html:not(:has(.report-legacy)) .form-control,
html:not(:has(.report-legacy)) .form-select{
  width:100%;
  background:#141414 !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  padding:9px 13px;
  color:var(--text) !important;
  font-family:'Poppins',sans-serif;
  font-size:12px;
  color-scheme:dark;
}
html:not(:has(.report-legacy)) .form-control:focus,html:not(:has(.report-legacy)) .form-select:focus,.field input:focus,.field select:focus{
  outline:none;
  border-color:var(--blue) !important;
  box-shadow:none !important;
}
.form-control::placeholder{color:#444;}
.frow{display:grid;gap:14px;margin-bottom:14px;}
.frow.c2{grid-template-columns:1fr 1fr;}
.frow.c3{grid-template-columns:1fr 1fr 1fr;}
.frow.c1{grid-template-columns:1fr;}

/* STATS */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.sc{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:16px;}
.sl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.sv{font-size:26px;font-weight:700;}
.sd{font-size:10px;color:var(--muted);margin-top:3px;}

.kpi-suite{
  --kpi-accent: var(--success);
  background:var(--bg3) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  height:250px;
  padding:20px 20px 18px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  box-shadow:none !important;
}
.kpi-suite::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--kpi-accent);
  border-radius:12px 12px 0 0;
}
.kpi-suite--blue{--kpi-accent: var(--blue);}
.kpi-suite--repulse{--kpi-accent: var(--repulse);}
.kpi-suite--gold{--kpi-accent: var(--yellow);}
.kpi-suite--reflex{--kpi-accent: var(--reflex);}
.kpi-suite--predictor{--kpi-accent: var(--predictor);}
.kpi-suite--warn{--kpi-accent: var(--warn);}
.kpi-suite--compact{
  height:168px;
  padding:16px 16px 14px;
}
.kpi-suite--compact .kpi-suite-val{
  font-size:36px;
  margin:10px 0 8px;
}
.kpi-suite--compact .kpi-suite-ico{
  width:28px;
  height:28px;
  border-radius:7px;
}
.kpi-suite--compact .kpi-suite-sub{font-size:11px;}
.predictor-row{
  display:flex;
  align-items:stretch;
  gap:12px;
  width:100%;
  min-height:520px;
}
.predictor-kpis{
  width:18%;
  display:flex;
  flex-direction:column;
  /* gap:12px; */
  min-width:0;
}
.predictor-kpis .kpi-suite--compact{
  flex:1 0 auto;
  height:auto;
  min-height:168px;
}
.predictor-kpis .kpi-suite--with-bilat{
  flex:1 1 auto;
  height:auto;
  min-height:0;
}
.predictor-huds{
  flex:1;
  display:flex;
  gap:12px;
  min-width:0;
}
.predictor-huds .hud-card{
  flex:1;
  height:auto;
  min-height:520px;
}
.kpi-suite--with-bilat{
  height:auto;
  min-height:250px;
}
.kpi-suite--with-bilat .kpi-suite-val{
  font-size:40px;
  margin:12px 0 14px;
}
.kpi-bilat{
  display:flex;
  align-items:stretch;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.kpi-bilat-item{
  flex:1;
  text-align:center;
}
.kpi-bilat-val{
  font-family:'Poppins',sans-serif;
  font-size:18px;
  font-weight:700;
  color:var(--kpi-accent);
  line-height:1.2;
}
.kpi-bilat-lbl{
  font-family:'Poppins',sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  margin-top:2px;
}
.kpi-bilat-div{
  width:1px;
  background:var(--border);
  margin:2px 8px;
}
.kpi-suite-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.kpi-suite-lbl{
  font-family:'Poppins',sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.1px;
  line-height:1.35;
  padding-top:4px;
}
.kpi-suite-ico{
  width:32px;
  height:32px;
  border-radius:8px;
  background:color-mix(in srgb, var(--kpi-accent) 18%, transparent);
  color:var(--kpi-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.kpi-suite-val,
.kpi-suite .kpi-suite-val,
#totalusers.kpi-suite-val,
#newusers_thismonth.kpi-suite-val,
#inhibitory_repulse.kpi-suite-val,
#dividedattention.kpi-suite-val,
#higheststreak.kpi-suite-val,
#corr_anticipation_time_predictor.kpi-suite-val,
#corr_anticipation_predictor.kpi-suite-val{
  font-family:'Poppins',sans-serif;
  font-size:52px;
  font-weight:700;
  color:var(--kpi-accent) !important;
  line-height:1;
  letter-spacing:-1px;
  margin:18px 0 auto;
  text-align:left;
}
.kpi-suite-sub{
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  line-height:1.35;
}
.kpi-suite--streak .kpi-suite-val,
#higheststreak.kpi-suite-val{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:84px;
  text-align:center;
  width:auto;
  margin:0;
  letter-spacing:-2px;
}
.kpi-suite--streak .kpi-suite-head,
.kpi-suite--streak .kpi-suite-sub{
  position:relative;
  z-index:1;
}
.kpi-suite--streak .kpi-suite-sub{
  text-align:left;
  width:100%;
  margin-top:auto;
}

/* MODALS */
.modal-content{
  background:var(--bg3) !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  color:var(--text);
}
.modal-header,.modal-footer{border-color:var(--border) !important;}
.modal-title{font-size:15px;font-weight:600;}
.dropdown-menu{
  background:var(--bg3) !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
}
.dropdown-item{color:var(--text) !important;}
.dropdown-item:hover{background:rgba(255,255,255,.05) !important;}

/* text helpers */
html:not(:has(.report-legacy)) .text-muted,html:not(:has(.report-legacy)) .text-secondary{color:var(--muted) !important;}
html:not(:has(.report-legacy)) .text-white{color:var(--text) !important;}
hr,.sep{border-color:var(--border);height:1px;background:var(--border);}

#loading_text{color:var(--muted);font-size:12px;margin:0;}
.topbar #loading_text{margin:0 !important;font-size:11px;white-space:nowrap;}
.main:not(.report-legacy) #filterForm{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px;
  margin-bottom:20px;
}
.tabs #filterForm{background:transparent;border:none;padding:8px 6px 16px;margin:0;}
.form-check-input{accent-color:var(--blue);background-color:#141414;border-color:var(--border);}
.form-check-label{color:var(--text);font-size:12px;text-transform:none;letter-spacing:0;font-weight:500;}
.main:not(.report-legacy) h6[data-translate="Filter Data"]{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  text-transform:none;
  letter-spacing:0;
  margin-bottom:16px;
}
.tabs h6[data-translate="Filter Data"]{
  font-size:9px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.btn-dark.text-black,.text-black{color:var(--muted) !important;}
.uchip{cursor:default;}

/* Predictor HUD orbits (Accuracy / Anticipation) */
.hud-card{
  --hud-accent:var(--blue);
  --hud-accent-rgb:0,180,216;
  background:
    linear-gradient(165deg, rgba(255,255,255,.045) 0%, transparent 38%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--hud-accent-rgb),.08), transparent 55%),
    var(--bg3);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  height:520px;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.hud-card::before{
  content:"";
  position:absolute;
  top:0;left:12%;right:12%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--hud-accent), transparent);
  opacity:.9;
  z-index:3;
  pointer-events:none;
}
.hud-card--acc{--hud-accent:var(--blue);--hud-accent-rgb:0,180,216;}
.hud-card--ant{--hud-accent:var(--yellow);--hud-accent-rgb:255,215,0;}
.hud-glow{
  position:absolute;
  width:260px;
  height:260px;
  left:50%;
  top:50%;
  margin:-130px 0 0 -130px;
  background:radial-gradient(circle, rgba(var(--hud-accent-rgb),.16), transparent 68%);
  pointer-events:none;
  z-index:0;
  animation:hud-breathe 5.5s ease-in-out infinite;
}
@keyframes hud-breathe{
  0%,100%{transform:scale(1);opacity:.85;}
  50%{transform:scale(1.12);opacity:1;}
}
.hud-meta{
  position:absolute;
  top:14px;
  left:16px;
  z-index:4;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:7px;
  font-family:'Poppins',sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
}
.hud-meta-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--hud-accent);
  box-shadow:0 0 8px var(--hud-accent);
}
.hud-orbit{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}
.hud-orbit-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:330px;
  height:330px;
  margin:-165px 0 0 -165px;
  border-radius:50%;
  pointer-events:none;
  border:1px solid rgba(var(--hud-accent-rgb),.22);
  box-shadow:
    0 0 36px rgba(var(--hud-accent-rgb),.08),
    inset 0 0 28px rgba(var(--hud-accent-rgb),.04);
  background:
    repeating-conic-gradient(
      from -1deg,
      transparent 0deg 35deg,
      rgba(var(--hud-accent-rgb),.18) 35deg 36deg
    );
  -webkit-mask:radial-gradient(farthest-side, transparent 46%, #000 46.5%);
  mask:radial-gradient(farthest-side, transparent 46%, #000 46.5%);
}
.hud-orbit-ring--outer{
  border:1px dashed rgba(255,255,255,.1);
  box-shadow:none;
  background:none;
  -webkit-mask:none;
  mask:none;
  transform-origin:50% 50%;
  animation:hud-spin 48s linear infinite;
}
@keyframes hud-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.hud-ticks{position:absolute;inset:0;pointer-events:none;z-index:0;}
.hud-tick{
  position:absolute;
  width:1px;
  height:6px;
  background:rgba(255,255,255,.14);
  border-radius:1px;
}
.hud-tick--major{
  height:10px;
  background:rgba(var(--hud-accent-rgb),.55);
}
.hud-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:168px;
  height:168px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 36%, rgba(var(--hud-accent-rgb),.18), rgba(10,10,10,.94) 64%);
  box-shadow:
    0 12px 32px rgba(0,0,0,.45),
    0 0 0 8px rgba(var(--hud-accent-rgb),.05),
    inset 0 1px 0 rgba(255,255,255,.1);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px;
  z-index:2;
}
.hud-core-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  pointer-events:none;
}
.hud-core-track{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:2.4;
}
.hud-core-fill{
  fill:none;
  stroke:var(--hud-accent);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:339.292;
  stroke-dashoffset:339.292;
  transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1);
}
.hud-core-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.hud-core-lbl{
  font-family:'Poppins',sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--hud-accent);
  margin-bottom:6px;
  line-height:1.2;
  opacity:.92;
}
.hud-core-val{
  font-family:'Poppins',sans-serif;
  font-size:28px;
  font-weight:700;
  color:var(--text);
  line-height:1.05;
  letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;
}
.hud-node{
  position:absolute;
  width:96px;
  height:96px;
  margin:-48px 0 0 -48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:1;
  transition:transform .25s ease;
}
.hud-node:hover{
  transform:scale(1.08);
  z-index:3;
}
.hud-node-ring{
  position:relative;
  width:82px;
  height:82px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.1), rgba(12,12,12,.96) 62%);
  box-shadow:
    0 8px 18px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.hud-node-ring svg{
  width:82px;
  height:82px;
  display:block;
  transform:rotate(-90deg);
}
.hud-track{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:2.4;
}
.hud-fill{
  fill:none;
  stroke:var(--hud-accent);
  stroke-width:2.6;
  stroke-linecap:round;
  transition:stroke-dashoffset .45s ease, stroke .2s ease;
}
.hud-node--hi .hud-fill{
  stroke:var(--success);
}
.hud-node--lo .hud-fill{
  stroke:var(--danger);
}
.hud-node-body{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.hud-node-val{
  font-family:'Poppins',sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.hud-node-sub{
  font-family:'Poppins',sans-serif;
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  margin-top:2px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.hud-node-lbl{
  margin-top:5px;
  font-family:'Poppins',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:rgba(var(--hud-accent-rgb),.7);
  white-space:nowrap;
}
.hud-node--hi .hud-node-val{color:#4dcc85;}
.hud-node--lo .hud-node-val{color:#e74c3c;}
@media(prefers-reduced-motion:reduce){
  .hud-glow,.hud-orbit-ring--outer{animation:none;}
}
@media(max-width:1200px){
  .hud-orbit-ring{width:280px;height:280px;margin:-140px 0 0 -140px;}
  .hud-core{width:136px;height:136px;}
  .hud-core-val{font-size:22px;}
  .hud-node{width:84px;height:84px;margin:-42px 0 0 -42px;}
  .hud-node-ring,.hud-node-ring svg{width:72px;height:72px;}
  .hud-node-val{font-size:12px;}
  .hud-node-sub{font-size:9px;}
  .hud-node-lbl{font-size:9px;}
}

/* hide leftover modernize chrome if any page still has it */
.page-wrapper{background:var(--bg) !important;}
.left-sidebar{background:var(--bg2) !important;border-right:1px solid var(--border);}
.app-header,.body-wrapper .app-header{
  background:var(--bg2) !important;
  border-bottom:1px solid var(--border);
}
.body-wrapper{background:var(--bg) !important;}

@media(max-width:800px){
  .hamburger{display:inline-flex;}
  .tabs{
    display:none;
    position:fixed;
    z-index:200;
    top:60px;
    left:0;
    height:calc(100vh - 60px);
    box-shadow:8px 0 24px rgba(0,0,0,.4);
    padding-top:36px;
  }
  .tabs.open{display:block;}
  .tabs-close{display:block;}
  .tl-txt{display:none;}
  .uname{display:none;}
  .sg{grid-template-columns:1fr 1fr;}
  .main{padding:16px;}
  .main.report-legacy{padding:0;}
  .topbar{padding:0 12px;}
  .viewas-box{display:none;}
}

@media print{
  html,body,#app,.body-wrap,.main{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .tabs,.topbar,.hamburger{display:none !important;}
  .main{padding:0;}
}