/* =====================================================
   Student Performance Booster — Plugin Stylesheet
   ===================================================== */

#spbt-wrap,
#spbt-wrap * { box-sizing: border-box; }

#spbt-wrap {
  --spbt-primary:      #1a237e;
  --spbt-primary-l:    #3949ab;
  --spbt-accent:       #ff6f00;
  --spbt-accent2:      #00bcd4;
  --spbt-success:      #2e7d32;
  --spbt-danger:       #c62828;
  --spbt-warning:      #f57f17;
  --spbt-bg:           #f0f4ff;
  --spbt-card:         #ffffff;
  --spbt-text:         #1a1a2e;
  --spbt-muted:        #607d8b;
  --spbt-border:       #dde3f0;
  --spbt-radius:       14px;
  --spbt-shadow:       0 4px 24px rgba(26,35,126,.10);

  font-family: 'Nunito', sans-serif;
  background: var(--spbt-bg);
  color: var(--spbt-text);
  margin: 0;
  padding: 0;
}

/* ── Headings ──────────────────────────────── */
#spbt-wrap h1,
#spbt-wrap h2,
#spbt-wrap h3,
#spbt-wrap h4 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  margin: 0;
}

/* ── HEADER ────────────────────────────────── */
#spbt-wrap .spbt-header {
  background: linear-gradient(135deg, var(--spbt-primary) 0%, var(--spbt-primary-l) 60%, #00bcd4 100%);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(26,35,126,.3);
}
#spbt-wrap .spbt-header-logo {
  width: 48px; height: 48px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
#spbt-wrap .spbt-header h1 { font-size: clamp(18px, 4vw, 28px); letter-spacing: 1px; }
#spbt-wrap .spbt-header p  { font-size: 13px; opacity: .85; font-family: 'Nunito', sans-serif; }
#spbt-wrap .spbt-header-right { margin-left: auto; text-align: right; }
#spbt-wrap .spbt-header-school { font-size: 12px; opacity: .8; }

/* ── NAV ────────────────────────────────────── */
#spbt-wrap .spbt-nav {
  background: var(--spbt-primary);
  display: flex; overflow-x: auto; gap: 2px; padding: 0 8px;
}
#spbt-wrap .spbt-nav::-webkit-scrollbar { height: 3px; }
#spbt-wrap .spbt-nav-btn {
  background: none; border: none;
  color: rgba(255,255,255,.7);
  font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600;
  padding: 12px 16px; cursor: pointer; white-space: nowrap;
  transition: all .2s; border-bottom: 3px solid transparent;
}
#spbt-wrap .spbt-nav-btn:hover  { color: #fff; background: rgba(255,255,255,.1); }
#spbt-wrap .spbt-nav-btn.active { color: #fff; border-bottom-color: var(--spbt-accent); background: rgba(255,255,255,.12); }

/* ── MAIN CONTENT ───────────────────────────── */
#spbt-wrap .spbt-main { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }
#spbt-wrap .spbt-page { display: none; }
#spbt-wrap .spbt-page.active { display: block; animation: spbtFadeIn .3s ease; }

/* ── CARDS ──────────────────────────────────── */
#spbt-wrap .spbt-card {
  background: var(--spbt-card);
  border-radius: var(--spbt-radius);
  box-shadow: var(--spbt-shadow);
  padding: 24px; margin-bottom: 20px;
  border: 1px solid var(--spbt-border);
}
#spbt-wrap .spbt-card-title {
  font-size: 20px; color: var(--spbt-primary);
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
#spbt-wrap .spbt-card-title span { font-size: 22px; }

/* ── FORM ELEMENTS ──────────────────────────── */
#spbt-wrap .spbt-form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
#spbt-wrap .spbt-form-group { display: flex; flex-direction: column; gap: 6px; }
#spbt-wrap .spbt-form-group label {
  font-size: 13px; font-weight: 700; color: var(--spbt-primary);
  text-transform: uppercase; letter-spacing: .5px;
}
#spbt-wrap .spbt-form-group input,
#spbt-wrap .spbt-form-group select,
#spbt-wrap .spbt-form-group textarea {
  padding: 10px 14px;
  border: 2px solid var(--spbt-border);
  border-radius: 8px;
  font-family: 'Nunito', sans-serif; font-size: 14px;
  transition: border .2s; background: #fff;
  color: var(--spbt-text);
}
#spbt-wrap .spbt-form-group input:focus,
#spbt-wrap .spbt-form-group select:focus { outline: none; border-color: var(--spbt-primary-l); }

