/* STPM CGPA Calculator (CSS) */
/* Theme colors */
:root{
  --accent: #F43676;
  --bg: #ffffff;
  --card: #ffffff;
  --text: #111;
  --muted: #6b6b6b;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(15,15,15,0.08);
}

.stpm-calc{
  max-width: 980px;
  margin: 18px auto;
  padding: 18px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
}

/* Dark mode */
.stpm-calc.dark{
  --bg: #0f1115;
  --card: #0b0c0e;
  --text: #e9eef3;
  --muted: #bfc6cc;
  background: var(--card);
  color: var(--text);
}
.sc-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;}
.sc-header h2{ font-size:20px; margin:0; color:var(--accent); }
.sc-actions { display:flex; gap:8px; align-items:center; }

.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.input-small{ width:88px; padding:8px; border-radius:10px; border:1px solid #e3e3e3; }
.hint{ color:var(--muted); font-size:13px; margin:6px 0 12px; }

.btn{ background:transparent; border:1px solid #ddd; padding:8px 12px; border-radius:10px; cursor:pointer; }
.btn.small{ padding:6px 8px; font-size:13px; }
.btn.primary{ background:var(--accent); color:#fff; border: none; }
.btn:active{ transform:translateY(1px); }

.semesters{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }

/* Semester card */
.semester{
  background: linear-gradient(180deg, rgba(244,54,118,0.03), rgba(244,54,118,0.01));
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.04);
}
.semester-header{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px;}
.semester-header h3{ margin:0; font-size:16px; color:var(--accent); }
.semester-controls{ display:flex; gap:8px; align-items:center; }

.subjects{ display:flex; flex-direction:column; gap:8px; }

.subject-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.subject-row input[type="text"], .subject-row select, .subject-row input[type="number"]{
  padding:8px; border-radius:8px; border:1px solid #e5e5e5;
}
.subject-row .subj-name{ flex:1 1 160px; min-width:120px; }
.subject-row .grade-select{ width:110px; }
.subject-row .credits{ width:80px; }

/* tooltips */
.i{ display:inline-block; background:var(--accent); color:#fff; width:20px; height:20px; border-radius:50%; text-align:center; line-height:20px; font-size:12px; cursor:pointer; margin-left:6px; }
.tooltip{ display:none; position:relative; background: rgba(0,0,0,0.85); color:#fff; padding:8px 10px; border-radius:8px; font-size:13px; max-width:260px; margin-top:8px; }
.tooltip.show{ display:block; }

/* results */
.results-panel{ margin-top:16px; padding:12px; border-radius:12px; border:1px solid rgba(0,0,0,0.04); background: linear-gradient(180deg, rgba(244,54,118,0.02), rgba(244,54,118,0.005)); }
.results-panel h2{ margin:0 0 10px 0; color:var(--accent); }
.summary{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.summary .card{ background:var(--card); border-radius:10px; padding:10px; box-shadow:var(--shadow); min-width:160px; flex:1 1 180px; }
.charts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.charts canvas{ width:100% !important; min-height:200px; background:transparent; border-radius:8px; padding:6px; }

/* breakdown table */
.breakdown{ margin-top:12px; overflow:auto; border-radius:10px; }
.breakdown table{ width:100%; border-collapse:collapse; }
.breakdown th, .breakdown td{ text-align:left; padding:8px 10px; border-bottom:1px solid rgba(0,0,0,0.05); font-size:14px; }
.breakdown th{ background:rgba(0,0,0,0.02); }

/* responsive */
@media (max-width:768px){
  .summary{ flex-direction:column; }
  .subject-row{ gap:6px; }
  .sc-actions{ flex-wrap:wrap; gap:6px; }
}

/* hidden helper */
.hidden{ display:none !important; }