/* ==================================================
APP UI RESPONSIVE
Mobile-first compact SaaS spacing and breakpoints
================================================== */

@media (max-width: 767px) {
  .app-col-8,
  .app-col-6,
  .app-col-4 { width: 100%; }

  .app-navbar { min-height: 52px; padding: 0.4rem 0.7rem; }
  .app-card-header, .app-card-body, .app-card-footer { padding: 0.7rem; }
  .app-table th, .app-table td { padding: 0.48rem 0.5rem; font-size: 0.75rem; }
  .app-btn { min-height: 32px; font-size: 0.76rem; padding: 0.4rem 0.72rem; }
}

@media (min-width: 768px) {
  .app-d-md-flex { display: flex !important; }
  .app-d-md-none { display: none !important; }
}


/* ===================================================
CCU responsive rules — breakpoints per MY_BUILD_PREFERENCE §21: 320/768/1024/1440.
Mobile (< 768px) is the primary experience: bottom nav visible, header nav
hidden. Desktop (>= 768px) flips that — a real nav bar, no bottom tab strip.
=======================================================*/

/* 320px baseline — smallest supported phones. Tighten the shelf grid to 2 columns minimum. */
.ccu-shelf-grid { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 480px) {
  .ccu-shelf-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .ccu-bottom-nav { display: none; }
  .ccu-main { padding-bottom: 2rem; }
  .ccu-header-nav { display: flex; }
  .ccu-shelf-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .ccu-article-title { font-size: 1.55rem; }
  .ccu-article-body { font-size: 1rem; }
}

@media (min-width: 1024px) {
  .ccu-shelf-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1440px) {
  .ccu-shelf-grid { grid-template-columns: repeat(6, 1fr); }
}