/* ==========================================
   RESPONSIVE DESIGN STYLESHEET
   Alpha Padel Admin Panel
   ========================================== */

/* ------------------------------------------
   Large Desktops / High Resolution
   ------------------------------------------ */
@media screen and (max-width: 1772px) and (min-width: 1443px) {
  .top-card-box .card {
    min-height: 110px;
  }
}

/* Align desktop minimized state transitions cleanly */
@media screen and (min-width: 1201px) {
  /* .show-hide aside {
    width: 90px !important;
  }
  .show-hide .main-content {
    margin-left: 90px !important;
    width: calc(100% - 90px) !important;
  }
  .show-hide .top-header {
    left: 90px !important;
  }
  .show-hide .sidebar-brand img:nth-child(1) {
    display: none !important;
  }
  .show-hide .sidebar-brand img:nth-child(2) {
    display: block !important;
  } */
}

/* ------------------------------------------
   Laptops / Standard Desktops (992px to 1200px)
   ------------------------------------------ */
@media screen and (max-width: 1200px) {
  aside {
    width: 260px !important;
  }

  .sidebar-brand img:nth-child(1) {
    width: 180px;
  }

  .top-header {
    left: 230px !important;
  }

  .main-content {
    margin-left: 260px !important;
    width: calc(100% - 260px) !important;
  }

  /* Minimized state on laptops */
  .show-hide aside {
    width: 120px !important;
  }
  .show-hide .main-content {
    margin-left: 110px !important;
    width: calc(100% - 110px) !important;
  }
  .show-hide .top-header {
    left: 80px !important;
  }
  .show-hide .sidebar-brand img:nth-child(1) {
    display: none !important;
  }
  .show-hide .sidebar-brand img:nth-child(2) {
    display: block !important;
  }
  .show-hide aside:hover {
    width: 260px !important;
  }
}

/* ------------------------------------------
   Tablets and Medium Screens (768px to 991px)
   ------------------------------------------ */
@media screen and (max-width: 991px) {
  /* Completely hide the desktop sidebar */
  aside {
    display: none !important;
  }

  /* Main content takes full screen */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 70px !important;
  }

  /* Header aligns left-to-right */
  .top-header {
    left: 0 !important;
    margin-left: 0 !important;
    padding: 0  !important;
    width: 100% !important;
  }

  /* Toggle buttons */
  .toogle-bar-btn {
    display: none !important; /* Hide desktop toggle */
  }

  .toogle-btn {
    display: flex !important; /* Show mobile toggle */
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #f0b44d;
    color: #fff !important;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s ease;
  }

  .toogle-btn:hover {
    background-color: #d9a041;
  }

  /* Responsive Search Bar in Header */
  .header-search-bar {
    width: 100% !important;
    max-width: 300px !important;
  }

  /* Reduce page padding on tablets to fit contents */
  .page-content {
    padding: 24px 20px !important;
  }

  /* Handle old/alternative classes */
  .hidden aside {
    display: none !important;
  }
  .hidden .top-header {
    margin-left: 0 !important;
  }
  .hidden .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Authentication elements */
  .auth-wrapper .heading-content {
    display: none !important;
  }
  .switcher-info span,
  .switcher-text {
    color: #fff;
    transition: all 0.5s ease-in-out;
  }
  .switcher-text:hover {
    text-decoration: underline !important;
  }
}

/* ------------------------------------------
   Small Mobiles / Small Tablets (< 768px)
   ------------------------------------------ */
