/* =========================================================
   SCHOL-IQ · AI READY — Access pages (login / dashboard / admin)
   Light theme matching schol-iq.org. Visual re-skin only:
   every original selector is preserved, no HTML/JS changes.
   Requires: /logo-schol-iq.png in the site root.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  --bg:#F4F7FD;
  --card:#FFFFFF;
  --ink:#0F172A;
  --dim:#64748B;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --blue-soft:#EFF4FF;
  --purple:#7C3AED;
  --cyan:#06B6D4;
  --teal:#2A7F7F;
  --gold:#C9972B;
  --danger:#B42318;
  --radius:18px;
  --shadow:0 10px 34px rgba(15,23,42,.07);
  --accent:var(--cyan);
  --accent-ink:#0E7490;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--ink);
  font:17px/1.75 'Inter','Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  background:
    linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px) 0 0/44px 44px,
    radial-gradient(800px 420px at 90% -5%,rgba(124,58,237,.10),transparent 60%),
    radial-gradient(800px 420px at 5% 0%,rgba(37,99,235,.10),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- Header ---------- */
header{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:12px 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:10;
}
/* brand: logo + divider + "AI READY STUDENT" (original text hidden via font-size:0) */
header b{
  font-size:0;
  display:inline-flex;
  align-items:center;
  gap:16px;
  color:var(--dim);
}
header b::before{
  content:"";
  display:block;
  width:168px;
  height:40px;
  background:url('/logo-schol-iq.png') left center/contain no-repeat;
}
header b::after{
  content:"AI READY STUDENT";
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--dim);
  padding-inline-start:16px;
  border-inline-start:1px solid var(--line-strong);
  line-height:28px;
}
header a{
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  padding:8px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s,color .2s,box-shadow .2s;
}
header a:hover{color:var(--blue);border-color:var(--blue);box-shadow:0 4px 14px rgba(37,99,235,.12)}

/* ---------- Layout ---------- */
main{
  width:100%;
  max-width:1080px;
  margin:44px auto;
  padding:0 20px;
  flex:1;
}

h1,h2{line-height:1.4;margin-top:0;color:var(--ink);font-weight:800}
h1{font-size:clamp(26px,4vw,36px);letter-spacing:-.01em}
h2{font-size:21px}
p{margin:.4em 0 .8em}
main > h1{margin:0 0 10px}
main > .message{color:var(--danger)}

/* ---------- Cards ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  margin-bottom:24px;
  box-shadow:var(--shadow);
  position:relative;
}

/* Login card */
.login{
  max-width:480px;
  margin:56px auto;
  overflow:hidden;
}
.login::before{ /* brand gradient strip */
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--cyan));
}
.login h1{font-size:28px}
/* eyebrow pill ("بوابة الطلاب") like the site's section pills */
.login p.muted:first-child{
  display:inline-block;
  margin:0 0 10px;
  padding:3px 14px;
  font-size:13px;
  font-weight:700;
  color:var(--blue);
  background:var(--blue-soft);
  border:1px solid #C7D7FB;
  border-radius:999px;
}

/* ---------- Forms ---------- */
label{
  display:block;
  margin:16px 0 6px;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
input{
  font:inherit;
  color:var(--ink);
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:12px;
  width:100%;
  transition:border-color .2s,box-shadow .2s;
}
input::placeholder{color:#94A3B8}
input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

/* ---------- Buttons ---------- */
button,.button{
  font:inherit;
  font-weight:700;
  color:#fff;
  background:var(--blue);
  border:0;
  padding:11px 24px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  margin:10px 0;
  box-shadow:0 8px 20px rgba(37,99,235,.28);
  transition:transform .15s,box-shadow .15s,background .15s;
}
button:hover,.button:hover{
  background:var(--blue-dark);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(37,99,235,.34);
}
button:active,.button:active{transform:translateY(0)}
button:focus-visible,.button:focus-visible,a:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}
button:disabled{opacity:.5;cursor:wait;transform:none;box-shadow:none}

#submit{width:100%;margin-top:20px;padding:13px 24px}

/* secondary buttons (white, bordered — like "View Framework") */
#mode,#logout,#stop,#refresh{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line-strong);
  box-shadow:none;
}
#mode:hover,#logout:hover,#stop:hover,#refresh:hover{
  background:#fff;
  color:var(--blue);
  border-color:var(--blue);
  box-shadow:0 6px 18px rgba(37,99,235,.12);
}
#mode{display:block;width:100%;margin-top:14px}
#stop{color:var(--danger);border-color:#F3B8B2}
#stop:hover{color:var(--danger);border-color:var(--danger)}

