/**
 * Custom Responsive Styles for robix.vip
 * Fixes button sizing and mobile display issues
 */

/* Fix navigation buttons to be EXACTLY equal size */
.pager {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  list-style: none !important;
}

.pager li {
  display: block !important;
  flex: 0 0 auto !important;
  width: 120px !important;
  float: none !important;
}

.pager li.previous,
.pager li.next {
  width: 120px !important;
  margin: 0 !important;
}

.pager .previous > a,
.pager .previous > span,
.pager .next > a,
.pager .next > span {
  float: none !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  text-align: center !important;
  padding: 8px 12px !important;
  display: block !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ensure buttons are same size on larger screens */
@media (min-width: 768px) {
  .pager li,
  .pager li.previous,
  .pager li.next {
    width: 140px !important;
  }
  
  .pager .previous > a,
  .pager .previous > span,
  .pager .next > a,
  .pager .next > span {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }
}

/* Mobile responsive tables */
@media (max-width: 767px) {
  /* Make tables scrollable horizontally on mobile */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    min-width: 100%;
  }
  
  /* Wrapper for tables that aren't already responsive */
  table:not(.table-responsive) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  
  /* Reduce font size in tables on mobile */
  table td,
  table th {
    font-size: 12px;
    padding: 5px;
  }
}

/* Mobile responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Specific image sizing for mobile */
@media (max-width: 767px) {
  /* Limit large images on mobile */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  
  /* Awards and gallery images */
  img[src*="award"],
  img[src*="skorpion"],
  img[src*="smiley"] {
    max-width: 200px;
    margin: 10px auto;
  }
  
  /* Profile/foto images */
  img[src*="foto"] {
    max-width: 300px;
  }
  
  /* Small icons and smileys */
  img[width="15"],
  img[width="20"],
  img[width="25"],
  img[width="30"] {
    max-width: none;
  }
}

/* Container and content adjustments for mobile */
@media (max-width: 480px) {
  /* Reduce padding on mobile */
  .main-content {
    padding: 10px;
  }
  
  .page-content {
    padding: 15px 10px;
  }
  
  /* Adjust heading sizes */
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  h3 {
    font-size: 18px;
  }
  
  /* Adjust button size for small screens */
  .pager li,
  .pager li.previous,
  .pager li.next {
    width: 100px !important;
  }
  
  .pager .previous > a,
  .pager .previous > span,
  .pager .next > a,
  .pager .next > span {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
  
  .pager {
    gap: 15px !important;
  }
  
  /* Ensure tables don't break layout */
  table {
    table-layout: fixed;
    word-wrap: break-word;
  }
  
  /* Reduce table cell padding further on very small screens */
  table td,
  table th {
    font-size: 11px;
    padding: 3px;
  }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
  
  .main-container {
    overflow-x: hidden;
  }
}

/* Fix for sidebar on mobile */
@media (max-width: 991px) {
  .sidebar {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  .main-content {
    margin-left: 0 !important;
  }
}

/* Improve touch targets for mobile */
@media (max-width: 767px) {
  a,
  button,
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
  }
  
  /* Navigation links */
  .nav-list > li > a {
    padding: 12px 15px;
  }
  
  .submenu > li > a {
    padding: 10px 15px 10px 30px;
  }
}

/* Fix specific table issues */
@media (max-width: 767px) {
  /* ASCII art tables need special handling */
  pre {
    font-size: 10px;
    overflow-x: auto;
    white-space: pre;
  }
  
  /* Code blocks */
  code {
    font-size: 12px;
    word-break: break-all;
  }
}

/* Extra small screens (iPhone SE, older phones) */
@media (max-width: 375px) {
  /* Fixed width buttons for very small screens */
  .pager li,
  .pager li.previous,
  .pager li.next {
    width: 90px !important;
  }
  
  .pager .previous > a,
  .pager .previous > span,
  .pager .next > a,
  .pager .next > span {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
  
  /* Reduce the gap between buttons */
  .pager {
    gap: 10px !important;
  }
}