/* HouseBoard v4 — responsive.css
   iPad landscape wall-mount is the primary target.
   Month view is ALWAYS a true 7-column grid at every size. */

:root {
  --hb-gap: clamp(3px, 0.7vw, 8px);
}

/* ══════════════════════════════════════════
   MONTH CALENDAR — enforced 7-col at all sizes
   ══════════════════════════════════════════ */
.month-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: var(--hb-gap) !important;
  overflow: visible !important;
  width: 100% !important;
}
.weekday-row {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: var(--hb-gap) !important;
}

/* ══════════════════════════════════════════
   LARGE DESKTOP (> 1200px)
   Full 3-column layout, generous day cells
   ══════════════════════════════════════════ */
@media (min-width: 1201px) {
  .main-grid {
    grid-template-columns: 200px minmax(0, 1fr) 240px;
  }
  .day-cell {
    min-height: clamp(110px, 13vh, 160px);
  }
  .today-board {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ══════════════════════════════════════════
   IPAD LANDSCAPE — wall mount sweet spot
   iPad Pro 12.9" = 1366px, iPad 10th = 1180px
   iPad Air = 1180px, iPad mini = 1024px
   ══════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1200px) {
  .main-grid {
    grid-template-columns: 175px minmax(0, 1fr) 210px;
    gap: 10px;
  }
  .day-cell {
    min-height: clamp(90px, 11vw, 140px);
  }
  .today-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .lane {
    min-height: 200px;
  }
  .week-grid {
    gap: 6px;
  }
  .stat-summary-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand h1 { font-size: 1rem; }
}

/* ══════════════════════════════════════════
   IPAD PORTRAIT / MEDIUM TABLET (600–899px)
   Sidebars hide, single-column main content
   ══════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 899px) {
  .main-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .side-panel {
    display: none !important;
  }
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .nav-tabs {
    order: 3;
    width: 100%;
  }
  .today-board {
    grid-template-columns: repeat(3, 1fr);
    overflow-x: auto;
    gap: 8px;
  }
  .week-grid {
    overflow-x: auto;
  }
  .week-day {
    min-width: 100px;
  }
  .day-cell {
    min-height: clamp(72px, 10vw, 120px);
  }
  .stat-summary-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric-row {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Show inline family filter bar on medium screens */
  .inline-family-filter { display: flex !important; }
}

/* ══════════════════════════════════════════
   PHONE (< 600px)
   ══════════════════════════════════════════ */
@media (max-width: 599px) {
  .app-shell {
    padding: 8px;
    gap: 8px;
  }
  .topbar {
    border-radius: 20px;
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: .85rem;
  }
  .brand h1 { font-size: .9rem; }
  .brand p { font-size: .72rem; }
  .nav-tabs {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex: none;
    gap: 4px;
  }
  .nav-tab { padding: 8px 10px; font-size: .78rem; }
  #quickAddBtn { padding: 8px 11px; font-size: .82rem; }
  .main-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .side-panel {
    display: none !important;
  }
  .view-root {
    padding: 10px;
    border-radius: 18px;
  }
  /* Month — phone compact */
  .month-grid { gap: 3px !important; }
  .weekday-row {
    gap: 3px !important;
    font-size: .56rem;
    margin-bottom: 3px;
  }
  .day-cell {
    min-height: 50px !important;
    padding: 3px !important;
    border-radius: 7px !important;
    gap: 2px !important;
  }
  .day-num { font-size: .68rem !important; }
  .day-count { font-size: .55em !important; }
  .month-task-pill {
    font-size: .42rem !important;
    padding: 1px 2px !important;
    border-radius: 3px !important;
  }
  .more-count { font-size: .42rem !important; }
  .day-add-btn { display: none !important; }
  /* Today — single column */
  .today-board {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    gap: 8px;
  }
  .lane { min-height: unset; padding: 10px; }
  /* Week — vertical stack */
  .week-grid {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    gap: 8px;
  }
  .week-day { min-width: 0 !important; min-height: unset; }
  /* Stats */
  .stat-summary-row { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-number { font-size: 1.25rem; }
  .stat-detail-grid { grid-template-columns: 1fr !important; }
  .metric-row { grid-template-columns: repeat(2, 1fr) !important; }
  /* Modals */
  .modal { max-width: 96vw !important; width: 100% !important; }
  .modal-card { border-radius: 18px !important; padding: 13px !important; }
  .form-row.two { grid-template-columns: 1fr !important; }
  .action-grid { grid-template-columns: 1fr !important; }
  .view-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }
  .view-head h2 { font-size: 1.1rem; }
  .list-sections { grid-template-columns: 1fr !important; }
  .settings-grid { grid-template-columns: 1fr !important; }
  /* Show inline family filter on phone */
  .inline-family-filter { display: flex !important; }
}

/* ══════════════════════════════════════════
   ORIENTATION — landscape phone
   ══════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .topbar { padding: 6px 10px; }
  .brand-mark { width: 32px; height: 32px; }
  .nav-tab { padding: 7px 9px; font-size: .76rem; }
  .day-cell { min-height: 44px !important; }
}

/* ══════════════════════════════════════════
   INLINE FAMILY FILTER BAR
   Shown when sidebar is hidden (< 900px)
   ══════════════════════════════════════════ */
.inline-family-filter {
  display: none; /* shown via media queries above */
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.inline-family-filter .filter-label {
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 4px;
}