/* ============================================================
   mobile.css — VirtualMicroscopy responsive overrides
   ------------------------------------------------------------
   Loaded on every styled page, last in the CSS cascade.
   All rules are scoped to max-width: 767 px (below Bootstrap's
   'sm' breakpoint) so desktop layout is completely unchanged.
   !important is used selectively to override inline style=""
   attributes and per-page <style> blocks that cannot be
   targeted otherwise without editing all 75 .aspx files.
   ============================================================ */

@media (max-width: 767px) {

  /* ----------------------------------------------------------
     1. NAVBAR — header logo (logotext_black.gif)
        Inline style sets width:300px on every page.
        On phones the logo pushes the hamburger off-screen.
        We cap it at 170 px; the remaining top:10px offset in
        the inline style is harmless at this size.
  ---------------------------------------------------------- */
  .navbar-brand img[src*="logotext"] {
    width: 170px !important;
    max-width: 170px !important;
    height: auto !important;
  }

  /* Prevent brand area text-wrapping into the hamburger zone */
  .navbar-brand {
    max-width: calc(100% - 55px);
    overflow: hidden;
  }

  /* ----------------------------------------------------------
     2. FOOTER — white logo (logotext_white.gif)
        Inline style sets width:350px. The footer column is
        col-sm-7 col-xs-12 so on mobile it fills the screen,
        but 350 px wider than ~320 px viewport still overflows.
  ---------------------------------------------------------- */
  .footerLogo img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  /* ----------------------------------------------------------
     3. DATATABLES search-filter inputs
        Per-page <style> blocks fix widths at 300 px with
        !important (e.g. #slidelist_filter input { width:300px
        !important }). We override with higher specificity
        and !important to make the inputs fluid.
  ---------------------------------------------------------- */
  .dataTables_filter input,
  .dataTables_filter input[type="search"] {
    width: auto !important;
    max-width: 160px !important;
    box-sizing: border-box !important;
  }

  /* Unwrap the float so filter + info stack vertically */
  .dataTables_filter,
  .dataTables_length,
  .dataTables_info,
  .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    margin-bottom: 6px;
  }

  /* ----------------------------------------------------------
     4. BROWSE-PAGE card/thumbnail images
        Per-page <style> blocks set:
          .slideimage  { width: 300px }  (browsecollections,
                                          browseslide, etc.)
          .slideImage  { width: 370px }  (browsefiles)
        Making them fluid prevents card rows from overflowing.
  ---------------------------------------------------------- */
  .slideimage,
  .slideImage {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    padding: 10px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ----------------------------------------------------------
     5. FIXED-WIDTH ACTION BUTTONS
        viewneqas, viewpanels, viewmcqs, viewsession and
        several admin pages use inline style to set button
        widths of 200 px / 250 px / 350 px, often float:right.
        On mobile these overflow the panel.  We stack them
        full-width and clear the float.
  ---------------------------------------------------------- */
  .btn[style*="width:350px"],
  .btn[style*="width:250px"],
  .btn[style*="width:200px"],
  .btn[style*="float:right"] {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 6px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Clear floated button rows so they don't collapse their
     parent container */
  .panel-body > div[style*="float:right"],
  .panel-body > div[style*="float: right"] {
    float: none !important;
    clear: both;
    width: 100% !important;
  }

  .panel-body > div[style*="float:left"],
  .panel-body > div[style*="float: left"] {
    float: none !important;
    width: 100% !important;
    margin-bottom: 6px;
  }

  /* ----------------------------------------------------------
     6. MODAL DIALOGS with hard min-width constraints
        Several modals use style="width:80%;min-width:350px;"
        or "width:20%;min-width:250px;".  On phones these push
        past the viewport edge.  Bootstrap 3's own .modal-dialog
        already resets to width:auto at < 768 px but is blocked
        by the inline min-width.
  ---------------------------------------------------------- */
  .modal-dialog {
    min-width: 0 !important;
    width: 95% !important;
    margin: 10px auto !important;
  }

  /* ----------------------------------------------------------
     7. QR CODE BLOCKS
        Pages: questionanswers, managequestion, previewquestion.
        Inline <style> sets #qrcode { width:320px; height:320px }
        which overflows a 320 px viewport with padding.
  ---------------------------------------------------------- */
  #qrcode {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 10px auto !important;
    display: block !important;
  }

  /* ----------------------------------------------------------
     8. GENERAL IMAGE SAFETY NET
        Ensures any image not explicitly handled above scales
        down gracefully.  Does NOT apply to Leaflet tile images
        because those use width:257px!important / height:257px
        !important in their own per-page <style> blocks which
        take precedence over this (non-!important) rule.
  ---------------------------------------------------------- */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ----------------------------------------------------------
     9. CONTENT OVERFLOW GUARD
        Stops any remaining fixed-width child from creating a
        horizontal scrollbar.  Applied only to the main content
        wrapper, not body, to avoid interfering with Leaflet or
        positioned overlays.
  ---------------------------------------------------------- */
  .main-wrapper {
    overflow-x: hidden;
  }

  /* ----------------------------------------------------------
     10. SELECT2 DROPDOWNS
         Select2 hard-codes inline widths via JS; the container
         needs to be told it can shrink to fill available space.
  ---------------------------------------------------------- */
  .select2-container {
    max-width: 100% !important;
  }

  /* ----------------------------------------------------------
     11. DASHBOARD BREADCRUMB section — truncate long titles
  ---------------------------------------------------------- */
  .dashboard-breadcrumb-section h2 {
    font-size: 18px;
    word-break: break-word;
  }

  /* ----------------------------------------------------------
     12. default.aspx — SEARCH BAR on mobile
         Hide only the text-description group (first form-group).
         Keep the select input and the icon-only search button
         visible and side-by-side, using explicit floats and
         redistributed widths.
         Override the inline -100px top margin so the bar sits
         neatly below the banner rather than overlapping it.
  ---------------------------------------------------------- */
  .bg-search .form-group:first-child {
    display: none !important;
  }
  .bg-search .form-group:nth-child(2) {
    width: 75% !important;
    float: left !important;
  }
  .bg-search .form-group:nth-child(3) {
    width: 22% !important;
    float: left !important;
    margin-left: 3% !important;
  }
  .bg-search {
    padding: 10px !important;
    margin: 0 0 10px 0 !important;
    overflow: hidden !important;   /* clearfix for inner floats */
  }
  section.bg-light.pr {
    padding: 10px 0 !important;
    margin: 0 !important;
    min-height: auto !important;
  }

  /* ----------------------------------------------------------
     13. VIDEO and IFRAME — responsive sizing
         Applies to viewrecordedsession and any future embeds.
  ---------------------------------------------------------- */
  video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  iframe {
    max-width: 100% !important;
  }

  /* ----------------------------------------------------------
     14. browseslide.aspx — COLLAPSIBLE FILTER SIDEBAR
         #slide-filters is collapsed by default on mobile.
         A toggle button (added to the ASPX) reveals it.
         The .open class is toggled by toggleSlideFilters().
  ---------------------------------------------------------- */
  #slide-filters {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease-out !important;
  }
  #slide-filters.open {
    max-height: 1200px !important; /* tall enough for all panels */
    overflow: visible !important;
  }

  /* ----------------------------------------------------------
     15. viewexam.aspx + viewsession.aspx + viewslide.aspx
         SLIDE-OUT DRAWER for the question/slide-list panel.
         The panel has hidden-xs removed in the ASPX; instead
         it becomes a fixed left-edge drawer revealed by a
         floating toggle button over the map.
  ---------------------------------------------------------- */
  #exam-sidebar,
  #session-sidebar,
  #leftdiv {
    position: fixed !important;
    top: 97px !important;
    left: -100% !important;
    width: 82% !important;
    max-width: 300px !important;
    height: calc(100vh - 97px) !important;
    background: #fff !important;
    z-index: 2000 !important;
    overflow-y: auto !important;
    transition: left 0.3s ease !important;
    box-shadow: 3px 0 8px rgba(0,0,0,0.25) !important;
    padding: 15px !important;
  }
  #exam-sidebar.vm-open,
  #session-sidebar.vm-open,
  #leftdiv.vm-open {
    left: 0 !important;
  }
  /* Semi-transparent backdrop behind the open drawer */
  #vm-drawer-backdrop {
    display: none;
    position: fixed;
    top: 97px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1999;
  }
  #vm-drawer-backdrop.vm-open {
    display: block;
  }
  /* Floating toggle button inside the map col */
  .vm-sidebar-btn {
    position: absolute !important;
    top: 8px !important;
    left: 28px !important;
    padding:10px;
    z-index: 500 !important;
    opacity: 0.9 !important;
  }
  /* viewexam: push question text below the floating toggle button
     so the button does not overlap readable content */
  #question {
    padding-top: 50px !important;
  }

  /* ----------------------------------------------------------
     16. viewcollection.aspx — MAP-FIRST LAYOUT
         Two col-xs-6 panels with height:100% push the map
         below the viewport on mobile.  We:
           a) change the outer row from position:absolute to
              position:relative so normal flow applies
           b) collapse the panels (max-height:0)
           c) give the map a full-viewport height
           d) toggle panels via .vm-open (JS)
  ---------------------------------------------------------- */
  #collection-layout-row {
    position: relative !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
  }
  /* Collapse both side panels */
  #collection-panel-left,
  #collection-panel-right {
    float: none !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    transition: max-height 0.35s ease-out !important;
  }
  #collection-panel-left.vm-open,
  #collection-panel-right.vm-open {
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding: 15px !important;
    border-bottom: 1px solid #ddd !important;
  }
  /* Map: clear floats, take full height */
  #slidediv {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    height: calc(100vh - 97px) !important;
    padding: 0 !important;
  }
  #slidediv #map-canvas {
    height: 100% !important;
    width: 100% !important;
  }
  /* Toggle bar – shown on mobile only */
  #collection-toggle-bar {
    display: flex !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    background: #f0f0f0 !important;
    border-bottom: 1px solid #ccc !important;
  }
  #collection-toggle-bar .btn {
    flex: 1 !important;
    font-size: 13px !important;
  }
  .leaflet-top {
      margin-top:50px;
      margin-left:10px;
  }
  .leaflet-right {
      margin-right:20px;
  }
  .leaflet-control-minimap {
      display:none !important;
  }
  #question {
      height: auto !important;
  }
}
/* end @media (max-width: 767px) */

