/* ============================================================
   CleanTick Panel — Mobile & Cross-Device Responsiveness Fix
   Path: app/views/TechSMM/css/mobile-fix.css
   ============================================================ */

/* ── GLOBAL BASE ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body, html {
  overflow-x: hidden;
  width: 100%;
}

a, button {
  -webkit-tap-highlight-color: transparent;
}

/* ── TOP HEADER — ALWAYS FIXED, ALL DEVICES ───────────────── */
/* position:fixed is set in 6p0wdo6s3yzt84tk.css.
   DO NOT override it here. sticky breaks it on mobile. */
.top_header {
  position: fixed !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* ── MOBILE (≤ 991px) ─────────────────────────────────────── */
@media (max-width: 991px) {

  /* Sidebar sits above everything when open */
  #main_container .sidebar {
    z-index: 9999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Overlay behind open sidebar */
  #main_container.toogle_sidebar::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: fadeIn 0.25s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  #main_container.toogle_sidebar::before {
    cursor: pointer;
  }

  /* Better tap targets */
  button, a, input, select, textarea {
    min-height: 44px;
  }

  /* ── LAYOUT ──────────────────────────────────────────────── */
  #main_container {
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* content_area fills full width — NO padding override that squeezes it */
  #main_container .content_area,
  .content_area {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* DO NOT add padding:10px here — it squeezes the content */
  }

  /* ── ORDERS TABLE ────────────────────────────────────────── */
  .responsive-table,
  .def_table,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
  }

  table.order_page,
  table.order-table {
    min-width: 700px !important;
    font-size: 12px !important;
  }

  table.order_page th,
  table.order_page td {
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }

  .order_link span {
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  .order_status,
  [class*="badge"] {
    font-size: 10px !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
  }

  #orders_menu {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }

  #orders_menu .nav-link {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 20px !important;
  }

  /* ── NEW ORDER FORM ──────────────────────────────────────── */
  #neworder .col-md-6,
  .col-md-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* font-size 16px prevents iOS auto-zoom on input focus */
  .form-control,
  select.form-control,
  input.form-control,
  textarea.form-control {
    font-size: 16px !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }

  #service_description {
    font-size: 13px !important;
    padding: 10px !important;
  }

  .totals-block__card-right {
    border-radius: 12px !important;
    padding: 12px !important;
    margin-top: 12px !important;
  }

  /* ── ADD FUNDS ───────────────────────────────────────────── */
  .payment-methods-grid,
  .payment_methods_wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .payment_method_item {
    padding: 10px !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  /* ── ACCOUNT PAGE ────────────────────────────────────────── */
  .account-section .col-md-6,
  .account-section .col-md-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .balance_card,
  .user_balance_card {
    text-align: center !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* ── SERVICES ────────────────────────────────────────────── */
  .services_table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .services_table table {
    min-width: 600px !important;
    font-size: 12px !important;
  }

  /* ── MODALS ──────────────────────────────────────────────── */
  .modal-dialog {
    margin: 10px !important;
    max-width: calc(100% - 20px) !important;
  }

  .modal-content {
    border-radius: 16px !important;
  }

  .modal-body {
    padding: 16px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }

  /* ── BUTTONS ─────────────────────────────────────────────── */
  .btn {
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  .btn-submit,
  button[type="submit"],
  .btn-place-order {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }

  /* ── CARDS ───────────────────────────────────────────────── */
  .card, .card_v2 {
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .card-body {
    padding: 12px !important;
  }

  /* ── SPACING ─────────────────────────────────────────────── */
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  section {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
}

/* ── SMALL PHONES (< 400px) ──────────────────────────────── */
@media (max-width: 400px) {
  .form-control { font-size: 16px !important; }
  table.order_page { font-size: 11px !important; }

  #orders_menu .nav-link {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  .btn {
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
}

/* ── TABLET (768px–991px) ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 991px) {
  .form-control { font-size: 15px !important; }
  table.order_page { font-size: 13px !important; }

  .col-md-6 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── iOS SAFARI SPECIFIC ─────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  .sidebar,
  .mob-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar,
  .modal-body,
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* ── SIDEBAR: THE ACTUAL SCROLLING/HEIGHT ARCHITECTURE, VERIFIED ─────── */
/* Traced the real element chain instead of assuming: the hamburger button
   at header.twig calls window.toggleSidebar(), which toggles
   #main_container.toogle_sidebar -- and #main_container.toogle_sidebar
   .sidebar { transform: translate(0px) } (vendor CSS, @media max-width:
   991px) is what actually slides <div class="sidebar"> into view. This is
   confirmed the correct target -- a separate #navMob element exists in
   this same file, but only inside the {% else %} branch of the single
   {% if user['auth'] %} check that also gates .sidebar, so it never
   renders for a logged-in user at all. (A previous fix here targeted
   #navMob's bottom padding; harmless, but it was never reachable from
   this screen and didn't touch the reported problem.)
   
   The real cause of "touches the bottom": .sidebar itself only has
   min-height:100vh (not height, not max-height) and no overflow rule of
   its own -- so nothing actually stops its total content from growing
   past one viewport tall. The separate scroll cap on .sidebar_menu
   (height: calc(100vh - Npx)) only constrains the MENU LIST portion; it
   does nothing to stop .sidebar's own total height (profile card + menu
   list combined) from exceeding the screen if that fixed Npx guess is
   even slightly off from the profile card's actual rendered height on a
   given device/font scale -- and there was no clipping/overflow rule on
   the outer element to catch that case either way.
   
   Fixed by making .sidebar itself the single, exactly-one-viewport-tall
   scroll container -- profile card and menu list scroll together as one
   unit -- instead of two separately-sized pieces that have to add up
   exactly right via a guessed subtraction. This can't "touch the bottom"
   by construction: the container is capped to the screen's own height,
   full stop, and anything past that scrolls within it rather than
   spilling past it. */
@media (max-width: 991px) {
  /* Mirroring the currency panel's proven pattern exactly: outer
     container (.sidebar) is fixed and framed but does NOT scroll itself
     -- overflow:hidden, same as #cs-panel, purely to keep corners clipped.
     The INNER list (.sidebar_menu) is the one that scrolls, with its
     max-height set by JS to the real remaining space after the profile
     card, the same way .cs-panel-list's max-height was set by JS to the
     real remaining space below the currency button. One scrollbar, in
     the right place, sized from an actual measurement -- not a second
     guessed number. */
  #main_container .sidebar {
    height: 100vh !important;
    height: 100dvh !important; /* dvh overrides vh in supporting browsers; ignored (falls back to the line above) elsewhere */
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  .sidebar_menu {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: 24px !important;
  }
  .sidebar_menu::-webkit-scrollbar { width: 5px !important; }
  .sidebar_menu::-webkit-scrollbar-track { background: transparent !important; }
  .sidebar_menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15) !important;
    border-radius: 3px !important;
  }
}

/* ── SIDEBAR vs. THE FIXED BOTTOM TAB BAR ────────────────────────── */
/* .mob-bottom-nav (footer.twig) is ALSO position:fixed, ALSO pinned to
   the literal bottom of the screen (bottom:0; height:64px +
   env(safe-area-inset-bottom)), at z-index:9999 -- far above .sidebar's
   z-index:9. Two fixed elements both claiming the full viewport, with the
   tab bar stacked on top, means it would otherwise sit directly over
   .sidebar's own bottom ~64px+. .mob-bottom-nav only renders at
   max-width:768px specifically (its own media query, footer.twig) -- not
   991px, which is why this is its own rule at that exact breakpoint. The
   header.twig JS (syncSidebarMenuHeight) measures this bar's real height
   live and is the authoritative source once it runs; this is the CSS
   fallback for the instant before that JS executes. */
@media (max-width: 768px) {
  #main_container .sidebar {
    height: calc(100dvh - 64px - env(safe-area-inset-bottom)) !important;
  }
}


/* .dashboard.nightmode #main_container .sidebar was loading a decorative
   background image from cdn.mypanel.link -- the same dead domain (does
   not resolve at all) already removed elsewhere on this site. Since
   nightmode is the default, this was a guaranteed-failing image request
   on every single page load, silently leaving just a flat gradient with
   none of the intended visual texture. Dropped the dead url() reference. */
.dashboard.nightmode #main_container .sidebar {
  background: linear-gradient(45deg, var(--bg-sidebar-night), var(--bg-sidebar-night)) !important;
}
/* The sidebar itself has no border, shadow, or rounded edge anywhere in
   the stylesheet -- it's a flat slab that just stops against whatever
   page content sits behind it, with nothing marking it as a distinct,
   floating panel. Framing it properly so it reads as one deliberate,
   contained unit instead of bleeding into the background. */
