/* =========================================================
   USTP DASHBOARD V2
   DARK COMMAND CENTER + LIGHT EXECUTIVE
========================================================= */

:root{
  --u-bg:#07111f;
  --u-bg-2:#0b1929;
  --u-sidebar:#071522;
  --u-surface:rgba(15,30,45,.90);
  --u-surface-soft:rgba(255,255,255,.055);
  --u-text:#f5fbff;
  --u-text-soft:#d5e3ec;
  --u-muted:#9eb1bf;
  --u-primary:#68e0cf;
  --u-primary-2:#2bc7d5;
  --u-accent:#ff795d;
  --u-warning:#f4bd54;
  --u-danger:#ff7474;
  --u-border:rgba(104,224,207,.17);
  --u-border-soft:rgba(255,255,255,.08);
  --u-shadow:0 22px 60px rgba(0,0,0,.26);
}

html[data-ustp-theme="light"]{
  --u-bg:#f4f7fb;
  --u-bg-2:#edf3f7;
  --u-sidebar:#ffffff;
  --u-surface:#ffffff;
  --u-surface-soft:#f1f6f8;
  --u-text:#102033;
  --u-text-soft:#32465a;
  --u-muted:#617386;
  --u-primary:#087d79;
  --u-primary-2:#087fa2;
  --u-accent:#df593f;
  --u-warning:#a56d00;
  --u-danger:#c74444;
  --u-border:rgba(8,125,121,.16);
  --u-border-soft:rgba(16,32,51,.09);
  --u-shadow:0 18px 50px rgba(28,54,80,.11);
}


/* BASE */

body{
  background:
    radial-gradient(circle at 82% 8%,rgba(43,199,213,.13),transparent 27%),
    radial-gradient(circle at 18% 32%,rgba(104,224,207,.08),transparent 28%),
    var(--u-bg)!important;
  color:var(--u-text)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:16px!important;
  line-height:1.6!important;
}

html[data-ustp-theme="light"] body{
  background:
    radial-gradient(circle at 85% 8%,rgba(8,125,121,.07),transparent 27%),
    var(--u-bg)!important;
}

h1,h2,h3{
  font-family:Poppins,Inter,sans-serif!important;
}


/* =========================================================
   SIDEBAR
========================================================= */

.shell{
  grid-template-columns:270px minmax(0,1fr)!important;
}

.side{
  position:sticky;
  top:0;
  height:100vh;

  background:
    radial-gradient(circle at 70% 5%,rgba(104,224,207,.13),transparent 30%),
    var(--u-sidebar)!important;

  border-right:1px solid var(--u-border)!important;
  box-shadow:12px 0 38px rgba(0,0,0,.18)!important;
}

.side-head{
  padding:25px 20px 22px!important;
  border-color:var(--u-border-soft)!important;
}

.side-logo{
  width:58px!important;
  height:58px!important;
  border-radius:14px!important;
  padding:5px!important;
  background:var(--u-surface-soft)!important;
  border:1px solid var(--u-border)!important;
}

.side-head strong{
  color:var(--u-text)!important;
  font-size:24px!important;
  letter-spacing:-.02em;
}

.side-head span{
  color:var(--u-muted)!important;
  font-size:12px!important;
}

.side-label{
  color:var(--u-muted)!important;
  font-size:10px!important;
  letter-spacing:.16em!important;
}

.side-menu{
  gap:5px!important;
  padding:18px 12px!important;
}

.side-link{
  min-height:46px;
  border-radius:11px!important;
  padding:12px 14px!important;
  border:1px solid transparent!important;
  color:var(--u-text-soft)!important;
  font-size:14px!important;
}

.side-link:hover{
  background:var(--u-surface-soft)!important;
  color:var(--u-text)!important;
  border-color:var(--u-border-soft)!important;
}

.side-link.active{
  background:rgba(104,224,207,.11)!important;
  color:var(--u-primary)!important;
  border-color:var(--u-border)!important;
  box-shadow:inset 3px 0 0 var(--u-primary)!important;
}