/* ----------------------------------------------------------
   DESKTOP RESET — ensure collapsed elements are always
   visible on screens >= 768 px.
   These rules live OUTSIDE the mobile media query.
---------------------------------------------------------- */
@media (min-width: 768px) {
  /* browseslide: filters always visible on desktop */
  #slide-filters {
    max-height: none !important;
    overflow: visible !important;
  }
  /* viewer pages: sidebar always visible on desktop */
  #exam-sidebar,
  #session-sidebar,
  #leftdiv {
    position: static !important;
    left: auto !important;
    width: auto !important;
    max-width: 25% !important;
    height: 100% !important;
    box-shadow: none !important;
    transition: none !important;
    padding: 40px !important;
    overflow-x: auto !important;
  }
  #vm-drawer-backdrop { display: none !important; }
  .vm-sidebar-btn    { display: none !important; }
  /* Reset question padding on desktop (not needed when button is hidden) */
  #question { padding-top: 5px !important; }
  /* viewcollection: restore absolute layout on desktop */
  #collection-layout-row {
    position: absolute !important;
    top: 97px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
  }
  #collection-panel-left,
  #collection-panel-right {
    float: left !important;
    width: 25% !important;
    max-height: none !important;
    overflow-x: auto !important;
    padding: 40px !important;
  }
  #slidediv {
    float: left !important;
    clear: none !important;
  }
  #collection-toggle-bar { display: none !important; }
}