/* ============================================================
   RESPONSIVE.CSS
   Adaptive breakpoints. Desktop-first approach.
   Sidebar collapses to icon-strip at 860px.
   ============================================================ */


/* ——————————————————————————————————————————————————————————
   NARROW DESKTOP / LARGE TABLET — ≤ 860px
   Content grids stack; sidebar enters icon-only mode.
   —————————————————————————————————————————————————————————— */
@media (max-width: 860px) {

  /* Dashboard */
  .content-grid      { grid-template-columns: 1fr; }
  .focus-schedule-card { min-height: 420px; }
  .chart-wrap        { height: 80px; }
  .row-two           { grid-template-columns: 1fr; }

  /* Finances */
  .fin-charts-row    { grid-template-columns: 1fr; }
  .fin-goal-progress-card { grid-template-columns: 1fr; }

  /* Settings profile layout: right col drops below left */
  .set-profile-layout { grid-template-columns: 1fr; }

  /* Calendar stacks */
  .cal-layout        { grid-template-columns: 1fr; }

  /* Modals should not overflow the viewport */
  .res-modal         { max-width: calc(100vw - 32px); margin: 16px; }
}


/* ——————————————————————————————————————————————————————————
   MEDIUM SCREENS — ≤ 860px
   Sidebar collapses to narrow icon-only strip.
   Text labels and motivational card are hidden.
   —————————————————————————————————————————————————————————— */
@media (max-width: 860px) {
  :root {
    --sidebar-w: 58px;
    --pad: 18px;
  }

  /* Hide all text content in collapsed sidebar */
  .sidebar-logo,
  .nav-item span,
  .nav-section-label,
  .nav-utility-label,
  .sidebar-motivation,
  .sidebar-logout span {
    display: none;
  }

  /* Center icon-only nav items */
  .nav-item {
    justify-content: center;
    padding: 10px 6px;
  }

  .sidebar-logout {
    justify-content: center;
    padding: 10px 6px;
  }

  /* Slightly larger icons for touch */
  .nav-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
  }
}


/* ——————————————————————————————————————————————————————————
   TABLET — ≤ 700px
   Stat rows go 2-column; widget rows stack; calendar narrows.
   —————————————————————————————————————————————————————————— */
@media (max-width: 700px) {

  /* Dashboard */
  .stat-row          { grid-template-columns: 1fr 1fr; }
  .week-grid         { grid-template-columns: repeat(4, 1fr); }

  /* Finances */
  .fin-stat-row      { grid-template-columns: 1fr 1fr; }

  /* Settings account row stacks */
  .set-account-row   { flex-direction: column; }

  /* Content/Resources tabs allow horizontal scroll */
  .res-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .res-tabs::-webkit-scrollbar { display: none; }
  .res-tab { flex-shrink: 0; }

  /* Portfolio grids stack */
  .port-pub-layout   { grid-template-columns: 1fr; }
  .port-cs-grid      { grid-template-columns: 1fr; }
  .port-test-grid    { grid-template-columns: 1fr; }
  .mk-layout         { grid-template-columns: 1fr; }
}


/* ——————————————————————————————————————————————————————————
   MOBILE — ≤ 480px
   Compact spacing, smaller headings, single-column everything.
   —————————————————————————————————————————————————————————— */
@media (max-width: 480px) {
  :root { --pad: 14px; }

  /* Dashboard stat row stays 2-col but tighter */
  .stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Smaller greeting on mobile */
  .header-greeting { font-size: 20px; }

  /* Header — tighter on mobile */
  .header { padding-top: 14px; padding-bottom: 12px; }

  /* Finances go single column */
  .fin-stat-row      { grid-template-columns: 1fr; }

  /* Calendar week grid goes 3-column */
  .week-grid         { grid-template-columns: repeat(3, 1fr); }

  /* Modals go full-width */
  .res-modal {
    max-width: calc(100vw - 24px);
    margin: 12px;
    padding: 20px 16px;
  }

  /* Card padding reduced */
  .set-card { padding: 18px 16px; }

  /* Settings plan card stacks */
  .set-plan-card { flex-direction: column; align-items: flex-start; }

  /* Danger card stacks */
  .set-danger-card { flex-direction: column; gap: 14px; align-items: flex-start; }
}