/* =====================================================================
   BeFX — Portal responsive layer (UI ONLY, additive).
   Loaded LAST in the shared headers so it can override the legacy
   custom.css / responsive.css at small viewports WITHOUT editing them.

   Design goals (see task brief):
     - no horizontal page overflow (desktop/tablet/mobile down to 320px)
     - authenticated sidebar collapses into a usable off-canvas drawer
     - tables scroll locally, media stays fluid, forms/grids stack,
       inputs & buttons remain usable, modals fit the screen
     - desktop layout is intentionally NOT redesigned; every structural
       change here is gated behind a max-width media query.

   No PHP/markup/JS logic depends on this file; it is pure presentation.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. GLOBAL SAFETY — fluid media + horizontal-overflow guard (all sizes)
   --------------------------------------------------------------------- */
html,
body{
  max-width:100%;
  overflow-x:hidden;              /* kill any accidental horizontal scroll */
}
img,
svg,
video,
iframe,
embed,
object{
  max-width:100%;
}
/* Long unbroken strings (account numbers, emails, URLs) must not push width */
.white-background,
.content-wrapper,
.dashboard-bottom,
.befx-market-panel,
.kyc-page{
  min-width:0;
}

/* =====================================================================
   0b. DESKTOP SIDEBAR CONTAINMENT (all widths, root-cause fix)
       Legacy custom.css sets `.sidebar-nav{ float:left; width:250px }`
       on the menu <ul>. That fixed 250px is WIDER than the padded
       .sidebar content box (sidebar 250px − 2×18px padding ≈ 214px), so
       the <ul>, its links and the active/hover gradients spilled ~36px
       past the sidebar's right edge. The floated shrink-to-fit made it
       worse. Here we let the <ul> follow its padded container instead of
       a hardcoded width, so every item — and every active background —
       stays fully inside the sidebar at every breakpoint (desktop and
       the mobile drawer alike). Loaded after custom.css → no !important.
   ===================================================================== */
#sidebar-wrapper .sidebar ul.sidebar-menu,
#sidebar-wrapper .sidebar ul.sidebar-menu.sidebar-nav{
  float:none;              /* cancel legacy float (we're flex-column) */
  width:auto;              /* fill the padded .sidebar box, not a fixed 250px */
  max-width:100%;          /* never exceed the sidebar, whatever the width */
  box-sizing:border-box;
}
/* Every menu row and its active/hover background are bounded by the
   sidebar's inner width — the link's own padding is the only inset. */
#sidebar-wrapper .sidebar ul.sidebar-menu li,
#sidebar-wrapper .sidebar ul.sidebar-menu li a{
  max-width:100%;
  box-sizing:border-box;
}

/* =====================================================================
   1. AUTHENTICATED LAYOUT — tablet + mobile (<= 1024px)
      Turns the legacy off-canvas float layout into: full-width content
      + a slide-in drawer sidebar driven by the existing ".icon-menu"
      button (JS wiring lives in sidebar.php via the additive
      #wrapper.befx-nav-open class).
   ===================================================================== */
