/* Comprehensive fixes for shinydashboard on mobile */

/* Fix sidebar on all mobile devices */
@media (max-width: 767px) {
  /* Reset AdminLTE default behaviors */
  .skin-blue .main-header .navbar {
    background-color: #3c8dbc !important;
  }
  
  .main-header {
    position: fixed !important;
    width: 100% !important;
    z-index: 1030 !important;
  }
  
  .main-sidebar,
  .left-side {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    padding-top: 50px !important;
    height: 100% !important;
    width: 230px !important;
    transform: translateX(-230px) !important;
    transition: transform 0.3s ease-in-out !important;
    z-index: 1040 !important;
    background-color: #222d32 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* When sidebar is open */
  .sidebar-open .main-sidebar,
  .sidebar-open .left-side {
    transform: translateX(0) !important;
  }
  
  /* Content wrapper adjustments */
  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 0 !important;
    padding-top: 50px !important;
  }
  
  /* Sidebar content fixes */
  .sidebar {
    padding-bottom: 60px !important;
  }
  
  .sidebar-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  .sidebar-menu > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  .sidebar-menu > li > a {
    padding: 12px 5px 12px 15px !important;
    display: block !important;
    border-left: 3px solid transparent !important;
    width: 100% !important;
    color: #b8c7ce !important;
  }
  
  .sidebar-menu > li > a > .fa,
  .sidebar-menu > li > a > .glyphicon,
  .sidebar-menu > li > a > .ion {
    width: 20px !important;
  }
  
  /* Fix dropdown menus in sidebar */
  .sidebar-menu li.treeview > a {
    position: relative !important;
  }
  
  .sidebar-menu li.treeview-menu {
    display: block !important;
    padding: 0 !important;
  }
  
  /* Fix sidebar toggle button */
  .sidebar-toggle {
    float: left !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 15px 15px !important;
    font-family: fontAwesome !important;
    border: 0 !important;
    color: #fff !important;
  }
  
  .sidebar-toggle:before {
    content: "\f0c9" !important;
  }
  
  .sidebar-toggle:hover {
    color: #fff !important;
    background: rgba(0,0,0,0.2) !important;
  }
  
  /* Fix logo area */
  .main-header .logo {
    display: none !important;
  }
  
  /* Fix navbar */
  .navbar-static-top {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  .navbar-custom-menu {
    float: right !important;
  }
  
  /* Fix box layouts on mobile */
  .box {
    border-radius: 3px !important;
    margin-bottom: 15px !important;
  }
  
  .box-header {
    padding: 10px !important;
  }
  
  .box-body {
    padding: 10px !important;
  }
  
  /* Fix info boxes */
  .info-box {
    min-height: 70px !important;
    margin-bottom: 15px !important;
  }
  
  .info-box-icon {
    height: 70px !important;
    width: 70px !important;
    font-size: 35px !important;
    line-height: 70px !important;
  }
  
  .info-box-content {
    padding: 5px 10px !important;
    margin-left: 70px !important;
  }
  
  /* Fix value boxes */
  .small-box {
    position: relative !important;
    padding: 20px 15px !important;
  }
  
  .small-box h3 {
    font-size: 28px !important;
  }
  
  .small-box p {
    font-size: 14px !important;
  }
  
  .small-box .icon {
    font-size: 70px !important;
    right: 10px !important;
    top: 10px !important;
  }
  
  /* Fix tab panels */
  .nav-tabs-custom {
    margin-bottom: 15px !important;
  }
  
  .nav-tabs-custom > .nav-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  
  .nav-tabs-custom > .nav-tabs > li {
    float: none !important;
    display: inline-block !important;
  }
  
  /* Fix datatables */
  .dataTables_wrapper {
    overflow-x: auto !important;
  }
  
  table.dataTable {
    margin-bottom: 15px !important;
  }
  
  /* Fix modals */
  .modal {
    padding-right: 0 !important;
  }
  
  .modal-dialog {
    margin: 10px !important;
    width: auto !important;
  }
  
  .modal-content {
    border-radius: 3px !important;
  }
  
  /* Ensure clickable areas are large enough */
  .btn {
    min-height: 38px !important;
    touch-action: manipulation !important;
  }
  
  /* Fix control sidebar if present */
  .control-sidebar {
    width: 230px !important;
    transform: translateX(230px) !important;
  }
  
  .control-sidebar-open .control-sidebar {
    transform: translateX(0) !important;
  }
}

/* Additional fixes for very small screens */
@media (max-width: 480px) {
  .main-sidebar,
  .left-side {
    width: 100% !important;
    transform: translateX(-100%) !important;
  }
  
  .small-box h3 {
    font-size: 22px !important;
  }
  
  .box-header > .box-tools {
    position: static !important;
    margin-top: 10px !important;
    float: none !important;
  }
  
  .box-header .box-title {
    font-size: 16px !important;
  }
  
  /* Stack form elements */
  .form-group {
    margin-bottom: 10px !important;
  }
  
  .form-control {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* Fix for specific sidebar issues */
@media screen and (max-width: 767px) {
  .sidebar-menu,
  .main-sidebar .user-panel,
  .sidebar-menu > li.header {
    white-space: normal !important;
    overflow: visible !important;
  }
  
  /* Fix nested menu items */
  .treeview-menu {
    position: static !important;
    width: 100% !important;
    padding-left: 15px !important;
  }
  
  .treeview-menu > li > a {
    padding: 10px 5px 10px 15px !important;
    margin-left: 15px !important;
  }
}

/* Landscape mode adjustments */
@media (max-width: 767px) and (orientation: landscape) {
  .main-header {
    position: fixed !important;
  }
  
  .content-wrapper {
    padding-top: 50px !important;
  }
  
  .main-sidebar {
    padding-top: 50px !important;
  }
}