/* ── Mobile sidebar (offcanvas) overrides ── */
@media (max-width: 991px) {
  /* Language switcher compact */
  .navbar .language-switcher-form {
    margin-right: var(--space-sm);
  }

  .language-code {
    font-size: var(--ttw-font-size-xs);
  }
}

/* Extra small screens */
@media (max-width: 576px) {
  .dropdown-menu {
    min-width: auto;
    font-size: var(--ttw-font-size-sm);
  }

  .dropdown-item {
    padding: 0.5rem 0.75rem;
    font-size: var(--ttw-font-size-sm);
  }
}

/* Full-width cards on mobile */
@media (max-width: 767px) {
  /* Reduce map height on mobile */
  #map-container .ttw-map__canvas {
    height: 42vh;
    min-height: 280px;
  }

  /* Country search input in offcanvas */
  #offcanvas-country-search {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Countries offcanvas: wider on mobile */
  .offcanvas-countries {
    width: min(100%, 24rem);
  }

  /* Compact country selector items */
  .ttw-country-toggle-item {
    padding: var(--space-md);
    font-size: var(--ttw-font-size-sm);
  }

  .ttw-country-toggle-item .btn-sm {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.625rem;
  }

  .ttw-country-toggle-item__flag {
    width: 24px;
    height: 18px;
  }

  .ttw-profile-overview,
  .ttw-profile-dashboard {
    grid-template-columns: 1fr;
  }

  .ttw-profile-panel__header {
    align-items: stretch;
    flex-direction: column;
  }

  .ttw-profile-panel__header .btn {
    width: 100%;
    justify-content: center;
  }

  .ttw-profile-country-list__item,
  .ttw-profile-leaderboard-list__item,
  .ttw-profile-leaderboard-list__separator,
  .ttw-profile-leaderboard-list__actions {
    padding: var(--space-md);
  }

  .ttw-profile-stats-card__body {
    gap: 0;
  }

  .ttw-profile-identity-card__avatar {
    width: 128px;
    height: 128px;
  }

  .ttw-profile-identity-card__username,
  .ttw-profile-username__display {
    font-size: var(--ttw-font-size-xl);
  }

  .ttw-profile-identity-card__share-label,
  .ttw-profile-identity-card__privacy-note,
  .ttw-profile-stat__label,
  .ttw-profile-location__label {
    font-size: var(--ttw-font-size-base);
  }

  .ttw-profile-stat__value,
  .ttw-profile-location__value {
    font-size: var(--ttw-font-size-2xl);
  }

  .ttw-profile-alias-form__row {
    align-items: stretch;
    flex-direction: column;
  }

  .ttw-profile-alias-form__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .profile-badge-grid {
    grid-template-columns: repeat(auto-fit, 56px);
  }
}

@media (max-width: 767px) and (max-height: 360px) {
  #map-container .ttw-map__canvas {
    height: 64vh;
    min-height: 180px;
  }
}

/* Tablet adjustments for profile page */
@media (min-width: 768px) and (max-width: 991px) {
  .ttw-profile-overview,
  .ttw-profile-dashboard {
    grid-template-columns: 1fr;
  }

  #map-container .ttw-map__canvas {
    height: 44vh;
    min-height: 360px;
  }
}

/* Card-based mobile leaderboard (replace table) */
@media (max-width: 767px) {
  /* Hide desktop table on mobile */
  .ttw-leaderboard-desktop {
    display: none;
  }

  /* Show mobile card layout */
  .ttw-leaderboard-cards {
    display: block;
  }

  .ttw-leaderboard-card .ttw-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
  }

  .leaderboard-podium-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-3xl);
  }

  .leaderboard-podium-container {
    padding: 0.375rem 0.75rem;
    font-size: var(--ttw-font-size-sm);
  }

  .leaderboard-podium-container i {
    font-size: 1em;
  }

  .leaderboard-podium-card__body {
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  }

  .leaderboard-podium-card__avatar {
    width: 64px;
    height: 64px;
  }
}

/* Tablet leaderboard adjustments */
@media (min-width: 768px) and (max-width: 991px) {
  .leaderboard-podium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaderboard-podium-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .ttw-leaderboard-table {
    font-size: var(--ttw-font-size-sm);
  }

  .ttw-leaderboard-table td,
  .ttw-leaderboard-table th {
    padding: var(--space-sm) var(--space-md);
  }
}

/* Increase touch targets for leaderboard avatars */
.ttw-leaderboard-row .ttw-avatar,
.leaderboard-podium-card .ttw-avatar {
  min-width: 48px;
  min-height: 48px;
}

@media (min-width: 768px) {
  .ttw-leaderboard-row .ttw-avatar {
    min-width: 40px;
    min-height: 40px;
  }
}

