:root{
  --bg:#0b1220;
  --bg2:#0a1020;
  --card:#0f1b33;
  --card2:#0d172d;
  --text:#e7eefc;
  --muted:#a8b3c9;
  --blue:#3b82f6;
  --blue2:#22d3ee;
  --border:rgba(231,238,252,.10);

  --shadow: 0 18px 45px rgba(0,0,0,0.35);
  --shadow2: 0 10px 26px rgba(0,0,0,0.25);
  --radius: 18px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 400;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,18,32,.70);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
}

.brand{ display:flex; gap:12px; align-items:center; }

.logoMark{
  width:40px; height:40px;
  border-radius:14px;
  display:grid; place-items:center;
  font-weight:700;
  color:#061022;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow: 0 14px 28px rgba(59,130,246,.25);
}

.title{ font-weight:600; letter-spacing:.2px; }
.subtitle{ font-size:12px; color:var(--muted); margin-top:2px; font-weight:400; }

.container{
  max-width: 1200px;
  margin: 18px auto 40px;
  padding: 0 16px;
}

.card{
  background: linear-gradient(180deg, rgba(15,27,51,.92), rgba(13,23,45,.92));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:16px;
  margin-bottom:16px;
}

.card.glass{
  position: relative;   /* important for dropdown stacking */
  z-index: 50;          /* floats above widgets */
  background: rgba(15,27,51,.75);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.card-header h2{ margin:0; font-size:16px; font-weight:600; }
.card-header p{ margin:6px 0 0; color:var(--muted); font-size:13px; font-weight:400; }

.card-header.split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.actions{ display:flex; gap:10px; align-items:center; }

/* Buttons */
.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:500;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.btn:hover{ filter:brightness(1.06); }

.btn-primary{
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color:#061022;
  border-color: transparent;
  font-weight:600;
}
.btn-primary:hover{ filter:brightness(1.04); }

/* Widgets */
.widgets{
  position: relative;
  z-index: 1; /* dropdown panel will still be above due to 9999 */
  display:grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap:12px;
  margin-bottom:16px;
}
@media (max-width: 1024px){
  .widgets{ grid-template-columns: repeat(2, 1fr); }
}

.widget{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:14px;
  position:relative;
  overflow:hidden;
}

.widget::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:160px; height:160px;
  background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.22), transparent 60%);
  transform: rotate(15deg);
}

.w-label{ color:var(--muted); font-size:12px; font-weight:400; position:relative; }
.w-value{ font-size:28px; font-weight:600; margin-top:6px; position:relative; }

/* Table */
.table-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
}

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

.table th, .table td{
  padding:12px;
  border-bottom:1px solid rgba(231,238,252,.08);
  font-size:13px;
  font-weight:400;
}

.table th{
  text-align:left;
  font-size:12px;
  color:rgba(231,238,252,.88);
  background: rgba(59,130,246,.08);
  font-weight:600;
}

.table td.num, .table th.num{ text-align:right; font-variant-numeric: tabular-nums; }

.muted{ color:var(--muted); }

/* Pager */
.pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:12px;
}

.pagerBtns{ display:flex; align-items:center; gap:10px; }

.pageChip{
  min-width:44px;
  text-align:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-weight:500;
}

/* Small table tools */
.table-tools{ display:flex; align-items:center; gap:10px; }
.smallLabel{ font-size:12px; color:var(--muted); font-weight:400; }
.smallSelect{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 10px;
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight:500;
}

/* Multi-select dropdown */
.ms{ position:relative; max-width: 720px; }

.ms-btn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  box-shadow: var(--shadow2);
  font-weight:500;
  color: var(--text);
}

.ms-placeholder{ color: rgba(231,238,252,.92); font-weight:500; }
.ms-caret{ color:var(--muted); }

.ms-panel{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  width:100%;
  background: linear-gradient(180deg, rgba(15,27,51,.98), rgba(13,23,45,.98));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  display:none;
  z-index: 9999; /* critical: above widgets */
  overflow:hidden;
}

.ms-panel.open{ display:block; }

.ms-top{
  padding:12px;
  border-bottom:1px solid rgba(231,238,252,.08);
  background: rgba(59,130,246,.08);
}

.ms-search{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  font-weight:400;
  background: rgba(255,255,255,.03);
  color: var(--text);
}

.ms-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.mini{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:500;
}

.mini.ghost{ background:transparent; }

.ms-list{
  max-height: 280px;
  overflow:auto;
  padding:10px 12px;
}

.ms-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 8px;
  border-radius:12px;
}

.ms-item:hover{ background: rgba(59,130,246,.10); }

.ms-item input{ width:16px; height:16px; }

.ms-name{ font-weight:500; }
.ms-id{ font-size:12px; color:var(--muted); margin-top:2px; font-weight:400; }

.ms-bottom{
  padding:12px;
  border-top:1px solid rgba(231,238,252,.08);
  display:flex;
  justify-content:flex-end;
}

.ms-pills{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-weight:500;
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
}

.pill button{
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:600;
  color:var(--muted);
}

.footer{ margin-top:10px; font-size:12px; font-weight:400; }