/*
 * JournalCC Mobile UI
 * Compact app-style interface.
 *
 * Presentation only.
 * No JournalCC search/data logic is changed.
 */

@media (max-width: 760px) {

  /* =========================================================
     1. MOBILE RESET / SAFETY
     ========================================================= */

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: #f3f6fa !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }


  /* =========================================================
     2. COMPACT APP HEADER
     ========================================================= */

  body .header {
    width: 100% !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding:
      max(9px, env(safe-area-inset-top))
      14px
      9px !important;

    display: block !important;

    background:
      linear-gradient(
        135deg,
        #0f204b 0%,
        #07365d 100%
      ) !important;
  }

  body .header .header-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: 124px minmax(0, 1fr) !important;
    grid-template-rows: 46px !important;

    align-items: center !important;
    justify-content: stretch !important;

    column-gap: 12px !important;

    position: static !important;
  }

  body .header .ufs-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: block !important;

    position: static !important;
    inset: auto !important;

    width: 124px !important;
    max-width: 124px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    object-fit: contain !important;

    background: #fff !important;
    border-radius: 5px !important;
  }

  body .header .header-title {
    grid-column: 2 !important;
    grid-row: 1 !important;

    position: static !important;
    inset: auto !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    color: #fff !important;
    text-align: left !important;

    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;

    pointer-events: auto !important;
  }


  /* =========================================================
     3. MAIN PAGE WIDTH
     ========================================================= */

  body main.container,
  body .container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 10px !important;
  }

  body .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 10px !important;

    border-radius: 12px !important;
  }


  /* =========================================================
     4. COMPACT TRUST / INTRO CARD
     ========================================================= */

  body .disclaimer-card {
    padding: 11px 14px !important;
  }

  body .disclaimer-card p {
    margin: 0 !important;

    font-size: .84rem !important;
    line-height: 1.45 !important;

    text-align: left !important;
  }


  /* =========================================================
     5. SEARCH CARD
     ========================================================= */

  body .search-card {
    padding: 14px !important;
  }

  body .search-card > h2 {
    margin: 0 0 12px !important;
    padding: 0 0 8px !important;

    font-size: 1.16rem !important;
    line-height: 1.25 !important;
  }


  /* =========================================================
     6. MODE SELECTOR — MOBILE 2 × 2 APP GRID
     ========================================================= */

  body .search-card .mode-wrap {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 14px !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 7px !important;

    overflow: visible !important;
  }

  body .search-card .mode-pill {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    display: block !important;
  }

  body .search-card .mode-pill span {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 8px 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1.5px solid #cbd9eb !important;
    border-radius: 9px !important;

    background: #f8fbff !important;
    color: #0f204b !important;

    text-align: center !important;

    font-size: .79rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;

    white-space: normal !important;
  }

  body
  .search-card
  .mode-pill
  input:checked + span {
    background: #0f204b !important;
    border-color: #0f204b !important;
    color: #fff !important;

    box-shadow:
      0 3px 9px rgba(15, 32, 75, .16) !important;
  }


  /* =========================================================
     7. SEARCH FORM — HARD RESET OLD DESKTOP GEOMETRY
     ========================================================= */

  body .search-card .search-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;

    align-items: stretch !important;
    gap: 10px !important;
  }


  /* =========================================================
     8. JOURNAL TITLE / ISSN INPUT
     ========================================================= */

  html body
  .search-card
  .search-box
  input#journalQuery {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;

    position: static !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    flex: none !important;

    margin: 0 !important;
    padding: 0 13px !important;

    border: 1.5px solid #bfcadd !important;
    border-radius: 9px !important;

    background: #fff !important;

    color: #172543 !important;

    font-size: 16px !important;
    line-height: 48px !important;

    resize: none !important;
  }

  html body
  .search-card
  .search-box
  input#journalQuery::placeholder {
    color: #8792a5 !important;
    opacity: 1 !important;
  }

  html body
  .search-card
  .search-box
  input#journalQuery:focus {
    outline: none !important;

    border-color: #0f204b !important;

    box-shadow:
      0 0 0 3px rgba(15, 32, 75, .09) !important;
  }


  /* =========================================================
     9. DHET YEAR — ONE COMPACT ROW
     ========================================================= */

  html body
  .search-card
  #singleYearWrap {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    align-items: center !important;
    gap: 10px !important;
  }

  html body
  .search-card
  #singleYearWrap label {
    margin: 0 !important;

    font-size: .91rem !important;
    font-weight: 800 !important;
  }

  html body
  .search-card
  select#dhetYearSelect {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    font-size: 16px !important;

    border-radius: 8px !important;
  }


  /* =========================================================
     10. SEARCH ACTIONS
     ========================================================= */

  html body .search-card #searchBtn,
  html body .search-card #resetPageBtn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    border-radius: 9px !important;

    font-size: .91rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  html body .search-card #resetPageBtn {
    background: #eef3f9 !important;
    color: #0f204b !important;
    border: 1.5px solid #ccd8e8 !important;
  }


  /* =========================================================
     11. SEARCH HELP
     ========================================================= */

  body .search-card .search-help {
    margin: 10px 0 0 !important;
    padding: 0 !important;

    font-size: .79rem !important;
    line-height: 1.4 !important;
  }


  /* =========================================================
     12. COMPARE-YEAR MODE
     ========================================================= */

  body .compare-years-wrap {
    width: 100% !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 8px !important;
  }

  body .compare-years-wrap .year-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  body .compare-years-wrap select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;

    font-size: 16px !important;
  }


  /* =========================================================
     13. RESULTS CONTAINMENT
     ========================================================= */

  body #credibilityCard,
  body #resultsContainer,
  body .results {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-wrap: anywhere;
  }

  body #resultsContainer img,
  body #resultsContainer svg {
    max-width: 100% !important;
    height: auto !important;
  }

  body #resultsContainer .table-scroll,
  body #resultsContainer .table-responsive {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }


  /* =========================================================
     14. FOOTER SAFE AREA
     ========================================================= */

  body .disclaimer-footer,
  body .contact-footer,
  body .footer-bottom {
    padding-left:
      max(14px, env(safe-area-inset-left)) !important;

    padding-right:
      max(14px, env(safe-area-inset-right)) !important;
  }

  body .footer-bottom {
    padding-bottom:
      max(12px, env(safe-area-inset-bottom)) !important;
  }
}


/* Narrower devices */
@media (max-width: 370px) {

  body .header .header-content {
    grid-template-columns: 106px minmax(0, 1fr) !important;
    column-gap: 9px !important;
  }

  body .header .ufs-logo {
    width: 106px !important;
    max-width: 106px !important;
    height: 38px !important;
  }

  body .header .header-title {
    font-size: .94rem !important;
  }

  body
  .search-card
  .mode-pill span {
    font-size: .73rem !important;
  }
}