/* ── BUTTONS ────────────────────────────────── */
#spbt-wrap .spbt-btn {
  padding: 10px 22px; border: none; border-radius: 8px;
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
#spbt-wrap .spbt-btn-primary  { background: var(--spbt-primary); color: #fff; }
#spbt-wrap .spbt-btn-primary:hover { background: var(--spbt-primary-l); transform: translateY(-1px); }
#spbt-wrap .spbt-btn-accent   { background: var(--spbt-accent); color: #fff; }
#spbt-wrap .spbt-btn-accent:hover  { background: #e65100; transform: translateY(-1px); }
#spbt-wrap .spbt-btn-success  { background: var(--spbt-success); color: #fff; }
#spbt-wrap .spbt-btn-success:hover { background: #388e3c; }
#spbt-wrap .spbt-btn-danger   { background: var(--spbt-danger); color: #fff; }
#spbt-wrap .spbt-btn-sm { padding: 6px 14px; font-size: 13px; }
#spbt-wrap .spbt-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ── BADGES ─────────────────────────────────── */
#spbt-wrap .spbt-badge {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
  font-family: 'Rajdhani', sans-serif; letter-spacing: .5px;
}
#spbt-wrap .spbt-badge-excellent    { background: #e8f5e9; color: #1b5e20; }
#spbt-wrap .spbt-badge-best         { background: #e3f2fd; color: #0d47a1; }
#spbt-wrap .spbt-badge-good         { background: #f3e5f5; color: #4a148c; }
#spbt-wrap .spbt-badge-satisfactory { background: #fff3e0; color: #e65100; }
#spbt-wrap .spbt-badge-alert        { background: #ffebee; color: #b71c1c; }

/* ── PERFORMANCE TEXT COLORS ─────────────────── */
#spbt-wrap .spbt-perf-excellent    { color: #2e7d32; font-weight: 800; }
#spbt-wrap .spbt-perf-best         { color: #1565c0; font-weight: 800; }
#spbt-wrap .spbt-perf-good         { color: #6a1b9a; font-weight: 800; }
#spbt-wrap .spbt-perf-satisfactory { color: #e65100; font-weight: 800; }
#spbt-wrap .spbt-perf-alert        { color: #c62828; font-weight: 800; }

/* ── SUBJECT TABS ───────────────────────────── */
#spbt-wrap .spbt-subject-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
#spbt-wrap .spbt-subj-tab {
  padding: 8px 16px; border-radius: 20px;
  border: 2px solid var(--spbt-border);
  background: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .2s; font-family: 'Nunito', sans-serif;
}
#spbt-wrap .spbt-subj-tab.active { background: var(--spbt-primary); color: #fff; border-color: var(--spbt-primary); }

/* ── TOPIC TABLE ────────────────────────────── */
#spbt-wrap .spbt-topic-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
#spbt-wrap .spbt-topic-table th { background: var(--spbt-primary); color: #fff; padding: 10px 12px; text-align: left; font-family: 'Rajdhani', sans-serif; font-size: 15px; }
#spbt-wrap .spbt-topic-table td { padding: 10px 12px; border-bottom: 1px solid var(--spbt-border); }
#spbt-wrap .spbt-topic-table tr:hover td { background: #f5f7ff; }
#spbt-wrap .spbt-topic-table tr:last-child td { border-bottom: none; }

#spbt-wrap .spbt-tick-cross { display: flex; gap: 8px; align-items: center; }
#spbt-wrap .spbt-tc-btn {
  width: 34px; height: 34px; border: 2px solid var(--spbt-border);
  border-radius: 8px; background: #fff; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s;
}
#spbt-wrap .spbt-tc-btn.tick  { border-color: #2e7d32; background: #e8f5e9; }
#spbt-wrap .spbt-tc-btn.cross { border-color: #c62828; background: #ffebee; }
#spbt-wrap .spbt-score-input {
  width: 70px; padding: 6px 8px; border: 2px solid var(--spbt-border);
  border-radius: 6px; font-size: 14px; text-align: center;
}
#spbt-wrap .spbt-score-input:focus { outline: none; border-color: var(--spbt-primary); }

/* ── PROGRESS BAR ───────────────────────────── */
#spbt-wrap .spbt-progress-bar { width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-top: 4px; }
#spbt-wrap .spbt-progress-fill { height: 100%; border-radius: 4px; transition: width .4s; }
#spbt-wrap .spbt-fill-excellent    { background: linear-gradient(90deg,#43a047,#66bb6a); }
#spbt-wrap .spbt-fill-best         { background: linear-gradient(90deg,#1e88e5,#64b5f6); }
#spbt-wrap .spbt-fill-good         { background: linear-gradient(90deg,#8e24aa,#ba68c8); }
#spbt-wrap .spbt-fill-satisfactory { background: linear-gradient(90deg,#fb8c00,#ffb74d); }
#spbt-wrap .spbt-fill-alert        { background: linear-gradient(90deg,#e53935,#ef9a9a); }

/* ── STATS GRID ─────────────────────────────── */
#spbt-wrap .spbt-stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 16px; margin-bottom: 20px; }
#spbt-wrap .spbt-stat-card { background: var(--spbt-card); border-radius: 12px; padding: 18px; text-align: center; border: 2px solid var(--spbt-border); box-shadow: var(--spbt-shadow); }
#spbt-wrap .spbt-stat-card .spbt-stat-val { font-family: 'Rajdhani', sans-serif; font-size: 36px; font-weight: 700; line-height: 1; }
#spbt-wrap .spbt-stat-card .spbt-stat-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--spbt-muted); margin-top: 4px; }