@media (max-width: 767px) {
  /* Add vertical spacing between fields only inside app-owned form surfaces. */
  .ttw-account-card .form-group,
  .ttw-account-card .mb-3,
  .ttw-settings .form-group,
  .ttw-settings .mb-3,
  .modal-body .form-group,
  .modal-body .mb-3 {
    margin-bottom: var(--space-lg);
  }

  /* Keep generated crispy/bootstrap form controls contained to their app surface. */
  .ttw-account-card .form-control,
  .ttw-account-card .form-select,
  .ttw-account-card .bootstrap-select,
  .ttw-settings .form-control,
  .ttw-settings .form-select,
  .ttw-settings .bootstrap-select {
    width: 100%;
    margin-bottom: var(--space-md);
  }

  .ttw-account-card .btn-primary,
  .ttw-settings .btn-primary,
  .ttw-travel-plan-form__submit {
    padding: 0.75rem 1.5rem;
    font-size: var(--ttw-font-size-base);
    min-height: 48px;
  }

  .ttw-account-card .btn:not(.btn-primary):not(.btn-lg),
  .ttw-settings .btn:not(.btn-primary):not(.btn-lg),
  .modal-footer .btn:not(.btn-primary):not(.btn-lg) {
    padding: 0.5rem 1rem;
    font-size: var(--ttw-font-size-sm);
    min-height: 44px;
  }

  .modal-footer .btn,
  .ttw-form-actions .btn,
  .ttw-account-actions .btn {
    width: 100%;
    margin-bottom: var(--space-sm);
  }

  .modal-footer .btn:last-child,
  .ttw-form-actions .btn:last-child,
  .ttw-account-actions .btn:last-child {
    margin-bottom: 0;
  }

  /* Modal optimization for mobile */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-dialog.modal-lg {
    max-width: calc(100% - 1rem);
  }

  .modal-content {
    border-radius: var(--ttw-radius);
  }

  .modal-header {
    padding: var(--space-lg);
    flex-wrap: wrap;
  }

  .modal-body {
    padding: var(--space-lg);
    max-height: calc(100dvh - 200px);
    overflow-y: auto;
  }

  .modal-footer {
    padding: var(--space-lg);
    flex-direction: column;
    gap: var(--space-sm);
  }

  .modal-footer .btn {
    width: 100%;
    margin: 0;
  }

  .modal-title {
    font-size: var(--ttw-font-size-lg);
    word-break: break-word;
    flex: 1;
  }

  /* Bootstrap-select dropdown optimizations for app-owned forms. */
  .ttw-account-card .bootstrap-select .dropdown-menu,
  .ttw-settings .bootstrap-select .dropdown-menu,
  .ttw-travel-plan-form .bootstrap-select .dropdown-menu {
    max-height: 300px;
  }

  .ttw-account-card .bootstrap-select .dropdown-menu li a,
  .ttw-settings .bootstrap-select .dropdown-menu li a,
  .ttw-travel-plan-form .bootstrap-select .dropdown-menu li a {
    padding: 0.75rem 1rem;
    font-size: var(--ttw-font-size-base);
  }
}

/* Datepicker mobile optimizations */
@media (max-width: 767px) {
  /* Use native date picker on mobile when possible */
  input[type="date"],
  input[type="month"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Fallback for custom datepicker */
  .datepicker {
    font-size: var(--ttw-font-size-base);
  }

  .datepicker table td,
  .datepicker table th {
    width: 40px;
    height: 40px;
  }
}

/* Optimize navbar spacing for 768px - 1024px range */
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar-nav .nav-item {
    margin-right: var(--space-md);
  }

  .navbar-nav .nav-link {
    padding: var(--space-sm) var(--space-md);
  }
}

/* Dynamic sizing for icon + text combinations */
.nav-link,
.dropdown-item,
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: normal;
  word-wrap: break-word;
  text-align: left;
}

.btn {
  text-align: center;
}

/* Ensure icons don't shrink */
.nav-link i,
.dropdown-item i,
.btn i {
  flex-shrink: 0;
}

/* Prevent text from wrapping awkwardly with icons */
.nav-link,
.dropdown-item {
  min-width: fit-content;
}

/* Language-specific adjustments for longer translations.
 * Scoped to .navbar so it doesn't bleed into other nav contexts (e.g.
 * the settings sidebar's .ttw-settings-nav, which sets its own font-size). */
html[lang="uk"] .navbar .nav-link,
html[lang="de"] .navbar .nav-link,
html[lang="ru"] .navbar .nav-link,
html[lang="es"] .navbar .nav-link {
  font-size: 0.85rem;
}