/* CSV download: gold pill like "National Framework 2026" */
#download{
  background:#FFF4D6;
  color:#7A5A0B;
  border:1px solid #E8C766;
  box-shadow:none;
}
#download:hover{background:#FFEBB3;color:#6B4D08;box-shadow:0 6px 18px rgba(201,151,43,.22)}
#download:disabled{background:#F1F5F9;color:#94A3B8;border-color:var(--line)}

/* ---------- Text helpers ---------- */
.muted{color:var(--dim);font-size:15px}
.message{white-space:pre-wrap;color:var(--danger);min-height:28px}
#progress{color:var(--blue);font-size:15px;font-weight:600}
#identity{color:var(--dim)}

/* ---------- Grid & dashboard cards ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
}
.grid a{color:var(--ink);text-decoration:none}

#tools .panel{
  margin:0;
  border-top:4px solid var(--accent);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
#tools .panel h2{color:var(--ink);margin-bottom:6px}
#tools .panel p{color:var(--accent-ink);font-weight:700;margin:0}
#tools .panel:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(37,99,235,.16);
  border-color:var(--line);
  border-top-color:var(--accent);
}
/* per-unit accent (units 1–5, then chatbot) */
#tools .panel:nth-child(1){--accent:var(--cyan);--accent-ink:#0E7490}
#tools .panel:nth-child(2){--accent:var(--blue);--accent-ink:#1D4ED8}
#tools .panel:nth-child(3){--accent:var(--purple);--accent-ink:#6D28D9}
#tools .panel:nth-child(4){--accent:var(--teal);--accent-ink:#1F6363}
#tools .panel:nth-child(5){--accent:var(--gold);--accent-ink:#8A6410}
#tools .panel:nth-child(6){--accent:var(--ink);--accent-ink:var(--ink)}

/* ---------- Tables (admin) ---------- */
table{border-collapse:collapse;width:100%;font-size:14px}
th{
  color:#334155;
  font-size:13px;
  font-weight:800;
  background:#F1F5FB;
}
td,th{
  padding:11px 12px;
  text-align:right;
  border-bottom:1px solid var(--line);
}
tbody tr{transition:background .15s}
tbody tr:hover{background:#F8FAFF}
td button{font-size:13px;margin:3px;padding:7px 14px;box-shadow:none}
td button:hover{box-shadow:none}

.scroll{overflow:auto;border:1px solid var(--line);border-radius:12px;margin-top:10px}

code{
  direction:ltr;
  unicode-bidi:embed;
  font-family:Consolas,'Courier New',monospace;
  background:var(--blue-soft);
  color:var(--blue-dark);
  padding:2px 8px;
  border-radius:6px;
}

/* ---------- Links ---------- */
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}

/* ---------- Utility (must stay) ---------- */
[hidden]{display:none!important}

/* ---------- Footer ---------- */
footer{
  padding:26px;
  text-align:center;
  color:var(--dim);
  font-size:14px;
  background:#fff;
  border-top:1px solid var(--line);
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  body{font-size:16px}
  header{padding:10px 5%}
  header b::before{width:130px;height:32px}
  header b::after{display:none}
  main{margin:26px auto}
  .panel{padding:20px}
  .login{margin:28px auto}
  td,th{padding:9px 8px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}