/* ═══════════════════════════════════════════════════════
   KPAS — styles.css  |  v3.0
   KS Primary Academic & DE Departments · 2026
   ═══════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --g:   #2d6a4f;  --gl:  #40916c;  --gs:  #d8f3dc;
  --gp:  #f0faf2;  --ga:  #52b788;
  --t:   #1a1a2e;  --m:   #6b7280;  --bd:  #e5e7eb;
  --bg:  #f9fafb;  --w:   #ffffff;
  --dr:  #dc2626;  --ds:  #fef2f2;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(45,106,79,.10),0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 40px rgba(45,106,79,.15);
  --r: 12px;  --rs: 8px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg); color: var(--t);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════
   ADMIN BAR
   ════════════════════════════════════════ */
.admin-bar {
  display: none;
  background: linear-gradient(90deg,#1a3728,var(--g));
  color: #fff; padding: 9px 28px; font-size: 13px;
  align-items: center; justify-content: space-between; gap: 12px;
}
body.is-admin .admin-bar,
body.is-super .admin-bar { display: flex; }

.admin-bar-left { display:flex; align-items:center; gap:9px; font-weight:500; }
.admin-bar-left span { opacity:.7; font-weight:400; font-size:12px; }
.admin-bar-actions { display:flex; gap:7px; align-items:center; }

.btn-bar {
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:12px; font-weight:500;
  padding:5px 11px; border-radius:6px; cursor:pointer;
  font-family:inherit; transition:background .15s;
  display:flex; align-items:center; gap:5px;
}
.btn-bar:hover { background:rgba(255,255,255,.22); }
.btn-bar-danger { background:rgba(220,38,38,.25); border-color:rgba(220,38,38,.4); }
.btn-bar-danger:hover { background:rgba(220,38,38,.38); }
.btn-bar-super  { background:rgba(250,204,21,.18); border-color:rgba(250,204,21,.4); }
.btn-bar-super:hover { background:rgba(250,204,21,.28); }

/* ════════════════════════════════════════
   TOP BAR
   ════════════════════════════════════════ */
.topbar {
  background:var(--w); border-bottom:1px solid var(--bd);
  padding:0 28px; height:62px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}
.brand { display:flex; align-items:center; gap:11px; }
.brand-logo {
  width:37px; height:37px;
  background:linear-gradient(135deg,var(--g),var(--ga));
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; font-weight:700; flex-shrink:0;
}
.brand-title { font-size:17px; font-weight:700; color:var(--t); letter-spacing:-.3px; line-height:1.2; }
.brand-sub   { font-size:12px; color:var(--m); font-weight:400; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.admin-pill {
  font-size:12px; font-weight:500; padding:4px 10px;
  border-radius:20px; display:none; align-items:center; gap:5px;
  background:var(--gs); color:var(--g);
}
.admin-pill.on   { display:flex; }
.admin-pill.super { background:#fef9c3; color:#854d0e; }

/* ════════════════════════════════════════
   HERO
   ════════════════════════════════════════ */
.hero {
  background:linear-gradient(135deg,var(--g) 0%,var(--gl) 60%,var(--ga) 100%);
  padding:50px 28px 42px; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 20%,rgba(255,255,255,.07) 0%,transparent 50%),
    radial-gradient(circle at 10% 80%,rgba(255,255,255,.05) 0%,transparent 40%);
}
.hero-inner {
  max-width:960px; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.hero-content { flex:1; }

/* Hero tag */
.hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9); font-size:11px; font-weight:500;
  letter-spacing:1px; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; margin-bottom:14px;
  cursor:default;
}
.hero-tag span { color:#b7e4c7; }
body.is-super .hero-tag { cursor:pointer; }
body.is-super .hero-tag:hover { background:rgba(255,255,255,.25); }

.hero h1 {
  font-size:clamp(24px,3.8vw,36px); color:#fff;
  font-weight:700; line-height:1.15; letter-spacing:-.7px; margin-bottom:10px;
  outline:none;
}
.hero-sub {
  font-size:15px; color:rgba(255,255,255,.78);
  font-weight:300; max-width:520px; line-height:1.6; outline:none;
}

/* Editable outline for super */
.editable-super {
  border-bottom:1.5px dashed rgba(255,255,255,.5);
  cursor:text; min-width:40px;
}

/* Hero logo area */
.hero-logo-wrap {
  width:120px; height:120px; flex-shrink:0;
  border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
  border:2px dashed rgba(255,255,255,.3);
  transition:all .2s;
}
.hero-logo-wrap.has-image { background:transparent; border-color:transparent; }
.hero-logo-wrap img { width:100%; height:100%; object-fit:contain; }
body.is-super .hero-logo-wrap {
  cursor:pointer;
}
body.is-super .hero-logo-wrap:hover {
  background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5);
}
.hero-logo-placeholder {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,.6); font-size:12px; text-align:center; padding:10px;
}
.hero-logo-placeholder span { font-size:32px; }