@media screen and (max-width: 767px) {
  /* Header Search Bar hides or scales down */
  .header-search-bar {
    display: none !important; /* Hide to prevent header overflow */
  }

  .search-bar {
    width: 120px;
  }

  /* Page Padding for Mobile Screen */
  .page-content {
    padding: 20px 16px !important;
  }

  /* Forms and Search Filter Row Stacking */
  .search-filter-row {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .search-filter-row .users-search-box {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .search-filter-row .btn-filter,
  .search-filter-row .btn-export,
  .search-filter-row a {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  /* Page Header and actions stack neatly */
  .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .header-actions {
    display: flex !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .header-actions .btn-export,
  .header-actions .btn-add-user,
  .header-actions a {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Tab menus horizontal scroll (UX best practice) */
  .users-tabs-wrapper {
    overflow-x: auto !important;
    white-space: nowrap !important;
    margin-bottom: 20px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .users-tabs-wrapper::-webkit-scrollbar {
    display: none;
  }
  .users-tabs {
    flex-wrap: nowrap !important;
    display: inline-flex !important;
    width: max-content !important;
    gap: 20px !important;
  }

  /* Approval items list buttons on mobile */
  .approval-item .d-flex {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .approval-item .d-flex a {
    width: 100% !important;
  }
}

/* ------------------------------------------
   Mobile Phones (< 576px)
   ------------------------------------------ */
@media screen and (max-width: 575px) {
  /* Authentication Wrapper */
  .auth-wrapper .form-content {
    min-height: 100% !important;
  }
  .auth-wrapper {
    align-items: center;
    min-height: calc(100vh - 0px);
  }
  .auth-wrapper .form-content .main-form {
    padding: 20px !important;
  }

  /* Stats grid adjustment */
  .stats-grid {
    grid-template-columns: 1fr !important; /* Stack stats vertically */
    gap: 16px !important;
  }

  /* Welcome section text scaling */
  .welcome-section h2 {
    font-size: 22px !important;
  }
  .welcome-section p {
    font-size: 13px !important;
  }

  /* Title and buttons */
  .title-right-top-btn {
    width: 100%;
    flex-wrap: wrap !important;
  }
  .title-right-top-btn .top-right-btn,
  .title-right-top-btn .top-right-btn a {
    width: 100%;
    display: inline-block;
    text-align: center;
  }

  .dashboard-tabs .nav-item {
    width: 33%;
  }
  .dashboard-tabs .nav-pills .nav-link {
    width: 100%;
    text-align: start;
  }

  .graph-sets {
    width: 100% !important;
  }
}

@media screen and (max-width: 450px) {
  .dashboard-tabs .nav-item {
    width: 50%;
  }
}

/* ------------------------------------------
   Horizontal Scroll for All Data Tables
   ------------------------------------------ */
.table-card {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}

.custom-table {
  min-width: 850px !important; /* Force readable column widths on mobile */
  width: 100% !important;
}

/* ------------------------------------------
   Mobile Sidebar Offcanvas Custom Styling
   ------------------------------------------ */
#offcanvasMobileSidebar {
  background-color: var(--bg-main) !important;
  border-right: 1px solid var(--card-border) !important;
  width: 280px !important;
  z-index: 1050;
}

#offcanvasMobileSidebar .offcanvas-header {
  border-bottom: 1px solid var(--card-border) !important;
  padding: 16px 20px !important;
  background-color: var(--bg-main) !important;
}

#offcanvasMobileSidebar .offcanvas-title h3 {
  color: #fff !important;
  font-weight: 700;
  font-size: 20px;
}

#offcanvasMobileSidebar .btn-close {
  background-color: transparent !important;
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#offcanvasMobileSidebar .btn-close:hover {
  opacity: 1;
}

#offcanvasMobileSidebar .offcanvas-body {
  padding: 0 !important;
  background-color: var(--bg-main) !important;
}

/* Disable the hover-expand behavior on mobile layout */
@media screen and (max-width: 991px) {
  #offcanvasMobileSidebar aside,
  #offcanvasMobileSidebar aside:hover,
  aside:hover {
    width: 100% !important;
  }
}

#offcanvasMobileSidebar aside {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
  background: transparent !important;
}

#offcanvasMobileSidebar .left-box {
  padding: 20px 0 !important;
  height: 100%;
}

#offcanvasMobileSidebar .sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

#offcanvasMobileSidebar .sidebar-links li {
  margin-bottom: 4px;
}

#offcanvasMobileSidebar .sidebar-links li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: #a0aec0;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
}

#offcanvasMobileSidebar .sidebar-links li a:hover,
#offcanvasMobileSidebar .sidebar-links li a.active {
  color: #000 !important;
  background: #f0b44d !important;
  border-radius: 8px;
  margin: 0 16px;
  padding: 12px 14px;
}

#offcanvasMobileSidebar .sidebar-links li a i,
#offcanvasMobileSidebar .sidebar-links li a span i {
  font-size: 18px;
}

#offcanvasMobileSidebar .sidebar-submenu {
  list-style: none;
  padding-left: 36px;
  margin: 4px 0;
  display: none;
}

#offcanvasMobileSidebar .sidebar-submenu.show {
  display: block !important;
}

#offcanvasMobileSidebar .sidebar-submenu li a {
  padding: 8px 24px !important;
  font-size: 13px !important;
}

#offcanvasMobileSidebar .sidebar-submenu li a:hover,
#offcanvasMobileSidebar .sidebar-submenu li a.active {
  margin: 0 8px !important;
  padding: 8px 16px !important;
}

#offcanvasMobileSidebar .left-bottom-txt {
  border-top: 1px solid var(--card-border) !important;
  padding: 20px 24px !important;
  margin-top: auto;
}

#offcanvasMobileSidebar .logout_btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff4b4b !important;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s ease;
}

#offcanvasMobileSidebar .logout_btn:hover {
  opacity: 0.8;
}

/* ------------------------------------------
   Settings Page Custom Mobile Overrides
   ------------------------------------------ */
@media screen and (max-width: 480px) {
  #cut-rules .d-flex.align-items-center.justify-content-between,
  #commission-rates .d-flex.align-items-center.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  #cut-rules .form-control,
  #commission-rates .form-control {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .setting-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .setting-row .value-input {
    width: 100% !important;
    text-align: left !important;
  }
}