#main_container .sidebar {
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 6px 0 28px rgba(0,0,0,.35);
}
@media (max-width: 991px) {
  /* Stronger shadow when it's an overlay drawer on top of page content
     (vs. a permanently-docked desktop rail) -- it needs to visually lift
     off the page more here since there's live content directly behind it. */
  #main_container .sidebar {
    border-right: none;
    border-radius: 0 22px 22px 0;
    box-shadow: 10px 0 40px rgba(0,0,0,.55);
  }
}

body.nightmode .card,
body.nightmode .card_v2 {
  background: var(--bg-nightmode, #0d1a2e) !important;
}

@media (max-width: 991px) {
  /* Real numbers, not a guess: this menu has 15 items (11 main + 4 in
     "Child panel/Affiliates/Updates/API"). Each icon box is a fixed
     28x28px (.sidebar_menu .menu_icon, modern-ui.css) -- the tallest
     thing in a row -- so with 9px padding + 3px margin that's 28+18+3 =
     49px/item x 15 = 735px for the list alone, before the profile card.
     Reducing the icon box to 24px and padding to 7px brings each row to
     24+14+3 = 41px x 15 = 615px -- a real ~120px reduction, not a cosmetic
     tweak -- while staying close to the ~44px touch-target guideline
     rather than falling back to the original cramped 3px. */
  .sidebar_menu .menu_item {
    padding: 7px 15px !important;
    margin-bottom: 3px !important;
  }
  .sidebar_menu .menu_icon {
    width: 24px !important;
    height: 24px !important;
  }
  .sidebar_menu .menu_icon i { font-size: 13px !important; }
}

/* ── PROFILE CARD: HARDCODED INLINE AVATAR SIZE ──────────────────── */
/* The avatar <img> in header.twig had width:80px;height:80px written as
   an inline style="" attribute. Inline styles beat external stylesheet
   rules that don't use !important, regardless of specificity or which
   media query matches -- so .v2_avatar img { width:50px } (the intended
   mobile-breakpoint rule, ≤550px) was being silently defeated on every
   device: the avatar rendered at a fixed 80px always, mobile included,
   no matter what the responsive CSS said. Fixed at the source by removing
   the inline width/height from the HTML itself (see header.twig) so the
   already-correct responsive rules (85px desktop / 50px at ≤550px) can
   actually take effect, instead of patching around it with another
   override here. */