/* ==========================================================================
   IGL Social CRM — Responsive layer
   Real per-breakpoint layout decisions (not the same layout squeezed
   smaller). The sidebar's rail/drawer behaviour lives in style.css since
   it's driven by the same two breakpoints used everywhere else here:
   <992px = drawer, >=992px = icon rail. This file covers navbar, tables,
   filters/modals, forms, dashboard grid, charts, typography and spacing at
   every size from small phones to 2560px+ displays.
   ========================================================================== */

/* ---------- base / mobile-first defaults (apply to everything <576px, refined upward) ---------- */
html{ -webkit-text-size-adjust: 100%; }
body{ overflow-x: hidden; }
.container-fluid{ padding-left: 16px; padding-right: 16px; }

/* NOTE: tables no longer scroll horizontally — see the "Table
   responsiveness" block in style.css (.ig-table wraps/reflows, and
   collapses into stacked cards below 768px). .table-responsive itself now
   only sets overflow-x:visible there; nothing in this file needs to touch
   it. */

#chartContainer, #chartContainer1, #chartContainer2, #chartContainer3{
  width: 100% !important;
  max-width: 340px;
  margin: 0 auto;
}

/* ================================================================
   Small / large mobile phones — up to 767px
   One column everywhere. Bigger touch targets. Filters/modals become
   near full-height bottom sheets instead of small centered dialogs.
   ================================================================ */
