/* Arabic Quiz V0.5.2 — Rifq-derived visual identity + quiet automated teacher workflow.
   AI remains behind the application; this layer keeps the visible experience calm. */
:root {
  --background: #f6f2e9;
  --surface: #fffdfa;
  --surface-soft: #f4efe8;
  --surface-strong: #ece4da;
  --foreground: #2b2622;
  --muted: #756d66;
  --muted-2: #716860;
  --border: #e1d8cf;
  --border-strong: #d1c5bb;
  --primary: #8b4f7f;
  --primary-strong: #704067;
  --primary-soft: #f0e4ed;
  --primary-softer: #faf4f8;
  --shadow-xs: 0 1px 2px rgba(44,38,31,.035);
  --shadow-sm: 0 8px 24px rgba(44,38,31,.055);
  --shadow-md: 0 18px 50px rgba(44,38,31,.07);
  --radius: 18px;
  --radius-sm: 13px;
}

body.app-body {
  background:
    radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--primary) 7%, transparent) 0, transparent 34rem),
    radial-gradient(circle at 85% 110%, rgba(200,162,76,.055) 0, transparent 30rem),
    var(--background);
}

::selection { background: color-mix(in srgb, var(--primary) 24%, transparent); }
:focus-visible { outline-color: color-mix(in srgb, var(--primary) 34%, transparent); }

.sidebar {
  background: color-mix(in srgb, #f3eee5 95%, white);
  border-left-color: color-mix(in srgb, var(--primary) 7%, var(--border));
  box-shadow: -1px 0 0 rgba(255,255,255,.58) inset;
}
.brand { border-bottom-color: color-mix(in srgb, var(--primary) 7%, var(--border)); }
.brand-mark {
  background: linear-gradient(145deg, #9a5c8e, var(--primary-strong));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}
.teacher-id {
  border-color: color-mix(in srgb, var(--primary) 8%, var(--border));
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.teacher-avatar {
  background: var(--primary-soft);
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
}
.nav-link:hover { background: color-mix(in srgb, var(--primary) 5%, white); }
.nav-link.is-active {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  color: var(--primary-strong);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 7%, transparent);
}
.nav-link.is-active::after { background: var(--primary); }
.sidebar-note {
  background: linear-gradient(145deg, var(--primary-softer), color-mix(in srgb, #fffdfa 92%, var(--primary-soft)));
  border-color: color-mix(in srgb, var(--primary) 13%, var(--border));
}

.page-title { color: var(--foreground); }
.page-eyebrow { color: var(--primary-strong); }
.card {
  border-color: color-mix(in srgb, var(--primary) 5%, var(--border));
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: color-mix(in srgb, var(--primary) 10%, var(--border)); }
.stat-icon-wrap {
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 11%, var(--border));
}
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 91%, white), var(--primary));
  border-color: color-mix(in srgb, var(--primary) 86%, #4e2a48);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 18%, transparent);
}
.btn-primary:hover { background: var(--primary-strong); }
.input:focus, .select:focus, .textarea:focus, .student-select:focus {
  border-color: color-mix(in srgb, var(--primary) 54%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent), 0 6px 18px rgba(44,38,31,.035);
}
.source-policy-card,
.source-import-toolbar { border-color: color-mix(in srgb, var(--primary) 16%, var(--border)); }
.source-metric { background: color-mix(in srgb, var(--surface-soft) 82%, white); border-color: var(--border); }

.login-brand-mark { background: linear-gradient(145deg, #9a5c8e, var(--primary-strong)); }
.login-title { color: var(--foreground); }
.login-card { border-color: color-mix(in srgb, var(--primary) 9%, var(--border)); box-shadow: var(--shadow-md); }
.login-screen::before { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.public-brand { color: var(--primary-strong); }

/* Automated results approval — one calm review/confirm surface. */
.result-approval-card {
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  background: linear-gradient(145deg, var(--surface), var(--primary-softer));
}
.result-approval-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 160px)) minmax(220px, 1fr) auto;
  align-items: center;
  gap: .85rem;
}
.result-confirm-copy { display: grid; gap: .35rem; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.result-confirm-copy .badge { width: fit-content; }
@media (max-width: 860px) {
  .result-approval-summary { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .result-confirm-copy, .result-approval-summary > .inline-form, .result-approval-summary > .btn { grid-column: 1 / -1; }
}