/**
 * Paragam mobile / responsive system
 * Load after Hope UI + theme_head. Breakpoints: 991.98 (nav), 767.98 (forms), 575.98 (dense).
 * Future UI: use .filter-bar, .stat-grid, .table-responsive, .page-actions, .panel-toolbar —
 * avoid fixed widths wider than 100%; prefer minmax grids and flex-wrap.
 */

/* ---- Safe area + touch targets ---- */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
img,svg,video{ max-width:100%; height:auto; }
button,.btn,a.nav-link,.form-control,.form-select{
  touch-action:manipulation;
}
.btn,.cms-msg-btn,.sidebar-collapse-btn,#mobile-nav-toggle{
  min-height:2.5rem;
}

/* ---- Mobile top bar (outside sidebar) ---- */
.pg-mobile-bar{
  display:none;
  position:sticky;
  top:0;
  z-index:980;
  align-items:center;
  gap:.65rem;
  padding:.55rem .75rem;
  background:var(--pg-surface,#fff);
  border-bottom:1px solid var(--pg-border,rgba(16,42,67,.08));
  backdrop-filter:blur(8px);
}
#mobile-nav-toggle{
  appearance:none;
  border:1px solid var(--pg-border,rgba(16,42,67,.12));
  background:var(--pg-surface-2,#f8fafc);
  color:var(--pg-text,#111827);
  width:2.5rem;height:2.5rem;border-radius:.65rem;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
}
#mobile-nav-toggle svg{ width:1.2rem;height:1.2rem; }
.pg-mobile-bar-title{
  font-weight:700;font-size:.95rem;color:var(--pg-text,#111827);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;
}
.pg-mobile-bar-right{ display:flex;align-items:center;gap:.45rem;margin-left:auto; }
.pg-sidebar-backdrop{
  display:none;position:fixed;inset:0;z-index:990;
  background:rgba(15,23,42,.48);backdrop-filter:blur(2px);
}

/* ---- Tablet / phone shell ---- */
@media (max-width:991.98px){
  .pg-mobile-bar{ display:flex; }
  .pg-sidebar-backdrop.is-visible{ display:block; }

  .sidebar.sidebar-base,
  .sidebar.sidebar-mini,
  .sidebar.on-resize,
  aside#app-sidebar{
    width:min(18rem,88vw)!important;
    max-width:88vw!important;
    min-width:0!important;
    left:0!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease, width .2s ease;
    box-shadow:none!important;
    margin-left:0!important;
  }
  html.sidebar-open .sidebar.sidebar-base,
  html.sidebar-open .sidebar.sidebar-mini,
  html.sidebar-open aside#app-sidebar{
    transform:translateX(0)!important;
    box-shadow:12px 0 40px rgba(0,0,0,.28)!important;
  }
  /* Defeat Hope UI mini-icon mode (opacity:0 + scale(0) on spans) */
  .sidebar.sidebar-mini.sidebar-base .nav-item .nav-link span,
  .sidebar.sidebar-mini.sidebar-base:not(.sidebar-hover:hover) .nav-item .nav-link:not(.static-item) span,
  .sidebar.on-resize.sidebar-base .nav-item .nav-link span,
  .sidebar.sidebar-mini .item-name,
  .sidebar.on-resize .item-name,
  .sidebar.sidebar-mini .menu-section-title,
  .sidebar.on-resize .menu-section-title,
  html.sidebar-open .sidebar .nav-link .item-name,
  html.sidebar-open .sidebar .menu-section-title{
    display:inline!important;
    opacity:1!important;
    visibility:visible!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    overflow:visible!important;
    position:static!important;
    transform:none!important;
    -webkit-transform:none!important;
    color:var(--pg-sidebar-text,#374151)!important;
    font-size:.92rem!important;
    white-space:normal!important;
  }
  .sidebar.sidebar-mini .menu-section-title,
  .sidebar.on-resize .menu-section-title,
  html.sidebar-open .sidebar .menu-section-title{
    font-size:.72rem!important;
    letter-spacing:.06em;
    color:var(--pg-sidebar-muted,#8a94a6)!important;
  }
  .sidebar.sidebar-mini .nav-link,
  .sidebar.on-resize .nav-link,
  html.sidebar-open .sidebar .nav-link{
    justify-content:flex-start!important;
    gap:.7rem!important;
    padding:.65rem 1rem!important;
  }
  .sidebar.sidebar-mini .brand-logo-full,
  .sidebar.on-resize .brand-logo-full{display:block!important}
  .sidebar.sidebar-mini .brand-logo-mark,
  .sidebar.on-resize .brand-logo-mark{display:none!important}
  .sidebar.sidebar-mini .navbar-brand .logo-title,
  html.sidebar-open .sidebar .navbar-brand .logo-title{
    transform:none!important;
    opacity:1!important;
  }
  /* On mobile, ignore desktop collapsed icon mode */
  html.sidebar-collapsed .sidebar.sidebar-base{ width:min(18rem,88vw)!important; }
  html.sidebar-collapsed .sidebar .brand-logo-full{ display:block!important; }
  html.sidebar-collapsed .sidebar .brand-logo-mark{ display:none!important; }
  html.sidebar-collapsed .sidebar .logo-title,
  html.sidebar-collapsed .sidebar .item-name,
  html.sidebar-collapsed .sidebar .section-label,
  html.sidebar-collapsed .sidebar .menu-section-title{ display:initial!important; }
  html.sidebar-collapsed .sidebar .menu-section-toggle{ display:flex!important; }
  html.sidebar-collapsed .sidebar-list .nav-link{
    justify-content:flex-start!important;
    padding-left:1rem!important;
    padding-right:1rem!important;
    gap:.7rem!important;
  }
  html.sidebar-collapsed .sidebar .sidebar-header{
    flex-direction:row!important;
    justify-content:space-between!important;
    padding:.85rem .75rem!important;
  }
  html.sidebar-collapsed .main-content{ margin-left:0!important; }

  .main-content{
    margin-left:0!important;
    width:100%!important;
    max-width:100vw;
  }
  .main-content > .content-inner,
  .main-content .content-inner,
  .iq-banner:not(.hide)+.content-inner{
    padding:.65rem .75rem 1.25rem!important;
  }
  body.page-dashboard .main-content > .content-inner,
  body.page-dashboard .content-inner{
    padding:0!important;
  }

  .sidebar .sidebar-collapse-btn{ display:none; }

  .panel-toolbar{
    flex-direction:column;
    align-items:stretch!important;
    gap:.55rem!important;
    margin-bottom:.85rem;
  }
  .panel-toolbar .panel-title{
    font-size:1.15rem!important;
    line-height:1.3;
  }
  .panel-toolbar-right{
    margin-left:0!important;
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:.5rem!important;
  }
  .panel-toolbar .panel-user{
    order:3;
    width:100%;
    font-size:.8rem;
  }
  .panel-toolbar div.page-actions{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
  }
  .panel-toolbar div.page-actions .btn{
    flex:1 1 auto;
    min-width:calc(50% - .3rem);
  }

  .stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
  }
  .stat-grid .stat{ padding:.75rem .8rem; }
  .stat-grid .stat .val{ font-size:1.05rem; }

  .filter-bar{
    flex-direction:column;
    align-items:stretch!important;
    gap:.65rem!important;
  }
  .filter-bar .field{ width:100%; }
  .filter-bar .form-control,
  .filter-bar .form-select{
    min-width:0!important;
    max-width:none!important;
    width:100%!important;
  }
  .filter-bar > .btn{ width:100%; }

  .pay-filter{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.65rem!important;
  }
  .pay-filter .field,
  .pay-filter .form-control,
  .pay-filter .form-select,
  .pay-filter .btn{ width:100%!important; max-width:none!important; min-width:0!important; }

  .table-responsive{
    margin-left:-.15rem;
    margin-right:-.15rem;
    border-radius:.65rem;
    -webkit-overflow-scrolling:touch;
  }
  .table-responsive > .table{
    min-width:640px;
    font-size:.82rem;
  }
  .table th,.table td{
    padding:.55rem .6rem!important;
    white-space:nowrap;
  }
  .table td .btn,
  .table td .btn-sm{
    margin:.1rem 0;
  }

  .modal-dialog{
    margin:.5rem;
    max-width:calc(100vw - 1rem)!important;
  }
  .modal-content{ border-radius:.9rem; }
  .modal-body{ padding:1rem; }
  .modal-footer{
    flex-wrap:wrap;
    gap:.45rem;
  }
  .modal-footer .btn{ flex:1 1 auto; }

  .cms-ticker{
    max-width:100%!important;
    width:100%!important;
    min-width:0!important;
    order:2;
    position:relative;
    overflow:hidden!important;
    height:1.55rem;
  }
  .cms-ticker-track{
    position:absolute;
    left:0;top:0;
    will-change:transform;
  }
  .cms-msg-wrap{ margin-left:auto; }
  .cms-msg-panel{
    width:min(340px,calc(100vw - 1.5rem))!important;
    right:0;
  }
  .cms-dash-head{
    flex-direction:column!important;
    align-items:stretch!important;
    max-width:100%;
    min-width:0;
  }
  .cms-dash-head > *{ min-width:0; max-width:100%; }
  .cms-dash-head .cms-ticker{ max-width:100%!important; }

  .dash-board,.bo-dash{ padding:1rem .85rem 1.5rem!important; }
  .dash-grid{ grid-template-columns:1fr!important; }
  .bo-grid{ grid-template-columns:1fr!important; }

  .user-card,.site-card,.totp-card,.card{
    max-width:100%;
  }
}

@media (max-width:767.98px){
  .stat-grid{ grid-template-columns:1fr!important; }
  .panel-toolbar div.page-actions .btn{
    min-width:100%;
    width:100%;
  }
  .form-control,.form-select,input,textarea,select,.btn{
    font-size:16px!important; /* prevent iOS zoom */
  }
  .btn-sm{ font-size:.9rem!important; padding:.45rem .7rem!important; }
  .auto-refresh-row{
    justify-content:space-between;
    width:100%;
  }
  /* Dense action rows in tables */
  .table td .btn-sm{
    display:inline-flex;
    width:auto;
  }
}

@media (max-width:575.98px){
  .main-content > .content-inner.panel-shell{
    padding:.55rem .6rem 1.1rem!important;
  }
  .panel-toolbar .panel-title{ font-size:1.05rem!important; }
  .cms-msg-panel{ width:calc(100vw - 1rem)!important; }
}

/* ---- Login pages ---- */
@media (max-width:575.98px){
  .login-shell{ padding:.85rem!important; }
  .login-card{ padding:1.35rem 1.1rem 1.15rem!important; border-radius:1rem!important; }
  .login-brand-logo{ height:2rem!important; }
}

/* ---- Pay iframe extras (also inlined; keep class hooks) ---- */
@media (max-width:480px){
  .shell .chips{ gap:.35rem; }
  .shell .chip{ padding:.4rem .55rem; font-size:.78rem; }
}