/* ============================================================================
   mobile.css — Mobile / small-screen responsive overrides.

   Loaded LAST (after style.css / responsive.css / page CSS) so it can override
   desktop rules without touching them. EVERY rule in this file lives inside a
   max-width media query, so desktop rendering is unchanged.

   Breakpoints:
     - 991px : navbar collapses here (Bootstrap navbar-expand-lg)
     - 768px : primary phone / small-tablet breakpoint
     - 480px : very small phones
   ============================================================================ */

/* ------------------------------------------------------------------ */
/* Mobile image lightbox (used by mobile-lightbox.js on touch devices) */
/* Not wrapped in a media query: it is triggered by pointer type, not  */
/* width, and stays inert (display:none) until .is-open is added.      */
/* ------------------------------------------------------------------ */
.mobile-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
}
.mobile-lightbox-overlay.is-open {
  display: flex;
}
.mobile-lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  /* We handle pinch/pan/double-tap ourselves (see mobile-lightbox.js); tell the
     browser to keep its hands off so its native gestures don't fight ours. */
  touch-action: none;
}
.mobile-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  cursor: zoom-in;
}
.mobile-lightbox-image.is-zoomed {
  cursor: grab;
}
/* Brief gesture hint shown when the viewer opens. */
.mobile-lightbox-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 8px 14px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-lightbox-overlay.show-hint .mobile-lightbox-hint {
  opacity: 1;
}
.mobile-lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

/* On touch devices the province map label is pinned (it no longer follows a
   cursor); show it as a fixed pill at the bottom-centre of the map. */
.map-viewer--touch .map-viewer-hover-label {
  position: absolute;
  left: 50%;
  bottom: 16px;
  top: auto;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 16px;
  pointer-events: none;
  white-space: nowrap;
}

/* Header slot for relocated detail controls — empty/hidden by default and on
   desktop; only shown on phones once controls are moved in (.is-active). */
.navbar-detail-slot {
  display: none;
}

/* Activity/Bugs relocate their results-count summary into the header (right
   side). Inert until JS marks it active on phones. */
.navbar-summary-slot {
  display: none;
}

/* Database/Marketplace relocate their action buttons (Map/Search/Charts,
   Create/Block) into the centre of the header. Inert until JS marks it active. */
.navbar-center-slot {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Collapsed navbar menu (below the lg breakpoint = 991px)            */
/* ------------------------------------------------------------------ */
@media (max-width: 991px) {
  /* Anchor the dropdown to the header so it overlays content instead of
     pushing the fixed-height app panes down. */
  .header_section {
    position: relative;
    z-index: 1050;
    padding: 4px 0;
  }

  .header_section .container-fluid {
    padding-right: 12px;
    padding-left: 12px;
  }

  /* Consistent header bar height across every mobile page (database, marketplace,
     activity, bugs, ...). The header markup is shared, so setting it here keeps
     the bar the same size everywhere and gives the relocated action buttons room
     to grow into. */
  .custom_nav-container {
    min-height: 50px;
    align-items: center;
  }

  /* Compact header: hamburger on the LEFT, drop the big brand text. */
  .navbar-brand {
    display: none;
  }
  .custom_nav-container .navbar-toggler {
    margin-right: auto;
    margin-left: 0;
    order: -1;
  }

  .custom_nav-container .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--darkone-color, #1f2228);
    padding: 6px 12px 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .custom_nav-container .navbar-nav {
    margin-left: 0;
    align-items: stretch;
    width: 100%;
  }

  .custom_nav-container .navbar-nav .nav-item {
    width: 100%;
  }

  .custom_nav-container .navbar-nav .nav-item .nav-link {
    display: block;
    text-align: left;
    padding: 12px 16px;
    min-height: 44px; /* comfortable tap target */
    border-radius: 4px;
  }

  .custom_nav-container .navbar-nav .nav-item.active .nav-link {
    background: var(--darktwo-color, #30353e);
  }
}

/* ------------------------------------------------------------------ */
/* Responsive design tokens (override _variables.css :root on phones) */
/* These drive both CSS card sizing and cards-virtual-pagination.js,  */
/* which reads --card-width / --card-height / --info-height at runtime.*/
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    /* One large card per row filling most of the width (keeps the ~1.417
       image aspect). Wide enough that the virtual-grid math yields 1 column. */
    --card-width: 300px;
    --image-height: 425px;
    --info-height: 60px;
    --card-height: 485px;

    --h1: 24px;
    --h2: 22px;
    --h3: 20px;
    --large: 18px;
    --medium: 16px;
    --small: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    /* Fill most of a phone screen. Tuned so the single card + its margins
       + 4px border still fit a ~360px viewport without horizontal overflow. */
    --card-width: 336px;
    --image-height: 476px;
    --info-height: 60px;
    --card-height: 536px;
  }
  /* Trim the card's own side margins on phones so it reaches nearer the edges. */
  .results-container .card {
    margin-left: 4px;
    margin-right: 4px;
  }
}

