/* ═══════════════════════════════════════════════════════════════════════
   SST Assessment Portal — Mobile / Tablet Responsive Overrides
   ═══════════════════════════════════════════════════════════════════════
   All rules are inside @media queries so they ONLY apply on smaller
   screens. Desktop layout is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   TABLET  (≤ 992px / Bootstrap lg breakpoint)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* ── Navbar ── */
  #top_nav .navbar-brand { font-size: 14px; gap: 8px; }
  #top_nav .navbar-brand img { height: 30px; }

  /* Collapsed nav links — stack vertically with padding */
  #navContent .navbar-nav { padding: 10px 0; }
  #navContent .navbar-nav .nav-link {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  #navContent .navbar-text {
    padding: 10px 14px;
    display: block;
  }
  #navContent .btn-logout {
    display: block;
    margin: 6px 14px;
    text-align: center;
  }

  /* ── Main content — reduce horizontal padding ── */
  #main_content { padding: 16px 0 24px; }
  #main_content > .container-fluid { padding-left: 12px; padding-right: 12px; }

  /* ── Question form — full width on tablet ── */
  .question-paper { max-width: 100%; padding: 20px 18px; }
  .qf-page-header { max-width: 100%; }

  /* ── Filter panel rows — wrap properly ── */
  .mf-row { gap: 12px; }
  .mf-group { min-width: 0; flex: 1 1 180px; }
  .mf-divider { display: none; }

  /* ── Questions list — sidebar collapses ── */
  #filter-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 16px;
  }

  /* ── Tables — allow horizontal scroll ── */
  .table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Report tables — shrink font, prevent number wrap ── */
  .report-table { font-size: 12px; min-width: 700px; }
  .report-table thead th { font-size: 11px; padding: .2rem .3rem; white-space: nowrap; }
  .report-table tbody td { padding: .2rem .3rem; white-space: nowrap; }
  .report-table tbody td.topic-col { white-space: normal; }

  /* ── Login panel — slightly narrower ── */
  #loginpanel { width: 90%; max-width: 480px; }

  /* ── Tags page — stack buttons, wrap header ── */
  .tags-top-bar { flex-direction: column; align-items: flex-start !important; }
  .tags-top-bar .d-flex.gap-2 { width: 100%; margin-left: 0 !important; }
  .tags-top-bar .d-flex.gap-2 .btn { flex: 1; font-size: 12px; }

  /* ── Engage page — header wrap ── */
  .engage-header { flex-wrap: wrap; gap: 10px; }
  .engage-header .d-flex.gap-2 { flex-wrap: wrap; }

  /* ── Mock Papers — filter row wrap ── */
  .mf-panel-body .d-flex.flex-wrap { gap: 8px !important; }
  #mockTitleSelect,
  #mockFilterForm select[style*="width:200px"] { width: 160px !important; min-width: 0; }

  /* ── Reports — tab wrap for many tabs ── */
  .nav-tabs { flex-wrap: wrap; }
  .nav-tabs .nav-link { font-size: 12px; padding: 6px 10px; }

  /* ── Users page — table responsive ── */
  #usersTable,
  #deletedTable { font-size: 12px; min-width: 700px; }
  .users-add-form .row { --bs-gutter-x: 0.75rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE  (≤ 768px / Bootstrap md breakpoint)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ── Typography — slightly larger tap targets ── */
  body { font-size: 14px; }

  /* ── Navbar ── */
  #top_nav .navbar-brand { font-size: 13px; padding: 4px 8px; }
  #top_nav .navbar-brand img { height: 26px; }
  #top_nav .navbar-toggler { padding: 4px 8px; font-size: 14px; }

  /* ── Page header ── */
  #pg_header { padding: 12px 0 14px; }
  #pg_header h1 { font-size: 20px; padding-left: 6px; }

  /* ── Main content ── */
  #main_content { padding: 10px 0 20px; }
  #main_content > .container-fluid { padding-left: 8px; padding-right: 8px; }

  /* ── Cards ── */
  .card { border-radius: 4px; }
  .card-header { padding: 8px 12px; font-size: 13px; }
  .card-body { padding: 12px; }

  /* ── Question form ── */
  .question-paper { padding: 14px 12px; margin-bottom: 16px; border-radius: 4px; }
  .qf-page-header h2 { font-size: 18px; }
  .qf-actions { gap: 8px; flex-wrap: wrap; }
  .qf-action-btn { padding: 6px 12px; font-size: 12px; }

  /* Question form footer — stack on mobile */
  .qf-form-footer {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .qf-form-footer .qf-actions {
    margin-left: 0 !important;
    justify-content: flex-end;
  }

  /* MCQ options — stack tick + editor vertically if very narrow */
  .mcq-option .d-flex { flex-wrap: wrap; gap: 6px; }
  .mcq-option .note-airframe { min-height: 44px; }

  /* Topic list — allow text to wrap */
  .qf-topic-name { white-space: normal; }
  .qf-sel-badge { max-width: 100%; }

  /* ── Questions list ── */
  /* Hide low-priority table columns on mobile */
  .ql-hide-mobile { display: none !important; }

  /* Make filter sidebar a collapsible section */
  #filter-sidebar {
    position: static;
    max-height: none;
    border-radius: 4px;
    padding: 10px;
  }

  /* Table cells — smaller padding */
  #tableCol table.table td,
  #tableCol table.table th { padding: .2rem .25rem; font-size: 12px; }

  /* Content preview — shorter */
  .content-preview { max-height: 50px; font-size: 12px; }
  .content-preview img { max-width: 80px !important; max-height: 50px !important; }

  /* Tag badges — smaller */
  .ql-topic-badge { max-width: 140px; font-size: 10px; padding: 1px 4px; }
  .tags-cell { gap: 3px; }

  /* Bulk bar — stack if needed */
  #bulkBar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  #bulkBar .btn-bulk-delete,
  #bulkBar .btn-bulk-approve,
  #bulkBar .btn-bulk-unapprove,
  #bulkBar .btn-bulk-cancel { font-size: 12px; padding: 4px 10px; }

  /* ── Filter panel ── */
  .mf-panel-body { padding: 10px 12px; }
  .mf-row { flex-direction: column; gap: 10px; }
  .mf-group { flex: 1 1 auto; width: 100%; }
  .mf-seg { flex-wrap: wrap; }
  .mf-seg-btn { padding: 5px 10px; font-size: 11px; }
  .mf-select { min-width: 100%; }

  /* ── Report tables — horizontal scroll, no wrapping on numbers ── */
  .report-table { font-size: 11px; min-width: 700px; }
  .report-table tbody td,
  .report-table tfoot th { white-space: nowrap; }
  .report-table tbody td.topic-col { white-space: normal; }

  /* ── Login ── */
  #loginpanel { width: 94%; padding: 20px 16px 24px; }
  .panel-logo-wrap img { height: 56px; }
  .panel-logo-wrap .brand-name { font-size: 18px; }
  #lp-header { font-size: 18px; }

  /* ── Modals — nearly full width ── */
  .modal-dialog { margin: 10px; max-width: calc(100% - 20px); }

  /* ── Tags page ── */
  .tags-top-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .tags-top-bar > p { margin-bottom: 0; }
  .tags-top-bar .tags-btn-group {
    margin-left: 0 !important;
    flex-direction: row;
    width: 100%;
  }
  .tags-top-bar .tags-btn-group .btn {
    flex: 1;
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
  }
  #titleList .btn { font-size: 12px; padding: 4px 8px; }
  #tagsTable { font-size: 12px; }
  #tagsTable thead th { font-size: 11px; padding: .3rem .4rem; }
  #tagsTable tbody td { font-size: 12px; padding: .3rem .4rem; }
  /* Tags sidebar — full width on mobile */
  .tags-page-row .col-md-3,
  .tags-page-row .col-md-9 { width: 100%; flex: 0 0 100%; }

  /* ── Users page ── */
  .users-add-form .row { flex-direction: column; }
  .users-add-form .row > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .users-add-form .col-auto.ms-3 { margin-left: 0 !important; margin-top: 8px; }
  /* Keep table readable — set min-width and let table-responsive scroll */
  #usersTable,
  #deletedTable {
    font-size: 12px;
    min-width: 700px;
  }
  #usersTable th,
  #usersTable td,
  #deletedTable th,
  #deletedTable td { padding: .3rem .4rem; }

  /* ── Engage page ── */
  .engage-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .engage-header .d-flex.gap-2 { width: 100%; flex-wrap: wrap; }
  .engage-header .d-flex.gap-2 .btn { flex: 1; font-size: 12px; }
  /* Engage subject form — stack fields */
  #engageTagForm { flex-direction: column !important; }
  #engageTagForm .col-auto { width: 100%; flex: 0 0 100%; }
  #engageTagForm input[style*="width:220px"] { width: 100% !important; }

  /* ── Mock Papers page ── */
  .mock-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .mock-header .btn { font-size: 12px; }
  /* Mock filter panel — stack inline items */
  #mockFilterForm .mf-panel-body .d-flex.flex-wrap {
    flex-direction: column;
    align-items: stretch !important;
  }
  #mockFilterForm .mf-panel-body .mf-seg { flex-wrap: wrap; }
  #mockFilterForm .mf-panel-body select[style*="width:200px"] {
    width: 100% !important;
  }
  #mockFilterForm .mf-panel-body .input-group { max-width: 100% !important; }
  /* Mock bulk action bar — responsive */
  #mqBulkBar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
  }
  #mqBulkBar .btn-bulk-approve,
  #mqBulkBar .btn-bulk-unapprove,
  #mqBulkBar .btn-bulk-delete,
  #mqBulkBar .btn-bulk-cancel { font-size: 11px; padding: 4px 8px; }
  /* Mock sync floating bar */
  #mockSyncBulkBar {
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 12px;
  }
  /* Mock question table columns */
  .mock-hide-mobile { display: none !important; }

  /* ── Reports page ── */
  .nav-tabs { flex-wrap: wrap; gap: 2px; }
  .nav-tabs .nav-item { flex: 0 0 auto; }
  .nav-tabs .nav-link { font-size: 11px; padding: 5px 8px; }
  .nav-tabs .nav-link .badge { font-size: 9px; }
  /* Summary table within report */
  .mock-summary-table { font-size: 11px; }

  /* ── Pagination ── */
  .pagination { flex-wrap: wrap; }
  .pagination .page-link { padding: 4px 8px; font-size: 12px; }

  /* ── Toast container — full width at bottom ── */
  #toastContainer { left: 0 !important; right: 0 !important; padding: 8px !important; }

  /* ── Summernote toolbar (on full editors) ── */
  .note-toolbar { flex-wrap: wrap; }
  .note-toolbar .note-btn-group { margin-bottom: 2px; }

  /* ── General: all inline fixed-width selects/inputs should be fluid ── */
  select[style*="width:200px"],
  select[style*="width:220px"],
  input[style*="width:220px"] { width: 100% !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   SMALL MOBILE  (≤ 480px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 479.98px) {

  /* ── Navbar — just logo icon, hide text ── */
  #top_nav .navbar-brand { gap: 6px; font-size: 12px; }

  /* ── Question form ── */
  .question-paper { padding: 10px 8px; }
  .qf-label { font-size: 12px; }

  /* ── Buttons — full width for primary actions ── */
  .qf-action-save { width: 100%; justify-content: center; }
  .qf-form-footer .qf-actions { width: 100%; flex-direction: column; }
  .qf-form-footer .qf-actions .qf-action-btn { width: 100%; text-align: center; }

  /* ── Tables — minimum font ── */
  .table { font-size: 11px; }
  .table thead th { font-size: 10px; padding: .15rem .2rem; }
  .table tbody td { padding: .15rem .2rem; }

  /* ── Segmented controls — full width scroll ── */
  .mf-seg { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }

  /* ── Login ── */
  #loginpanel { padding: 16px 12px 20px; }
  .panel-logo-wrap img { height: 44px; }
  .panel-logo-wrap .brand-name { font-size: 16px; }

  /* ── Tags — buttons full width stacked ── */
  .tags-top-bar .tags-btn-group { flex-direction: column; }
  .tags-top-bar .tags-btn-group .btn { width: 100%; }

  /* ── Mock Papers — bulk bar tighter ── */
  #mqBulkBar { padding: 6px 8px; }
  #mqBulkBar .btn-bulk-approve,
  #mqBulkBar .btn-bulk-unapprove,
  #mqBulkBar .btn-bulk-delete,
  #mqBulkBar .btn-bulk-cancel { font-size: 10px; padding: 3px 6px; }

  /* ── Users — Add form button full width, table wider for scroll ── */
  .users-add-form .btn { width: 100%; }
  #usersTable,
  #deletedTable { min-width: 640px; }

  /* ── Engage — buttons full width ── */
  .engage-header .d-flex.gap-2 { flex-direction: column; }
  .engage-header .d-flex.gap-2 .btn { width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════
   UTILITY CLASSES  (use in templates to show/hide per breakpoint)
   ══════════════════════════════════════════════════════════════════════ */

/* Hide on mobile, show on desktop (≥768px) */
@media (max-width: 767.98px) {
  .hide-mobile { display: none !important; }
}
/* Show only on mobile (≤767px) */
@media (min-width: 768px) {
  .show-mobile-only { display: none !important; }
}