/* =====================================================================
   E2MP — mobile / responsive layer.

   EVERY rule lives inside a media query, so desktop rendering is
   completely untouched. Presentation only: no markup, no handlers, no
   backend, no queries are affected.

   Loaded from header.php, homepage_header.php, homepage.php and the
   Administrator layout, i.e. every screen in the application.

   Breakpoints:  <= 991px  tablet / large phone
                 <= 640px  phone
   ===================================================================== */

/* ============================ TABLET & PHONE ======================== */
@media (max-width: 991px) {

  /* ---- never let media or embeds push the page sideways ---- */
  img, video, iframe, embed, object, canvas, svg {
    max-width: 100% !important;
    height: auto;
  }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* ---- long unbroken strings (URLs, emails, ids) must wrap ---- */
  body, p, td, th, li, dd, dt, h1, h2, h3, h4, span, a, label {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* ---- WIDE TABLES: scroll inside themselves instead of being
       clipped. No markup change needed - the table becomes its own
       scroll container. ---- */
  .table, .a-table, .main-table, .table-user-information,
  .w3l-news table, .main-ws-sec table, .main-section table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* the genuinely wide data grids keep their columns and scroll */
  .main-table { min-width: 640px; }
  .table-scroll, .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- bootstrap grid gutters shouldn't create side-scroll ---- */
  .container, .container-fluid { padding-left: 15px !important; padding-right: 15px !important; }
  .row { margin-left: 0 !important; margin-right: 0 !important; }

  /* ---- app topbar: nav becomes a swipeable row, actions stay put ---- */
  .topbar .topbar-inner { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .topbar .brand { font-size: 1.5rem; }
  .topbar .nav {
    order: 3; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav a { flex: 0 0 auto; padding: 9px 14px; font-size: .92rem; }
  .topbar .topbar-actions { margin-left: auto; gap: 10px; }
  .topbar .user-meta { display: none; }          /* keep the avatar, drop the text */
  .topbar .user-chip { padding: 5px; }
  .topbar .menu-pop { right: 0; min-width: 200px; }

  /* ---- dashboard: single column ---- */
  .layout { grid-template-columns: 1fr !important; }
  .dashboard { padding: 0 14px 26px; }
  .hero-grid, .info-grid, .action-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* ---- legacy 3-column shell ---- */
  .main-section-data .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .main-ws-sec, .main-left-sidebar, .right-sidebar { width: 100% !important; float: none !important; }

  /* ---- admin panel: sidebar becomes a top strip ---- */
  .a-shell { flex-direction: column; }
  .a-side { width: 100%; flex: none; height: auto; position: static; padding: 14px; }
  .a-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .a-nav a { padding: 9px 12px; font-size: .85rem; }
  .a-side-foot { position: static; margin-top: 12px; }
  .a-body { padding: 16px 14px 30px; }
  .a-top { padding: 12px 14px; }
  .a-grid2 { grid-template-columns: 1fr !important; }
  .a-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .a-filters { flex-direction: column; align-items: stretch; }
  .a-f input, .a-f select { min-width: 0; width: 100%; }
  .a-btn { width: 100%; }
  .a-btn--sm { width: auto; }

  /* ---- login: split screen stacks ---- */
  .e2mp-login { padding: 26px 16px; }
  .e2mp-login .shell { grid-template-columns: 1fr !important; gap: 18px; }
  .e2mp-login .pane { padding: 30px 22px; }
  .e2mp-login h1 { font-size: 30px; }
  .e2mp-login .art { min-height: 220px; padding: 28px 24px; order: -1; }
  .e2mp-login .art h2 { font-size: 30px; }
  .e2mp-login .art .brand { font-size: 22px; }

  /* ---- form pages ---- */
  .pf-shell { grid-template-columns: 1fr !important; padding: 0 14px; }
  .pf-sidebar__card { position: static; }
  .pf-grid { grid-template-columns: 1fr !important; }
  .pf-section { padding: 18px 16px; }
  .pf-actionbar { position: static; flex-direction: column; align-items: stretch; gap: 10px; }
  .fp-pagehead { padding: 12px 14px 4px; }
  .fp-help { white-space: normal; }
  .w3l-news #grids5-block .col-lg-10,
  .w3l-news #grids5-block .col-md-8,
  .w3l-news .grid-view { padding: 18px 16px !important; border-radius: 14px; }

  /* ---- client "My Requests" ---- */
  .mr-wrap { padding: 6px 14px 26px; }
  .mr-top { gap: 8px; }
  .mr-ref { margin-left: 0; width: 100%; }
  .mr-meta { gap: 8px 14px; }

  /* ---- account / help centre ---- */
  .acct { padding: 12px 14px 30px; }
  .acct-hero { padding: 20px; }
  .acct-hero__logo { margin-left: 0; }
  .acct-grid { grid-template-columns: 1fr; }
  .acct-row { flex-direction: column; gap: 3px; }
  .acct-row dd { text-align: left; }
  .acct-btn--danger { margin-left: 0; }

  /* ---- message board ---- */
  .mb-layout { grid-template-columns: 1fr !important; }
  .mb-side { position: static; }
  .mb-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mb-rside { align-items: flex-start; text-align: left; }
}

/* ================================ PHONE ============================= */
@media (max-width: 640px) {

  /* iOS zooms the page when a focused input is under 16px - keep inputs
     at 16px so focusing a field never rescales the layout. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="date"],
  input[type="search"], input[type="url"], input:not([type]),
  select, textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* comfortable tap targets (WCAG ~44px) */
  .btn, .a-btn, .acct-btn, .pf-btn, .e2mp-btn,
  button, input[type="submit"], .topbar .nav a, .a-nav a {
    min-height: 44px;
  }
  .topbar .icon-btn { width: 40px; height: 40px; }

  /* type scale */
  .fp-pagehead h1, .pf-pagehead h1, .acct__head h1, .mr-head h1 { font-size: 21px !important; }
  .w3l-contact-breadcrum .breadcrum-bg h2,
  .w3l-service-breadcrum .breadcrum-bg h2 { font-size: 19px !important; }
  .a-top h1 { font-size: 1rem; }
  .stat-card .number { font-size: 1.9rem; }
  .a-stat .num { font-size: 1.6rem; }

  /* single-column everywhere that still has two */
  .stats-grid, .a-stats, .acct-grid, .companies-list .row > [class*="col-"] {
    grid-template-columns: 1fr !important;
  }
  .companies-list .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; }

  /* wizard steps stack */
  .wizard > .steps li, .wizard.vertical > .steps li { flex: 1 1 100% !important; }
  .wizard > .actions ul { flex-direction: column; }
  .wizard > .actions li, .wizard > .actions li a { width: 100% !important; }

  /* footers */
  .footer-inner, .footy-sec .container { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footy-sec ul { flex-wrap: wrap; }
  .footy-sec .fl-rgt { float: none !important; }
}

/* =====================================================================
   Phone: guarantee the 16px input rule wins.
   Some form rules are ID-scoped (e.g. "#signup-form .form-group input"),
   which out-specifies a bare attribute selector even with !important --
   so the anti-zoom rule is repeated here at matching specificity.
   ===================================================================== */
@media (max-width: 640px) {
  #signup-form input, #signup-form select, #signup-form textarea,
  #signup-form .form-group input, #signup-form .form-flex input,
  #portfolioform input, #portfolioform select, #portfolioform textarea,
  #kycFm input, #kycFm select, #kycFm textarea,
  .w3l-news #contact input, .w3l-news #contact select, .w3l-news #contact textarea,
  .w3l-news .form-group input, .w3l-news .form-group select, .w3l-news .form-group textarea,
  .pf-app input, .pf-app select, .pf-app textarea,
  .a-f input, .a-f select, .a-form select, .a-form textarea,
  .e2mp-login input {
    font-size: 16px !important;
  }
}

/* Match the attribute-qualified selectors used by the form stylesheets
   exactly; this file loads last, so equal specificity + !important wins. */
@media (max-width: 640px) {
  #signup-form .form-group input[type="text"],
  #signup-form .form-group input[type="email"],
  #signup-form .form-group input[type="number"],
  #signup-form .form-group input:not([type]),
  #signup-form .form-group select,
  #signup-form .form-group textarea,
  #signup-form .form-flex input,
  #signup-form .form-flex select,
  .w3l-news .form-group input[type="text"],
  .w3l-news .form-group input[type="email"],
  .w3l-news .form-group input[type="number"],
  .w3l-news .form-group input[type="tel"],
  .w3l-news .form-group input[type="date"],
  .w3l-news .form-group input[type="password"],
  .w3l-news .form-group select,
  .w3l-news .form-group textarea,
  .w3l-news .floating-input,
  .w3l-news .floating-select,
  .w3l-news #contact input[type="text"],
  .w3l-news #contact input[type="email"],
  .w3l-news #contact input[type="number"],
  .w3l-news #contact select,
  .w3l-news #contact textarea {
    font-size: 16px !important;
  }
}

/* =====================================================================
   MOBILE NAVIGATION POPUP  (public header - navigation.php)
   Bootstrap's collapse expands as a full-width block that pushes the
   page down. Below 992px it becomes a compact floating dropdown anchored
   to the hamburger instead. Desktop (>=992px) is untouched: Bootstrap's
   .navbar-expand-lg already shows the inline menu there.
   ===================================================================== */
@media (max-width: 991.98px) {

  /* anchor for the popup */
  .w3l-bootstrap-header .navbar { position: relative; }
  .w3l-bootstrap-header .navbar > .container { position: relative; }
  .w3l-bootstrap-header .navbar-toggler { margin-left: auto; border: 1px solid #e3ede9; }

  /* the popup itself - only rendered when Bootstrap adds .show */
  .w3l-bootstrap-header .navbar-collapse {
    position: absolute !important;
    top: calc(100% + 10px);
    right: 15px; left: auto;
    width: 262px; max-width: calc(100vw - 30px);
    background: #fff !important;
    border: 1px solid #e3ede9 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 44px rgba(14, 47, 51, .18) !important;
    padding: 8px !important;
    z-index: 1050;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* little arrow pointing at the hamburger */
  .w3l-bootstrap-header .navbar-collapse.show::before {
    content: ""; position: absolute; top: -7px; right: 18px;
    width: 12px; height: 12px; background: #fff;
    border-left: 1px solid #e3ede9; border-top: 1px solid #e3ede9;
    transform: rotate(45deg);
  }

  .w3l-bootstrap-header .navbar-collapse .navbar-nav {
    margin: 0 !important; width: 100%; flex-direction: column;
  }
  .w3l-bootstrap-header .navbar-nav .nav-item { width: 100%; }
  .w3l-bootstrap-header .navbar-nav .nav-link {
    padding: 11px 12px !important; border-radius: 8px; font-size: 15px;
  }
  .w3l-bootstrap-header .navbar-nav .nav-link:hover,
  .w3l-bootstrap-header .navbar-nav .nav-link:focus,
  .w3l-bootstrap-header .navbar-nav .show > .nav-link {
    background: #eef4f2; color: #1F5D57 !important;
  }

  /* submenus (About us / View Listings) nest inside the popup and keep
     working through Bootstrap's own dropdown toggle */
  .w3l-bootstrap-header .navbar-collapse .dropdown-menu {
    position: static !important; float: none !important; transform: none !important;
    width: auto !important; margin: 2px 0 6px 12px !important;
    padding: 2px 0 2px 8px !important;
    border: none !important; border-left: 2px solid #e3ede9 !important;
    border-radius: 0 !important; box-shadow: none !important;
    background: transparent !important;
  }
  .w3l-bootstrap-header .navbar-collapse .dropdown-item { padding: 9px 10px !important; }

  /* Tutorial button sits at the bottom of the popup */
  .w3l-bootstrap-header .navbar-collapse .btn.bg-gradient-success {
    width: 100%; margin: 8px 0 2px !important;
  }

  /* the old toggler handler adds .noscroll to <body>; a dropdown must not
     lock page scrolling */
  body.noscroll { overflow: auto !important; position: static !important; }
}

/* =====================================================================
   Narrow-desktop / tablet band (992-1200px): the full topbar is still
   shown here, so the nav, bell and user chip compete for room and long
   names can collide with neighbouring items. Let the chip shrink and
   truncate instead of pushing into anything else.
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1200px) {
  .topbar .topbar-inner { gap: 12px; }
  .topbar .nav { gap: 2px; min-width: 0; }
  .topbar .nav a { padding: 10px 11px; font-size: .9rem; }
  .topbar .user-chip { min-width: 0; max-width: 210px; }
  .topbar .user-meta { min-width: 0; }
  .topbar .user-meta .name,
  .topbar .user-meta .sub {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
  }
}

/* A long name must never bleed into the rest of the bar at ANY width. */
.topbar .user-chip { min-width: 0; }
.topbar .user-meta { min-width: 0; overflow: hidden; }
.topbar .user-meta .name,
.topbar .user-meta .sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The page header and its "Need help?" card wrap onto separate lines
   before they can ever touch. */
@media (max-width: 1100px) {
  .fp-pagehead, .pf-pagehead__inner { flex-wrap: wrap; }
  .fp-pagehead > div:first-child { min-width: 0; flex: 1 1 260px; }
  .fp-help { flex: 0 0 auto; }
}

/* Authenticated phone header: keep the account identity in the first row
   and place the navigation on a dedicated, horizontally scrollable row. */
@media (max-width: 640px) {
  .topbar .topbar-inner {
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px 8px;
  }

  .topbar .brand {
    flex: 0 0 auto;
    font-size: 1.45rem;
  }

  .topbar .topbar-actions {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
  }

  .topbar .icon-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .topbar .user-menu {
    min-width: 0;
  }

  .topbar .user-chip {
    min-width: 0;
    max-width: 164px;
    padding: 5px 8px 5px 5px;
    gap: 7px;
  }

  .topbar .avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .topbar .user-meta {
    display: block !important;
    min-width: 0;
    overflow: hidden;
  }

  .topbar .user-meta .name {
    max-width: 104px;
    font-size: .78rem;
    line-height: 1.05;
  }

  .topbar .user-meta .sub {
    max-width: 104px;
    font-size: .68rem;
    line-height: 1.15;
  }

  .topbar .nav {
    order: 3;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0;
    margin: 0;
    padding: 0 0 2px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topbar .nav::-webkit-scrollbar {
    display: none;
  }

  .topbar .nav a {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    font-size: .78rem;
    white-space: nowrap;
  }
}