@media only screen and (max-width: 767px){
  h1{ font-size: 24px; }
  h2{ font-size: 21px; }
  h3{ font-size: 18px; }
  .heading_two h2{ font-size: 16px; }

  .navbar{ padding: 8px 0 !important; }
  .postioninner{ display:none !important; }
  .navbar-nav{ flex-direction: row; align-items:center; gap:6px; }
  .navbar-nav .dropdown-menu{ position:absolute; right:0; left:auto; }
  .hidemobile{ display:none !important; }
  .hidedesktop{ display:inline-flex !important; }

  .bgwhite2{ padding:16px; border-radius: var(--ig-radius-md); margin-top:14px; }
  .states_inner{ padding:18px; margin-bottom:14px; }
  .states_inner h6{ font-size:22px; }
  .tabsmaininner, .tabsmaininner2{ padding:16px; }

  .btn{ min-height:42px; }
  .btn-danger, .btn-secondary{ padding:10px 16px; }
  .buttonset{ font-size:16px; }

  /* modal → bottom sheet */
  .modal-dialog{ margin: 0; }
  .modal.fade .modal-dialog{ transform: translateY(100%); }
  .modal.show .modal-dialog{ transform: translateY(0); }
  .modal-dialog:not(.modal-sm):not(.widthdialoge){
    position: fixed; left:0; right:0; bottom:0; width:100%; max-width:100%; margin:0;
  }
  .modal-content{ border-radius: 20px 20px 0 0 !important; max-height: 88vh; }
  .modal-body{ overflow-y:auto; max-height: 62vh; }
  .modalwidth, .filter_popup{ width:100% !important; max-width:100% !important; }
  .widthdialoge{ width: 88%; margin: 10vh auto 0; }
  .widthtall{ width:100%; padding:20px; }

  .filter .nav-pills{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .filter .nav-pills::-webkit-scrollbar{ display:none; }

  .steps li{ width: 16%; }
  .newupdate_steps{ margin-left: 0; }
  .newupdate_steps li{ width: 20%; }

  .table_width_align th:nth-child(1),
  .table_width_align th:nth-child(2),
  .table_width_align th:nth-child(5){ width:auto; }

  .ig-table-search-wrap{ justify-content:stretch; }
  .ig-table-search{ max-width:100%; }
  .ig-filter-input{ min-width:76px; }
  .ig-filter-range input{ min-width:56px; }

  .profileimg{ border-right:none; border-bottom:1px solid var(--ig-border); padding-bottom:16px; margin-bottom:16px; }

  .ig-auth{ padding: 28px 20px; }
}

@media only screen and (max-width: 420px){
  .ig-card{ padding: 26px 20px; }
  .states_inner h6{ font-size:20px; }
  .dropdownmenu_innner{ min-width: 220px; }
}

/* ================================================================
   Tablet portrait — 768px to 991px
   Sidebar is a drawer here (see style.css). Two-column layouts start
   to appear; dialogs regain a centered, boxed presentation.
   ================================================================ */
@media only screen and (min-width: 768px) and (max-width: 991px){
  .container-fluid{ padding-left: 24px; padding-right: 24px; }
  .postioninner{ display:none !important; }
  .hidedesktop{ display:inline-flex !important; }

  .modal-dialog{ transform:none !important; }
  .modalwidth{ width:100%; max-width: 88%; }
  .widthdialoge{ width: 52%; }
  .filter_popup{ max-width: 90% !important; }

  .states_inner{ margin-bottom: 18px; }
  .bgwhite2{ padding: 20px; }

  .ig-auth{ padding: 40px 40px; }
}

/* ================================================================
   Tablet landscape / small laptop — 992px to 1199px
   Sidebar becomes the icon rail. Content gets its first real
   multi-column breathing room.
   ================================================================ */
@media only screen and (min-width: 992px) and (max-width: 1199px){
  :root{ --ig-rail-w: 68px; }
  .formsearch{ width: 210px; }
  .modalwidth{ max-width: 72%; }
  .widthdialoge{ width: 34%; }
}

/* ================================================================
   Laptop 1366px
   ================================================================ */
@media only screen and (min-width: 1200px) and (max-width: 1365px){
  .formsearch{ width: 260px; }
  .widthdialoge{ width: 28%; }
}

/* ================================================================
   Laptop 1440px
   ================================================================ */
@media only screen and (min-width: 1366px) and (max-width: 1439px){
  .formsearch{ width: 280px; }
  .widthdialoge{ width: 27%; }
}

/* ================================================================
   Desktop 1440px – 1599px
   ================================================================ */
@media only screen and (min-width: 1440px) and (max-width: 1599px){
  .formsearch{ width: 320px; }
  .container-fluid{ padding-left: 32px; padding-right: 32px; }
}

/* ================================================================
   Desktop 1600px – 1919px
   Content gets a soft max-width so rows of cards/tables don't stretch
   into uncomfortably long line-lengths.
   ================================================================ */
@media only screen and (min-width: 1600px) and (max-width: 1919px){
  :root{ --ig-rail-w: 80px; }
  .formsearch{ width: 360px; }
  .container-fluid{ max-width: 1680px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
}

/* ================================================================
   Desktop 1920px
   ================================================================ */
@media only screen and (min-width: 1920px) and (max-width: 2559px){
  :root{ --ig-rail-w: 84px; }
  .formsearch{ width: 420px; }
  .container-fluid{ max-width: 1840px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  body{ font-size: 15px; }
}

/* ================================================================
   Large / ultra-wide screens — 2560px and above
   ================================================================ */
@media only screen and (min-width: 2560px){
  :root{ --ig-rail-w: 92px; }
  .formsearch{ width: 480px; }
  .container-fluid{ max-width: 2100px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
  body{ font-size: 16px; }
  .states_inner h6{ font-size: 30px; }
  .loginh2{ font-size: 28px; }
}

/* ---------- landscape phones (short viewport height) ---------- */
@media only screen and (max-height: 480px) and (orientation: landscape){
  .ig-sky{ inset:0 0 34% 0; }
  .ig-station{ height:32%; }
  .ig-eyebrow{ display:none; }
}

/* ---------- fine pointer only: keep hover-only affordances hover-only;
   coarse pointer (touch) gets always-visible affordances instead ---------- */
@media (hover: none){
  a.seeall, .iconsmenu ul li i{ opacity:1; }
}