html[data-ustp-theme="light"] .side-link.active{
  background:rgba(8,125,121,.08)!important;
}


/* =========================================================
   CONTENT / HEADER
========================================================= */

.content{
  padding:36px 38px 60px!important;
  max-width:1600px;
  width:100%;
}

.top{
  position:relative;
  margin-bottom:26px!important;
  padding:28px 30px;

  border:1px solid var(--u-border);
  border-radius:22px;

  background:
    radial-gradient(circle at 88% 8%,rgba(104,224,207,.13),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));

  box-shadow:var(--u-shadow);
}

html[data-ustp-theme="light"] .top{
  background:
    radial-gradient(circle at 88% 8%,rgba(8,125,121,.07),transparent 28%),
    #fff;
}

.eyebrow{
  background:rgba(104,224,207,.10)!important;
  color:var(--u-primary)!important;
  border:1px solid var(--u-border)!important;
  font-size:11px!important;
  letter-spacing:.1em;
}

.top h1{
  color:var(--u-text)!important;
  font-size:clamp(34px,4vw,52px)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  margin:13px 0 10px!important;
}

.top p{
  color:var(--u-text-soft)!important;
  font-size:16px!important;
  line-height:1.65!important;
}


/* =========================================================
   THEME TOGGLE
========================================================= */

.ustp-theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 13px;

  border:1px solid var(--u-border);
  border-radius:999px;

  background:var(--u-surface-soft);
  color:var(--u-text);

  font-size:12px;
  font-weight:800;

  cursor:pointer;
}

.ustp-theme-toggle:hover{
  border-color:var(--u-primary);
  transform:translateY(-1px);
}


/* =========================================================
   CONTROLS
========================================================= */

.panel{
  background:var(--u-surface)!important;
  border:1px solid var(--u-border)!important;
  border-radius:18px!important;
  box-shadow:var(--u-shadow)!important;
  backdrop-filter:blur(14px);
}

.control{
  background:var(--u-surface-soft)!important;
  border:1px solid var(--u-border-soft)!important;
  color:var(--u-text)!important;
  border-radius:10px!important;
}

.control::placeholder{
  color:var(--u-muted)!important;
}

.control option{
  background:var(--u-bg-2)!important;
  color:var(--u-text)!important;
}

.status{
  color:var(--u-muted)!important;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  border-radius:10px!important;
  font-size:13px!important;
  transition:.18s ease!important;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:linear-gradient(135deg,var(--u-primary),#dffff9)!important;
  color:#07141c!important;
  box-shadow:0 12px 28px rgba(104,224,207,.16)!important;
}

.btn-secondary{
  background:var(--u-surface-soft)!important;
  color:var(--u-text)!important;
  border:1px solid var(--u-border-soft)!important;
}


/* =========================================================
   KPI
========================================================= */

.kpi-grid{
  gap:13px!important;
}

.kpi{
  position:relative;
  overflow:hidden;

  min-height:128px;

  padding:19px!important;

  border-radius:16px!important;
  border:1px solid var(--u-border-soft)!important;

  background:var(--u-surface)!important;

  box-shadow:0 12px 36px rgba(0,0,0,.10)!important;
}

.kpi::after{
  content:"";
  position:absolute;
  right:-28px;
  top:-28px;
  width:82px;
  height:82px;
  border-radius:50%;
  background:rgba(104,224,207,.055);
}

.kpi span{
  color:var(--u-muted)!important;
  font-size:10px!important;
  letter-spacing:.11em!important;
}

.kpi strong{
  margin-top:12px!important;
  color:var(--u-primary)!important;
  font-size:34px!important;
  line-height:1!important;
}


/* =========================================================
   DASHBOARD CARDS
========================================================= */

.grid{
  gap:18px!important;
}

.card{
  border-radius:18px!important;
  background:var(--u-surface)!important;
  border:1px solid var(--u-border-soft)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.10)!important;
}

.card h2{
  color:var(--u-text)!important;
  font-size:19px!important;
  letter-spacing:-.02em;
}


/* =========================================================
   RANKING
========================================================= */

.rank-list{
  gap:9px!important;
}