html[lang="uk"] .dropdown-item,
html[lang="de"] .dropdown-item,
html[lang="ru"] .dropdown-item,
html[lang="es"] .dropdown-item {
  font-size: var(--ttw-font-size-sm);
  padding: 0.5rem 0.75rem;
  white-space: normal;
  min-height: 44px;
}

/* Modal titles with long text */
.modal-title {
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* Dropdown menu items with icons */
.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: normal;
  word-wrap: break-word;
}

.dropdown-menu .dropdown-item i {
  flex-shrink: 0;
  width: 1.25rem;
  margin-right: 0.25rem;
}

/* Ensure icons and text stay together */
.nav-link,
.dropdown-item,
.btn {
  hyphens: none; /* Don't hyphenate with icons */
}

/* Button text with icons - keep icon + first word together */
.btn > i + * {
  display: inline;
}

/* Ensure proper wrapping in navbar on smaller viewports */
@media (max-width: 991px) {
  /* Language-specific adjustments for mobile (navbar only — see note above). */
  html[lang="uk"] .navbar .nav-link,
  html[lang="de"] .navbar .nav-link,
  html[lang="ru"] .navbar .nav-link,
  html[lang="es"] .navbar .nav-link {
    font-size: 0.8rem;
  }
}

/* Heading text wrapping for all languages */
h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Label text wrapping */
label,
.form-label {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Badge text wrapping */
.badge {
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

/* Chip/pill text wrapping */
.chip {
  white-space: normal;
  word-wrap: break-word;
}

/* Responsive text sizes */
@media (max-width: 767px) {
  h1 {
    font-size: var(--ttw-font-size-3xl);
  }

  h2 {
    font-size: var(--ttw-font-size-2xl);
  }

  h3 {
    font-size: var(--ttw-font-size-xl);
  }

  h4 {
    font-size: var(--ttw-font-size-lg);
  }
}

/* Touch-friendly sizing */
@media (max-width: 767px) {
  /* Ensure all interactive elements meet minimum touch target size */
  a,
  button,
  .btn {
    min-height: 44px;
  }

  /* Form controls should NOT have min-width */
  .form-control,
  .form-select {
    min-height: 44px;
    min-width: auto;
  }

  /* Fix oversized checkboxes, radio buttons, and switches on mobile */
  .form-check-input,
  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    flex-shrink: 0;
  }

  /* Form switches (toggle switches) - only for actual switches */
  .form-switch .form-check-input {
    width: 2.5rem !important;
    height: 1.25rem !important;
    min-width: 2.5rem !important;
  }

  /* Regular checkboxes in form-check should stay square */
  .form-check:not(.form-switch) .form-check-input[type="checkbox"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Ensure proper alignment of form check labels */
  .form-check {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .form-check-label {
    margin-left: 0.5rem;
    line-height: 1.4;
  }

  /* Exception for inline text links */
  p a,
  li a {
    min-width: auto;
    min-height: auto;
  }
}

/* =============================================================================
   MOBILE-SPECIFIC BUG FIXES
   ============================================================================= */

@media (max-width: 767px) {
  /* Fix language dropdown padding */
  .dropdown-menu {
    padding: 0.5rem 0;
  }

  .dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    white-space: normal;
  }


  /* Language dropdown - prevent overflow (desktop navbar context only) */
  .navbar .language-switcher-form .dropdown-menu {
    max-width: 90vw;
    left: 0;
    right: auto;
    transform: translateX(0);
  }

}

/* Fix dropdown menu width on all screen sizes */
.dropdown-menu {
  min-width: max-content;
}

/* Ensure dropdown items have enough padding for long text */
.dropdown-menu .dropdown-item {
  padding-right: 2rem;
  padding-left: 1rem;
}

/* Travel plan responsive layout */
@media (max-width: 991px) {
  .ttw-travel-plan-form__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ttw-travel-plan-form__actions {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .ttw-travel-plan-board__header {
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .ttw-travel-plan-page {
    padding-right: var(--space-lg);
    padding-left: var(--space-lg);
  }

  .ttw-travel-plan-create {
    padding: var(--space-lg);
  }

  .ttw-travel-plan-form__grid,
  .ttw-travel-plan-board__grid {
    grid-template-columns: 1fr;
  }

  .ttw-travel-plan-board__header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .ttw-travel-plan-board__title {
    text-align: center;
  }

  .ttw-travel-plan-board__column-title {
    text-align: center;
  }

  .ttw-travel-plan-year-form,
  .travel-plan-year-select {
    width: 100%;
  }

  .ttw-travel-plan-item {
    padding: var(--space-md);
  }

  .ttw-travel-plan-item__summary {
    align-items: flex-start;
  }

  .ttw-travel-plan-item__actions {
    padding-top: 0.125rem;
  }
}