/* WeldFolio — Mobile responsive styles */

/* ── Mobile header & sidebar drawer ────────────────────────── */
.mobile-header {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  background: #252d3d;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  z-index: 40; padding: 0 1rem;
  align-items: center; justify-content: space-between;
}
.hamburger {
  background: none; border: none; color: #f8f9fa;
  cursor: pointer; padding: 0.5rem;
  display: flex; align-items: center; border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.hamburger:active { background: #2e3a50; }
.mobile-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: #f8f9fa; letter-spacing: 1px; }
.mobile-logo span { color: #e85d04; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 45; }
.sidebar-overlay.open { display: block; }

@media (max-width: 768px) {

  /* Show mobile header */
  .mobile-header { display: flex; }

  /* Sidebar becomes slide-in drawer */
  .sidebar {
    position: fixed !important;
    top: 0; left: -260px; height: 100vh;
    z-index: 50;
    transition: left 0.25s ease;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar.open { left: 0; }

  /* Main content: full width, padded below fixed header */
  .main-content {
    padding: 1rem !important;
    padding-top: calc(56px + 1rem) !important;
    width: 100% !important;
  }

  /* Stack all inline grid layouts */
  [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Keep stat cards as 2-col grid */
  .stats-row {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  /* Scrollable tables */
  .card { overflow-x: auto; }
  .data-table { min-width: 580px; }

  /* Upload zone */
  .upload-zone { padding: 1.5rem 1rem; }

  /* Rating buttons — full width stacked */
  .rating-options { flex-direction: column; }
  .rating-btn { width: 100%; text-align: left; }

  /* ── Portfolio cards ────────────────────────────────────── */

  /* Make the card header a block so content flows full-width */
  .wtc-header {
    display: block !important;
    position: relative;
    padding: 1rem 1.25rem;
  }

  /* Hide the thumbnail — visible in detail view */
  .wtc-img { display: none !important; }

  /* Info takes full width */
  .wtc-info {
    width: 100%;
    padding-right: 64px; /* leave space for score pinned right */
    min-width: 0;
  }

  /* Score & chevron pinned to top-right */
  .wtc-right {
    position: absolute;
    top: 1rem; right: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
  }

  /* Hide badge and pts span — shown in detail modal */
  .wtc-right .badge { display: none !important; }
  .wtc-right span[style] { display: none !important; }

  .wtc-score { font-size: 1.8rem; line-height: 1; }
  .wtc-assignment { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wtc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wtc-feedback { font-size: 0.78rem; }

  /* Attempt rows inside expanded card */
  .attempt-img { width: 44px; height: 34px; }
  .attempt-num { width: auto; font-size: 0.7rem; }

  /* Page headings */
  .page-title { font-size: 1.6rem; }
  .page-header { margin-bottom: 1.25rem; }

  /* Toast — full-width at bottom */
  .toast { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }

  /* Modal — bottom sheet */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { border-radius: 12px 12px 0 0; max-height: 88vh; padding: 1.25rem; }
}