/* ============================================================
   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;
  }
}

/* ── DARK MODE CONSISTENCY ───────────────────────────────── */
body.nightmode .card,
body.nightmode .card_v2 {
  background: var(--bg-nightmode, #0d1a2e) !important;
}