/* ════════════════════════════════════════
   MAIN / SECTIONS
   ════════════════════════════════════════ */
.main { max-width:960px; margin:0 auto; padding:32px 22px 72px; }

.section { margin-bottom:38px; animation:fadeUp .38s ease both; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(11px); }
  to   { opacity:1; transform:translateY(0); }
}

.sec-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:13px; padding-bottom:9px; border-bottom:1px solid var(--bd);
}
.sec-title {
  font-size:12.5px; font-weight:600; color:var(--m);
  letter-spacing:.8px; text-transform:uppercase;
  display:flex; align-items:center; gap:7px; cursor:default;
}
body.is-admin .sec-title,
body.is-super .sec-title { cursor:pointer; }
.sec-dot { width:6px; height:6px; border-radius:50%; background:var(--ga); flex-shrink:0; }

.sec-header-actions { display:flex; gap:6px; }
.btn-sec-action {
  display:none; align-items:center; gap:4px;
  font-size:11.5px; font-weight:500;
  padding:4px 10px; border-radius:var(--rs);
  cursor:pointer; font-family:inherit; transition:all .15s;
}
body.is-admin .btn-sec-action,
body.is-super .btn-sec-action { display:flex; }

.btn-add-lnk {
  color:var(--g); background:var(--gp); border:1px dashed var(--ga);
}
.btn-add-lnk:hover { background:var(--gs); border-style:solid; }

.btn-del-sec {
  color:var(--dr); background:var(--ds); border:1px solid #fecaca;
}
.btn-del-sec:hover { background:#fee2e2; }

/* ── GRID & CARDS ── */
.btn-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:11px;
}
.link-card {
  position:relative; display:flex; flex-direction:column;
  align-items:flex-start; gap:7px;
  background:var(--w); border:1px solid var(--bd);
  border-radius:var(--r); padding:15px 15px 13px;
  text-decoration:none; color:var(--t);
  transition:all .2s; overflow:hidden; min-height:86px;
}
.link-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--g);
  border-radius:3px 0 0 3px; opacity:0; transition:opacity .2s;
}
.link-card:hover {
  border-color:var(--g); box-shadow:var(--shadow-md);
  transform:translateY(-1px); background:var(--gp);
}
.link-card:hover::before { opacity:1; }
.card-icon {
  width:30px; height:30px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--gs); flex-shrink:0;
}
.card-label { font-size:13px; font-weight:500; line-height:1.35; color:var(--t); flex:1; }
.card-arrow {
  position:absolute; bottom:10px; right:10px;
  font-size:13px; color:var(--ga); opacity:0; transition:opacity .2s,transform .2s;
}
.link-card:hover .card-arrow { opacity:1; transform:translate(2px,-2px); }

.card-ctrls { display:none; position:absolute; top:7px; right:7px; gap:3px; z-index:5; }
body.is-admin .link-card:hover .card-ctrls,
body.is-super .link-card:hover .card-ctrls { display:flex; }

