/* ADESS Mobile Site Ready V9.6.20
   Mobile-only layout guard. Desktop/tablet keeps existing approved design. */
@media (max-width: 720px){
  html, body{max-width:100vw !important; overflow-x:hidden !important;}
  body.zk-app, body{background:#eef4ff !important;}
  .workspace, main.page, .page, .content, .app-shell{max-width:100vw !important; overflow-x:hidden !important;}

  /* Shell/topbar: compact, no horizontal spill */
  .app-shell{display:block !important; width:100vw !important;}
  .workspace{margin-left:0 !important; padding-left:0 !important; width:100vw !important;}
  .topbar{position:relative !important; display:grid !important; grid-template-columns:auto 1fr !important; gap:8px !important; align-items:center !important; padding:10px 12px !important; min-height:unset !important;}
  .topbar .breadcrumb, .topbar .page-title, .topbar h1{min-width:0 !important; overflow-wrap:anywhere !important;}
  .topbar .user-chip, .topbar .session-card, .topbar .topbar-actions{grid-column:1 / -1 !important; justify-self:start !important; max-width:100% !important;}
  .topbar .session-card{font-size:11px !important; padding:7px 10px !important;}
  .user-menu, .account-menu, .profile-menu, .dropdown-menu{max-width:calc(100vw - 24px) !important; left:auto !important; right:12px !important; transform:none !important;}
  .user-menu.open, .account-menu.open, .profile-menu.open, .dropdown-menu.show{position:fixed !important; top:76px !important; right:12px !important; z-index:9999 !important;}

  /* Sidebar: drawer width suitable for small phones */
  .sidebar{width:min(82vw, 260px) !important; max-width:min(82vw, 260px) !important;}
  .sidebar.open, body.sidebar-open .sidebar{transform:translateX(0) !important;}
  .sidebar-backdrop{max-width:100vw !important;}

  /* Hero/info cards */
  .page-hero, .hero-card, section.card, .card, .panel, .register-panel{box-sizing:border-box !important; width:calc(100vw - 20px) !important; max-width:calc(100vw - 20px) !important; margin-left:auto !important; margin-right:auto !important; padding:14px !important; border-radius:18px !important; overflow:hidden !important;}
  .page-hero h1, .page-hero h2, .card h1, .card h2, .panel h1, .panel h2{font-size:22px !important; line-height:1.18 !important; overflow-wrap:anywhere !important;}
  .page-hero p, .card p, .panel p{font-size:13px !important; line-height:1.45 !important; overflow-wrap:anywhere !important;}

  /* Tabs must wrap, never create a horizontal scrollbar */
  .section-tabs, .tabs, .nav-tabs, .tabbar{display:flex !important; flex-wrap:wrap !important; overflow:visible !important; gap:8px !important; width:calc(100vw - 20px) !important; max-width:calc(100vw - 20px) !important; margin-left:auto !important; margin-right:auto !important; padding:8px !important;}
  .section-tabs a, .section-tabs button, .tabs a, .tabs button, .nav-tabs a, .nav-tabs button, .tabbar a, .tabbar button{flex:1 1 calc(50% - 8px) !important; min-width:0 !important; white-space:normal !important; text-align:center !important;}

  /* Main register toolbar: search full width, then count/add/icons one row */
  .auto-register-toolbar, .register-tools, .table-tools, .table-head, .toolbar, .data-toolbar{box-sizing:border-box !important; width:100% !important; max-width:100% !important; display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; padding:0 !important; margin:8px 0 10px !important; overflow:visible !important;}
  .auto-register-toolbar input[type="search"], .register-tools input[type="search"], .table-tools input[type="search"], .table-head input[type="search"], .toolbar input[type="search"], .data-toolbar input[type="search"],
  .auto-register-toolbar .register-search, .register-tools .register-search, .table-tools .register-search{order:1 !important; flex:1 0 100% !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:40px !important;}
  .auto-register-toolbar .register-count, .register-tools .register-count, .table-tools .register-count, .row-count, .count-pill{order:2 !important; flex:0 0 auto !important; min-width:54px !important; height:38px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important;}
  .adess-mobile-toolbar-add{order:3 !important; flex:0 0 auto !important; min-width:54px !important; height:38px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; padding:0 10px !important;}
  .auto-register-toolbar button, .register-tools button, .table-tools button, .table-head button, .toolbar button, .data-toolbar button,
  .auto-register-toolbar a.btn, .register-tools a.btn, .table-tools a.btn, .table-head a.btn, .toolbar a.btn, .data-toolbar a.btn{flex:0 0 38px !important; width:38px !important; min-width:38px !important; max-width:38px !important; height:38px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important;}
  .auto-register-toolbar .btn-primary, .register-tools .btn-primary, .table-tools .btn-primary{width:auto !important; max-width:none !important; min-width:54px !important; padding:0 10px !important;}

  /* Column manager is desktop/table mode only. On card/mobile it causes the tiny ghost box. */
  .column-manager, .column-manager-panel, .column-menu, .col-manager, .show-hide-columns,
  [data-column-manager], [data-column-toggle], [aria-label*="column" i], [title*="column" i], button[title*="columns" i], button[aria-label*="columns" i],
  .auto-register-toolbar button:last-child:is(:not(.adess-mobile-keep)), .register-tools button:last-child:is(:not(.adess-mobile-keep)){display:none !important; visibility:hidden !important; pointer-events:none !important;}

  /* Export icons can stay in row */
  .export-icons, .export-actions{display:inline-flex !important; flex:0 0 auto !important; gap:8px !important; order:4 !important;}
  .export-icons a, .export-actions a{width:38px !important; height:38px !important; flex:0 0 38px !important;}

  /* Mobile cards: two clean columns, values wrap instead of cutting through the card */
  .table-responsive, .table-wrap, .register-table-wrap{width:100% !important; max-width:100% !important; overflow-x:hidden !important;}
  table[data-mobile-cards], .mobile-card-table, .register-table{width:100% !important; max-width:100% !important; table-layout:fixed !important;}
  @supports (display:grid){
    .mobile-card-table tbody tr, table[data-mobile-cards] tbody tr, .register-table.mobile-cards tbody tr{display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:10px 0 !important; padding:12px !important; border:1px solid #d7e3f6 !important; border-radius:16px !important; background:#fff !important; overflow:hidden !important;}
    .mobile-card-table tbody td, table[data-mobile-cards] tbody td, .register-table.mobile-cards tbody td{display:grid !important; grid-template-columns:minmax(82px, 38%) minmax(0, 1fr) !important; gap:8px !important; align-items:start !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; padding:8px 0 !important; border-bottom:1px solid #e4edf9 !important; overflow-wrap:anywhere !important; word-break:break-word !important; white-space:normal !important;}
    .mobile-card-table tbody td:last-child, table[data-mobile-cards] tbody td:last-child, .register-table.mobile-cards tbody td:last-child{border-bottom:0 !important;}
    .mobile-card-table tbody td::before, table[data-mobile-cards] tbody td::before, .register-table.mobile-cards tbody td::before{min-width:0 !important; overflow-wrap:anywhere !important;}
  }
  td, th{max-width:100% !important; overflow-wrap:anywhere !important; word-break:break-word !important;}
  .action-cell, td[data-label="Action"], td:last-child .row-actions{display:flex !important; flex-wrap:wrap !important; gap:8px !important;}

  /* Modals and popups */
  .modal, .modal-backdrop, .dialog-backdrop{max-width:100vw !important; overflow-x:hidden !important;}
  .modal-dialog, .modal-content, .dialog, .popup, .drawer, .sheet{box-sizing:border-box !important; width:calc(100vw - 20px) !important; max-width:calc(100vw - 20px) !important; margin:10px auto !important; left:auto !important; right:auto !important; transform:none !important; border-radius:18px !important; overflow-x:hidden !important;}
  .modal-body, .dialog-body, .popup-body{max-width:100% !important; overflow-x:hidden !important;}
  .modal input, .modal select, .modal textarea, .dialog input, .dialog select, .dialog textarea{width:100% !important; max-width:100% !important; box-sizing:border-box !important;}
}