/* ============================================================================
   WMS-MOBILE.CSS — v6
   Fixes:
   - #btnToggleDrawer fonctionne desktop + mobile
   - #btnQuickScan visible, flottant, PAS dans la TabBar
   - Modal-card plein écran, scrollable, head/footer sticky
   - 🌟 FIX : Suppression définitive du scroll horizontal pour Atelier/Picking
   ============================================================================ */

:root{
  --mw-appbar-h: 54px;
  --mw-tabbar-h: 64px;
  --mw-safe-b: env(safe-area-inset-bottom, 0px);
  --mw-safe-t: env(safe-area-inset-top, 0px);
  --mw-radius: 22px;
  --mw-accent: var(--primary, #60a5fa);
}

@media (max-width: 900px){

  html, body{ overflow-x:hidden; background:var(--bg); }

  /* === Masquer chrome desktop === */
  .wms-topbar, .wms-sidebar, .wms-workspace{ display:none !important; }
  .wms-body{ display:block !important; }

  /* === Shell === */
  #mwShell{
    position:fixed; inset:0;
    display:flex; flex-direction:column;
    background:var(--bg); z-index:500;
  }

  /* === AppBar === */
  #mwAppBar{
    flex-shrink:0;
    height:calc(var(--mw-appbar-h) + var(--mw-safe-t));
    padding-top:var(--mw-safe-t);
    display:flex; align-items:center; gap:10px;
    padding-left:16px; padding-right:10px;
    background:color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    position:relative; z-index:600;
  }
  #mwAppBarTitle{
    flex:1; font-size:19px; font-weight:800;
    letter-spacing:-.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #mwAppBarActions{
    display:flex; align-items:center; gap:4px; flex-shrink:0;
  }
  #mwAppBarActions #themeBtn,
  #mwAppBarActions .sync-badge,
  #mwAppBarActions #btnToggleDrawer,
  #mwAppBarActions #user-panel{
    width:36px; height:36px; padding:0 !important;
    border-radius:50% !important;
    display:flex !important; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06) !important;
    box-shadow:none !important; border:none !important;
    position:relative !important;
  }
  #mwAppBarActions .sync-badge span#sync-status{ display:none; }
  #mwAppBarActions .sync-menu{ display:none !important; }
  #mwAppBarActions #btnToggleDrawer span:not(#global-alerts-badge){ display:none; }
  #mwAppBarActions #btnToggleDrawer #global-alerts-badge{
    position:absolute; top:2px; right:2px;
  }
  #mwAppBarActions #user-panel{ gap:0 !important; background:transparent !important; }
  #mwAppBarActions #user-panel span#user-display-name{ display:none; }
  #mwAppBarActions #user-panel button{
    width:36px; height:36px; padding:0 !important; border-radius:50% !important;
  }

    #mwAppBarActions #btnToggleDrawer {
    display: none !important;
  }

  /* === Screens === */
  #mwScreens{ flex:1; position:relative; overflow:hidden; }
  .mw-screen{
    position:absolute; inset:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:14px 14px calc(20px + var(--mw-tabbar-h) + var(--mw-safe-b)) 14px;
    opacity:0; visibility:hidden;
    transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease;
  }
  .mw-screen.mw-active{ opacity:1; visibility:visible; transform:translateY(0); }

  /* === TabBar — 5 boutons égaux, PAS de FAB === */
  #mwTabBar{
    flex-shrink:0;
    height:calc(var(--mw-tabbar-h) + var(--mw-safe-b));
    padding-bottom:var(--mw-safe-b);
    display:flex; align-items:stretch;
    background:color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    position:relative; z-index:600;
    box-shadow:0 -6px 24px rgba(0,0,0,.22);
  }
  #mwTabBar button{
    flex:1; background:transparent; border:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; font-size:10.5px; font-weight:700;
    color:var(--muted); cursor:pointer; border-radius:0;
    position:relative; transition:color .15s ease;
  }
  #mwTabBar button .mw-ic{ font-size:20px; line-height:1; transition:transform .15s ease; }
  #mwTabBar button.mw-active{ color:var(--mw-accent); }
  #mwTabBar button.mw-active .mw-ic{ transform:translateY(-2px) scale(1.08); }

  /* === #btnQuickScan — flottant, AU-DESSUS de la TabBar === */
  #btnQuickScan{
    bottom:calc(var(--mw-tabbar-h) + var(--mw-safe-b) + 16px) !important;
    z-index:9500 !important;
    width:54px !important;
    height:54px !important;
  }
  #btnQuickScan svg{
    width:24px !important;
    height:24px !important;
  }

  /* === Écran Accueil === */
  #mwScreenHome .mw-hero{
    border-radius:var(--mw-radius); padding:22px 20px;
    background:linear-gradient(135deg, rgba(96,165,250,.22), rgba(59,130,246,.06));
    border:1px solid rgba(96,165,250,.3);
    margin-bottom:14px; position:relative; overflow:hidden;
  }
  #mwScreenHome .mw-hero::after{
    content:"🏭"; position:absolute; right:-6px; bottom:-14px;
    font-size:74px; opacity:.10;
  }
  #mwScreenHome .mw-hero .stat-main{
    padding:0 !important; border:none !important;
    display:flex !important; flex-direction:column; gap:2px;
  }
  #mwScreenHome .mw-hero .k{
    font-size:12px; font-weight:800; text-transform:uppercase;
    letter-spacing:.06em; color:var(--mw-accent);
  }
  #mwScreenHome .mw-hero .v{ font-size:38px !important; font-weight:900 !important; }
  #mwScreenHome .mw-hero .stat-sub-col{
    display:flex !important; flex-direction:row !important; gap:10px; margin-top:14px;
  }
  #mwScreenHome .mw-hero .stat-sub-row{
    flex:1; flex-direction:column !important; align-items:flex-start !important;
    background:rgba(255,255,255,.06) !important;
    border-radius:14px !important; padding:10px 12px !important; border:none !important;
  }
  #mwScreenHome .stat.split-stat-complex{
    display:block !important; border:none !important; min-width:0 !important;
  }
  #mwScreenHome .mw-tiles{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
  }
  #mwScreenHome .mw-tiles .stat{
    margin:0 !important; border-radius:18px !important;
    background:var(--card) !important; border:1px solid var(--line) !important;
    padding:14px !important; min-height:88px;
  }
  #mwScreenHome .stat.split-stat{
    display:flex !important; flex-direction:row !important; padding:0 !important; overflow:hidden;
  }
  #mwScreenHome .stat.split-stat .stat-half{
    flex-direction:column !important; align-items:flex-start !important; padding:14px !important;
  }
  #mwScreenHome .stat.split-stat .stat-half:first-child{ border-right:1px solid var(--line) !important; }
  #mwScreenHome .stat .k{ font-size:10.5px; }
  #mwScreenHome .stat .v{ font-size:20px; }
  #mwScreenHome .multi-line-stat{ grid-column:1 / -1; }
  #mwScreenHome .multi-line-stat .v{
    flex-direction:row !important; flex-wrap:wrap; gap:8px; margin-top:8px !important;
  }
  #mwScreenHome .multi-line-stat .stat-row{ flex:1 1 auto; min-width:110px; }
  #mwScreenHome .mw-section-title{
    font-size:13px; font-weight:800; text-transform:uppercase;
    letter-spacing:.05em; color:var(--muted); margin:6px 2px 10px 2px;
  }
  #mwHomeQuick{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
  #mwHomeQuick button{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:16px 6px; border-radius:16px;
    border:1px solid var(--line); background:var(--card); color:var(--text);
    font-size:11.5px; font-weight:700; cursor:pointer;
  }
  #mwHomeQuick button .mw-ic{ font-size:22px; }
  #mwHomeQuick button:active{ background:rgba(96,165,250,.12); }

  /* === Écran Entrepôt === */
  #mwScreenWarehouse{ padding-left:0 !important; padding-right:0 !important; }
  #mwWhZoneBar{ padding:0 14px 8px 14px; }
  #mwWhZoneBar .zone-radio-group{
    display:flex !important; gap:4px;
    background:rgba(255,255,255,.05); border-radius:14px; padding:4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mwWhZoneBar .btn-zone-radio{
    flex:1; text-align:center; border:none !important;
    border-radius:11px !important; padding:9px 8px !important;
    font-size:12.5px !important; background:transparent !important;
    white-space: nowrap;
  }
  #mwWhZoneBar .btn-zone-radio.active{
    background:var(--mw-accent) !important; color:#0b1220 !important;
    box-shadow:0 3px 10px rgba(96,165,250,.4) !important;
  }
  #mwWhZoneBar .row-selector{
    position:absolute; width:1px; height:1px;
    overflow:hidden; opacity:0; pointer-events:none;
  }

  #mwWhLevelBar{
    display:flex !important; align-items:center; gap:8px; padding:0 14px 10px 14px;
  }
  #mwWhLevelBar #mobileLevelFilter{
    flex:1; display:flex !important; align-items:center; gap:8px; margin:0 !important; padding:0 !important;
  }
  #mwWhLevelBar #mobileLevelFilter .mobile-select{
    flex:1; width:auto !important; height:40px; border-radius:12px;
    font-size:14px; font-weight:600; margin:0 !important;
  }
  #mwWhLevelBar #mobileLevelFilter button.btn{ display:none !important; }
  #mwWhLevelBar #mobileLevelFilter > div[style*="flex"]{ display:none !important; }
  #mwOrientBtn{
    flex-shrink:0; height:40px; padding:0 14px; border-radius:12px;
    border:1px solid var(--line); background:var(--card); color:var(--text);
    font-size:12.5px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; gap:5px; white-space:nowrap;
  }
  #mwOrientBtn:active{ background:rgba(96,165,250,.12); }

  #mwWhPager{
    display:flex; align-items:center; gap:8px; padding:2px 14px 10px 14px; flex-wrap:nowrap;
  }
  #mwWhPagerPrev, #mwWhPagerNext{
    flex-shrink:0; width:38px; height:38px; min-width:38px;
    border-radius:50%; border:1px solid var(--line); background:var(--card);
    color:var(--text); font-size:17px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  #mwWhPagerPrev:disabled, #mwWhPagerNext:disabled{ opacity:.3; }
  #mwWhPagerInfo{
    flex:1 1 0; min-width:0; text-align:center;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(96,165,250,.16), rgba(96,165,250,.03));
    border:1px solid rgba(96,165,250,.25);
    padding:8px 6px; overflow:hidden;
  }
  #mwWhPagerInfo .mw-aisle-name{
    font-size:14px; font-weight:800; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #mwWhPagerInfo .mw-aisle-sub{
    font-size:10px; color:var(--muted); margin-top:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #mwWhDots{ display:flex; justify-content:center; gap:5px; padding-bottom:10px; }
  #mwWhDots span{ width:5px; height:5px; border-radius:50%; background:var(--line); transition:all .2s ease; }
  #mwWhDots span.mw-dot-active{ width:14px; border-radius:3px; background:var(--mw-accent); }

  #mwWhSwipeArea{ padding:0 14px; touch-action:pan-y; }

  /* 🌟 FIX ULTIME : Suppression de la notion de table pour laisser les Flex/Grid respirer */
  #warehouseGrid {
      box-sizing: border-box;
      width: 100%;
  }

  .grid-container{ padding:0 !important; overflow:visible !important; }
  .grid-wrap{
    display:flex !important; flex-direction:column !important;
    gap:12px !important; min-width:0 !important; overflow:visible !important;
  }
  .level-row{
    display:block !important; grid-template-columns:none !important;
    min-width:0 !important;
    background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:12px;
  }
  .level-label{
    display:inline-flex !important; align-items:center; gap:6px;
    text-align:left !important; font-size:12px !important; font-weight:800;
    color:var(--mw-accent); background:rgba(96,165,250,.12);
    padding:4px 10px; border-radius:8px; margin-bottom:10px; width:auto !important;
  }
  .level-label::before{ content:"▤"; }
  .slots-row{ display:grid !important; gap:8px !important; }
  #warehouseGrid.mw-orient-v .slots-row{ grid-template-columns:1fr !important; }
  #warehouseGrid.mw-orient-h .slots-row{ grid-template-columns:1fr 1fr !important; }
  .slot{
    padding:10px 12px !important; border-radius:13px !important;
    min-width:0 !important; min-height:56px;
  }
  .slot-code{ font-size:10px !important; font-weight:800; }
  .slot-name{ font-size:13.5px !important; }
  .slot-meta{ font-size:10.5px !important; }
  .quality-badge, .cat-badge{ font-size:9px !important; padding:3px 7px !important; }
  .slot-stack{
    flex-direction:row !important; flex-wrap:wrap !important;
    gap:4px !important; height:auto !important;
    justify-content:flex-end !important; flex:0 0 auto;
  }
  .mini-pal{
    width:15px !important; height:15px !important;
    padding:0 !important; border-radius:50% !important; flex:none !important;
  }
  .mini-pal span{ display:none !important; }
  .toolbar{
    flex-wrap:wrap; gap:6px !important; font-size:10.5px !important;
    justify-content:center; padding:14px 14px 4px 14px !important;
  }

  /* === Écran Recherche === */
  #mwScreenSearch .global-search.searchbox{ position:static; }
  #mwScreenSearch input#searchInput{
    width:100%; height:50px; font-size:16px !important;
    padding:0 16px !important; border-radius:16px; margin-bottom:12px;
  }
  #mwScreenSearch .search-dropdown{
    position:static !important; display:block !important;
    max-height:none !important; box-shadow:none !important;
    padding:0 !important; background:transparent !important; border:none !important;
  }
  #mwScreenSearch .searchbox.open .search-dropdown{ display:block !important; }

  /* === Écran Alertes — drawer toujours visible === */
  #mwScreenAlerts .wms-context-drawer{
    position:static !important; width:100% !important; max-height:none !important;
    background:transparent !important; border:none !important;
    box-shadow:none !important; padding:0 !important;
    transform:none !important; display:block !important;
  }
  #mwScreenAlerts #alertsPanelContainer{ display:block !important; }

  /* === Écran Menu === */
  #mwScreenMenu .nav-group{ margin-bottom:16px; }
  #mwScreenMenu .nav-label-btn{
    width:100%; display:flex !important; justify-content:space-between;
    background:transparent !important; border:none !important;
    padding:6px 4px !important;
    font-size:12px; font-weight:800; text-transform:uppercase;
    letter-spacing:.05em; color:var(--muted);
  }
  #mwScreenMenu .nav-items-container{
    background:var(--card); border:1px solid var(--line);
    border-radius:16px; overflow:hidden; margin-top:6px;
  }
  #mwScreenMenu .nav-item{
    width:100%; display:flex !important; align-items:center; gap:12px;
    min-height:50px; padding:12px 14px !important;
    border-radius:0 !important; border:none !important;
    border-bottom:1px solid var(--line);
    background:transparent !important;
    font-size:14.5px; text-align:left;
  }
  #mwScreenMenu .nav-item:last-child{ border-bottom:none; }
  #mwScreenMenu .nav-item:active{ background:rgba(96,165,250,.1) !important; }

  /* ================================================================
     MODALES — plein écran, scrollable, head/footer sticky
     ================================================================ */
  .modal{
    padding:0 !important;
    align-items:stretch !important;
    z-index:20000 !important;
  }
  .modal-card{
    width:100% !important;
    max-width:100% !important;
    max-height:100dvh !important;
    height:100dvh !important;
    border-radius:0 !important;
    border:none !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  .modal-head{
    flex-shrink:0 !important;
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    background:var(--card) !important;
    padding:14px 16px !important;
    border-bottom:1px solid var(--line) !important;
    margin-bottom:0 !important;
  }
  .modal-head h2{ font-size:17px !important; }
  .modal-head .subtitle{ font-size:12px !important; margin-top:2px !important; }

  #editModalBody{
    max-height:none !important;
    flex:1 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:14px 16px !important;
    -webkit-overflow-scrolling:touch;
  }
  .modal-card [style*="max-height"]{ max-height:none !important; }
  
  /* Seuls les vrais tableaux explicites sont scrollables horizontalement */
  .modal-card table{ display:block; overflow-x:auto; white-space:nowrap; }
  
  .modal-card [style*="overflow-x:auto"],
  .modal-card [style*="overflow-x: auto"]{
    max-height:none !important;
    flex:1 !important;
    overflow-y:auto !important;
  }

  .modal-footer,
  .modal-actions,
  .stepper-actions{
    flex-shrink:0 !important;
    position:sticky !important;
    bottom:0 !important;
    background:var(--card) !important;
    z-index:15 !important;
    padding:12px 16px !important;
    border-top:1px solid var(--line) !important;
    margin-top:0 !important;
  }
  .modal-actions{ flex-direction:column !important; gap:8px !important; }
  .modal-actions .btn{ width:100% !important; flex:none !important; }
  .modal-actions .btn:last-child{ margin-top:0 !important; }

  .modal-card input,
  .modal-card select,
  .modal-card textarea{
    font-size:16px !important;
  }

  #modal3D .modal-card{ height:100dvh !important; padding:0 !important; }
  #modal3D iframe{ flex:1 !important; height:100% !important; border-radius:0 !important; }
}

