/* Stable mobile layout for the Västeråsserien main page only. */
@media (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
    padding: 0 !important;
    font-size: 14px !important;
  }

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

  body > .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 8px 18px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #siteTitle {
    margin: 2px 0 6px !important;
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
  }

  .logo-container,
  .logo-link,
  .league-logo {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .logo-container {
    margin: 0 auto 8px !important;
    overflow: hidden !important;
  }

  .logo-link {
    display: block !important;
    margin: 0 !important;
  }

  .league-logo {
    display: block !important;
    height: auto !important;
    max-height: 180px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .tabs,
  .division-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
    margin: 10px 0 14px !important;
    padding: 5px !important;
    border-radius: 13px !important;
  }

  .tabs button,
  .division-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 4px !important;
    font-size: .76rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    border-radius: 9px !important;
  }

  .table-layout,
  .table-left,
  .main-content,
  .layout,
  .section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Preserve the normal tab system: only the active main section is visible. */
  .section:not(.active),
  .league-division:not(.active),
  .schedule-division:not(.active),
  .players-section:not(.active) {
    display: none !important;
  }

  .section.active,
  .league-division.active,
  .schedule-division.active,
  .players-section.active {
    display: block !important;
  }

  /* Keep desktop tables intact. Only their own container scrolls horizontally. */
  .league-division,
  #ranking-container,
  .players-section,
  #sched-div1-table,
  #sched-div2-table,
  #sched-div3-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
  }

  .league-division table,
  #ranking-container table,
  .players-section table,
  #schedule .schedule-table {
    display: table !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    margin: 0 0 8px !important;
  }

  .league-division thead,
  #ranking-container thead,
  .players-section thead,
  #schedule .schedule-table thead {
    display: table-header-group !important;
  }

  .league-division tbody,
  #ranking-container tbody,
  .players-section tbody,
  #schedule .schedule-table tbody {
    display: table-row-group !important;
  }

  .league-division tr,
  #ranking-container tr,
  .players-section tr,
  #schedule .schedule-table tr {
    display: table-row !important;
  }

  .league-division th,
  .league-division td,
  #ranking-container th,
  #ranking-container td,
  .players-section th,
  .players-section td,
  #schedule .schedule-table th,
  #schedule .schedule-table td {
    display: table-cell !important;
    border: 1px solid #dfe5ec !important;
    padding: 8px 7px !important;
    font-size: .76rem !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
  }

  .league-division table {
    width: 610px !important;
    min-width: 610px !important;
    max-width: none !important;
  }

  .league-division th:nth-child(2),
  .league-division td:nth-child(2) {
    min-width: 145px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #ranking-container table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  #ranking-container th:nth-child(2),
  #ranking-container td:nth-child(2) {
    text-align: left !important;
    white-space: normal !important;
  }

  .players-section table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .players-section th:nth-child(2),
  .players-section td:nth-child(2) {
    text-align: left !important;
    white-space: normal !important;
  }

  #schedule .schedule-division {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #schedule .schedule-table {
    width: 690px !important;
    min-width: 690px !important;
    max-width: none !important;
  }

  #schedule .schedule-table th,
  #schedule .schedule-table td {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #schedule .schedule-table th:nth-child(4),
  #schedule .schedule-table td:nth-child(4),
  #schedule .schedule-table th:nth-child(7),
  #schedule .schedule-table td:nth-child(7) {
    min-width: 120px !important;
    white-space: normal !important;
  }

  .week-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
  }

  .week-selector label {
    font-size: .8rem !important;
  }

  .week-selector select,
  #rankingMetric,
  #teamFilter {
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 9px !important;
    font-size: .84rem !important;
  }

  #schedule h2,
  #ranking h2 {
    margin: 8px 0 12px !important;
    font-size: 1.15rem !important;
  }

  .players-section {
    margin-top: 14px !important;
    padding: 10px !important;
  }

  #excelBlock {
    max-width: 100% !important;
    margin-bottom: 14px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  #excelBlock input,
  #excelBlock select {
    max-width: 100% !important;
    margin: 3px 0 !important;
  }

  #logoutBtn {
    top: 8px !important;
    right: 8px !important;
    padding: 6px 9px !important;
    font-size: .75rem !important;
  }

  #about9pin {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px auto 8px !important;
    padding: 12px 8px !important;
    font-size: .72rem !important;
    line-height: 1.45 !important;
  }

  .site-legal-footer {
    width: 100% !important;
    max-width: 100% !important;
    gap: 7px 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 10px 4px !important;
    text-align: center !important;
    font-size: .72rem !important;
  }

  .site-legal-footer a {
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  .tabs button,
  .division-tabs button {
    font-size: .68rem !important;
  }

  .league-division table {
    width: 580px !important;
    min-width: 580px !important;
  }

  #schedule .schedule-table {
    width: 650px !important;
    min-width: 650px !important;
  }
}