@media (max-width:1024px){

  /* Content spans the full width — cancel the legacy 170px/265px push */
  .container-fluid.my-ac-wrapper,
  .my-ac-wrapper .row-inner{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    display:block !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #wrapper .canvas,
  #wrapper.toggled .canvas{
    margin-left:0 !important;
    float:none !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* Sidebar becomes an off-canvas drawer (hidden until opened).
     Width brief: tablet ~320px, mobile min(86vw,320px).
     min(86vw,320px) satisfies both — on tablet 86vw is far wider than
     320px so it caps at 320px; on phones it tracks 86vw down to 320px. */
  #sidebar-wrapper.main-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:min(86vw,320px) !important;
    max-width:320px !important;
    height:100vh !important;
    margin:0 !important;
    transform:translateX(-100%);
    transition:transform .3s ease;
    z-index:1200 !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 24px 70px rgba(11,28,72,.28);
  }
  #wrapper.befx-nav-open #sidebar-wrapper.main-sidebar{
    transform:translateX(0) !important;
  }
  /* Dimmed backdrop behind the open drawer */
  #wrapper.befx-nav-open:before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(7,25,54,.45);
    z-index:1150;
  }
  /* keep the drawer menu comfortable inside the drawer width */
  #sidebar-wrapper.main-sidebar .sidebar{ padding:20px 14px; }
  #sidebar-wrapper .sidebar ul.sidebar-menu{ min-height:auto; }

  /* --- MENU LABEL WRAPPING FIX (the actual bug) ---------------------
     The inline sidebar style sets `overflow-wrap:anywhere` on each menu
     link, which at narrow drawer widths shatters labels character-by-
     character ("W\ni\nt\nh..."). Here we cancel that: words stay whole,
     multi-word labels ("My Accounts", "Monetary Statement") wrap onto a
     normal 2nd line only when they genuinely don't fit, and the icon +
     label stay locked in one flex row. */
  #sidebar-wrapper .sidebar ul.sidebar-menu li a{
    flex-wrap:nowrap;                 /* icon and label share one row */
    white-space:normal;               /* allow wrapping at spaces (2 lines) */
    word-break:normal !important;     /* never split inside a word */
    overflow-wrap:break-word !important; /* break only as a last resort, not letter-by-letter */
    hyphens:none;
  }
  /* icon chip is a fixed, non-shrinking element so it never squashes;
     the label (the anonymous text run after it) is the flex item that
     takes the remaining width and wraps. min-width:0 on the link lets
     that text run shrink below its content size instead of overflowing. */
  #sidebar-wrapper .sidebar ul.sidebar-menu li .s-icon{
    flex:0 0 auto;
    flex-shrink:0;
    min-width:38px;
  }
  #sidebar-wrapper .sidebar ul.sidebar-menu li a{
    min-width:0;
  }

  /* MENU TOGGLE — surface the existing (normally hidden) .icon-menu bar */
  .icon-menu{
    display:flex !important;
    align-items:center;
    gap:12px;
    width:100%;
    margin:0 0 18px;
    padding:12px 16px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#1C4E84,#263596);
    color:#fff !important;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(38,53,150,.18);
  }
  .icon-menu .text-menu{ flex:1 1 auto; }
  .icon-menu .text-icons{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:20px;
    flex:0 0 auto;
  }
  .icon-menu .text-icons .fa-icons{
    display:block;
    width:20px;
    height:2px;
    border-radius:2px;
    background:#fff;
  }

  /* the page content sits directly in the canvas — give it breathing room */
  #wrapper .canvas{ padding:16px !important; }
}

/* =====================================================================
   2. TABLES — allow local horizontal scroll instead of page overflow
   ===================================================================== */
@media (max-width:1024px){
  .table-responsive,
  .dashboard-bottom,
  .responsive_tbl,
  .befx-table-scroll{
    width:100%;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  /* bare tables that were never wrapped: make the table itself scroll */
  .content-wrapper table:not(.calculator-table):not(.form-tbl){
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table{ max-width:100%; }
}

/* =====================================================================
   3. FORMS, GRIDS, INPUTS, BUTTONS, TABS, MODALS
   ===================================================================== */
/* inputs/selects/textarea never exceed their container */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea{
  max-width:100%;
}

@media (max-width:767px){
  /* Tabs wrap instead of overflowing; allow scroll if they still don't fit */
  .nav-tabs,
  .nav-pills{
    display:flex;
    flex-wrap:wrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-tabs > li,
  .nav-pills > li{ float:none; }

  /* Modals fit the viewport with a small gutter */
  .modal-dialog{
    width:auto !important;
    max-width:calc(100% - 20px) !important;
    margin:10px auto !important;
  }
  .modal-body{ overflow-x:auto; }

  /* Primary action buttons become comfortably tappable */
  .common-btn,
  .btn.btn-default.form-submit-btn,
  .form-inline button.form-submit-btn{
    min-height:46px;
  }
}

/* =====================================================================
   4. SMALL PHONES (<= 480px) and 320px floor — tighten spacing
   ===================================================================== */
@media (max-width:480px){
  #wrapper .canvas{ padding:12px !important; }
  .white-background{ padding-left:12px !important; padding-right:12px !important; }
  .content-wrapper{ padding-left:0 !important; padding-right:0 !important; }
  /* stacked full-width buttons for the main form actions */
  .box-footer .btn,
  .submit-box .btn{ width:100%; margin:6px 0 0; }
}

@media (max-width:360px){
  .icon-menu{ font-size:12px; padding:11px 13px; }
  #sidebar-wrapper.main-sidebar{ width:min(86vw,320px) !important; }
  .white-background{ padding-left:10px !important; padding-right:10px !important; }
  /* never let 3-emoji / long labels force overflow in tight cards */
  body{ -webkit-text-size-adjust:100%; }
}