@media (max-width: 360px){
  #mwWhPagerPrev, #mwWhPagerNext{ width:32px; height:32px; min-width:32px; font-size:15px; }
  #mwWhPagerInfo{ padding:6px 4px; }
  #mwWhPagerInfo .mw-aisle-name{ font-size:12.5px; }
  #mwWhPagerInfo .mw-aisle-sub{ font-size:9px; }
  #mwOrientBtn{ padding:0 10px; font-size:11px; }
  #mwAppBarTitle{ font-size:16px; }
  #mwScreenHome .mw-tiles{ grid-template-columns:1fr; }
  #mwHomeQuick{ grid-template-columns:1fr 1fr; }
  #warehouseGrid.mw-orient-h .slots-row{ grid-template-columns:1fr !important; }
  #btnQuickScan{ width:48px !important; height:48px !important; }
  #btnQuickScan svg{ width:22px !important; height:22px !important; }
}

@media (max-width: 480px) and (min-width: 361px){
  #mwScreenHome .mw-tiles{ grid-template-columns:1fr; }
  #mwHomeQuick{ grid-template-columns:1fr 1fr; }
}

@media (min-width: 901px){
  .wms-topbar{ display:flex !important; }
  .wms-sidebar{ display:block !important; }
  .wms-workspace{ display:block !important; }
  #mwShell{ display:none !important; }
  .wms-topbar, .wms-sidebar, .wms-workspace,
  .global-search, #statsGrid, #zoneSelector, #rowSelector,
  .grid-container, .grid-wrap{
    position:static !important; transform:none !important;
    width:auto !important; height:auto !important;
    opacity:1 !important; visibility:visible !important; inset:auto !important;
  }
  #btnQuickScan{
    bottom:24px !important;
    z-index:9000 !important;
    width:58px !important;
    height:58px !important;
  }
  #mobileLevelFilter{ position:static !important; display:flex !important; margin-bottom:10px !important; }
  #alertsPanelContainer{ display:block !important; }
}