/* ------------------------------------------------------------------ */
/* Generic tap-target / overflow hygiene                              */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Never let a page scroll sideways. */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Media should never overflow its container. */
  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  /* Comfortable minimum tap size for the small add/remove and icon buttons. */
  .btn,
  button.icon-button,
  .multi-field-add,
  .multi-field-remove,
  .add-field-btn,
  .remove-field-btn {
    min-height: 40px;
  }
}

/* ==================================================================== */
/* DATABASE PAGE                                                         */
/* Cards fill the screen; opening a record takes over full-width and    */
/* hides the card grid (driven by the JS-toggled .sidebar-expanded /    */
/* .sidebar-closed classes on .content-wrapper). Closing brings the     */
/* cards back. No fixed-overlay math needed.                            */
/* ==================================================================== */
@media (max-width: 768px) {
  /* --- Action bar (Map / Search / Charts + results count) --- */
  .database-action-panel {
    flex-wrap: wrap;
    padding: 4px 10px;
    min-height: 0;
    row-gap: 4px;
  }
  .database-action-panel-left,
  .database-action-panel-right {
    flex: 1 1 auto;
  }
  .database-action-panel-center {
    gap: 8px;
  }
  .database-action-panel-center .control_button {
    padding: 6px 10px;
    min-width: 52px;
    font-size: 13px;
  }

  /* --- Robust column layout: the body becomes a flex column and the content
         area fills whatever space is left after the (variable-height) header
         and action bar. No fragile pixel math, and it adapts to the mobile
         URL-bar via 100dvh. --- */
  body.database-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }
  body.database-page .hero_area,
  body.database-page .details-panel,
  body.database-page .database-action-panel,
  body.database-page .hidden-cards-notice {
    flex: 0 0 auto;
  }
  .content-wrapper {
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: auto;
  }

  /* --- Card grid fills the screen by default --- */
  .main_section {
    opacity: 1 !important;
    min-width: 0;
    width: 100%;
    padding: 6px 2px;
  }
  .main_section .container {
    padding: 0 2px;
    max-width: 100%;
  }
  .results-container {
    justify-content: center;
  }

  /* --- Detail pane goes full-width / single column --- */
  .sidebar {
    width: 100%;
    min-width: 0;
    height: 100%;
  }
  .sidebar-content {
    flex-direction: column;
    height: 100%;
  }
  .sidebar-content-wrapper {
    min-width: 0;
  }
  .details-wrapper {
    max-width: none;
    min-width: 0;
    border-left: none;
    flex: 1;
  }

  /* --- Record open: detail takes over, cards hidden --- */
  .content-wrapper.sidebar-expanded .main_section {
    display: none;
  }
  .content-wrapper.sidebar-expanded .sidebar {
    width: 100%;
    min-width: 0;
  }

  /* Reclaim space while viewing a record: hide the Map/Search/Charts action
     bar (it returns when the detail is closed). The detail's own toolbar
     (.details-panel) stays visible for navigation + Close. */
  .details-panel.panel-expanded ~ .database-action-panel {
    display: none;
  }

  /* --- The details toolbar is removed as a row on phones: History +
         Show Related are dropped, and [n/total] / Report / Close are moved
         up into the compact header (see .navbar-detail-slot). --- */
  .details-panel {
    display: none;
  }

  /* Relocated record controls sitting in the header row. */
  .navbar-detail-slot.is-active {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .navbar-detail-slot .control_button {
    min-height: 34px;
    padding: 4px 10px;
    font-size: 13px;
    color: var(--background-color, #e3e1e4);
    background: transparent;
    border: none;
  }
  .navbar-detail-slot .card-status {
    padding: 2px 6px;
    font-size: 13px;
  }

  /* Activity/Bugs summary counts sitting on the right of the header row. Text
     is inverted to light because it now sits on the dark header; the category
     icons keep their own accent colours. */
  .navbar-summary-slot.is-active {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 6px;
    color: var(--background-color, #e3e1e4);
    font-size: 13px;
  }

  /* Centre slot in the header bar (same row as the hamburger), used by the
     database (Map/Search/Charts) and marketplace (Create/Block) action buttons.
     Absolutely centred so the left-aligned hamburger doesn't push it off-centre. */
  .custom_nav-container {
    position: relative;
  }
  .navbar-center-slot.is-active {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .navbar-center-slot .control_button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    min-width: 0;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--background-color, #e3e1e4);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .navbar-center-slot .control_button i {
    font-size: 18px;
  }
  /* When a record detail takes over the header (detail controls become active),
     hide the list action buttons to avoid a cluttered/overlapping bar. */
  .navbar-detail-slot.is-active ~ .navbar-center-slot {
    display: none;
  }
  /* Map/Search/Charts (database) and Create/Block (marketplace) have moved into
     the header, so their now-empty container collapses rather than holding a
     blank row. */
  .database-action-panel-center:empty {
    display: none;
  }

  /* Map and Charts are disabled until a search returns results (they do nothing
     on the initial infographics view). Hide the disabled ones on phones so the
     header shows only what's actionable -- they reappear once results load. */
  .navbar-center-slot .control_button.disabled {
    display: none;
  }
  /* The legacy "Expand" button has no handler and is superseded by the
     mobile mode switch below — hide it on phones. */
  #toggleExpandCollapse {
    display: none;
  }

  /* --- Detail view mode switch (Record image/translation ⟷ Details) ---
     Full-bleed segmented toggle: the two halves fill the parent edge to edge
     with no gaps, margins or rounding, so it reads as one control. */
  .detail-mode-switch {
    display: flex;
    flex: 0 0 auto;
    gap: 0;
    padding: 0;
    background: var(--darkone-color, #1f2228);
    border-bottom: 1px solid var(--darktwo-color, #30353e);
  }
  .detail-mode-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--background-color, #e3e1e4);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.55;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
  }
  /* Hairline divider between the two halves only — not on the outer edges. */
  .detail-mode-btn + .detail-mode-btn {
    border-left: 1px solid var(--darktwo-color, #30353e);
  }
  .detail-mode-btn.active {
    background: var(--contrast-color, #6286aa);
    color: #fff;
    opacity: 1;
  }
  .detail-mode-btn:focus {
    outline: none;
  }
  .detail-mode-btn:focus-visible {
    outline: 2px solid var(--contrast-color, #6286aa);
    outline-offset: -2px;
  }

  /* Sword/Image mode (default): show the image+translation pane, hide details */
  .sidebar-content .details-wrapper {
    display: none;
  }
  .sidebar-content .sidebar-content-wrapper {
    display: flex;
  }
  /* Details mode: show the full details panel, hide the image pane */
  .sidebar-content.mobile-mode-details .sidebar-content-wrapper {
    display: none;
  }
  .sidebar-content.mobile-mode-details .details-wrapper {
    display: flex;
  }
}

/* Small phones: the three centred action buttons (Map/Search/Charts) would run
   into the hamburger at this width, so tighten their horizontal padding while
   keeping the larger height. */
@media (max-width: 400px) {
  .navbar-center-slot .control_button {
    padding: 6px 8px;
    gap: 5px;
    font-size: 13px;
  }
  .navbar-center-slot .control_button i {
    font-size: 17px;
  }
}

/* Desktop: the mode switch never shows (both panes sit side by side).
   Scoped to min-width so it can't override the mobile display:flex above. */
@media (min-width: 769px) {
  .detail-mode-switch {
    display: none;
  }
}

/* Neutralize the legacy `@media (max-width: 800px)` rule in style_database.css
   that blanked the card grid (opacity:0). Keep cards visible whenever the
   detail pane is not taking over. Covers the 769-800px gap above. */
@media (max-width: 800px) {
  .content-wrapper:not(.sidebar-expanded) .main_section {
    opacity: 1 !important;
  }
}

/* ==================================================================== */
/* SEARCH FORM MODAL                                                     */
/* Go full-screen on phones and let the many field groups flow into a   */
/* single readable, left-aligned column. Fields already flex-wrap, so   */
/* this is mostly container + tap-size polish.                          */
/* ==================================================================== */
@media (max-width: 768px) {
  .search-form-modal {
    padding: 0;
    /* The base rule gives this z-index: 1000, below the header (1050). That let
       the header overlap the modal's "Search Form" title and, worse, intercept
       taps on its close (x) button. Lift the full-screen modal above the header. */
    z-index: 1100;
  }
  .search-form-modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .search-form-modal-body {
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    align-items: stretch;
  }
  /* Left-align the wrapping field groups instead of centering, so labels
     read top-to-bottom like a normal mobile form. */
  .search-form-modal-body .form_group_midi,
  .search-form-modal-body .form_group_mini {
    justify-content: flex-start;
  }
  /* Min/max range inputs: keep inline but comfortable to tap. */
  .form_group_footer input {
    min-width: 40px;
    min-height: 34px;
  }
  /* Repeatable multi-field +/- controls: comfortable tap targets. */
  .multi-field-container button,
  .field-controls button {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ==================================================================== */
/* AUTH PAGES (login / authenticate / forgot)                           */
/* ==================================================================== */
@media (max-width: 768px) {
  /* Full-screen login on phones: the card fills the whole area between header
     and footer (no dark centering bands, no gray frame), with its fields
     centred vertically. The old layout centred a fixed-size card in the tall
     viewport (dark bars top/bottom) and boxed it in a gray panel narrowed by
     .heading_container's 10% side margins (gray at left/right). We strip those
     insets and make every wrapper in the chain a full-filling flex column. */
  .login_page_wrapper {
    height: auto;
    min-height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .login_page_wrapper .main_section.layout_padding,
  .login_page_wrapper .container,
  .login_page_wrapper .heading_container,
  .login_page_wrapper .login_wrapper,
  .login_page_wrapper .form_wrapper {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .login_form {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 32px 20px;
    border: none;
    border-radius: 0;
    /* Fields sit in the middle of the full-height card. */
    justify-content: center;
  }
  .login_form input[type="submit"],
  .login_form button {
    width: 100%;
  }
}

/* ==================================================================== */
/* ADMIN wide tables (desktop-first, deprioritized for mobile)          */
/* Ensure wide tables scroll inside their own container instead of      */
/* forcing the whole modal/page to overflow horizontally.               */
/* ==================================================================== */
@media (max-width: 768px) {
  .manage-users-table-wrapper,
  .admin-import-grid,
  .server-metrics-chart-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}