/* ====================================================================
   Responsive Breakpoints — Figma Faculty Portal Design
   320px → 1920px Adaptive Shell
   ==================================================================== */

/* ─── Large Desktop (≤ 1440px) ─── */
@media (max-width: 1440px) {
  .content-container {
    max-width: 1200px;
  }
}

/* ─── Standard Desktop (≤ 1280px) ─── */
@media (max-width: 1280px) {
  .content-container {
    max-width: 100%;
  }
}

/* ─── Tablet Landscape (≤ 1024px) ─── */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
  }

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

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

/* ─── Tablet Portrait / Mobile (≤ 768px) ─── */
@media (max-width: 768px) {
  /* Sidebar becomes off-canvas drawer */
  .app-sidebar {
    transform: translateX(-100%);
    width: 260px;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  }

  .app-sidebar.active {
    transform: translateX(0);
  }

  .app-main {
    margin-left: 0;
  }

  .mobile-toggle-btn {
    display: flex;
  }

  /* Reduce header padding */
  .app-header {
    padding: 0 var(--space-4);
  }

  /* Hide user details text on mobile, keep avatar */
  .user-details {
    display: none;
  }

  /* Stack stats vertically */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Reduce page padding */
  .page-content {
    padding: var(--space-4);
  }

  /* ─── Table: Card Transformation ─── */
  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table th,
  .data-table td,
  .data-table tr {
    display: block;
  }

  .data-table thead {
    display: none; /* Hide header on mobile */
  }

  .data-table tbody tr {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    box-shadow: var(--shadow-xs);
  }

  /* Each row above becomes its own bordered card. Where the table sits in a normal
     .card-body the 1.5rem padding already separates it from the container's border,
     but the admin pages deliberately zero that padding to let the table run full
     width — and then each row-card's 1px border landed exactly on the .card's own
     1px border, a doubled hairline with no gutter. Those wrappers carry
     .card-body-flush, which restores a gutter for the stacked-card layout only.
     (Adding horizontal margin to the row instead would double the gutter on the
     faculty pages, which are already correct.) */
  .card-body-flush .table-responsive {
    padding: var(--space-3);
  }

  .data-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .data-table td {
    border: none;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
  }

  /* Each cell above becomes a flex row (label on the left, value on the right), and a
     flex item's automatic minimum size is its min-content width. An email is one
     unbreakable word, so a value like "EMP301 · demo.faculty@niet.co.in" refused to
     shrink and ran past the viewport — clipped by the card rather than scrolling the
     page, which meant it was silently unreadable rather than obviously broken. */
  .data-table td > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ...but not on a control's own label. `anywhere` breaks INSIDE a word, which is
     what an unbreakable email needs and what a button caption must never get:
     "Review & Verify" sits directly inside a reflowed cell, so without this it can
     render as "Review & Veri / fy". Badges read as single tokens for the same reason. */
  .data-table td > .btn,
  .data-table td > .badge {
    overflow-wrap: normal;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    margin-right: var(--space-3);
    flex-shrink: 0;
  }

  /* Form grid to single column */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Modal full-width on mobile */
  .modal-backdrop {
    padding: var(--space-4);
    align-items: flex-end;
  }

  .modal-container {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* Footer stacks on mobile */
  .app-footer {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }
}

/* ─── Small Mobile (≤ 480px) ─── */
@media (max-width: 480px) {
  .page-title {
    font-size: var(--font-size-lg);
  }

  .page-content {
    padding: var(--space-3);
  }

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

  .card-body {
    padding: var(--space-4);
  }

  /* Buttons full width on very small screens */
  .btn {
    width: 100%;
  }

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

/* ─── Micro Mobile (≤ 390px) ─── */
@media (max-width: 390px) {
  .app-header {
    padding: 0 var(--space-3);
  }

  .page-content {
    padding: var(--space-2);
  }

  .page-title {
    font-size: var(--font-size-base);
  }

  .sidebar-header {
    padding: 0 var(--space-3);
  }
}

/* ─── Ultra Small (≤ 320px) ─── */
@media (max-width: 320px) {
  :root {
    --font-size-base: 0.8125rem;
    --font-size-sm: 0.75rem;
    --font-size-xs: 0.6875rem;
  }

  .page-content {
    padding: var(--space-2);
  }

  .btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--font-size-xs);
  }
}

/* ─── Header Strip Crowding (≤ 768px) ───
   The header packs three things into one row: the notification bell, the
   page's main action button ("Add User", "Add Department") and the identity
   widget. On a phone that is more than fits, so:
     · the bell drops to just its icon — the unread badge still shows;
     · header buttons stop stretching, because the ".btn { width: 100% }" rule
       above is meant for buttons inside forms and cards, not this strip;
     · a long page title truncates with an ellipsis instead of wrapping and
       pushing the header taller than its fixed height.
   Nothing here changes the desktop layout. */
@media (max-width: 768px) {
  #notificationBellBtn span:not(#unreadNotifBadge) {
    display: none;
  }

  #notificationBellBtn {
    padding: 0.4rem 0.55rem;
    gap: 0.3rem;
  }

  .app-header .btn {
    width: auto;
    flex-shrink: 0;
  }

  .header-right {
    gap: 0.5rem;
  }

  .header-left {
    min-width: 0;
  }

  .page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ─── Long Header Button Labels (≤ 480px) ───
   ".app-header" has a fixed height and ".header-right { flex-shrink: 0 }", so a
   header strip that does not fit cannot wrap or compress — it just pushes the
   identity widget off the right edge and the whole page scrolls sideways.

   The accreditation report is the one page with two long-labelled buttons
   ("Print / Save as PDF" at 162px and "Download CSV" at 139px), which together
   overran a 390px viewport by 42px. Rather than shrink the shared strip for
   every page, the trailing words of just these two labels are dropped, exactly
   the way the notification bell above drops its own label and keeps its icon.
   Both buttons keep their icon and stay tappable, and "Print" / "CSV" still say
   what they do.

   Scoped by id, so this cannot reach any other page's header. */
@media (max-width: 480px) {
  #repPrintBtn .rep-btn-long,
  #repCsvBtn .rep-btn-long {
    display: none;
  }

  /* Homepage Highlights is the second such page: "View Homepage" (148px) and
     "Add Banner" (121px) made the strip 389px inside a 369px header, overrunning a
     375px viewport by 32px. Same remedy, same reasoning — both keep their icon, and
     "View" / "Add" still say what they do. Scoped by id for the same reason. */
  #viewHomepageBtn .hl-btn-long,
  #addHighlightBtn .hl-btn-long {
    display: none;
  }
}

/* ─── Print Styles ─── */
@media print {
  .app-sidebar,
  .app-header,
  .app-footer,
  .mobile-toggle-btn,
  .btn,
  .modal-backdrop {
    display: none !important;
  }

  .app-main {
    margin-left: 0;
  }

  .page-content {
    padding: 0;
  }
}