/* ===== Mobile responsiveness ===== */
/* Add <link rel="stylesheet" href="responsive.css"> to every page, right
   after the existing stylesheet links, so this applies site-wide. */

@media (max-width: 768px) {

  /* ---- Header / nav ---- */
  header { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  header .brand { font-size: 17px; }
  header nav.topnav { order: 3; width: 100%; gap: 12px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  header nav.topnav a { white-space: nowrap; font-size: 12px; }
  header .user { font-size: 11px; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  header .user button { padding: 4px 8px; font-size: 11px; }

  main { padding: 12px; }

  /* ---- KPIs ---- */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .value { font-size: 20px; }

  /* ---- Analytics ---- */
  .analytics { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .analytics .panel { align-items: stretch; }
  .donut-wrap { margin: 0 auto; }

  /* ---- Toolbar / view tabs ---- */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar button.primary { width: 100%; }
  .view-toggle.scope-toggle { justify-content: center; }
  .view-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .view-tabs button { white-space: nowrap; padding: 8px 14px; }

  /* ---- Tables: allow horizontal scroll instead of squeezing columns ---- */
  #viewWrap, .activity-panel, .deadlines-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }

  /* ---- Kanban / Eisenhower stack to one column ---- */
  .kanban { grid-template-columns: 1fr; }
  .eisenhower { grid-template-columns: 1fr; }

  /* ---- Calendar: shrink cells instead of overflowing ---- */
  .cal-grid { gap: 3px; padding: 6px; }
  .cal-day { min-height: 48px; padding: 2px; }
  .cal-day .cal-task { font-size: 9px; }

  /* ---- Settings ---- */
  .settings-grid { grid-template-columns: 1fr; }

  /* ---- Planner ---- */
  .planner-toolbar { flex-direction: column; align-items: stretch; }
  .planner-sub { margin-left: 0; justify-content: center; }
  .slot-row { grid-template-columns: 70px 1fr; padding: 8px; }
  .week-grid { grid-template-columns: 50px repeat(7, minmax(60px, 1fr)); overflow-x: auto; display: grid; }
  .week-grid { font-size: 9px; }

  /* ---- Goals ---- */
  .goals-summary { grid-template-columns: 1fr; }
  .goals-grid { grid-template-columns: 1fr; }

  /* ---- Instructions ---- */
  .role-grid { grid-template-columns: 1fr; }

  /* ---- Modals: near full-width on small screens ---- */
  .modal { width: 92vw; max-height: 88vh; overflow-y: auto; padding: 18px; }
  .modal .checks { flex-direction: column; gap: 8px; }

  /* ---- Auth pages ---- */
  .auth-wrap { margin: 24px auto; padding: 22px; width: 92%; }
}

@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr; }
  header nav.topnav a { font-size: 11px; }
  .analytics { padding: 12px; }
}