/* ── CHARTS ─────────────────────────────────── */
#spbt-wrap .spbt-charts-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 20px; margin-bottom: 20px; }
#spbt-wrap .spbt-chart-card { background: var(--spbt-card); border-radius: var(--spbt-radius); padding: 20px; box-shadow: var(--spbt-shadow); border: 1px solid var(--spbt-border); }
#spbt-wrap .spbt-chart-title { font-size: 17px; color: var(--spbt-primary); margin-bottom: 16px; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
#spbt-wrap .spbt-chart-wrap  { position: relative; height: 260px; }

/* ── WEAK TOPICS ────────────────────────────── */
#spbt-wrap .spbt-weak-list { list-style: none; padding: 0; margin: 0; }
#spbt-wrap .spbt-weak-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--spbt-border); }
#spbt-wrap .spbt-weak-item:last-child { border-bottom: none; }
#spbt-wrap .spbt-weak-icon { font-size: 20px; }
#spbt-wrap .spbt-weak-info { flex: 1; }
#spbt-wrap .spbt-weak-name   { font-weight: 700; font-size: 14px; }
#spbt-wrap .spbt-weak-detail { font-size: 12px; color: var(--spbt-muted); }

/* ── PERIOD TABS ────────────────────────────── */
#spbt-wrap .spbt-period-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
#spbt-wrap .spbt-period-tab {
  padding: 8px 18px; border-radius: 20px;
  border: 2px solid var(--spbt-border);
  background: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .2s; font-family: 'Nunito', sans-serif;
}
#spbt-wrap .spbt-period-tab.active { background: var(--spbt-accent); color: #fff; border-color: var(--spbt-accent); }

/* ── DATA TABLE ─────────────────────────────── */
#spbt-wrap .spbt-data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#spbt-wrap .spbt-data-table th { background: var(--spbt-primary); color: #fff; padding: 10px 12px; text-align: left; font-family: 'Rajdhani', sans-serif; font-size: 14px; white-space: nowrap; }
#spbt-wrap .spbt-data-table td { padding: 9px 12px; border-bottom: 1px solid var(--spbt-border); }
#spbt-wrap .spbt-data-table tr:nth-child(even) td { background: #f7f9ff; }
#spbt-wrap .spbt-data-table tr:hover td { background: #eef2ff; }
#spbt-wrap .spbt-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--spbt-border); }

/* ── STUDENT CHIPS ──────────────────────────── */
#spbt-wrap .spbt-student-selector { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; align-items: center; }
#spbt-wrap .spbt-student-chip {
  padding: 7px 16px; border-radius: 20px;
  border: 2px solid var(--spbt-border);
  background: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
#spbt-wrap .spbt-student-chip.active { background: var(--spbt-primary); color: #fff; border-color: var(--spbt-primary); }

/* ── ALERT BOXES ────────────────────────────── */
#spbt-wrap .spbt-alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
#spbt-wrap .spbt-alert-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
#spbt-wrap .spbt-alert-warning { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
#spbt-wrap .spbt-alert-info    { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }
#spbt-wrap .spbt-alert-danger  { background: #ffebee; color: #b71c1c; border: 1px solid #ef9a9a; }

/* ── EMPTY STATE ────────────────────────────── */
#spbt-wrap .spbt-empty-state { text-align: center; padding: 40px 20px; color: var(--spbt-muted); }
#spbt-wrap .spbt-empty-state .spbt-es-icon { font-size: 56px; margin-bottom: 12px; }
#spbt-wrap .spbt-empty-state p { font-size: 15px; font-weight: 600; }

/* ── SECTION DIVIDER ────────────────────────── */
#spbt-wrap .spbt-divider { height: 1px; background: var(--spbt-border); margin: 24px 0; }

/* ── ANIMATION ──────────────────────────────── */
@keyframes spbtFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── SCROLLBAR ──────────────────────────────── */
#spbt-wrap ::-webkit-scrollbar       { width: 6px; height: 6px; }
#spbt-wrap ::-webkit-scrollbar-track { background: #f0f4ff; }
#spbt-wrap ::-webkit-scrollbar-thumb { background: #3949ab; border-radius: 3px; }

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 600px) {
  #spbt-wrap .spbt-header  { padding: 12px 14px; gap: 10px; }
  #spbt-wrap .spbt-main    { padding: 12px 8px; }
  #spbt-wrap .spbt-card    { padding: 16px; }
  #spbt-wrap .spbt-topic-table { font-size: 13px; }
  #spbt-wrap .spbt-topic-table th,
  #spbt-wrap .spbt-topic-table td { padding: 8px 8px; }
  #spbt-wrap .spbt-charts-grid { grid-template-columns: 1fr; }
}