/* ============================================================
 * NextGen MIS — Responsive polish (tablet + mobile)
 * ------------------------------------------------------------
 * Loaded LAST so it can harden the mobile shell over everything
 * else. Three jobs:
 *   1. Make the off-canvas sidebar reliably show on mobile/tablet
 *      (defeat Metronic slimscroll clipping + transform/z-index).
 *   2. Let wide tables scroll horizontally with an edge-fade cue
 *      instead of being clipped.
 *   3. Stack filters/forms so fields are never cut off.
 * ============================================================ */

/* ============================================================
 * 1. MOBILE / TABLET OFF-CANVAS SIDEBAR (<992px)
 * ============================================================ */
@media (max-width: 991px) {
  /* Metronic runs jQuery slimScroll on the sidebar menu, wrapping it in a
     .slimScrollDiv with a JS-computed pixel height + overflow:hidden. On the
     off-canvas panel that height can clip the menu to nothing ("menu doesn't
     show"). Neutralise it so the menu always renders at its natural height. */
  .page-sidebar .slimScrollDiv,
  .page-sidebar .page-sidebar-menu {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .page-sidebar .slimScrollBar,
  .page-sidebar .slimScrollRail { display: none !important; }

  /* Off-canvas transforms are authoritative (beat any Metronic/inline rule). */
  .page-sidebar,
  .page-sidebar-fixed .page-sidebar,
  .page-sidebar.navbar-collapse.collapse {
    transform: translateX(-100%) !important;
    /* sit above the page content + scrim when it slides in */
    z-index: var(--z-modal) !important;
    box-shadow: var(--shadow-lg);
  }
  /* The OPEN rule must out-specify the hide rule above. The sidebar carries
     `page-sidebar navbar-collapse collapse`, so `.page-sidebar.navbar-collapse
     .collapse` is (0,3,0) — a plain `body.ng-sidebar-open .page-sidebar`
     (0,2,1) loses even with !important, leaving the panel stuck off-screen.
     Match the three classes so the open transform wins. THIS was why the
     mobile menu never appeared. */
  body.ng-sidebar-open .page-sidebar,
  body.ng-sidebar-open .page-sidebar.navbar-collapse.collapse,
  body.ng-sidebar-open .page-sidebar-fixed .page-sidebar {
    transform: translateX(0) !important;
  }

  /* Scrim above content, just under the sliding panel. */
  body.ng-sidebar-open::after {
    z-index: calc(var(--z-modal) - 1) !important;
  }

  /* The hamburger is the only way in on mobile — make sure it's a comfortable
     tap target and never hidden. */
  .ng-topbar__toggle {
    display: inline-flex !important;
    width: 44px;
    height: 44px;
  }

  /* Collapse the desktop "floating pane" shell into a simple full-width layout
     on mobile: a flush top bar (with logo + toggle), the sidebar off-canvas
     below it, and full-bleed content (no side gaps / rounded pane). */
  .page-header.navbar {
    display: block !important;   /* shown on mobile (hidden on desktop) */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .page-sidebar,
  .page-sidebar-fixed .page-sidebar,
  .page-sidebar.navbar-collapse.collapse {
    top: var(--topbar-height) !important;   /* off-canvas panel starts below the bar */
  }
  /* The mobile header already shows the logo + toggle + avatar, so hide the
     sidebar's own top row and account block (avoid duplicates in the panel). */
  .ng-sidebar-top { display: none !important; }
  .ng-sidebar-account { display: none !important; }
  .page-content-wrapper .page-content {
    margin: var(--topbar-height) 0 0 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: calc(100vh - var(--topbar-height)) !important;
  }
  .page-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
 * 2. WIDE TABLES — fit MORE before scrolling on small viewports
 * ------------------------------------------------------------
 * The edge-fade itself is viewport-agnostic now (an overlay on .ng-tablefade —
 * see _data-display.css). Here we help dense tables FIT instead: progressively
 * lower the column-width floor, tighten horizontal cell padding, and let
 * multi-word headers wrap. The aim is to keep more columns on screen so that
 * horizontal scrolling is a last resort (operators prefer seeing the data to
 * scrolling for it). The sort-caret gutter on headers (right padding) is left
 * intact so the caret never collides with the title.
 * ============================================================ */
@media (max-width: 991px) {
  /* No full-bleed spill — the table sits inside the card. */
  .portlet > .portlet-body .dataTables_wrapper,
  .portlet.light > .portlet-body .dataTables_wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Lower the floor so a ~8-column list compresses to fit a tablet width. */
  .portlet .ng-tablescroll > .table,
  .portlet .ng-tablescroll > table.dataTable {
    min-width: 600px;
  }

  /* Body cells: tighten both sides (12 → 8). */
  .portlet .table > tbody > tr > td,
  .portlet .table > tbody > tr > th {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }
  /* Headers: tighten the LEFT to match the body; leave the RIGHT for the sort
     caret. Let multi-word labels wrap rather than force the column wider. */
  .portlet .table > thead > tr > th {
    padding-left: var(--space-2) !important;
    white-space: normal;
  }
}

/* Phones — compress further so common 6–8 column lists fit, and shrink the
   pagination buttons so the control doesn't wrap. */
@media (max-width: 767px) {
  .portlet .ng-tablescroll > .table,
  .portlet .ng-tablescroll > table.dataTable {
    min-width: 480px;
  }
  .portlet .table > tbody > tr > td,
  .portlet .table > tbody > tr > th {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .portlet .table > thead > tr > th { padding-left: 6px !important; }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    padding: 0 var(--space-2) !important;
  }
}

/* ============================================================
 * 3. FILTERS & FORMS — stack on phones (<768px) so nothing is cut off
 * ============================================================ */
@media (max-width: 767px) {
  /* Clean .ng-filter bar → single column, full-width controls */
  .ng-filter { gap: var(--space-3); }
  .ng-filter__field { width: 100%; }
  .ng-filter__field > .form-control,
  .ng-filter__field > .select2-container { width: 100% !important; }
  .ng-filter__group { flex-direction: column; }
  .ng-filter__group > .form-control,
  .ng-filter__group > .select2-container { width: 100% !important; }
  .ng-filter__actions { width: 100%; }
  .ng-filter__actions .btn { flex: 1 1 0; }

  /* Legacy form-inline filters (e.g. List of Applicants) → stack + full width */
  .portlet .form-inline { flex-direction: column; align-items: stretch; }
  .portlet .form-inline .form-group { width: 100%; }
  .portlet .form-inline .form-control,
  .portlet .form-inline .select2-container {
    width: 100% !important;
    min-width: 0;
  }

  /* Bootstrap horizontal form rows: let label + control stack cleanly */
  .form-horizontal .control-label { text-align: left !important; }

  /* Modals get a little breathing room on tiny screens */
  .modal-dialog { margin: var(--space-4); }
}

/* Tighten the top bar on small screens so the brand + actions fit */
@media (max-width: 575px) {
  .page-header.navbar .page-header-inner.ng-topbar {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    gap: var(--space-2);
  }
  .ng-user__name { display: none !important; }   /* avatar + caret only */
}