.ctrl {
  width:22px; height:22px; border-radius:5px; border:none;
  cursor:pointer; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  transition:all .13s; font-family:inherit;
}
.ctrl-mv { background:#f3f4f6; color:#374151; }
.ctrl-mv:hover { background:#e5e7eb; }
.ctrl-ed { background:#dbeafe; color:#1d4ed8; }
.ctrl-ed:hover { background:#bfdbfe; }
.ctrl-dl { background:var(--ds); color:var(--dr); }
.ctrl-dl:hover { background:#fee2e2; }

.link-card.add-new {
  border:1.5px dashed var(--ga); background:var(--gp);
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:5px; cursor:pointer;
}
body.is-admin .link-card.add-new,
body.is-super .link-card.add-new { display:flex; }
.link-card.add-new:hover { background:var(--gs); border-color:var(--g); border-style:solid; transform:translateY(-1px); }
.add-icon { font-size:20px; color:var(--ga); }
.add-lbl  { font-size:12px; font-weight:500; color:var(--g); }

.btn-new-sec {
  display:none; align-items:center; gap:5px;
  font-size:12px; font-weight:500; color:var(--g);
  background:transparent; border:1.5px dashed var(--ga);
  padding:7px 18px; border-radius:var(--rs);
  cursor:pointer; font-family:inherit; transition:all .15s; margin:8px auto 0;
}
.btn-new-sec:hover { background:var(--gp); border-style:solid; }
body.is-admin .btn-new-sec,
body.is-super .btn-new-sec { display:flex; }

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.footer {
  border-top:1px solid var(--bd); padding:12px 28px;
  text-align:center; font-size:10px; color:var(--m); line-height:1.9; opacity:.85;
}
.footer a { color:var(--g); text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.footer-cc { font-size:9.5px; opacity:.7; }
.footer-edit-btn {
  background:none; border:none; cursor:pointer; color:var(--ga);
  font-size:12px; padding:0 4px; vertical-align:middle;
  opacity:.7; transition:opacity .15s;
}
.footer-edit-btn:hover { opacity:1; }

/* ════════════════════════════════════════
   MODALS / BACKDROPS
   ════════════════════════════════════════ */
.backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(10,16,26,.46); backdrop-filter:blur(5px);
  z-index:500; align-items:center; justify-content:center; padding:20px;
}
.backdrop.open { display:flex; }

.modal {
  background:var(--w); border-radius:16px;
  width:100%; max-width:460px;
  box-shadow:var(--shadow-lg); overflow:hidden; animation:mIn .2s ease;
}
.modal-lg { max-width:580px; }
@keyframes mIn {
  from { opacity:0; transform:scale(.96) translateY(7px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.mhd {
  padding:20px 22px 14px; border-bottom:1px solid var(--bd);
  display:flex; align-items:center; justify-content:space-between;
}
.mtitle { font-size:15.5px; font-weight:600; color:var(--t); }
.mclose {
  width:26px; height:26px; border-radius:6px; border:none;
  background:var(--bg); cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  color:var(--m); transition:all .13s;
}
.mclose:hover { background:var(--bd); color:var(--t); }
.mbody  { padding:18px 22px 6px; }
.mfoot  { padding:10px 22px 18px; display:flex; gap:8px; justify-content:flex-end; }

/* Fields */
.field { margin-bottom:14px; }
.field label {
  display:block; font-size:12px; font-weight:500;
  color:var(--m); margin-bottom:5px; letter-spacing:.3px;
}
.field input,.field select,.field textarea {
  width:100%; border:1px solid var(--bd); border-radius:var(--rs);
  padding:8px 11px; font-size:13.5px; font-family:inherit;
  color:var(--t); background:var(--w); transition:border-color .15s; outline:none;
  resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--g); box-shadow:0 0 0 3px rgba(45,106,79,.08);
}
.field-row  { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field-hint { font-size:11px; color:var(--m); margin-top:4px; }
.err        { color:var(--dr); font-size:12px; margin-top:5px; display:none; }

/* Buttons */
.btn-p {
  padding:8px 18px; background:var(--g); border:none;
  border-radius:var(--rs); font-size:13.5px; font-weight:500;
  color:#fff; cursor:pointer; font-family:inherit; transition:background .15s;
}
.btn-p:hover { background:var(--gl); }
.btn-c {
  padding:8px 14px; border:1px solid var(--bd); background:transparent;
  border-radius:var(--rs); font-size:13.5px; font-weight:500;
  color:var(--m); cursor:pointer; font-family:inherit; transition:all .15s;
}
.btn-c:hover { border-color:var(--t); color:var(--t); }
.btn-d {
  padding:8px 14px; background:var(--ds); border:none;
  border-radius:var(--rs); font-size:13.5px; font-weight:500;
  color:var(--dr); cursor:pointer; font-family:inherit; transition:background .15s;
}
.btn-d:hover { background:#fee2e2; }

/* Login logo */
.login-logo {
  width:46px; height:46px;
  background:linear-gradient(135deg,var(--g),var(--ga));
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:19px; font-weight:700; margin:0 auto 8px;
}
.login-sub { font-size:13px; color:var(--m); text-align:center; margin-bottom:18px; }

/* ── ICON PICKER ── */
.icon-picker-wrap {
  border:1px solid var(--bd); border-radius:var(--rs);
  padding:10px; margin-top:4px; background:var(--bg);
}
.icon-picker-label {
  font-size:11px; font-weight:500; color:var(--m);
  margin-bottom:8px; letter-spacing:.3px; text-transform:uppercase;
}
#iconPickerGrid {
  display:flex; flex-wrap:wrap; gap:5px; max-height:130px; overflow-y:auto;
}
.icon-opt {
  width:34px; height:34px; border-radius:7px; border:1.5px solid transparent;
  background:var(--w); cursor:pointer; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  transition:all .13s;
}
.icon-opt:hover  { border-color:var(--ga); background:var(--gp); }
.icon-opt.selected { border-color:var(--g); background:var(--gs); }

/* ── SITE SETTINGS ── */
.logo-preview-wrap {
  border:1px solid var(--bd); border-radius:var(--rs);
  padding:12px; text-align:center; background:var(--bg); margin-bottom:4px;
}
.logo-preview-wrap img {
  max-height:90px; max-width:100%; object-fit:contain; border-radius:6px;
}
.btn-upload {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--g);
  background:var(--gp); border:1px dashed var(--ga);
  padding:7px 14px; border-radius:var(--rs);
  cursor:pointer; font-family:inherit; transition:all .15s; margin-top:8px;
}
.btn-upload:hover { background:var(--gs); border-style:solid; }
.btn-logo-del {
  font-size:12px; color:var(--dr); background:none; border:none;
  cursor:pointer; font-family:inherit; margin-left:10px; opacity:.8;
}
.btn-logo-del:hover { opacity:1; text-decoration:underline; }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:24px; right:24px;
  background:var(--g); color:#fff;
  padding:9px 16px; border-radius:var(--rs);
  font-size:13px; font-weight:500; box-shadow:var(--shadow-md);
  z-index:999; display:none; align-items:center; gap:7px; animation:slideUp .2s ease;
}
.toast.on { display:flex; }
@keyframes slideUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width:640px) {
  .topbar    { padding:0 14px; }
  .hero      { padding:32px 14px 30px; }
  .hero-inner { flex-direction:column-reverse; }
  .hero-logo-wrap { width:80px; height:80px; align-self:flex-end; }
  .main      { padding:22px 14px 60px; }
  .admin-bar { padding:8px 14px; font-size:12px; }
  .admin-bar-left span { display:none; }
  .btn-grid  { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); }
  .modal, .modal-lg { max-width:100%; }
  .footer    { padding:10px 14px; }
}