.rank-list li{
  min-height:64px;
  padding:12px 13px!important;

  border-radius:11px!important;
  border:1px solid var(--u-border-soft)!important;

  background:var(--u-surface-soft)!important;
}

.rank-no{
  width:36px!important;
  height:36px!important;

  background:linear-gradient(135deg,var(--u-primary),var(--u-primary-2))!important;

  color:#06151b!important;
  font-size:13px;
}

.rank-main strong{
  color:var(--u-text)!important;
  font-size:14px;
}

.rank-main span{
  color:var(--u-muted)!important;
  font-size:12px!important;
}

.rank-value{
  color:var(--u-accent)!important;
  font-size:14px;
}


/* =========================================================
   ATTENTION LIST
========================================================= */

.attention-list{
  gap:9px!important;
}

.attention-list li{
  position:relative;

  padding:13px 14px 13px 17px!important;

  border-radius:11px!important;
  border:1px solid var(--u-border-soft)!important;

  background:var(--u-surface-soft)!important;
}

.attention-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:999px;
  background:var(--u-accent);
}

.attention-list strong{
  color:var(--u-text)!important;
}

.attention-list span{
  color:var(--u-muted)!important;
}


/* =========================================================
   TABLES
========================================================= */

.table-wrap{
  border-radius:13px!important;
  border:1px solid var(--u-border-soft)!important;
  background:var(--u-surface-soft)!important;
}

.table{
  color:var(--u-text-soft)!important;
  font-size:13px!important;
}

.table th{
  background:rgba(104,224,207,.08)!important;
  color:var(--u-primary)!important;
  border-color:var(--u-border-soft)!important;
  font-size:10px!important;
  letter-spacing:.08em;
}

.table td{
  border-color:var(--u-border-soft)!important;
}

.table tbody tr:hover{
  background:rgba(104,224,207,.055)!important;
}


/* =========================================================
   CHIPS
========================================================= */

.chip{
  border-radius:999px!important;
  font-size:11px!important;
}

.chip-blue,
.chip-green{
  background:rgba(104,224,207,.11)!important;
  color:var(--u-primary)!important;
}

.chip-yellow{
  background:rgba(244,189,84,.12)!important;
  color:var(--u-warning)!important;
}

.chip-red{
  background:rgba(255,116,116,.11)!important;
  color:var(--u-danger)!important;
}


/* =========================================================
   READABILITY — LIGHT MODE
========================================================= */

html[data-ustp-theme="light"] .side-head strong,
html[data-ustp-theme="light"] .card h2,
html[data-ustp-theme="light"] .rank-main strong,
html[data-ustp-theme="light"] .attention-list strong{
  color:#102033!important;
}

html[data-ustp-theme="light"] .side-head span,
html[data-ustp-theme="light"] .side-label,
html[data-ustp-theme="light"] .rank-main span,
html[data-ustp-theme="light"] .attention-list span{
  color:#607286!important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:860px){
  .shell{
    grid-template-columns:1fr!important;
  }

  .side{
    display:none!important;
  }

  .content{
    padding:20px 14px 42px!important;
  }

  .top{
    padding:22px 18px;
  }

  .top h1{
    font-size:34px!important;
  }
}

@media(max-width:480px){
  .kpi-grid{
    grid-template-columns:1fr!important;
  }

  body{
    font-size:15px!important;
  }
}

/* SAME GLOBAL SIDEBAR FOOTER */

.side-foot{
  display:grid!important;
  gap:10px!important;
  padding:16px!important;
}

.side-foot .btn{
  width:100%!important;
  min-height:48px!important;
  justify-content:flex-start!important;
  padding:12px 16px!important;
  background:rgba(255,255,255,.08)!important;
  color:var(--u-text)!important;
  border:1px solid var(--u-border-soft)!important;
}

.side-foot .btn:hover{
  background:rgba(104,224,207,.12)!important;
  border-color:var(--u-border)!important;
}

html[data-ustp-theme="light"] .side-foot .btn{
  background:#f1f6f8!important;
  color:#102033!important;
}