@media (max-width: 900px) {
  .modal {
    padding: 0 !important;
    align-items: flex-end !important; 
    z-index: 20000 !important;
  }

  .modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    padding: 0 !important;
  }

  .modal-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--card) !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--line) !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .modal-card > div[style*="overflow-y"],
  .modal-card > div[style*="max-height"],
  #editModalBody {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch; 
    padding: 16px !important;
  }

  .modal-actions, 
  .stepper-actions, 
  .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    background: var(--card) !important;
    padding: 16px !important;
    border-top: 1px solid var(--line) !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .modal-actions button, 
  .stepper-actions button,
  .modal-footer button {
    width: 100% !important;
    margin: 0 !important;
  }

  .row2, .row3, .form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .modal-card table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-card input, 
  .modal-card select, 
  .modal-card textarea {
    font-size: 16px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #insert-mode-container > div,
  #origin-switch-container > div {
    display: flex !important;
    flex-direction: column !important; 
  }
}

  #mobileSlotModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgba(13, 18, 32, 0.85) !important; 
    backdrop-filter: blur(5px) !important; 
    z-index: 25000 !important;
    
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
  }

  #mobileSlotModal.show,
  #mobileSlotModal[style*="display: block"],
  #mobileSlotModal[style*="display: flex"] {
    display: flex !important;
  }

  #mobileSlotModal[style*="display: none"] {
    display: none !important;
  }

  #mobileSlotModal > div {
    background: var(--card) !important;
    width: 100% !important;
    max-width: 400px !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
    border: 1px solid var(--line) !important;
  }
  
  #mobileSlotModal h3 {
    text-align: center !important;
    font-size: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    color: var(--primary) !important;
  }

  .mobile-pos-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .mobile-pos-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 10px !important;
    border-radius: 12px !important;
    min-height: 100px !important;
    text-align: center !important;
  }
  
  .mobile-slot-close {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
  }

