/* ===========================================================================
   Student Panel — modern design system (app.css)
   Loaded after each page's existing CSS (via top.php / login.php) so it
   restyles the shared shell and provides reusable components. Scoped to the
   student app only (this file is included nowhere else).
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --brand:#2563eb;
  --brand-dark:#1e3a8a;
  --brand-grad:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%);
  --bg:#eef2f7;
  --surface:#ffffff;
  --line:#e6ebf2;
  --text:#0f172a;
  --muted:#64748b;
  --faint:#94a3b8;
  --success:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --shadow-sm:0 2px 10px rgba(15,23,42,.06);
  --topbar-h:56px;
  --bottomnav-h:62px;
  --maxw:600px;
}

/* ---------- base ---------- */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
  background:var(--bg) !important;
  color:var(--text);
  max-width:var(--maxw);
  margin:0 auto !important;
  -webkit-tap-highlight-color:transparent;
}
* { -webkit-tap-highlight-color:transparent; }

#canvas_outer{
  background:transparent !important;
  border:none !important;
  margin-top:var(--topbar-h) !important;
  padding:12px 12px calc(var(--bottomnav-h) + 16px) !important;
  min-height:auto !important;
}

/* ---------- top bar (.app_page_title in top.php) ---------- */
.app_page_title{
  height:var(--topbar-h) !important;
  width:100% !important; max-width:var(--maxw) !important;
  background:var(--brand-grad) !important;
  color:#fff !important;
  display:flex !important; align-items:center !important;
  padding:0 14px !important;
  box-shadow:0 2px 12px rgba(15,23,42,.18) !important;
  box-sizing:border-box;
}
.app_page_title img#show{ height:22px !important; filter:brightness(0) invert(1); margin:0 !important; }
.app_page_title > div[style*="margin-left"]{ margin-left:14px !important; }
.app_page_title .s_img,
.app_page_title img.s_img{ width:38px !important; height:38px !important; border-radius:50% !important; border:2px solid rgba(255,255,255,.6) !important; object-fit:cover; margin:0 !important; }
.app_page_title div[style*="font-size:15px"]{ font-size:15px !important; font-weight:700 !important; color:#fff; }
.app_page_title div[style*="font-size: 10px"]{ font-size:11px !important; color:rgba(255,255,255,.8) !important; }

/* ---------- slide-out drawer (menu.php) ---------- */
#left{
  width:78% !important; max-width:300px !important;
  background:var(--surface) !important;
  box-shadow:6px 0 24px rgba(15,23,42,.2) !important;
  border-left:none !important;
  padding:0 0 20px !important;
}
#black_outer{ background:rgba(15,23,42,.45) !important; background-image:none !important; }
a.new_menu, .new_menu{
  display:flex !important; align-items:center !important; gap:12px;
  padding:13px 18px !important;
  font-size:14.5px !important; font-weight:500 !important;
  color:var(--text) !important; text-decoration:none !important;
  border-bottom:1px solid var(--line) !important;
  background:#fff !important;
}
a.new_menu img{ height:24px !important; width:24px; object-fit:contain; margin:0 !important; }
a.new_menu:hover, a.new_menu:active{ background:#f0f6ff !important; color:var(--brand) !important; }
.new_menu[style*="color:#ef5350"]{ font-size:17px !important; font-weight:700 !important; color:var(--text) !important; }
a[href="logout.php"]{
  background:var(--danger) !important; background-image:none !important;
  border-radius:10px !important; width:calc(100% - 36px) !important;
  margin:14px 18px 0 !important; font-weight:600 !important;
}

/* ---------- bottom nav (footer.php) ---------- */
.app-bottomnav{
  max-width:var(--maxw); width:100%;
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  z-index:190; display:flex;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -2px 14px rgba(15,23,42,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.app-bottomnav a{
  flex:1; text-align:center; text-decoration:none; color:var(--muted);
  padding:8px 0 7px; font-size:11px; position:relative;
}
.app-bottomnav a img{ width:24px; height:24px; display:block; margin:0 auto 3px; }
.app-bottomnav a:hover, .app-bottomnav a.active{ color:var(--brand); }
.app-bottomnav .nav-badge{
  position:absolute; top:2px; left:50%; margin-left:6px;
  min-width:16px; height:16px; line-height:16px; padding:0 4px;
  background:var(--danger); color:#fff; font-size:9px; font-weight:700;
  border-radius:9px; text-align:center;
}

/* ---------- reusable components ---------- */
.app-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:16px; margin:0 0 14px; }
.app-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.app-section-title{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-dark); margin:4px 2px 10px; }

.app-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.app-tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:16px 14px; text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:8px; transition:transform .12s ease, box-shadow .15s ease; }
.app-tile:active{ transform:scale(.97); }
.app-tile .ic{ width:42px; height:42px; border-radius:11px; background:#eef4ff; display:flex; align-items:center; justify-content:center; }
.app-tile .ic img{ width:24px; height:24px; }
.app-tile .lbl{ font-size:14px; font-weight:600; }
.app-tile .sub{ font-size:12px; color:var(--muted); }

.app-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; box-sizing:border-box; padding:14px 18px; border:none; border-radius:11px; background:var(--brand-grad); color:#fff !important; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 6px 16px rgba(37,99,235,.3); text-decoration:none; }
.app-btn:active{ filter:brightness(.96); }
.app-btn-ghost{ background:transparent; color:var(--brand) !important; border:1.5px solid var(--brand); box-shadow:none; }

.app-input{ width:100%; box-sizing:border-box; padding:13px 14px; border:1.5px solid var(--line); border-radius:11px; font-size:15px; background:#fff; color:var(--text); }
.app-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.app-field-label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin:0 0 6px 2px; }

.app-list-row{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:10px; }
.app-chip{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; background:#eef4ff; color:var(--brand-dark); }
.app-chip.is-success{ background:#dcfce7; color:#166534; }
.app-chip.is-danger{ background:#fee2e2; color:#991b1b; }
.app-chip.is-warn{ background:#fef3c7; color:#92400e; }

.app-empty{ text-align:center; color:var(--muted); padding:40px 20px; font-size:14px; }
.app-empty img{ width:64px; opacity:.5; margin-bottom:12px; }

/* ---------- login ---------- */
.login-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; background:var(--brand-grad); }
.login-logo{ height:64px; margin-bottom:18px; background:#fff; border-radius:14px; padding:8px 12px; box-shadow:var(--shadow); }
.login-card{ width:100%; max-width:360px; background:var(--surface); border-radius:18px; box-shadow:var(--shadow); padding:26px 22px; box-sizing:border-box; }
.login-title{ font-size:20px; font-weight:700; color:var(--text); text-align:center; margin:0 0 4px; }
.login-sub{ font-size:13px; color:var(--muted); text-align:center; margin:0 0 20px; }
.login-row{ margin-bottom:14px; }
.login-link{ display:block; text-align:center; margin-top:16px; color:var(--brand); font-size:13.5px; text-decoration:none; font-weight:600; }
.login-alert{ padding:11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:14px; }
.login-alert.ok{ background:#dcfce7; color:#166534; }
.login-alert.err{ background:#fee2e2; color:#991b1b; }