/* ============================================================
 * THEME / DESIGN SYSTEM  —  QWERTY Education
 * ------------------------------------------------------------
 * WHAT: CSS variables, light & dark themes, base typography.
 * WHY : Single source of truth for the whole UI look.
 * EDIT: Change brand colours here to re-skin the entire app.
 * Brand palette: blue #1E88E5, orange #FF5722, gold #B8945A
 * ============================================================ */

:root {
  /* Brand */
  --brand-blue:  #1E88E5;
  --brand-blue-d:#1565C0;
  --brand-orange:#FF5722;
  --brand-gold:  #B8945A;

  /* Light theme surfaces */
  --bg:        #f1f4f9;
  --bg-soft:   #e9eef5;
  --surface:   #ffffff;
  --surface-2: #f7f9fc;
  --border:    #e2e8f0;
  --text:      #1e293b;
  --text-soft: #64748b;
  --shadow:    0 4px 20px rgba(30,41,59,.08);
  --shadow-lg: 0 12px 40px rgba(30,41,59,.14);

  /* Accent (overridden per-role via JS) */
  --accent:    #1E88E5;
  --accent-soft: rgba(30,136,229,.12);

  /* Status */
  --success:#16a34a; --error:#dc2626; --warning:#f59e0b; --info:#0ea5e9;

  --radius:   14px;
  --radius-sm:10px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sidebar-w: 264px;
  --topbar-h: 66px;
}

[data-theme="dark"] {
  --bg:        #0f172a;
  --bg-soft:   #111c33;
  --surface:   #1e293b;
  --surface-2: #243349;
  --border:    #334155;
  --text:      #e2e8f0;
  --text-soft: #94a3b8;
  --shadow:    0 4px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  --accent-soft: rgba(30,136,229,.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { line-height: 1.25; font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.2rem; border: none; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; cursor: pointer; transition: all .2s ease;
  background: var(--surface-2); color: var(--text);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--brand-blue-d)); color:#fff; }
.btn-orange  { background: linear-gradient(135deg, var(--brand-orange), #e64a19); color:#fff; }
.btn-ghost   { background: transparent; border: 1.5px solid var(--border); }
.btn-danger  { background: var(--error); color:#fff; }
.btn-sm { padding: .4rem .75rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity:.6; cursor:not-allowed; transform:none; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem;
}

/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }
.field label { display:block; font-weight:600; font-size:.88rem; margin-bottom:.4rem; color:var(--text); }
.input, select.input, textarea.input {
  width:100%; padding:.7rem .9rem; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text);
  font:inherit; transition:border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.input::placeholder { color: var(--text-soft); }
.hint { font-size:.78rem; color:var(--text-soft); margin-top:.3rem; }
.err  { font-size:.78rem; color:var(--error); margin-top:.3rem; display:none; }
.field.invalid .input { border-color: var(--error); }
.field.invalid .err { display:block; }

/* ---------- Badges & chips ---------- */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem;
  border-radius:999px; font-size:.74rem; font-weight:700; }
.badge-success{ background:rgba(22,163,74,.15); color:var(--success); }
.badge-error  { background:rgba(220,38,38,.15); color:var(--error); }
.badge-warn   { background:rgba(245,158,11,.15); color:var(--warning); }
.badge-info   { background:rgba(14,165,233,.15); color:var(--info); }

/* ---------- Utility ---------- */
.text-soft{ color:var(--text-soft); } .text-center{ text-align:center; }
.flex{ display:flex; } .between{ justify-content:space-between; } .items-center{ align-items:center; }
.gap{ gap:1rem; } .gap-sm{ gap:.5rem; } .wrap{ flex-wrap:wrap; } .grow{ flex:1; }
.mt{ margin-top:1rem; } .mb{ margin-bottom:1rem; } .hidden{ display:none !important; }

/* ---------- Toast ---------- */
.toast-container{ position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:.6rem; }
.toast{ display:flex; align-items:center; gap:.6rem; min-width:260px; max-width:360px;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-left:5px solid var(--info); border-radius:var(--radius-sm); padding:.8rem 1rem;
  box-shadow:var(--shadow-lg); opacity:0; transform:translateX(120%); transition:all .3s ease; }
.toast.show{ opacity:1; transform:translateX(0); }
.toast-success{ border-left-color:var(--success); } .toast-success i{ color:var(--success); }
.toast-error{ border-left-color:var(--error); } .toast-error i{ color:var(--error); }
.toast-warning{ border-left-color:var(--warning); } .toast-warning i{ color:var(--warning); }
.toast-info i{ color:var(--info); }
.toast span{ flex:1; font-size:.9rem; }
.toast-close{ background:none; border:none; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--text-soft); }

/* ---------- Skeleton loading ---------- */
.skeleton{ background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:8px; }
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------- Spinner ---------- */
.spinner{ width:38px; height:38px; border:4px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; margin:1rem auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Animations ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.fade-up{ animation:fadeUp .5s ease both; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-soft); }