/* ==========================================================================
   PCB Campus Mission Hub — Responsive and print rules for every page (load last)
   ========================================================================== */

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .col-8, .col-4, .col-7, .col-5 { grid-column: span 12; }
  .hero { grid-template-columns: auto 1fr; }
  .hero-xp { grid-column: 1 / -1; }
  .sticky-side { position: static; }
}
@media (max-width: 960px) {
  :root { --gap: 16px; }
  .sidebar { transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg); background: var(--surface); }
  body.drawer-open .sidebar { transform: none; }
  .drawer-backdrop { position: fixed; inset: 0; background: rgba(5, 6, 10, .5); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }
  .sidebar .sidebar-close { display: inline-grid; }
  .main { margin-left: 0; }
  .topbar .menu-btn { display: inline-grid; }
  .topbar { padding: 0 16px; }
  .content { padding: 18px 16px 96px; }
  .app-footer { padding: 0 16px 96px; }
  .col-6 { grid-column: span 12; }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a, .bottom-nav button {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: var(--radius-sm);
    font-size: 11px; color: var(--muted); background: none; border: 0; cursor: pointer; min-height: 48px; justify-content: center;
  }
  .bottom-nav .icon { width: 20px; height: 20px; }
  .bottom-nav a.is-active { color: var(--accent); }
}
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px; }
  .kpi-value { font-size: 22px; }
  .kpi-icon { width: 30px; height: 30px; }
  .hero { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .hero .avatar-lg { display: none; }
  .hero h2 { font-size: 21px; }
  .hero-xp { flex-direction: row; }
  .hero-xp-info { min-width: 0; flex: 1; }
  .topbar-title p, .avatar-meta, .hide-sm { display: none; }
  .sp-chip { padding: 4px 8px; }
  .sp-chip small { display: none; }
  .mission-current { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; }
  .podium-card.first { order: -1; }
  .field-row { grid-template-columns: 1fr; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .toolbar .grow { flex-basis: 100%; }
  .toolbar .select { flex: 1; min-width: 0 !important; }
  .heatmap { grid-template-rows: repeat(7, 9px); gap: 3px; }
  .heat { height: 9px; border-radius: 2px; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dd { margin-bottom: 10px; }
  .cards-grid { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .badge-tile { padding: 16px 12px; }
  .detail-head h2 { font-size: 19px; }
  .card-header { padding: 14px 16px 0; }
  .card-body { padding: 14px 16px 16px; }
  .card-pad { padding: 16px; }
  .step span { font-size: 11px; }
  .dropdown-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 4px); width: auto; }

  /* Tables become stacked cards */
  .table-stack thead { display: none; }
  .table-stack tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .table-stack td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left; flex: none; }
  .table-stack td[data-label=""]::before { display: none; }
  .table-stack .t-right { text-align: right; }
}

/* ---------- Administrator pages ---------- */
@media (max-width: 1100px) { .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .row-msg { max-width: none; text-align: right; }
}
@media print {
  .sidebar, .topbar, .app-footer, .page-actions, .no-print, .drawer-backdrop { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; max-width: none; }
  body { background: #fff !important; color: #000; }
  .cred-slip { break-inside: avoid; background: #fff; color: #000; border-color: #999; }
  .cred-slip .pw { background: #eee; color: #000; }
}

/* ---------- Sign-in screens ---------- */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  .auth-main { min-height: 100vh; }
  .auth-card-brand { display: block; }
}