/* ── COMPONENTS CSS ── */
/* BUG-043 FIX: Hover lift transforms wrapped in @media (hover:hover) so
   they only apply on devices that support true hover (mouse/trackpad),
   not on touch devices where they cause a jarring "jump" on tap. */
/* BUG-044 FIX: .score-ring fully defined here — dashboard.css no longer
   needs its own duplicate definition. */
/* BUG-134 (component-level): .toggle checkbox kept in accessibility tree
   using clip instead of width/height:0 */

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 20px; border-radius:var(--r); font-size:var(--fs-sm);
  font-weight:600; cursor:pointer; border:1.5px solid transparent;
  transition:all var(--t-fast) var(--ease); white-space:nowrap;
  font-family:var(--font); line-height:1;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { padding:6px 14px; font-size:var(--fs-xs); border-radius:var(--r-sm); }
.btn-lg { padding:12px 28px; font-size:var(--fs-md); border-radius:var(--r-md); }
.btn-xl { padding:14px 36px; font-size:var(--fs-lg); border-radius:var(--r-md); font-weight:700; }

.btn-primary {
  background:linear-gradient(135deg,var(--brand-primary),#E55A2B);
  color:white; box-shadow:0 4px 14px rgba(255,107,53,.3);
}
/* BUG-043 FIX: hover lift only on true-hover devices (not touchscreens) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) {
    transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,107,53,.4);
  }
  .btn-blue:hover:not(:disabled) { transform:translateY(-2px); }
  .btn-danger:hover:not(:disabled) { transform:translateY(-2px); }
  .card-hover:hover {
    transform:translateY(-4px); box-shadow:var(--shadow-md);
    border-color:rgba(255,107,53,.2);
  }
}
.btn-blue {
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700));
  color:white; box-shadow:0 4px 14px rgba(37,99,235,.25);
}
.btn-green {
  background:linear-gradient(135deg,var(--green-600),#15803D);
  color:white; box-shadow:0 4px 14px rgba(22,163,74,.25);
}
.btn-outline {
  background:transparent; border-color:var(--border-2); color:var(--text-2);
}
.btn-outline:hover:not(:disabled) { border-color:var(--brand-primary); color:var(--brand-text); background:rgba(255,107,53,.05); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover:not(:disabled) { background:var(--bg-secondary); color:var(--text); }
.btn-danger { background:linear-gradient(135deg,#EF4444,#DC2626); color:white; }

.btn-icon {
  width:36px; height:36px; padding:0; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-secondary); border:1px solid var(--border);
  color:var(--text-2); transition:all var(--t-fast); font-size:1rem;
}
.btn-icon:hover { background:var(--gray-100); color:var(--text); }
.btn-circle { border-radius:50%; }

/* ── CARDS ── */
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-5);
  box-shadow:var(--shadow-sm); transition:all var(--t-base) var(--ease);
}
/* card-hover transform now inside @media(hover:hover) block above (BUG-043) */
.card-sm { padding:var(--sp-3); border-radius:var(--r); }
.card-lg { padding:var(--sp-8); border-radius:var(--r-lg); }
.card-gradient {
  background:linear-gradient(135deg,rgba(255,107,53,.08),rgba(83,52,131,.06));
  border-color:rgba(255,107,53,.15);
}

/* ── STAT CARD ── */
.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-2);
  box-shadow:var(--shadow-sm);
}
.stat-label { font-size:var(--fs-xs); font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }
.stat-value { font-size:var(--fs-2xl); font-weight:900; color:var(--text); font-family:var(--font-head); letter-spacing:-1px; }
.stat-change { font-size:var(--fs-xs); font-weight:600; display:flex; align-items:center; gap:3px; }
.stat-up   { color:var(--green-600); }
.stat-down { color:#EF4444; }

/* ── XP PROGRESS ── */
.xp-bar-wrap { }
.xp-bar-label { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--text-2); margin-bottom:5px; }
.xp-bar { width:100%; height:7px; background:var(--gray-200); border-radius:var(--r-full); overflow:hidden; }
.xp-bar-fill { height:100%; background:linear-gradient(90deg,var(--brand-primary),#F59E0B); border-radius:var(--r-full); transition:width .5s var(--ease); }
[data-theme="dark"] .xp-bar { background:rgba(255,255,255,.1); }

/* ── FORMS ── */
.form-group { margin-bottom:var(--sp-4); }
.form-label { display:block; font-size:var(--fs-sm); font-weight:600; color:var(--text); margin-bottom:6px; }
.form-hint  { font-size:var(--fs-xs); color:var(--text-3); margin-top:4px; }
.form-error { font-size:var(--fs-xs); color:#EF4444; margin-top:4px; }

.input, .select, .textarea {
  width:100%; padding:10px 14px; border-radius:var(--r);
  border:1.5px solid var(--border-2); background:var(--bg);
  color:var(--text); font-size:var(--fs-base); font-family:var(--font);
  outline:none; transition:border-color var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
  border-color:var(--blue-600);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.textarea { resize:vertical; min-height:100px; }
.input::placeholder, .textarea::placeholder { color:var(--text-3); }
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea {
  background:var(--bg-secondary); border-color:rgba(255,255,255,.1);
}
.input-group { display:flex; align-items:center; gap:var(--sp-2); }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4); opacity:0; visibility:hidden; transition:all var(--t-base);
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
  background:var(--bg-card); border-radius:var(--r-xl); padding:var(--sp-8);
  max-width:520px; width:100%; box-shadow:var(--shadow-xl);
  transform:scale(.95) translateY(12px); transition:transform var(--t-base);
  border:1px solid var(--border);
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-5); }
.modal-title { font-size:var(--fs-xl); font-weight:800; color:var(--text); }
.modal-close { color:var(--text-3); font-size:1.3rem; padding:4px; border-radius:var(--r); cursor:pointer; }
.modal-close:hover { color:var(--text); background:var(--bg-secondary); }
.modal-footer { display:flex; gap:var(--sp-3); justify-content:flex-end; margin-top:var(--sp-6); }

/* ── TABS ── */
.tabs { display:flex; border-bottom:1px solid var(--border); gap:0; }
.tab-btn {
  padding:10px 18px; font-size:var(--fs-sm); font-weight:500; color:var(--text-2);
  border-bottom:2px solid transparent; cursor:pointer; transition:all var(--t-fast);
  background:none; border-top:none; border-left:none; border-right:none;
  font-family:var(--font); white-space:nowrap;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--brand-text); border-bottom-color:var(--brand-primary); font-weight:700; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table th { padding:10px 14px; text-align:left; font-size:var(--fs-xs); font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); }
