/* ==========================================================================
   Rahavard Danesh — Responsive rules
   Breakpoints: 480 / 768 / 1024 / 1280
   ========================================================================== */

/* ------------------------------------------------------------------------
   Tablet & below (<= 1024px)
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .achievement-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------------
   Mobile (<= 768px)
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --gutter: var(--gutter-mobile);
    --header-height: 64px;
  }

  /* Public nav → hamburger + drawer */
  .main-nav { display: none; }

  .hamburger { display: grid; }

  .site-header__actions .btn--primary { display: none; }

  .section { padding-block: var(--space-7); }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  /* Dashboard shell → sidebar becomes a drawer (slides from the start/right) */
  .sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease);
    border-inline-end: none;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.is-open { transform: translateX(0); }

  .sidebar-toggle,
  .sidebar-close {
    display: inline-flex;
  }

  .app-main { width: 100%; }

  .topbar { padding: var(--space-3) var(--space-4); }

  .app-content { padding: var(--space-4); }

  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  .achievement-grid { grid-template-columns: repeat(2, 1fr); }

  .dash-greeting h1 { font-size: var(--fs-h3); }

  .chart-container { height: 220px; }

  /* Tables → keep horizontal scroll (table-wrap handles it) */
  .table { min-width: 560px; }
}

/* ------------------------------------------------------------------------
   Small mobile (<= 480px)
   ------------------------------------------------------------------------ */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .achievement-grid { grid-template-columns: 1fr 1fr; }

  .modal { padding: var(--space-5); }

  .toast-region {
    inset-inline: var(--space-4);
    bottom: var(--space-4);
  }
  .toast { min-width: 0; width: 100%; }
}

/* ------------------------------------------------------------------------
   Large desktop (>= 1280px)
   ------------------------------------------------------------------------ */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-6); }
}

/* ------------------------------------------------------------------------
   Login page shell
   ------------------------------------------------------------------------ */
.login-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.login-brand {
  background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8);
}

.login-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--color-surface-2);
}

@media (max-width: 768px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand {
    display: none;
  }
}