/* ==========================================================
   RageOT Responsive CSS
   Loaded after basic.css - desktop (>= 1000px) is UNTOUCHED
   All responsive rules live inside @media queries
   ========================================================== */

/* --- Elements hidden on desktop --- */
.mobile-menu-toggle {
  display: none;
}
.mobile-overlay {
  display: none;
}
#MobileLogo {
  display: none;
}

/* --- Sidebar box classes (desktop defaults match current inline styles) --- */
.box-sidebar-top {
  height: 4px;
  width: 180px;
}
.box-sidebar-body {
  background-color: #0D2E2E;
  border-left: 2px solid #5F4D41;
  border-right: 2px solid #5F4D41;
  width: 176px;
  padding: 0;
}
.box-sidebar-bottom {
  position: relative;
  bottom: 0;
  height: 4px;
  width: 180px;
}

/* ============================================
   TABLET + MOBILE: <= 999px
   ============================================ */
@media screen and (max-width: 999px) {

  /* --- Remove fixed-width constraints --- */
  #ArtworkHelper {
    min-width: 0 !important;
    width: 100% !important;
  }
  #Bodycontainer {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }

  /* --- ContentRow: flexbox column instead of relative+top offset --- */
  #ContentRow {
    position: relative !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 155px;
  }

  /* --- MenuColumn: off-screen slide-in drawer --- */
  #MenuColumn {
    position: fixed !important;
    left: -260px !important;
    top: 0 !important;
    width: 240px !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background-color: #051122 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    transition: left 0.3s ease !important;
  }
  #MenuColumn.menu-open {
    left: 0 !important;
  }

  /* --- Overlay behind the open menu --- */
  #MenuColumn.menu-open .mobile-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 240px !important;
    width: calc(100vw - 240px) !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9998 !important;
  }

  /* --- Hamburger button visible --- */
  .mobile-menu-toggle {
    display: block !important;
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10000 !important;
    background: rgba(5, 17, 34, 0.85) !important;
    color: #F4E842 !important;
    border: 1px solid #5F4D41 !important;
    font-size: 24px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
  }

  /* --- Mobile logo visible --- */
  #MobileLogo {
    display: block !important;
    text-align: center !important;
    margin: 10px auto 15px auto !important;
  }
  #MobileLogo img {
    max-width: 160px !important;
    height: auto !important;
  }

  /* --- ContentColumn: full width --- */
  #ContentColumn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* --- ThemeboxesColumn: stack below content --- */
  #ThemeboxesColumn {
    position: relative !important;
    width: 100% !important;
    margin: 20px auto 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  /* --- Themeboxes: maintain size, flex wrap --- */
  .Themebox {
    width: 180px !important;
    flex-shrink: 0 !important;
  }

  /* --- Sidebar box classes responsive --- */
  .box-sidebar-top,
  .box-sidebar-bottom {
    width: 100% !important;
    max-width: 180px !important;
  }
  .box-sidebar-body {
    width: auto !important;
    max-width: 176px !important;
  }

  /* --- LeftArtwork: stays inside drawer --- */
  #LeftArtwork {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    margin: 0 auto 10px auto !important;
    height: auto !important;
  }

  /* --- BoostedPedestals: re-anchor --- */
  #BoostedPedestals {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 10px auto !important;
  }

  /* --- Loginbox: full width in drawer --- */
  #Loginbox {
    left: 0 !important;
    width: auto !important;
  }

  /* --- Menu items: fill drawer width --- */
  .MenuButton, .Button {
    width: 100% !important;
    max-width: 220px !important;
  }
  .Submenu {
    width: auto !important;
    max-width: 220px !important;
  }
  #MenuTop, #MenuBottom {
    width: 100% !important;
    max-width: 240px !important;
  }
  #LoginTop, #LoginBottom {
    width: 100% !important;
    max-width: 240px !important;
  }
  .Loginstatus {
    width: auto !important;
    max-width: 200px !important;
  }
  #LoginButtonContainer {
    width: auto !important;
  }

  /* --- Footer --- */
  #Footer {
    position: relative !important;
    width: 100% !important;
    padding: 20px 10px !important;
  }

  /* --- Content boxes: prevent overflow --- */
  .Content .Box {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* --- Tables: horizontal scroll on overflow --- */
  .TableContentContainer {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* --- Body background: scroll for mobile performance --- */
  body {
    background-attachment: scroll !important;
  }

  /* --- Menu wrapper --- */
  #Menu {
    left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   MOBILE: <= 767px
   ============================================ */
@media screen and (max-width: 767px) {

  /* --- Reduce header space --- */
  #ContentRow {
    padding-top: 80px !important;
  }

  /* --- Mobile logo smaller --- */
  #MobileLogo img {
    max-width: 120px !important;
  }

  /* --- BoostedPedestals: stack vertically --- */
  #BoostedPedestals {
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important;
    gap: 8px !important;
  }

  /* --- ThemeboxesColumn: single column --- */
  #ThemeboxesColumn {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* --- Content boxes: tighter padding --- */
  .Content .BoxContent {
    padding: 5px !important;
    min-height: auto !important;
  }

  /* --- Form labels: allow wrapping --- */
  .LabelV, .LabelV120, .LabelV150, .LabelV200 {
    white-space: normal !important;
    width: auto !important;
    min-width: 80px !important;
  }

  /* --- Form inputs: fill width --- */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Buttons: allow wrapping --- */
  .InnerTableButtonRow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .BigButton, .BigButtonOver {
    width: auto !important;
    min-width: 100px !important;
    max-width: 135px !important;
  }

  /* --- System pages: character outfit centered --- */
  div[style*="margin-left:376px"] {
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    float: none !important;
    display: block !important;
  }

  /* --- System pages: table cells auto-width --- */
  .Content td[style*="width: 80px"],
  .Content td[style*="width: 90px"],
  .Content td[style*="width: 150px"] {
    width: auto !important;
    min-width: 60px !important;
  }

  /* --- System pages: wide inputs --- */
  input[style*="width: 400px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Online page: hide outfit images that overflow --- */
  td > img[style*="margin-left:-70px"] {
    display: none !important;
  }

  /* --- ProgressBar: allow scroll --- */
  #ProgressBar #MainContainer {
    overflow-x: auto !important;
  }
}

/* ============================================
   PRINT: clean output
   ============================================ */
@media print {
  #MenuColumn,
  #ThemeboxesColumn,
  #BoostedPedestals,
  .mobile-menu-toggle,
  #MobileLogo,
  #Footer {
    display: none !important;
  }
  #ContentColumn {
    margin: 0 !important;
    width: 100% !important;
  }
  body {
    background: white !important;
  }
}