.table td { padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text); }
.table tr:hover td { background:var(--bg-secondary); }
.table tr:last-child td { border-bottom:none; }

/* ── SELECT STYLED ── */
.select { appearance:none; cursor:pointer; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
/* Dark-mode dropdown-arrow contrast fix (2026-08-17, found during the
   Teacher settings-bar upgrade): the arrow above is #6B7280 (gray-600)
   in BOTH themes — only ~3.7-3.9:1 against dark-mode's --bg/
   --bg-secondary, borderline and hard to see in practice. Re-colored
   to the same hex already used for --text-2 in dark mode (#94A3B8,
   see variables.css) — reuses an existing token's color instead of
   inventing a new one, ~7:1 contrast against dark backgrounds.
   Overrides ONLY background-image (the arrow); dimensions, padding,
   layout, and native <select> behavior are untouched. Light mode
   (the .select rule above) is completely unaffected. */
[data-theme="dark"] .select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ── TOGGLE ── */
/* BUG-134 FIX: checkbox stays in the accessibility tree via clip,
   instead of opacity:0;width:0;height:0 which removes it entirely
   from screen reader navigation. */
.toggle { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle input {
  position: absolute;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  width: 1px; height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.toggle-slider {
  position:absolute; inset:0; background:var(--gray-300);
  border-radius:12px; cursor:pointer; transition:background .2s;
}
.toggle-slider::before {
  content:''; position:absolute; width:18px; height:18px;
  left:3px; top:3px; background:white; border-radius:50%;
  transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle input:checked + .toggle-slider { background:var(--brand-primary); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }
/* BUG-134 FIX: visible focus ring when the (now-accessible) checkbox is tabbed to */
.toggle input:focus-visible + .toggle-slider {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ── PROGRESS BAR ── */
.progress { width:100%; height:6px; background:var(--gray-200); border-radius:var(--r-full); overflow:hidden; }
.progress-bar { height:100%; border-radius:var(--r-full); transition:width .5s var(--ease); }
.progress-brand { background:linear-gradient(90deg,var(--brand-primary),#F59E0B); }
.progress-blue  { background:linear-gradient(90deg,var(--blue-600),#60A5FA); }
.progress-green { background:linear-gradient(90deg,var(--green-600),#34D399); }

/* ── CHIP / TAG ── */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:600;
  background:var(--bg-secondary); border:1px solid var(--border);
  color:var(--text-2); cursor:pointer; transition:all var(--t-fast);
}
.chip:hover { border-color:var(--brand-primary); color:var(--brand-text); background:rgba(255,107,53,.06); }

/* ── SCORE RING ── */
/* BUG-044 FIX: Full definition lives here only. dashboard.css must NOT
   redefine .score-ring — remove any duplicate rule there. */
.score-ring { position:relative; width:80px; height:80px; }
.score-ring svg { transform:rotate(-90deg); }
.score-ring circle { fill:none; }
.score-ring .bg   { stroke:var(--gray-200); stroke-width:7; }
.score-ring .fill { stroke-linecap:round; stroke-width:7; transition:stroke-dashoffset .8s var(--ease); }
.score-ring .val {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-size:var(--fs-md); font-weight:900; color:var(--text);
}
.score-ring .val span { font-size:var(--fs-xs); color:var(--text-3); margin-top:-2px; }

/* ── EMPTY STATE ── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--sp-16); text-align:center;
}
.empty-icon { font-size:4rem; margin-bottom:var(--sp-4); opacity:.5; }
.empty-title { font-size:var(--fs-lg); font-weight:700; color:var(--text); margin-bottom:var(--sp-2); }
.empty-desc  { font-size:var(--fs-sm); color:var(--text-2); max-width:340px; }