@media (max-width: 900px) {
    .ref-summary-filterbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px 8px !important;
        padding: 12px 16px !important;
        background: var(--card) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .ref-summary-filterbar .searchbox {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .ref-summary-filterbar .searchbox input {
        width: 100% !important;
        height: 44px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .ref-summary-filterbar select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        font-size: 13px !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        text-overflow: ellipsis !important;
    }

    .ref-summary-filterbar select:nth-of-type(1) { grid-column: 1 / 2 !important; } 
    .ref-summary-filterbar select:nth-of-type(3) { grid-column: 2 / 3 !important; } 
    .ref-summary-filterbar select:nth-of-type(2) { grid-column: 1 / -1 !important; } 

    .ref-summary-filterbar button {
        grid-column: 1 / -1 !important;
        height: 40px !important;
        margin-top: 4px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: bold !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: rgba(239, 68, 68, 0.1) !important;
        color: var(--danger) !important;
        border: 1px dashed var(--danger) !important;
    }

    #rulesModal .modal-card {
        display: block !important;
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch;
    }
    #rulesModal .modal-head {
        position: sticky !important;
        top: 0;
        z-index: 100;
        background: #131b2f !important;
    }
    #rulesModal .modal-card div[style*="grid-template-columns: 1fr 1fr"],
    #rulesModal .modal-card div[style*="grid-template-columns: repeat(4, 1fr)"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    #rulesModal .modal-card div[style*="justify-content:space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #rulesModal .modal-card div[style*="justify-content:space-between"] > div {
        width: 100% !important;
    }

    #refSummaryTable, 
    #refSummaryTable tbody, 
    #refSummaryTable tr, 
    #refSummaryTable td {
        white-space: normal !important;
        word-break: break-word !important;
    }

    #paletteModal {
      z-index: 21000 !important;
    }
}